/*
 * Homepage, design direction B ("Sähäkkä & rohkea", export-b mockup).
 * Loaded only on pages whose content uses the .hb-page wrapper (body.mtb-hb).
 * Display font: the brand's Cru X-Condensed (Cru weight 100), which matches the mockup's Anton.
 */

@font-face {
	font-family: "Hanken Grotesk";
	font-style: normal;
	font-weight: 400 800;
	font-display: swap;
	src: url("../fonts/hanken-grotesk-latin-var.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

body.mtb-hb {
	--hb-bg: #36077a;
	--hb-bg-3: #2a0560;
	--hb-violet: #5d0ec0;
	--hb-ink: #2e0763;
	--hb-lav: #d9c6f8;
	--hb-lav-2: #b793ee;
	--hb-cream: #fbf8ec;
	--hb-orange: #f4690f;
	--hb-orange-2: #ff8b3d;
	--hb-display: "Cru", "Anton", "Arial Narrow", sans-serif;
	--hb-body: "Hanken Grotesk", "Archivo", "Helvetica Neue", sans-serif;
	--hb-header-h: 100px;
	--hb-ease: cubic-bezier(.2, .7, .2, 1);
	background: var(--hb-bg);
}

/* ---------- base ---------- */
.hb-page {
	overflow-x: clip;
	background: var(--hb-bg);
	color: var(--hb-lav);
	font-family: var(--hb-body);
	font-size: 17px;
	line-height: 1.6;
	letter-spacing: normal;
	-webkit-font-smoothing: antialiased;
}
.hb-page :is(p, h1, h2, h3, ol, ul, figure) { margin: 0; }
.hb-page :is(.is-layout-flow, .is-layout-constrained) > * { margin-block: 0; }
.hb-page a { text-decoration: none; }
.hb-page ::selection { background: var(--hb-orange); color: var(--hb-cream); }
.hb-page img { display: block; max-width: 100%; }
.hb-wrap { width: min(1280px, calc(100% - 96px)); margin-inline: auto !important; }

.hb-display,
.hb-page h2.hb-display {
	font-family: var(--hb-display);
	font-weight: 100;
	text-transform: uppercase;
	line-height: .94;
	letter-spacing: .005em;
	color: var(--hb-cream);
}
.hb-label {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-weight: 800;
	font-size: 13px;
	line-height: 1.4;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--hb-orange-2);
}
.hb-label::before { content: ""; width: 22px; height: 2px; background: var(--hb-orange); flex: none; }
/* centred labels: a line on both sides, and the trailing letter-spacing taken back, so the text sits in the middle */
.hb-logos > .hb-label::after,
.hb-charm-head > .hb-label::after { content: ""; width: 22px; height: 2px; margin-left: -.22em; background: var(--hb-orange); flex: none; }
.hb-logos > .hb-label::after { margin-left: -.2em; }

/* ---------- buttons ---------- */
.hb-page .wp-block-buttons { display: flex; flex-wrap: wrap; gap: 16px; }
.hb-page .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: var(--hb-body);
	font-weight: 800;
	font-size: 16px;
	line-height: 1.2;
	letter-spacing: normal;
	text-transform: none;
	white-space: nowrap;
	border-radius: 999px;
	padding: 17px 32px;
	border: 2px solid transparent;
	background: var(--hb-orange);
	color: var(--hb-cream);
	transition: transform .25s cubic-bezier(.2, .9, .3, 1.4), background-color .25s ease, color .25s ease, border-color .25s ease;
}
.hb-page .wp-block-button__link:hover,
.hb-page .wp-block-button__link:focus-visible { transform: translateY(-2px); color: var(--hb-cream); }
.hb-page .hb-arrow .wp-block-button__link::after { content: "→"; transition: transform .25s ease; }
.hb-page .hb-arrow .wp-block-button__link:hover::after { transform: translateX(4px); }
.hb-page .hb-ghost .wp-block-button__link { background: transparent; border-color: rgba(217, 198, 248, .5); color: var(--hb-cream); }
.hb-page .hb-ghost .wp-block-button__link:hover,
.hb-page .hb-ghost .wp-block-button__link:focus-visible { background: var(--hb-cream); border-color: var(--hb-cream); color: var(--hb-violet); }
.hb-page .hb-dark .wp-block-button__link { background: var(--hb-bg-3); color: var(--hb-cream); }
.hb-page a:focus-visible,
.hb-page .wp-block-button__link:focus-visible { outline: 3px solid var(--hb-orange-2); outline-offset: 3px; }

/* ---------- motion ---------- */
@media (prefers-reduced-motion: no-preference) {
	.hb-motion .hb-reveal:not(.is-in),
	.hb-motion .hb-stagger > :not(.is-in) { opacity: 0; transform: translateY(30px); }
	.hb-motion .hb-reveal,
	.hb-motion .hb-stagger > * { transition: opacity .75s ease, transform .75s var(--hb-ease); }
}

/* ---------- header over the hero ---------- */
body.mtb-hb .wp-site-blocks > .is-position-sticky:first-child { margin-bottom: calc(-1 * var(--hb-header-h)); }
body.mtb-hb header.wp-block-template-part .is-style-mtb-site-header {
	background-color: transparent !important;
	transition: background-color .3s ease, box-shadow .3s ease;
}
/* the FI header (.mtb-menu) draws its own glass bar in mtb-menu.css */
body.mtb-hb.hb-scrolled header.wp-block-template-part .is-style-mtb-site-header:not(:has(.mtb-menu)) {
	background-color: rgba(42, 5, 96, .92) !important;
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	box-shadow: 0 1px 0 rgba(217, 198, 248, .15);
}
body.mtb-hb header.wp-block-template-part .wp-block-button__link[style*="background-color:var(--wp--preset--color--lavender)"] {
	background-color: var(--hb-orange) !important;
	border-color: var(--hb-orange) !important;
	color: var(--hb-cream) !important;
}

/* ---------- hero ---------- */
.hb-hero {
	position: relative;
	min-height: 100svh;
	display: flex;
	align-items: flex-end;
	overflow: hidden;
	padding: calc(var(--hb-header-h) + 60px) 0 150px;
	background: var(--hb-bg-3);
}
.hb-hero-photo { position: absolute !important; inset: 0; }
.hb-hero-par { position: absolute !important; inset: -12% 0; will-change: transform; }
.hb-hero-photo .hb-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.4s ease; overflow: hidden; }
.hb-hero-photo .hb-slide img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.hb-hero-photo .hb-slide.is-on,
.hb-hero-photo:not(.is-js) .hb-slide:first-child { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
	.hb-hero-photo .hb-slide img { transform: scale(1); transition: transform 7s linear; }
	.hb-hero-photo .hb-slide.is-on img { transform: scale(1.06); }
}
.hb-hero-photo::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(42, 5, 96, .55) 0%, rgba(42, 5, 96, .25) 40%, rgba(42, 5, 96, .92) 100%);
	pointer-events: none;
}
.hb-hero-content { position: relative; z-index: 2; }
.hb-hero-title { font-size: clamp(44px, 6vw, 88px); }
.hb-hero-title mark { background: none !important; color: var(--hb-orange-2); }
.hb-hero-sub { margin-top: 34px !important; font-size: 19px; font-weight: 600; line-height: 1.55; color: var(--hb-cream); max-width: 46ch; text-wrap: pretty; }
.hb-hero .hb-ctas { margin-top: 28px !important; }
@media (prefers-reduced-motion: no-preference) {
	.hb-hero-title { animation: hb-rise .9s var(--hb-ease) both; }
	.hb-hero-sub, .hb-hero .hb-ctas { animation: hb-fade .8s ease .45s both; }
}
@keyframes hb-rise { from { transform: translateY(40px); clip-path: inset(0 0 100% 0); } to { transform: none; clip-path: inset(-20% -20% -20% -20%); } }
@keyframes hb-fade { from { opacity: 0; } to { opacity: 1; } }

.hb-hero-badges {
	position: absolute !important;
	z-index: 3;
	top: calc(var(--hb-header-h) + 16px);
	right: 48px;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 18px;
}
.hb-hero-badges figure { margin: 0 !important; }
.hb-hero-badges img { width: 100px; height: auto; filter: drop-shadow(0 8px 20px rgba(0, 0, 0, .35)); transition: transform .3s cubic-bezier(.2, .9, .3, 1.4); }
.hb-hero-badges img:hover { transform: translateY(-4px) scale(1.04); }

/* ---------- sticker ---------- */
.hb-sticker { width: 150px; height: 150px; filter: drop-shadow(0 12px 28px rgba(0, 0, 0, .35)); pointer-events: none; }
.hb-sticker svg { width: 100%; height: 100%; display: block; overflow: visible; }
.hb-sticker .spin { transform-origin: 60px 60px; }
.hb-sticker .ringtext { font-family: var(--hb-body); font-weight: 800; font-size: 12.5px; letter-spacing: .22em; fill: var(--hb-cream); }
.hb-sticker .mark { font-family: var(--hb-display); font-weight: 100; font-size: 30px; fill: var(--hb-cream); text-anchor: middle; }
/* the official "Vastuullista siivousta" logo as a round badge (the logo file itself is shown unaltered) */
.hb-page figure.hb-sticker-logo { margin: 0 !important; padding: 8px; border-radius: 50%; background: #fff; }
.hb-page figure.hb-sticker-logo img { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: contain; }
footer.wp-block-template-part figure.hb-footer-logo { width: 128px; max-width: 128px; margin: 0 !important; padding: 7px; border-radius: 50%; background: #fff; }
footer.wp-block-template-part figure.hb-footer-logo img { display: block; width: 100%; height: auto; border-radius: 50%; }
/* client 23.10.: no round logo badges on phones */
@media (max-width: 781px) { .hb-page figure.hb-sticker-logo { display: none !important; } }

/* ---------- marquees ---------- */
.hb-mq { overflow: hidden; }
.hb-mq-track { display: flex !important; flex-wrap: nowrap !important; align-items: center; gap: 0 !important; width: max-content; }
.hb-mq-track > * { flex: none; margin: 0 !important; white-space: nowrap; }
@media (prefers-reduced-motion: no-preference) {
	.hb-mq-track.is-running { animation: hb-mq var(--hb-mq-dur, 24s) linear infinite; }
}
@keyframes hb-mq { to { transform: translateX(-50%); } }

.hb-tiltband {
	position: relative;
	z-index: 5;
	margin-top: -36px !important;
	transform: rotate(-2deg) scale(1.04);
	background: var(--hb-orange);
	padding: 18px 0;
	box-shadow: 0 18px 44px rgba(0, 0, 0, .28);
}
/* static: the four awards share the band, with room kept on the right for the sticker */
.hb-tilt-row { display: flex !important; align-items: center; justify-content: center; gap: 44px; padding: 0 220px 0 48px; }
.hb-tiltband p { position: relative; flex: 0 1 auto; min-width: 0; margin: 0 !important; font-family: var(--hb-display); font-weight: 100; font-size: 20px; line-height: 1.15; letter-spacing: .04em; text-align: center; text-transform: uppercase; text-wrap: balance; color: var(--hb-cream); }
.hb-tiltband p + p::before { content: "◆"; position: absolute; top: 50%; left: -22px; transform: translate(-50%, -50%); font-family: var(--hb-body); font-size: 13px; line-height: 1; color: var(--hb-bg-3); }

/* ---------- stats ---------- */
.hb-stats { position: relative; padding: 78px 0 60px; }
.hb-stats > .hb-sticker { position: absolute; z-index: 6; top: -142px; right: 48px; }
/* homepage: the band text keeps clear of the raised badge */
.hb-tiltband:has(+ .hb-stats > .hb-sticker) .hb-tilt-row { padding-right: 260px; }
.hb-stats-grid { display: grid !important; grid-template-columns: repeat(3, 1fr); border-top: 1.5px solid rgba(217, 198, 248, .25); }
.hb-stat {
	--ico: none;
	display: grid !important;
	grid-template-columns: auto 1fr;
	column-gap: 24px;
	align-content: start;
	padding: 44px 36px 50px;
	border-bottom: 1.5px solid rgba(217, 198, 248, .25);
	transition: background-color .3s ease;
}
.hb-stat + .hb-stat { border-left: 1.5px solid rgba(217, 198, 248, .25); }
.hb-stat:hover { background: rgba(217, 198, 248, .06); }
.hb-stat::before {
	content: "";
	grid-row: 1 / span 2;
	width: 68px;
	height: 68px;
	margin-top: 6px;
	background: var(--hb-lav-2);
	-webkit-mask: var(--ico) center / contain no-repeat;
	mask: var(--ico) center / contain no-repeat;
	transition: transform .3s cubic-bezier(.2, .9, .3, 1.4), background-color .3s ease;
}
.hb-stat:hover::before { transform: translateY(-4px) scale(1.08); background: var(--hb-orange-2); }
.hb-stat .hb-big { font-family: var(--hb-display); font-weight: 100; font-size: clamp(56px, 6vw, 92px); line-height: 1; color: var(--hb-orange-2); }
.hb-stat .hb-lbl { margin-top: 14px !important; max-width: 18ch; font-weight: 800; font-size: 16px; line-height: 1.4; letter-spacing: .08em; text-transform: uppercase; color: var(--hb-cream); }
.hb-ico-trophy { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 21h8M12 17v4M7 4h10v6a5 5 0 0 1-10 0V4zM7 6H4a1 1 0 0 0-1 1c0 2.2 1.8 4 4 4M17 6h3a1 1 0 0 1 1 1c0 2.2-1.8 4-4 4'/%3E%3C/svg%3E"); }
.hb-ico-medal { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='9' r='6'/%3E%3Cpath d='M12 6.2l.9 1.8 2 .3-1.45 1.4.35 2-1.8-.95-1.8.95.35-2L9.1 8.3l2-.3.9-1.8zM8.5 14.3 7 21l5-2.4L17 21l-1.5-6.7'/%3E%3C/svg%3E"); }
.hb-ico-globe { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3c2.6 2.4 4 5.6 4 9s-1.4 6.6-4 9c-2.6-2.4-4-5.6-4-9s1.4-6.6 4-9z'/%3E%3C/svg%3E"); }

/* ---------- why MTB ---------- */
.hb-charm { padding: 110px 0 80px; background: var(--hb-cream); }
.hb-charm-head { display: grid !important; justify-items: center; gap: 32px; text-align: center; }
.hb-charm-head h2.hb-display { font-size: clamp(44px, 6vw, 96px); color: var(--hb-violet); text-wrap: balance; }
.hb-charm-list {
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	margin-top: 56px !important;
	border-block: 1.5px solid rgba(93, 14, 192, .22);
}
.hb-charm-row {
	display: grid !important;
	grid-template-columns: minmax(0, 1fr) auto;
	grid-template-areas: "art num" "text text";
	align-content: start;
	align-items: start;
	gap: 24px 16px;
	padding: 40px clamp(24px, 2.8vw, 44px) 44px;
}
.hb-charm-row:first-child { padding-left: 0; }
.hb-charm-row:last-child { padding-right: 0; }
.hb-charm-row + .hb-charm-row { border-left: 1.5px solid rgba(93, 14, 192, .22); }
.hb-charm-row > * { margin: 0 !important; }
.hb-charm-row .hb-num {
	grid-area: num;
	font-family: var(--hb-display);
	font-weight: 100;
	font-size: clamp(48px, 4.4vw, 68px);
	line-height: 1;
	color: transparent;
	-webkit-text-stroke: 2px var(--hb-violet);
	transition: color .35s ease;
}
.hb-charm-row:hover .hb-num { color: var(--hb-orange); -webkit-text-stroke-color: var(--hb-orange); }
.hb-charm-text { grid-area: text; }
.hb-charm-text h3 { margin-bottom: 14px !important; font-family: var(--hb-display); font-weight: 100; font-size: clamp(28px, 2.5vw, 38px); line-height: 1; text-transform: uppercase; color: var(--hb-violet); }
.hb-charm-text p { font-size: 15.5px; line-height: 1.6; color: #4a3375; text-wrap: pretty; }
.hb-charm-text p + p { margin-top: 10px !important; }
.hb-charm-art { grid-area: art; }
.hb-charm-art img { display: block; width: auto; max-width: 100%; height: 130px; object-fit: contain; object-position: left center; }

/* ---------- services ---------- */
.hb-services { padding: 120px 0; }
.hb-services-head { display: flex !important; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 30px; margin-bottom: 50px !important; }
.hb-services-head .hb-label,
.hb-news-head .hb-label { margin-bottom: 20px !important; }
.hb-services-head h2.hb-display { font-size: clamp(52px, 7vw, 104px); }
/* six services as a 3 x 2 grid of photo cards; the whole card is the link */
.hb-svc-grid { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.hb-svc-card {
	--ico: none;
	--chip: rgba(42, 5, 96, .5);
	position: relative;
	isolation: isolate;
	display: flex !important;
	flex-direction: column;
	justify-content: flex-end;
	gap: 10px;
	min-height: 300px;
	padding: 28px;
	overflow: hidden;
	border: 1.5px solid rgba(217, 198, 248, .18);
	border-radius: 24px;
	background: var(--hb-bg-3);
	transition: transform .3s var(--hb-ease), border-color .3s ease;
}
.hb-svc-card > * { margin: 0 !important; }
/* the photo fills the card; a deep purple fade keeps the text readable */
.hb-svc-card > figure.hb-svc-photo { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.hb-svc-card > figure.hb-svc-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; transition: transform .7s var(--hb-ease); }
.hb-svc-card > figure.hb-svc-photo::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(42, 5, 96, .2) 0%, rgba(42, 5, 96, .35) 35%, rgba(42, 5, 96, .88) 72%, rgba(42, 5, 96, .97) 100%);
}
/* the arrow sits on a small glass chip over the photo */
.hb-svc-card::after {
	position: absolute;
	top: 22px;
	display: grid;
	place-items: center;
	border: 1px solid rgba(255, 255, 255, .2);
	background: var(--chip);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
}
.hb-svc-card::after { content: "→"; right: 22px; width: 46px; height: 46px; border-radius: 50%; font-family: var(--hb-body); font-size: 20px; line-height: 1; color: var(--hb-cream); transition: transform .35s ease, background-color .3s ease, border-color .3s ease; }
.hb-page .hb-svc-card h3.hb-svc::before {
	content: "";
	position: absolute;
	top: 24px;
	left: 26px;
	width: 40px;
	height: 40px;
	background: rgba(255, 255, 255, .55);
	-webkit-mask: var(--ico) center / contain no-repeat;
	mask: var(--ico) center / contain no-repeat;
}
.hb-page .hb-svc-card h3.hb-svc { font-family: var(--hb-display); font-weight: 100; font-size: clamp(28px, 2.5vw, 38px); line-height: 1; letter-spacing: .01em; text-transform: uppercase; text-wrap: balance; hyphens: auto; color: var(--hb-cream); }
.hb-page .hb-svc-card h3.hb-svc a { color: inherit; }
.hb-page .hb-svc-card h3.hb-svc a::before { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.hb-svc-card .hb-svc-desc { font-size: 15.5px; line-height: 1.5; color: rgba(251, 248, 236, .86); }
.hb-svc-card:is(:hover, :focus-within) { transform: translateY(-6px); border-color: var(--hb-orange); }
.hb-svc-card:is(:hover, :focus-within) > figure.hb-svc-photo img { transform: scale(1.07); }
.hb-svc-card:is(:hover, :focus-within)::after { transform: rotate(-45deg); border-color: var(--hb-orange); background: var(--hb-orange); }
.hb-ico-office { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 21V5a1 1 0 0 1 1-1h9a1 1 0 0 1 1 1v16'/%3E%3Cpath d='M15 9h4a1 1 0 0 1 1 1v11'/%3E%3Cpath d='M3 21h18'/%3E%3Cpath d='M8 8h3M8 12h3M8 16h3'/%3E%3C/svg%3E"); }
.hb-ico-hotel { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 18v-6a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v6'/%3E%3Cpath d='M3 18h18'/%3E%3Cpath d='M3 21v-3M21 21v-3'/%3E%3Cpath d='M7 10V8a1 1 0 0 1 1-1h3a1 1 0 0 1 1 1v2'/%3E%3C/svg%3E"); }
.hb-ico-restaurant { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 3v8M5 3v4a2 2 0 0 0 4 0V3M7 11v10'/%3E%3Cpath d='M17 21V3c-2 1-3 3.5-3 7 0 1.5 1 2 3 2'/%3E%3C/svg%3E"); }
.hb-ico-hospital { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='3'/%3E%3Cpath d='M12 8v8M8 12h8'/%3E%3C/svg%3E"); }
.hb-ico-store { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 7h12l1 14H5L6 7z'/%3E%3Cpath d='M9 7a3 3 0 0 1 6 0'/%3E%3C/svg%3E"); }
.hb-ico-special { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l1.8 4.2L18 9l-4.2 1.8L12 15l-1.8-4.2L6 9l4.2-1.8z'/%3E%3Cpath d='M19 15l.8 1.7 1.7.8-1.7.8-.8 1.7-.8-1.7-1.7-.8 1.7-.8z'/%3E%3C/svg%3E"); }
.hb-ico-factory { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 21V11l5 3V11l5 3V8l5 3V4h3v17z'/%3E%3Cpath d='M3 21h18'/%3E%3Cpath d='M7 17h2M12 17h2M17 17h1'/%3E%3C/svg%3E"); }
.hb-ico-truck { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 7h11v9H2z'/%3E%3Cpath d='M13 10h4l3 3v3h-7'/%3E%3Ccircle cx='6' cy='17.5' r='1.8'/%3E%3Ccircle cx='17' cy='17.5' r='1.8'/%3E%3C/svg%3E"); }
.hb-ico-box { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7.5L12 3l9 4.5v9L12 21l-9-4.5z'/%3E%3Cpath d='M3 7.5L12 12l9-4.5M12 12v9'/%3E%3C/svg%3E"); }
.hb-ico-food { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 3v8a2 2 0 0 0 2 2v8'/%3E%3Cpath d='M5 3v5M9 3v5'/%3E%3Cpath d='M16 21V3c2.5 1.5 3.5 4 3.5 7.5S18 14 16 14'/%3E%3C/svg%3E"); }
.hb-ico-wrench { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.5 6.5a4 4 0 0 0 5 5L21 13l-8 8-3-3 6.5-6.5'/%3E%3Cpath d='M14.5 6.5L13 5a4 4 0 0 1 5.5-1.5L16 6l2 2 2.5-2.5A4 4 0 0 1 19 11'/%3E%3Cpath d='M3 21l7-7'/%3E%3C/svg%3E"); }
.hb-ico-car { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 16V12l2-5h10l2 5v4'/%3E%3Cpath d='M3 16h18v3H3z'/%3E%3Ccircle cx='7.5' cy='13.5' r='.6'/%3E%3Ccircle cx='16.5' cy='13.5' r='.6'/%3E%3Cpath d='M6 19v2M18 19v2'/%3E%3C/svg%3E"); }
.hb-ico-gear { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M12 2v3M12 19v3M2 12h3M19 12h3M4.9 4.9l2.1 2.1M17 17l2.1 2.1M4.9 19.1L7 17M17 7l2.1-2.1'/%3E%3C/svg%3E"); }

/* ---------- mission ---------- */
.hb-mission { position: relative; overflow: hidden; padding: 130px 0; background: var(--hb-orange); color: var(--hb-bg-3); }
.hb-mission-grid { display: grid !important; grid-template-columns: .8fr 1.2fr; gap: clamp(40px, 6vw, 90px); align-items: center; }
.hb-mission-art { position: relative; justify-self: center; }
.hb-mission-art .hb-frame { transform: rotate(-3deg); transition: transform .4s cubic-bezier(.2, .9, .3, 1.3); }
.hb-mission-art:hover .hb-frame { transform: rotate(0deg) scale(1.02); }
.hb-mission-art .hb-frame img { width: clamp(260px, 26vw, 380px); height: clamp(300px, 30vw, 440px); object-fit: cover; border-radius: 24px; }
.hb-mission-art .hb-sticker { position: absolute; width: 116px; height: 116px; right: -34px; top: -34px; }
.hb-mission-quote { font-family: var(--hb-display); font-weight: 100; font-size: clamp(36px, 4.2vw, 62px); line-height: 1.05; text-transform: uppercase; color: var(--hb-bg-3); }
.hb-mission-quote mark { background: none !important; color: var(--hb-cream); }
.hb-mission .wp-block-buttons { margin-top: 40px !important; }

/* ---------- testimonials ---------- */
.hb-voices { padding: 130px 0; background: var(--hb-bg-3); }
.hb-voices-grid { display: grid !important; grid-template-columns: auto minmax(0, 1fr); gap: clamp(30px, 5vw, 80px); align-items: start; }
.hb-qmark { margin-top: 26px !important; font-family: var(--hb-display); font-weight: 100; font-size: 200px; line-height: .7; color: var(--hb-orange-2); }
.hb-voices .hb-label { margin-bottom: 26px !important; }
.hb-voices .hb-quote { max-width: 34ch; font-size: clamp(24px, 2.6vw, 36px); font-weight: 600; line-height: 1.4; color: var(--hb-cream); text-align: left; text-wrap: pretty; }
.hb-voices .hb-cite { margin-top: 30px !important; font-weight: 800; font-size: 14px; letter-spacing: .16em; text-transform: uppercase; color: var(--hb-orange-2); text-align: left; }
.hb-voices .wp-block-mtb-carousel { color: var(--hb-orange-2); }
.hb-voices .wp-block-mtb-carousel-item { padding: 0 !important; }
.hb-voices .mtb-carousel__dots { inset-inline-start: 0; transform: none; gap: 10px; }
.hb-voices .mtb-carousel__dots button { width: 10px; height: 10px; }

/* ---------- client logos ---------- */
.hb-logos { padding: 90px 0; background: #fff; }
.hb-logos > .hb-label { display: flex; justify-content: center; gap: 16px; margin-bottom: 40px !important; font-size: clamp(16px, 1.5vw, 20px); letter-spacing: .2em; color: var(--hb-violet); }
.hb-logos > .hb-label::before,
.hb-logos > .hb-label::after { width: 34px; height: 2.5px; }
.hb-logos .hb-mq-track > figure { margin-right: 80px !important; }
/* client comment 7 (22.10.2026): larger logos */
.hb-logos img { width: 200px; height: 80px; object-fit: contain; opacity: .92; transition: opacity .3s ease; }
.hb-logos img:hover { opacity: 1; }

/* ---------- news ---------- */
.hb-news { padding: 110px 0 130px; }
.hb-news-head { display: flex !important; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 30px; margin-bottom: 50px !important; }
.hb-news-head h2.hb-display { font-size: clamp(48px, 6vw, 88px); }
.hb-news .wp-block-post-template { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin: 0; padding: 0; list-style: none; }
.hb-news .wp-block-post-template > li { margin: 0 !important; }
.hb-card {
	position: relative;
	height: 100%;
	display: flex !important;
	flex-direction: column;
	overflow: hidden;
	border: 1.5px solid rgba(217, 198, 248, .3);
	border-radius: 22px;
	background: rgba(217, 198, 248, .04);
	transition: transform .3s var(--hb-ease), border-color .3s ease, background-color .3s ease;
}
.hb-card:hover,
.hb-card:focus-within { transform: translateY(-8px); border-color: var(--hb-orange-2); background: rgba(244, 105, 15, .08); }
.hb-card .wp-block-post-featured-image { margin: 0 !important; height: 190px; background: #fff; }
.hb-card .wp-block-post-featured-image :is(a, img) { display: block; width: 100%; height: 100%; }
.hb-card .wp-block-post-featured-image img { object-fit: cover; }
.hb-card-body { flex: 1; display: flex !important; flex-direction: column; gap: 12px; padding: 24px 26px 28px; }
.hb-card .wp-block-post-date { font-weight: 800; font-size: 12.5px; letter-spacing: .16em; color: var(--hb-orange-2); }
.hb-card .wp-block-post-title { font-family: var(--hb-body); font-weight: 800; font-size: 18px; line-height: 1.35; letter-spacing: normal; text-transform: none; color: var(--hb-cream); text-wrap: pretty; }
.hb-card .wp-block-post-title a { color: inherit; }
.hb-card .wp-block-post-title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.hb-card .hb-more { margin-top: auto !important; padding-top: 10px; font-weight: 800; font-size: 14.5px; color: var(--hb-lav-2); }
.hb-card:hover .hb-more { color: var(--hb-orange-2); }

/* ---------- quote request ---------- */
.hb-cta { position: relative; overflow: hidden; padding: 0 0 130px; background: var(--hb-cream); color: var(--hb-violet); }
.hb-bigline { margin-bottom: 110px !important; padding: 26px 24px; background: var(--hb-violet); }
/* static: both lines centred, an orange diamond between them */
.hb-bigline-row { display: flex !important; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 0; }
.hb-bigline p { margin: 0 !important; font-family: var(--hb-display); font-weight: 100; font-size: clamp(40px, 5vw, 76px); line-height: 1; text-align: center; text-transform: uppercase; white-space: nowrap; color: var(--hb-cream); }
.hb-bigline p.hb-out { color: transparent; -webkit-text-stroke: 1.5px var(--hb-cream); }
.hb-bigline p + p::before { content: "◆"; display: inline-block; margin: 0 .55em; font-family: var(--hb-body); font-size: .36em; vertical-align: middle; color: var(--hb-orange); -webkit-text-stroke: 0; }
.hb-cta-grid { display: grid !important; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
.hb-cta-intro h2.hb-display { margin: 20px 0 24px !important; font-size: clamp(44px, 5vw, 72px); color: var(--hb-violet); }
.hb-cta-intro .hb-lead { max-width: 42ch; font-size: 18px; color: #4a3375; text-wrap: pretty; }
.hb-page ol.hb-steps { display: grid; gap: 18px; margin: 36px 0 40px !important; padding: 0; list-style: none; counter-reset: hb-step; }
.hb-steps li { display: grid; grid-template-columns: 40px 1fr; gap: 16px; align-items: center; margin: 0; font-weight: 700; color: var(--hb-ink); counter-increment: hb-step; }
.hb-steps li::before { content: counter(hb-step); display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--hb-violet); font-family: var(--hb-display); font-weight: 100; font-size: 19px; color: var(--hb-cream); }
.hb-steps li > span { font-weight: 500; line-height: 1.45; }
.hb-steps li > span strong { font-weight: 800; }
.hb-cta-contact { display: flex !important; flex-wrap: wrap; align-items: center; gap: 12px; }
.hb-cta-contact > * { margin: 0 !important; }
.hb-cta-contact .hb-small { flex: 0 0 100%; margin-bottom: 2px !important; font-weight: 800; font-size: 12.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--hb-orange); }
/* phone and email as side-by-side outline buttons */
.hb-cta-contact .hb-big-link { font-weight: 800; font-size: 16px; line-height: 1.2; }
.hb-cta-contact .hb-big-link a {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	padding: 15px 26px;
	border: 2px solid var(--hb-violet);
	border-radius: 999px;
	white-space: nowrap;
	text-decoration: none;
	color: var(--hb-violet);
	transition: transform .25s cubic-bezier(.2, .9, .3, 1.4), background-color .25s ease, color .25s ease;
}
.hb-cta-contact .hb-big-link a::before {
	content: "";
	width: 18px;
	height: 18px;
	flex: none;
	background: currentcolor;
	mask: url("../icons/phone-alt.svg") center / contain no-repeat;
}
.hb-cta-contact .hb-big-link a[href^="mailto:"]::before { mask-image: url("../icons/envelope.svg"); }
.hb-cta-contact .hb-big-link a:is(:hover, :focus-visible) {
	transform: translateY(-2px);
	background: var(--hb-violet);
	color: var(--hb-cream);
}

/* form: the theme's MTB form block as a deep purple card, in the style of the dark sections */
.hb-page .hb-form {
	padding: clamp(28px, 3.4vw, 48px) !important;
	border-radius: 28px;
	background:
		radial-gradient(120% 80% at 100% 0%, rgba(244, 105, 15, .16), rgba(244, 105, 15, 0) 55%),
		radial-gradient(110% 90% at 0% 0%, rgba(183, 147, 238, .2), rgba(183, 147, 238, 0) 60%),
		linear-gradient(160deg, var(--hb-bg) 0%, var(--hb-bg-3) 100%);
	box-shadow: 0 30px 70px rgba(46, 7, 99, .22);
	color: var(--hb-cream);
	font-family: var(--hb-body);
}
.hb-form .mtb-form__fields { display: grid !important; grid-template-columns: 1fr 1fr; gap: 22px 20px !important; }
.hb-form .mtb-form__fields > * { width: auto !important; max-width: none !important; margin: 0 !important; flex: none !important; }
.hb-form .mtb-form__fields > :is([style*="--mtb-field-width:100%"], .mtb-form-field--recaptcha, .hb-form-title, .hb-form-intro) { grid-column: 1 / -1; }
/* white heading on top of the card */
.hb-form h3.hb-form-title { font-family: var(--hb-display); font-weight: 100; font-size: clamp(36px, 3.4vw, 52px); line-height: .95; letter-spacing: .01em; text-transform: uppercase; color: #fff; }
.hb-form p.hb-form-intro { margin-top: -10px !important; padding-bottom: 24px; border-bottom: 1.5px solid rgba(217, 198, 248, .2); font-size: 16px; line-height: 1.5; color: var(--hb-lav); }
.hb-form .mtb-form-field { display: grid; gap: 10px; border: 0; padding: 0; min-width: 0; }
.hb-form .mtb-form-field__label { padding: 0; font-weight: 800; font-size: 12px; line-height: 1.3; letter-spacing: .14em; text-transform: uppercase; color: var(--hb-lav); }
.hb-form :is(input[type="text"], input[type="email"], input[type="tel"], input[type="date"], textarea, select) {
	width: 100%;
	padding: 15px 18px;
	border: 1.5px solid rgba(217, 198, 248, .24);
	border-radius: 14px;
	background: rgba(255, 255, 255, .07);
	font: inherit;
	font-weight: 600;
	font-size: 16px;
	color: var(--hb-cream);
	outline: none;
	transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease;
}
.hb-form :is(input, textarea)::placeholder { font-weight: 500; color: rgba(217, 198, 248, .55); }
.hb-form select:has(option[value=""]:checked) { font-weight: 500; color: rgba(217, 198, 248, .55); }
.hb-form select option { color: var(--hb-ink); background: #fff; }
.hb-form :is(input[type="text"], input[type="email"], input[type="tel"], input[type="date"], textarea, select):hover { border-color: rgba(217, 198, 248, .45); }
.hb-form :is(input, textarea, select):focus { border-color: var(--hb-orange-2); background: rgba(255, 255, 255, .1); box-shadow: 0 0 0 4px rgba(255, 139, 61, .22); }
.hb-form :is(input, textarea, select):-webkit-autofill { -webkit-text-fill-color: var(--hb-cream); caret-color: var(--hb-cream); box-shadow: 0 0 0 1000px #3d0b85 inset; }
.hb-form option { color: var(--hb-ink); }
.hb-form textarea { min-height: 120px; resize: vertical; }
.hb-form .mtb-form-field__choices { display: flex; flex-wrap: wrap; gap: 10px; }
.hb-form .mtb-form-field__choices label { position: relative; display: block; cursor: pointer; }
.hb-form .mtb-form-field__choices input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.hb-form .mtb-form-field__choices span {
	display: block;
	padding: 10px 18px;
	border: 1.5px solid rgba(217, 198, 248, .32);
	border-radius: 999px;
	font-weight: 700;
	font-size: 14.5px;
	line-height: 1.2;
	white-space: nowrap;
	color: var(--hb-cream);
	transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.hb-form .mtb-form-field__choices label:hover span { border-color: var(--hb-lav); background: rgba(217, 198, 248, .08); }
.hb-form .mtb-form-field__choices input:checked + span { background: var(--hb-orange); border-color: var(--hb-orange); color: var(--hb-bg-3); }
.hb-form .mtb-form-field__choices input:focus-visible + span { outline: 3px solid var(--hb-orange-2); outline-offset: 2px; }
.hb-form .mtb-form-field__error:empty { display: none; }
.hb-form .mtb-form-field__error { font-size: 13px; font-weight: 700; color: #ffb4a8; }
.hb-form p.hb-form-note { margin-top: 2px !important; font-size: 13.5px; line-height: 1.5; color: rgba(217, 198, 248, .8); }
.hb-form p.hb-form-note a { color: var(--hb-cream); text-decoration: underline; text-underline-offset: 3px; }
.hb-form .mtb-form__fields > p.hb-form-note { grid-column: 1; align-self: center; }
.hb-form .mtb-form__fields > .mtb-form-field--submit { grid-column: 2; justify-items: end; }
.hb-form .mtb-form__submit { width: auto !important; }
.hb-form .mtb-form__submit {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 18px 34px;
	border: 0;
	border-radius: 999px;
	background: var(--hb-orange);
	font-family: var(--hb-body);
	font-weight: 800;
	font-size: 17px;
	line-height: 1.2;
	letter-spacing: normal;
	text-transform: none;
	color: var(--hb-cream);
	cursor: pointer;
	transition: transform .25s cubic-bezier(.2, .9, .3, 1.4), background-color .2s ease;
}
.hb-form .mtb-form__submit::after { content: "→"; transition: transform .25s ease; }
.hb-form .mtb-form__submit:hover { transform: translateY(-2px); background: var(--hb-orange-2); }
.hb-form .mtb-form__submit:hover::after { transform: translateX(4px); }
.hb-form .mtb-form__submit:focus-visible { outline: 3px solid var(--hb-orange-2); outline-offset: 3px; }
.hb-form .mtb-form__submit svg { display: none; }
.hb-form .mtb-form__status:empty { display: none; }
.hb-form .mtb-form__status { margin-top: 16px; font-weight: 700; }
.hb-form .mtb-form__status[data-state="success"] { color: #b8f5c8; }
.hb-form .mtb-form__status[data-state="error"] { color: #ffb4a8; }

/* ---------- entrance: water sprayed on the glass, wiped clear by a squeegee (mtb-home-b.js) ---------- */
html.hb-wipe-pending body::after,
.hb-wipe { --logo: url("/wp-content/uploads/2025/09/MTB_Logo_Header-01-1.svg"); }
.hb-wipe { position: fixed; inset: 0; z-index: 100001; overflow: hidden; pointer-events: none; }
.hb-wipe-layer,
.hb-wipe-water canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.hb-wipe-svg { position: absolute; width: 0; height: 0; }
/* the water film */
html.hb-wipe-pending body::after,
.hb-wipe-glass {
	-webkit-backdrop-filter: blur(5px) saturate(1.12) brightness(1.04);
	backdrop-filter: blur(5px) saturate(1.12) brightness(1.04);
	background: linear-gradient(100deg, rgba(251, 248, 236, .14), rgba(251, 248, 236, .04) 45%, rgba(251, 248, 236, .12));
}
/* a clean MTB logo is left in the middle of the wet glass (first paint, before the script runs) */
html.hb-wipe-pending body::after {
	-webkit-mask-image: var(--logo), linear-gradient(#000 0 0);
	-webkit-mask-position: center, 0 0;
	-webkit-mask-size: min(46vw, 440px) auto, 100% 100%;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-composite: xor;
	mask-image: var(--logo), linear-gradient(#000 0 0);
	mask-position: center, 0 0;
	mask-size: min(46vw, 440px) auto, 100% 100%;
	mask-repeat: no-repeat;
	mask-composite: exclude;
}
/* the wipe's wet layers: one mask = texture ∩ ( wet area − drop holes − logo ). mtb-home-b.js sets the wet area
   (--w1…--w4 and their compositing --c/--k) every frame. */
.hb-wipe {
	--w1: linear-gradient(#000 0 0);
	--w2: linear-gradient(#000 0 0);
	--w3: linear-gradient(#000 0 0);
	--w4: linear-gradient(#000 0 0);
	--c2: intersect;
	--c3: intersect;
	--c4: add;
	--k2: source-in;
	--k3: source-in;
	--k4: source-over;
}
.hb-wipe-masked {
	--t: linear-gradient(#000 0 0);
	--h: linear-gradient(transparent 0 0);
	-webkit-mask-image: var(--t), linear-gradient(#000 0 0), var(--logo), var(--h), linear-gradient(#000 0 0), var(--w4), var(--w3), var(--w2), var(--w1);
	-webkit-mask-position: 0 0, 0 0, center, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0;
	-webkit-mask-size: 100% 100%, 100% 100%, var(--hb-logo-w, min(46vw, 440px)) auto, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-composite: source-in, source-out, source-over, source-over, source-out, var(--k4), var(--k3), var(--k2), source-over;
	mask-image: var(--t), linear-gradient(#000 0 0), var(--logo), var(--h), linear-gradient(#000 0 0), var(--w4), var(--w3), var(--w2), var(--w1);
	mask-position: 0 0, 0 0, center, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0;
	mask-size: 100% 100%, 100% 100%, var(--hb-logo-w, min(46vw, 440px)) auto, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%;
	mask-repeat: no-repeat;
	mask-composite: intersect, subtract, add, add, subtract, var(--c4), var(--c3), var(--c2), add;
}
.hb-wipe-glass,
.hb-wipe-film { --h: var(--hb-holes, linear-gradient(transparent 0 0)); }
.hb-wipe-film { --t: var(--hb-film, linear-gradient(transparent 0 0)); }
/* the head script adds hb-wipe-pending so the glass is wet from the first paint; mtb-home-b.js takes over */
html.hb-wipe-pending body::after {
	content: "";
	position: fixed;
	inset: 0;
	z-index: 100001;
	pointer-events: none;
	animation: hb-wipe-fade .4s ease 3.4s forwards;
}
/* thicker water in patches: a second blur through a soft random mask */
.hb-wipe-film {
	-webkit-backdrop-filter: blur(5px) brightness(1.03);
	backdrop-filter: blur(5px) brightness(1.03);
	background: rgba(251, 248, 236, .05);
}
.hb-wipe.is-replay > .hb-wipe-layer { animation: hb-spray .3s ease-out both; }
/* any interaction: fade out at once */
.hb-wipe.is-skip > * { opacity: 0 !important; transition: opacity .3s ease; }
@keyframes hb-spray { from { opacity: 0; } }
@keyframes hb-wipe-fade { to { opacity: 0; visibility: hidden; } }
/* squeegee: metal channel, black rubber on the leading edge, orange handle; mtb-home-b.js moves and turns it */
.hb-wipe-blade {
	position: absolute;
	top: 0;
	left: 0;
	width: 22px;
	height: 120px;
	opacity: 0;
	filter: drop-shadow(0 10px 14px rgba(20, 0, 50, .35));
	will-change: transform;
}
.hb-wipe-blade.is-on { opacity: 1; }
.hb-wipe-blade::before {
	content: "";
	position: absolute;
	inset: 0 6px 0 0;
	border-radius: 4px;
	background: linear-gradient(90deg, #8d93a1 0%, #eef0f5 30%, #c3c8d2 55%, #7d8391 100%);
}
.hb-wipe-blade i { position: absolute; display: block; }
.hb-wipe-rubber { top: 3px; bottom: 3px; right: 0; width: 6px; border-radius: 0 4px 4px 0; background: linear-gradient(90deg, #2b2533, #121018); }
/* the bead of water pushed ahead of the rubber */
.hb-wipe-bead { top: 2px; bottom: 2px; left: 100%; width: 6px; border-radius: 0 10px 10px 0; background: linear-gradient(90deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, .18) 45%, rgba(255, 255, 255, 0)); }
.hb-wipe-handle {
	top: 50%;
	left: 6px;
	width: clamp(90px, 11vw, 170px);
	height: 14px;
	border-radius: 7px;
	background: linear-gradient(180deg, #ff9a52, var(--hb-orange) 55%, #c4500a);
	transform-origin: 0 50%;
	transform: translateY(-50%) rotate(150deg);
}
.hb-wipe-handle::before { content: ""; position: absolute; top: -3px; left: -4px; width: 16px; height: 20px; border-radius: 4px; background: #2a0560; }
.hb-wipe-handle::after { content: ""; position: absolute; top: 3px; right: 8px; width: 38%; height: 8px; border-radius: 4px; background: repeating-linear-gradient(90deg, rgba(42, 5, 96, .35) 0 3px, transparent 3px 7px); }
/* a soft shine passes over the clean glass */
.hb-wipe-shine {
	position: absolute;
	inset: -10% -60%;
	opacity: 0;
	background: linear-gradient(105deg, rgba(255, 255, 255, 0) 43%, rgba(255, 255, 255, .15) 49%, rgba(255, 255, 255, .05) 52%, rgba(255, 255, 255, 0) 57%);
	transform: translateX(-60%);
}
.hb-wipe.is-dry .hb-wipe-shine { animation: hb-shine 1.2s cubic-bezier(.3, .1, .3, 1) forwards; }
@keyframes hb-shine {
	15% { opacity: 1; }
	to { opacity: 0; transform: translateX(60%); }
}
/* reduced motion (replay button): the water simply fades */
.hb-wipe.is-reduced > .hb-wipe-layer { animation: hb-wipe-fade .6s ease .15s forwards; }
.hb-wipe.is-reduced :is(.hb-wipe-blade, .hb-wipe-shine) { display: none; }

/* replay button */
.hb-wipe-btn {
	position: fixed;
	left: 20px;
	bottom: calc(20px + env(safe-area-inset-bottom));
	z-index: 9990;
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	padding: 0;
	border: 1.5px solid rgba(217, 198, 248, .35);
	border-radius: 50%;
	background: var(--hb-bg-3);
	color: var(--hb-cream);
	cursor: pointer;
	transition: background-color .2s ease, border-color .2s ease, transform .25s cubic-bezier(.2, .9, .3, 1.4);
}
.hb-wipe-btn svg { width: 22px; height: 22px; }
.hb-wipe-btn:hover { transform: translateY(-2px) rotate(-10deg); border-color: var(--hb-orange); background: var(--hb-orange); }
.hb-wipe-btn:focus-visible { outline: 3px solid var(--hb-orange-2); outline-offset: 3px; }

/* ---------- footer on this page ---------- */
body.mtb-hb footer.wp-block-template-part .has-background[style*="--wp--preset--color--primary"] { background-color: var(--hb-bg-3) !important; }
body.mtb-hb footer.wp-block-template-part .wp-block-button__link[style*="background-color:var(--wp--preset--color--lavender)"] {
	background-color: var(--hb-orange) !important;
	border-color: var(--hb-orange) !important;
	color: var(--hb-cream) !important;
}

/* ======================================================================
   Inner pages in direction B (.hb-page.hb-inner): page hero, sections and parts
   ====================================================================== */
/* page hero: one photo, shorter than the homepage */
.hb-hero.hb-hero--page { min-height: min(80svh, 780px); padding-bottom: 120px; }
.hb-hero--page .hb-hero-photo::after { background: linear-gradient(90deg, rgba(42, 5, 96, .55) 0%, rgba(42, 5, 96, .2) 55%, rgba(42, 5, 96, 0) 80%), linear-gradient(180deg, rgba(42, 5, 96, .6) 0%, rgba(42, 5, 96, .35) 38%, rgba(42, 5, 96, .94) 100%); }
.hb-hero--page .hb-hero-title { max-width: 780px; font-size: clamp(46px, 6.4vw, 104px); text-wrap: balance; }
.hb-hero--page .hb-crumb { margin-bottom: 22px !important; color: var(--hb-orange-2); }
.hb-hero--page .hb-crumb a { color: inherit; }
.hb-hero--page .hb-hero-sub { max-width: 52ch; }
.hb-hero-note { margin-top: 18px !important; max-width: 70ch; font-size: 14.5px; line-height: 1.55; color: rgba(251, 248, 236, .78); }
.hb-page ul.hb-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 30px 0 0 !important; padding: 0; list-style: none; }
.hb-chips li {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 8px 14px;
	border: 1.5px solid rgba(217, 198, 248, .3);
	border-radius: 999px;
	background: rgba(42, 5, 96, .35);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	font-weight: 700;
	font-size: 13.5px;
	line-height: 1.2;
	color: var(--hb-cream);
}
.hb-chips li::before { content: ""; width: 14px; height: 14px; flex: none; background: var(--hb-orange-2); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.2 4.2L19 7'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.2 4.2L19 7'/%3E%3C/svg%3E") center / contain no-repeat; }

/* sections */
.hb-sec { position: relative; padding: clamp(80px, 9vw, 128px) 0; }
.hb-sec + .hb-sec.hb-tone-same { padding-top: 0; }
.hb-tone-cream { background: var(--hb-cream); color: var(--hb-ink); }
.hb-tone-white { background: #fff; color: var(--hb-ink); }
.hb-tone-deep { background: var(--hb-bg-3); }
.hb-tone-orange { background: var(--hb-orange); color: var(--hb-bg-3); }
.hb-page :is(.hb-tone-cream, .hb-tone-white) :is(h2.hb-display, h3.hb-display) { color: var(--hb-violet); }
.hb-page .hb-tone-orange :is(h2.hb-display, h3.hb-display) { color: var(--hb-bg-3); }
.hb-page :is(.hb-tone-cream, .hb-tone-white) .hb-lead,
.hb-page :is(.hb-tone-cream, .hb-tone-white) .hb-text p { color: #4a3375; }
.hb-page .hb-tone-orange .hb-label { color: var(--hb-bg-3); }
.hb-page .hb-tone-orange .hb-label::before { background: var(--hb-bg-3); }
.hb-page :is(.hb-tone-cream, .hb-tone-white, .hb-tone-orange) a:not(.wp-block-button__link) { color: var(--hb-violet); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
.hb-page .hb-tone-orange a:not(.wp-block-button__link) { color: var(--hb-bg-3); }
.hb-page :is(.hb-sec:not(.hb-tone-cream):not(.hb-tone-white):not(.hb-tone-orange)) .hb-text a:not(.wp-block-button__link) { color: var(--hb-cream); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--hb-orange-2); }
.hb-page .hb-text strong { font-weight: 800; }

/* section heading: label, display heading, lead */
.hb-head { display: grid !important; gap: 20px; max-width: 760px; margin-bottom: clamp(36px, 4vw, 56px) !important; }
.hb-head--center { justify-items: center; margin-inline: auto !important; text-align: center; }
.hb-head--center > .hb-label::after { content: ""; width: 22px; height: 2px; margin-left: -.22em; background: var(--hb-orange); flex: none; }
.hb-head h2.hb-display { font-size: clamp(40px, 5.2vw, 80px); text-wrap: balance; }
.hb-head .hb-lead { max-width: 60ch; font-size: 18.5px; line-height: 1.6; text-wrap: pretty; }
.hb-head--center .hb-lead { margin-inline: auto; }

/* running text */
.hb-text { display: grid !important; gap: 16px; }
.hb-text > h3 { margin-top: 10px !important; font-family: var(--hb-display); font-weight: 100; font-size: clamp(26px, 2.4vw, 34px); line-height: 1.02; text-transform: uppercase; color: inherit; }
.hb-tone-cream .hb-text > h3, .hb-tone-white .hb-text > h3 { color: var(--hb-violet); }
.hb-text > p { font-size: 17px; line-height: 1.65; text-wrap: pretty; }
.hb-text .wp-block-buttons { margin-top: 12px !important; }

/* text + photo */
.hb-split { display: grid !important; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.hb-split--rev > .hb-split-media { order: -1; }
.hb-split-text { display: grid !important; gap: 18px; }
.hb-split-text h2.hb-display { font-size: clamp(34px, 3.9vw, 56px); text-wrap: balance; }
.hb-split-media { position: relative; }
.hb-split-media::before { content: ""; position: absolute; inset: 22px -18px -18px 22px; z-index: 0; border-radius: 28px; background: var(--hb-orange); }
.hb-split--rev .hb-split-media::before { inset: 22px 22px -18px -18px; }
.hb-tone-orange .hb-split-media::before { background: var(--hb-bg-3); }
.hb-split-media figure { position: relative; z-index: 1; margin: 0 !important; overflow: hidden; border-radius: 28px; }
.hb-split-media img { width: 100%; aspect-ratio: 4 / 3.4; object-fit: cover; }
.hb-split-media-contain img { object-fit: contain; padding: 28px; background: #fff; }
.hb-split-media-natural img { aspect-ratio: auto; height: auto; }

/* check lists */
.hb-page ul.hb-checks { display: grid; gap: 12px; margin: 6px 0 0 !important; padding: 0; list-style: none; }
.hb-page ul.hb-checks--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; }
.hb-checks li { position: relative; margin: 0; padding-left: 36px; font-weight: 600; font-size: 16.5px; line-height: 1.5; }
.hb-checks li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .1em;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: var(--hb-orange);
}
.hb-checks li::after { content: ""; position: absolute; left: 5px; top: calc(.1em + 5px); width: 14px; height: 14px; background: #fff; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.2 4.2L19 7'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.2 4.2L19 7'/%3E%3C/svg%3E") center / contain no-repeat; }
.hb-checks li strong { font-weight: 800; }

/* feature cards with an icon */
.hb-cards { display: grid !important; grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); gap: 18px; }
.hb-cards--3 { --cols: 3; }
.hb-cards--2 { --cols: 2; }
.hb-cards--1 { --cols: 1; max-width: 860px; }
.hb-fcard {
	display: flex !important;
	flex-direction: column;
	gap: 12px;
	padding: 30px 28px 32px;
	border: 1.5px solid rgba(217, 198, 248, .2);
	border-radius: 24px;
	background: rgba(217, 198, 248, .05);
	transition: transform .3s var(--hb-ease), border-color .3s ease, background-color .3s ease;
}
.hb-fcard > * { margin: 0 !important; }
.hb-fcard::before { content: ""; width: 40px; height: 40px; margin-bottom: 8px; background: var(--hb-orange-2); -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat; }
.hb-fcard:not([class*="hb-i-"]):not([class*="hb-ico-"])::before { display: none; }
.hb-fcard h3 { font-family: var(--hb-display); font-weight: 100; font-size: clamp(24px, 2vw, 30px); line-height: 1.02; text-transform: uppercase; color: var(--hb-cream); text-wrap: balance; }
.hb-fcard p { font-size: 15.5px; line-height: 1.6; color: var(--hb-lav); text-wrap: pretty; }
.hb-fcard:hover { transform: translateY(-4px); border-color: rgba(255, 139, 61, .7); }
.hb-tone-cream .hb-fcard, .hb-tone-white .hb-fcard { border-color: rgba(93, 14, 192, .14); background: #fff; }
.hb-tone-white .hb-fcard { background: var(--hb-cream); }
.hb-tone-cream .hb-fcard::before, .hb-tone-white .hb-fcard::before { background: var(--hb-orange); }
.hb-tone-cream .hb-fcard h3, .hb-tone-white .hb-fcard h3 { color: var(--hb-violet); }
.hb-tone-cream .hb-fcard p, .hb-tone-white .hb-fcard p { color: #4a3375; }
.hb-tone-orange .hb-fcard { border-color: rgba(42, 5, 96, .18); background: rgba(255, 255, 255, .14); }
.hb-tone-orange .hb-fcard::before { background: var(--hb-bg-3); }
.hb-tone-orange .hb-fcard h3, .hb-tone-orange .hb-fcard p { color: var(--hb-bg-3); }
/* text-heavy cards (no icon) */
.hb-fcard--text { gap: 14px; padding: 34px 32px 36px; }
.hb-fcard--text p a { font-weight: 700; }

/* process steps */
.hb-page ol.hb-flow { display: grid; grid-template-columns: repeat(var(--n, 5), minmax(0, 1fr)); gap: 16px; margin: 0 !important; padding: 0; list-style: none; counter-reset: hb-flow; }
.hb-flow li {
	position: relative;
	display: grid;
	align-content: start;
	gap: 10px;
	margin: 0;
	padding: 78px 24px 28px;
	border-radius: 22px;
	background: rgba(255, 255, 255, .06);
	border: 1.5px solid rgba(217, 198, 248, .18);
	font-size: 15px;
	line-height: 1.55;
	color: var(--hb-lav);
	counter-increment: hb-flow;
}
.hb-flow li::before { content: counter(hb-flow); position: absolute; top: 24px; left: 24px; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--hb-orange); font-family: var(--hb-display); font-weight: 100; font-size: 21px; color: var(--hb-bg-3); }
.hb-flow li strong { display: block; font-family: var(--hb-display); font-weight: 100; font-size: 22px; line-height: 1.05; text-transform: uppercase; color: var(--hb-cream); }
.hb-tone-orange .hb-flow li { background: rgba(255, 255, 255, .16); border-color: rgba(42, 5, 96, .16); color: var(--hb-bg-3); }
.hb-tone-orange .hb-flow li::before { background: var(--hb-bg-3); color: var(--hb-cream); }
.hb-tone-orange .hb-flow li strong { color: var(--hb-bg-3); }
.hb-tone-cream .hb-flow li { background: #fff; border-color: rgba(93, 14, 192, .14); color: #4a3375; }
.hb-tone-cream .hb-flow li strong { color: var(--hb-violet); }
.hb-flow-foot { margin-top: 36px !important; }
.hb-flow--3 { --n: 3; }
.hb-flow--4 { --n: 4; }
.hb-flow--5 { --n: 5; }
.hb-flow--6 { --n: 3; }

/* price + service areas */
.hb-pa { display: grid !important; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.hb-pa-price { display: grid !important; gap: 20px; }
.hb-pa-price h2.hb-display { font-size: clamp(36px, 4.2vw, 62px); text-wrap: balance; }
.hb-pa-price .wp-block-buttons { margin-top: 8px !important; }
/* buttons on orange: deep purple */
.hb-page .hb-tone-orange .wp-block-button__link { background: var(--hb-bg-3); color: var(--hb-cream); }
.hb-page .hb-tone-orange .hb-ghost .wp-block-button__link { background: transparent; border-color: rgba(42, 5, 96, .45); color: var(--hb-bg-3); }
.hb-page .hb-tone-orange .hb-ghost .wp-block-button__link:is(:hover, :focus-visible) { background: var(--hb-bg-3); border-color: var(--hb-bg-3); color: var(--hb-cream); }
/* the dark service-area box inside the orange section keeps light links */
.hb-pa-areas { display: grid !important; gap: 18px; padding: clamp(28px, 3vw, 40px); border-radius: 28px; background: var(--hb-bg-3); color: var(--hb-lav); }
.hb-pa-areas h3 { font-family: var(--hb-display); font-weight: 100; font-size: clamp(28px, 2.6vw, 38px); line-height: 1; text-transform: uppercase; color: var(--hb-cream); }
.hb-pa-areas p { font-size: 15.5px; line-height: 1.6; }
.hb-page ul.hb-links { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 !important; padding: 0; list-style: none; }
.hb-links li { margin: 0; }
.hb-page .hb-links a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 11px 18px;
	border: 1.5px solid rgba(217, 198, 248, .4);
	border-radius: 999px;
	font-weight: 800;
	font-size: 14.5px;
	line-height: 1.2;
	text-decoration: none;
	color: var(--hb-cream);
	transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.hb-page .hb-links a::after { content: "→"; color: var(--hb-orange-2); transition: transform .25s ease, color .2s ease; }
.hb-page .hb-links a:is(:hover, :focus-visible) { border-color: var(--hb-orange); background: var(--hb-orange); color: var(--hb-bg-3); }
.hb-page .hb-links a:is(:hover, :focus-visible)::after { color: var(--hb-bg-3); transform: translateX(3px); }
.hb-page :is(.hb-tone-cream, .hb-tone-white) .hb-links a { border-color: rgba(93, 14, 192, .3); color: var(--hb-violet); }
.hb-page .hb-tone-orange .hb-links a { border-color: rgba(42, 5, 96, .35); color: var(--hb-bg-3); }
.hb-page .hb-tone-orange .hb-links a::after { color: var(--hb-bg-3); }
.hb-page .hb-tone-orange .hb-links a:is(:hover, :focus-visible) { border-color: var(--hb-bg-3); background: var(--hb-bg-3); color: var(--hb-cream); }
.hb-page .hb-tone-orange .hb-links a:is(:hover, :focus-visible)::after { color: var(--hb-orange-2); }

/* the dark service-area box inside the orange section keeps light links */
.hb-page .hb-sec .hb-pa-areas a:not(.wp-block-button__link) { color: var(--hb-cream); }
.hb-page .hb-sec .hb-pa-areas .hb-links a { border-color: rgba(217, 198, 248, .4); color: var(--hb-cream); text-decoration: none; }
.hb-page .hb-sec .hb-pa-areas .hb-links a::after { color: var(--hb-orange-2); }
.hb-page .hb-sec .hb-pa-areas .hb-links a:is(:hover, :focus-visible) { border-color: var(--hb-orange); background: var(--hb-orange); color: var(--hb-bg-3); }
.hb-page .hb-sec .hb-pa-areas .hb-links a:is(:hover, :focus-visible)::after { color: var(--hb-bg-3); }

/* customer quote */
.hb-qcard { position: relative; display: grid !important; gap: 18px; padding: 40px 36px 34px; border-radius: 28px; background: var(--hb-violet); color: var(--hb-cream); }
.hb-qcard::before { content: "”"; position: absolute; top: -26px; left: 28px; font-family: var(--hb-display); font-weight: 100; font-size: 120px; line-height: 1; color: var(--hb-orange-2); }
.hb-qcard .hb-qtext { font-family: var(--hb-display); font-weight: 100; font-size: clamp(24px, 2.3vw, 32px); line-height: 1.12; text-transform: uppercase; text-wrap: pretty; }
.hb-qcard .hb-qcite { font-weight: 800; font-size: 13px; letter-spacing: .16em; text-transform: uppercase; color: var(--hb-orange-2); }

/* FAQ: heading (+ quote) on the left, questions on the right */
.hb-faq { display: grid !important; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(36px, 5vw, 80px); align-items: start; }
.hb-faq-side { display: grid !important; gap: 36px; position: sticky; top: calc(var(--hb-header-h) + 24px); }
.hb-faq-side h2.hb-display { font-size: clamp(34px, 3.4vw, 52px); text-wrap: balance; }
.hb-faq-list { display: grid !important; gap: 0; border-top: 1.5px solid rgba(93, 14, 192, .18); }
.hb-page details.hb-qa { border-bottom: 1.5px solid rgba(93, 14, 192, .18); }
.hb-qa summary {
	position: relative;
	display: block;
	padding: 24px 56px 24px 0;
	cursor: pointer;
	list-style: none;
	font-weight: 800;
	font-size: 18px;
	line-height: 1.4;
	color: var(--hb-violet);
}
.hb-qa summary::-webkit-details-marker { display: none; }
.hb-qa summary::after { content: "+"; position: absolute; top: 50%; right: 0; display: grid; place-items: center; width: 38px; height: 38px; margin-top: -19px; border-radius: 50%; background: var(--hb-orange); font-weight: 600; font-size: 24px; line-height: 1; color: #fff; transition: transform .3s var(--hb-ease), background-color .2s ease; }
.hb-qa[open] summary::after { transform: rotate(45deg); background: var(--hb-violet); }
.hb-qa summary:focus-visible { outline: 3px solid var(--hb-orange-2); outline-offset: 4px; border-radius: 6px; }
.hb-qa > :not(summary) { margin: 0 0 22px !important; max-width: 64ch; font-size: 16.5px; line-height: 1.65; color: #4a3375; }
.hb-qa ul { padding-left: 20px; }
.hb-qa a { color: var(--hb-violet); text-decoration: underline; }

/* other services: the homepage photo cards plus an "all services" card */
.hb-svc-card.hb-svc-all { background: radial-gradient(70% 80% at 100% 0%, rgba(244, 105, 15, .16), rgba(244, 105, 15, 0) 65%), var(--hb-cream); border-color: var(--hb-cream); }
.hb-page .hb-svc-card.hb-svc-all h3.hb-svc { color: var(--hb-violet); }
.hb-svc-card.hb-svc-all .hb-svc-desc { color: #4a3375; }
.hb-svc-card.hb-svc-all::after { border-color: var(--hb-orange); background: var(--hb-orange); }
.hb-page .hb-svc-card.hb-svc-all h3.hb-svc::before { background: var(--hb-orange); opacity: 1; }
.hb-svc-card.hb-svc-all:is(:hover, :focus-within) { border-color: var(--hb-orange); }

/* numbers */
.hb-nums { display: grid !important; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: 18px; }
.hb-nums--4 { --cols: 4; }
.hb-nums--2 { --cols: 2; }
.hb-num { display: grid !important; align-content: start; gap: 10px; padding: 30px 28px; border-radius: 24px; background: rgba(217, 198, 248, .06); border: 1.5px solid rgba(217, 198, 248, .18); }
.hb-num > * { margin: 0 !important; }
.hb-num .hb-num-big { font-family: var(--hb-display); font-weight: 100; font-size: clamp(54px, 5.4vw, 84px); line-height: .9; color: var(--hb-orange-2); }
.hb-num .hb-num-txt { font-size: 15.5px; line-height: 1.55; color: var(--hb-lav); }
.hb-tone-cream .hb-num { background: #fff; border-color: rgba(93, 14, 192, .14); }
.hb-tone-cream .hb-num .hb-num-big { color: var(--hb-orange); }
.hb-tone-cream .hb-num .hb-num-txt { color: #4a3375; }

/* short quotes (employees) */
.hb-quotes { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.hb-quotes > p { position: relative; margin: 0 !important; padding: 26px 26px 26px 64px; border-radius: 22px; background: #fff; font-weight: 700; font-size: 16px; line-height: 1.5; color: var(--hb-violet); }
.hb-quotes > p::before { content: ""; position: absolute; top: 24px; left: 22px; width: 28px; height: 28px; background: var(--hb-orange); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 7H6a2 2 0 0 0-2 2v4h5v5H4M20 7h-4a2 2 0 0 0-2 2v4h5v5h-5'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 7H6a2 2 0 0 0-2 2v4h5v5H4M20 7h-4a2 2 0 0 0-2 2v4h5v5h-5'/%3E%3C/svg%3E") center / contain no-repeat; }
.hb-tone-deep .hb-quotes > p, .hb-sec:not([class*="hb-tone-"]) .hb-quotes > p { background: rgba(217, 198, 248, .07); color: var(--hb-cream); }

/* people */
.hb-people-group + .hb-people-group { margin-top: 48px !important; }
.hb-page .hb-people-group > h3 { margin-bottom: 18px !important; font-family: var(--hb-body); font-weight: 800; font-size: 13px; letter-spacing: .22em; text-transform: uppercase; color: var(--hb-orange); }
.hb-people { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.hb-person { display: grid !important; gap: 4px; padding: 22px 24px; border-radius: 20px; background: #fff; border: 1.5px solid rgba(93, 14, 192, .12); }
.hb-person > * { margin: 0 !important; }
.hb-page .hb-person h4 { font-family: var(--hb-body); font-weight: 800; font-size: 18px; line-height: 1.3; letter-spacing: normal; text-transform: none; color: var(--hb-violet); }
.hb-person .hb-role { font-weight: 700; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: #6b5a8e; }
.hb-person .hb-mail a { font-weight: 700; font-size: 15px; color: var(--hb-violet); text-decoration: none; overflow-wrap: anywhere; }
.hb-person .hb-mail a:hover { color: var(--hb-orange); }
.hb-person--lead { background: var(--hb-violet); border-color: var(--hb-violet); }
.hb-page .hb-person--lead h4, .hb-page .hb-sec .hb-person--lead .hb-mail a { color: var(--hb-cream); }
.hb-page .hb-sec .hb-person .hb-mail a { text-decoration: none; }
.hb-person--lead .hb-role { color: var(--hb-orange-2); }

/* contact tiles */
.hb-ctiles { display: grid !important; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: 16px; }
.hb-ctile { --ico: none; display: grid !important; gap: 6px; padding: 28px; border-radius: 24px; background: rgba(217, 198, 248, .07); border: 1.5px solid rgba(217, 198, 248, .2); }
.hb-ctile > * { margin: 0 !important; }
.hb-ctile::before { content: ""; width: 34px; height: 34px; margin-bottom: 10px; background: var(--hb-orange-2); -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat; }
.hb-ctile .hb-ctile-k { font-weight: 800; font-size: 12.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--hb-lav-2); }
.hb-ctile .hb-ctile-v { font-weight: 800; font-size: 21px; line-height: 1.35; color: var(--hb-cream); }
.hb-page .hb-ctile .hb-ctile-v a { color: inherit; text-decoration: none; }
.hb-page .hb-ctile .hb-ctile-v a:hover { color: var(--hb-orange-2); }
.hb-ctile .hb-ctile-s { font-size: 14.5px; line-height: 1.5; color: var(--hb-lav); }

/* videos */
.hb-videos { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.hb-video { display: grid !important; align-content: start; gap: 14px; padding: 16px 16px 24px; border-radius: 24px; background: rgba(217, 198, 248, .06); border: 1.5px solid rgba(217, 198, 248, .18); }
.hb-video > * { margin: 0 !important; }
.hb-video .wp-block-embed { overflow: hidden; border-radius: 16px; }
.hb-video h3 { padding: 0 8px; font-family: var(--hb-display); font-weight: 100; font-size: 28px; line-height: 1; text-transform: uppercase; color: var(--hb-cream); }
.hb-video p { padding: 0 8px; font-size: 15.5px; line-height: 1.6; color: var(--hb-lav); }

/* long text (legal and other documents) */
.hb-prose { max-width: 78ch; display: grid !important; gap: 14px; }
.hb-prose > * { margin: 0 !important; }
.hb-prose :is(h2, h3) { margin-top: 26px !important; font-family: var(--hb-body); font-weight: 800; letter-spacing: normal; text-transform: none; overflow-wrap: break-word; font-size: 22px; line-height: 1.3; color: var(--hb-violet); }
.hb-prose h3 { font-size: 18px; }
.hb-prose p, .hb-prose li { font-size: 16.5px; line-height: 1.7; color: #3f2b67; }
.hb-prose ul, .hb-prose ol { padding-left: 22px; display: grid; gap: 6px; }
.hb-prose a { color: var(--hb-violet); text-decoration: underline; overflow-wrap: anywhere; }
.hb-prose table { width: 100%; border-collapse: collapse; font-size: 15px; }
.hb-prose :is(td, th) { padding: 8px 10px; border: 1px solid rgba(93, 14, 192, .18); text-align: left; vertical-align: top; }

/* call-to-action band (job pages and others without the quote form): a dark card with an orange glow, framed by the colour of the section above */
.hb-band { padding: clamp(36px, 5vw, 72px) 0; background: var(--hb-cream); color: var(--hb-cream); }
.hb-tone-white + .hb-band { background: #fff; }
.hb-sec:not(.hb-tone-cream):not(.hb-tone-white):not(.hb-tone-orange) + .hb-band { background: var(--hb-bg); }
.hb-band-grid {
	position: relative; isolation: isolate; overflow: hidden;
	display: grid !important; grid-template-columns: minmax(0, 1.2fr) auto; gap: 30px 60px; align-items: center;
	padding: clamp(30px, 5.5vw, 80px); border-radius: 32px;
	background:
		radial-gradient(50% 120% at 100% 0%, rgba(244, 105, 15, .34), rgba(244, 105, 15, 0) 62%),
		radial-gradient(45% 90% at 0% 100%, rgba(93, 14, 192, .55), rgba(93, 14, 192, 0) 70%),
		linear-gradient(160deg, #3a0a84 0%, var(--hb-bg-3) 100%);
	box-shadow: 0 40px 80px -44px rgba(42, 5, 96, .6);
}
.hb-sec:not(.hb-tone-cream):not(.hb-tone-white):not(.hb-tone-orange) + .hb-band .hb-band-grid { box-shadow: inset 0 0 0 1px rgba(217, 198, 248, .16); }
.hb-band-grid::after { content: ""; position: absolute; z-index: -1; right: -110px; bottom: -150px; width: 360px; height: 360px; border-radius: 50%; border: 2px solid rgba(255, 139, 61, .28); pointer-events: none; }
.hb-band h2.hb-display { font-size: clamp(34px, 4.2vw, 62px); color: var(--hb-cream); text-wrap: balance; }
.hb-band p { max-width: 54ch; margin-top: 18px !important; font-size: 18px; line-height: 1.6; color: var(--hb-lav); }
.hb-band .hb-label { margin-bottom: 14px !important; }
@media (min-width: 600px) { .hb-page .hb-band h2.hb-display { hyphens: manual; -webkit-hyphens: manual; } }
.hb-page .hb-band .wp-block-buttons { justify-content: flex-end; }

/* a form on its own (job application) */
.hb-form-solo { max-width: 920px; margin-inline: auto !important; }
.hb-form input[type="file"] { color: var(--hb-lav); font: inherit; font-size: 14.5px; }
.hb-form input[type="date"] { color-scheme: dark; }
.hb-form .mtb-form-field__choices--inline, .hb-form .mtb-form-field__choices { row-gap: 10px; }

/* post listings: pagination */
.hb-page .hb-pager { gap: 8px; margin-top: 44px !important; font-weight: 800; font-size: 15px; }
.hb-page .hb-pager :is(a, .page-numbers) { display: inline-grid; place-items: center; min-width: 44px; height: 44px; padding: 0 16px; border: 1.5px solid rgba(217, 198, 248, .3); border-radius: 999px; color: var(--hb-cream); text-decoration: none; }
.hb-page .hb-pager .page-numbers.current { border-color: var(--hb-orange); background: var(--hb-orange); color: var(--hb-bg-3); }
.hb-page .hb-pager a:is(:hover, :focus-visible) { border-color: var(--hb-orange-2); color: var(--hb-orange-2); }
.hb-news .wp-block-query-no-results p { color: var(--hb-lav); }
/* grid children may shrink; long words (emails, URLs) break instead of widening the column */
.hb-page :is(.hb-text, .hb-prose, .hb-split-text, .hb-head, .hb-pa-price, .hb-pa-areas) > * { min-width: 0; }
.hb-page :is(.hb-prose, .hb-text, .hb-fcard) :is(p, li, a) { overflow-wrap: anywhere; }
.hb-cookie * { max-width: 100%; box-sizing: border-box; overflow-wrap: anywhere; }
/* the cookie policy document */
.hb-cookie :is(h1, h2, h3, h4, h5, h6, div, span, p, a, summary, label, li, td, th) { font-family: var(--hb-body); letter-spacing: normal; }
.hb-cookie :is(h4, h5, h6) { font-weight: 800; text-transform: none; }

/* a single customer quote; an introduction in large type */
.hb-quote-solo { max-width: 900px; margin-inline: auto !important; }
.hb-lead-text { max-width: 860px; }
.hb-lead-text .hb-lead { font-size: clamp(19px, 1.6vw, 23px); line-height: 1.55; font-weight: 600; color: var(--hb-violet); }

/* embedded blocks (query loops, shortcodes, forms) inside a section */
.hb-embed { display: grid !important; gap: 24px; }

.hb-i-person { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c0-4 3.6-7 8-7s8 3 8 7'/%3E%3C/svg%3E"); }
.hb-i-team { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3.4'/%3E%3Cpath d='M2.5 20c0-3.6 2.9-6 6.5-6s6.5 2.4 6.5 6'/%3E%3Ccircle cx='17' cy='9' r='2.6'/%3E%3Cpath d='M16 14.2c3.2.1 5.5 2.3 5.5 5.3'/%3E%3C/svg%3E"); }
.hb-i-clipboard { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='4' width='14' height='17' rx='2'/%3E%3Cpath d='M9 4V3h6v1'/%3E%3Cpath d='M8.5 12.5l2.2 2.2 4.8-4.8'/%3E%3C/svg%3E"); }
.hb-i-cap { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 9l10-5 10 5-10 5z'/%3E%3Cpath d='M6 11v5c0 1.5 2.7 3 6 3s6-1.5 6-3v-5'/%3E%3Cpath d='M22 9v6'/%3E%3C/svg%3E"); }
.hb-i-award { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='9' r='6'/%3E%3Cpath d='M8.5 14L7 22l5-3 5 3-1.5-8'/%3E%3C/svg%3E"); }
.hb-i-leaf { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 19c0-9 6-14 15-15-1 9-6 15-15 15z'/%3E%3Cpath d='M5 19l7-7'/%3E%3C/svg%3E"); }
.hb-i-shield { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l8 3v6c0 5-3.5 8-8 9-4.5-1-8-4-8-9V6z'/%3E%3Cpath d='M8.8 12l2.2 2.2 4.4-4.4'/%3E%3C/svg%3E"); }
.hb-i-clock { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E"); }
.hb-i-pin { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s7-6.2 7-12a7 7 0 0 0-14 0c0 5.8 7 12 7 12z'/%3E%3Ccircle cx='12' cy='9' r='2.6'/%3E%3C/svg%3E"); }
.hb-i-sparkle { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l1.8 4.2L18 9l-4.2 1.8L12 15l-1.8-4.2L6 9l4.2-1.8z'/%3E%3Cpath d='M19 15l.8 1.7 1.7.8-1.7.8-.8 1.7-.8-1.7-1.7-.8 1.7-.8z'/%3E%3C/svg%3E"); }
.hb-i-chart { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20V10M10 20V4M16 20v-7M22 20H2'/%3E%3C/svg%3E"); }
.hb-i-heart { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20s-8-4.7-8-10.5A4.5 4.5 0 0 1 12 7a4.5 4.5 0 0 1 8 2.5C20 15.3 12 20 12 20z'/%3E%3C/svg%3E"); }
.hb-i-globe { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3c2.5 2.6 3.8 5.6 3.8 9s-1.3 6.4-3.8 9c-2.5-2.6-3.8-5.6-3.8-9S9.5 5.6 12 3z'/%3E%3C/svg%3E"); }
.hb-i-handshake { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12l4-4 4 2 3-2 4 1 5 3'/%3E%3Cpath d='M6 8l-4 4 6 6 2-1 2 2 2-1 2 1 5-6'/%3E%3Cpath d='M10 14l2 2M12 12l3 3'/%3E%3C/svg%3E"); }
.hb-i-phone { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 3h4l2 5-2.5 1.5a11 11 0 0 0 6 6L16 13l5 2v4a2 2 0 0 1-2 2A17 17 0 0 1 3 5a2 2 0 0 1 2-2z'/%3E%3C/svg%3E"); }
.hb-i-mail { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M3 7l9 6 9-6'/%3E%3C/svg%3E"); }
.hb-i-check { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.2 4.2L19 7'/%3E%3C/svg%3E"); }
.hb-i-drop { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3s6 6.6 6 11a6 6 0 0 1-12 0c0-4.4 6-11 6-11z'/%3E%3C/svg%3E"); }
.hb-i-snow { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2v20M4 6l16 12M20 6L4 18'/%3E%3Cpath d='M9 3l3 2 3-2M9 21l3-2 3 2'/%3E%3C/svg%3E"); }
.hb-i-calendar { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E"); }
.hb-i-robot { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='8' width='14' height='11' rx='3'/%3E%3Cpath d='M12 8V4M9 13h.01M15 13h.01M9.5 16.5h5'/%3E%3C/svg%3E"); }
.hb-i-quote { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 7H6a2 2 0 0 0-2 2v4h5v5H4M20 7h-4a2 2 0 0 0-2 2v4h5v5h-5'/%3E%3C/svg%3E"); }
.hb-i-doc { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3h8l4 4v14H6z'/%3E%3Cpath d='M14 3v4h4M9 12h6M9 16h6'/%3E%3C/svg%3E"); }

@media (max-width: 1024px) {
	.hb-split { grid-template-columns: minmax(0, 1fr); }
	.hb-split--rev > .hb-split-media { order: 0; }
	.hb-split-media { max-width: 620px; }
	.hb-cards { --cols: 2; }
	.hb-cards--3 { --cols: 2; }
	.hb-page ol.hb-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.hb-pa, .hb-faq { grid-template-columns: minmax(0, 1fr); }
	.hb-faq-side { position: static; }
	.hb-nums { --cols: 2; }
	.hb-quotes, .hb-videos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.hb-ctiles { --cols: 2; }
	.hb-band-grid { grid-template-columns: minmax(0, 1fr); align-items: start; }
	.hb-page .hb-band .wp-block-buttons { justify-content: flex-start; }
}
@media (max-width: 781px) {
	.hb-hero.hb-hero--page { min-height: 0; padding-bottom: 96px; }
	.hb-hero--page .hb-hero-title { font-size: clamp(40px, 11vw, 60px); }
	.hb-chips li { font-size: 12.5px; padding: 7px 12px; }
	.hb-page ul.hb-checks--2 { grid-template-columns: minmax(0, 1fr); }
	.hb-cards, .hb-cards--3, .hb-cards--2 { --cols: 1; }
	.hb-page ol.hb-flow { grid-template-columns: minmax(0, 1fr); }
	.hb-flow li { padding: 24px 22px 24px 82px; }
	.hb-flow li::before { top: 22px; left: 22px; }
	.hb-split-media::before { inset: 14px -10px -10px 14px; }
	.hb-split--rev .hb-split-media::before { inset: 14px 14px -10px -10px; }
	.hb-nums { --cols: 1; }
	.hb-quotes, .hb-videos { grid-template-columns: minmax(0, 1fr); }
	.hb-ctiles { --cols: 1; }
	.hb-qa summary { font-size: 16.5px; padding-right: 50px; }
	.hb-fcard { padding: 26px 22px 28px; }
}

/* ======================================================================
   Templates: articles, listings, search and 404 (.hb-tpl)
   ====================================================================== */
.hb-post-hero { position: relative; padding: calc(var(--hb-header-h) + clamp(60px, 7vw, 100px)) 0 clamp(60px, 7vw, 96px); background: radial-gradient(90% 120% at 100% 0%, rgba(244, 105, 15, .22), rgba(244, 105, 15, 0) 55%), var(--hb-bg-3); color: var(--hb-lav); }
.hb-post-wrap { max-width: 860px; }
.hb-post-hero .hb-wrap > * { margin: 0 !important; }
.hb-post-hero .hb-wrap { display: grid !important; gap: 20px; }
.hb-page .hb-tpl-title { font-family: var(--hb-display); font-weight: 100; font-size: clamp(40px, 5.6vw, 84px); line-height: .96; text-transform: uppercase; text-wrap: balance; color: var(--hb-cream); }
.hb-post .hb-tpl-title { font-size: clamp(36px, 4.6vw, 68px); }
.hb-tpl-desc, .hb-tpl-desc p { max-width: 62ch; font-size: 18px; line-height: 1.6; color: var(--hb-lav); }
.hb-page .hb-post-cats a { color: inherit; text-decoration: none; }
.hb-page .hb-post-cats .wp-block-post-terms__separator { color: var(--hb-orange); }
.hb-post-date { font-weight: 800; font-size: 13px; letter-spacing: .16em; color: var(--hb-lav-2); }
.hb-post-main { padding: clamp(48px, 6vw, 80px) 0 clamp(80px, 9vw, 120px); background: var(--hb-cream); color: var(--hb-ink); }
.hb-post-main .hb-wrap { display: grid !important; gap: 36px; }
.hb-post-main .hb-wrap > * { margin: 0 !important; }
/* grid children may shrink below their content (wide tables scroll instead of widening the column) */
.hb-post-main .hb-wrap > *, .hb-post-hero .hb-wrap > * { min-width: 0; }
.hb-page .hb-post-content .wp-block-table, .hb-page .hb-post-content figure:has(> table) { overflow-x: auto; }
.hb-page .hb-post-content table { min-width: 520px; }
.hb-page .hb-post-content > table { display: block; min-width: 0; max-width: 100%; overflow-x: auto; }
.hb-page .hb-post-content :is(p, li, h2, h3) { overflow-wrap: break-word; }
.hb-post-image { overflow: hidden; border-radius: 26px; }
.hb-post-image img { width: 100%; height: auto; max-height: 520px; object-fit: cover; }
/* article text */
.hb-page .hb-post-content { font-size: 18px; line-height: 1.75; color: #3f2b67; }
.hb-page .hb-post-content > * { max-width: 100%; margin: 0 0 18px !important; }
.hb-page .hb-post-content :is(h2, h3, h4) { margin: 44px 0 14px !important; letter-spacing: normal; text-transform: none; color: var(--hb-violet); }
.hb-page .hb-post-content h2 { font-family: var(--hb-display); font-weight: 100; font-size: clamp(30px, 3vw, 44px); line-height: 1.02; text-transform: uppercase; }
.hb-page .hb-post-content h3 { font-family: var(--hb-body); font-weight: 800; font-size: 22px; line-height: 1.3; }
.hb-page .hb-post-content h4 { font-family: var(--hb-body); font-weight: 800; font-size: 18px; }
.hb-page .hb-post-content p { color: #3f2b67; }
.hb-page .hb-post-content a { color: var(--hb-violet); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
.hb-page .hb-post-content a:hover { color: var(--hb-orange); }
.hb-page .hb-post-content :is(ul, ol) { padding-left: 24px; display: grid; gap: 6px; }
.hb-page .hb-post-content li { color: #3f2b67; }
.hb-page .hb-post-content strong { color: var(--hb-ink); }
.hb-page .hb-post-content img { height: auto; border-radius: 18px; }
.hb-page .hb-post-content blockquote { margin: 28px 0 !important; padding: 6px 0 6px 24px; border-left: 4px solid var(--hb-orange); font-weight: 600; color: var(--hb-violet); }
.hb-page .hb-post-content table { width: 100%; border-collapse: collapse; font-size: 16px; }
.hb-page .hb-post-content :is(td, th) { padding: 10px 12px; border: 1px solid rgba(93, 14, 192, .18); text-align: left; vertical-align: top; }
.hb-page .hb-post-content th { background: rgba(93, 14, 192, .06); color: var(--hb-violet); }
.hb-page .hb-post-content :is(.wp-block-group, .wp-block-columns) { max-width: 100%; }
/* the slim prompt in the middle of an article and the quote box at the end */
.hb-page .mtb-inline-cta { padding: 16px 20px; border-radius: 16px; background: #fff; border: 1.5px solid rgba(93, 14, 192, .14); }
.hb-page .mtb-article-cta { margin: 8px 0 0; padding: clamp(28px, 4vw, 44px); border-radius: 28px; background: radial-gradient(110% 90% at 100% 0%, rgba(244, 105, 15, .2), rgba(244, 105, 15, 0) 55%), linear-gradient(160deg, var(--hb-bg), var(--hb-bg-3)); gap: 14px; }
.hb-page .mtb-article-cta__title { font-family: var(--hb-display); font-weight: 100; font-size: clamp(30px, 3.4vw, 48px); line-height: .98; color: var(--hb-cream) !important; }
.hb-page .mtb-article-cta__text, .hb-page .mtb-article-cta__cities { color: var(--hb-lav) !important; }
.hb-page .mtb-article-cta__actions a { padding: 16px 28px; font-family: var(--hb-body); font-weight: 800; font-size: 16px; text-transform: none; }
.hb-page .mtb-article-cta__quote { background: var(--hb-orange); color: var(--hb-cream) !important; }
.hb-page .mtb-article-cta__quote::after { content: " →"; }
.hb-page .mtb-article-cta__call { border: 2px solid rgba(217, 198, 248, .45) !important; color: var(--hb-cream) !important; }
.hb-page .mtb-article-cta__actions a:hover { transform: translateY(-2px); }
.hb-page .mtb-article-cta__more a, .hb-page .mtb-article-cta__cities a { color: var(--hb-cream) !important; text-decoration-color: var(--hb-orange-2); }
/* listings */
.hb-tpl .hb-news .wp-block-post-template { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin: 0; padding: 0; list-style: none; }
.hb-tpl .hb-card .wp-block-post-title { font-family: var(--hb-body); font-weight: 800; font-size: 18px; line-height: 1.35; letter-spacing: normal; text-transform: none; color: var(--hb-cream); }
.hb-noresults { font-size: 18px; color: var(--hb-lav); }
/* search field */
.hb-page .hb-search { max-width: 640px; }
.hb-page .hb-search .wp-block-search__inside-wrapper { padding: 6px; border: 1.5px solid rgba(217, 198, 248, .35); border-radius: 999px; background: rgba(255, 255, 255, .07); }
.hb-page .hb-search .wp-block-search__input { padding: 12px 18px; border: 0; background: none; font: inherit; font-size: 17px; color: var(--hb-cream); }
.hb-page .hb-search .wp-block-search__input::placeholder { color: rgba(217, 198, 248, .6); }
.hb-page .hb-search .wp-block-search__button { margin: 0; padding: 0 18px; border: 0; border-radius: 999px; background: var(--hb-orange); color: var(--hb-cream); }
.hb-page .hb-search .wp-block-search__button svg { fill: currentColor; }
/* 404 */
.hb-404 .hb-404-num { font-family: var(--hb-display); font-weight: 100; font-size: clamp(110px, 16vw, 220px); line-height: .8; color: transparent; -webkit-text-stroke: 2px var(--hb-orange-2); }
/* the phone/quote bar on phones, in the same colours */
body.mtb-hb .mtb-mobile-bar { background: rgba(42, 5, 96, .92); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 -1px 0 rgba(217, 198, 248, .15); }
body.mtb-hb .mtb-mobile-bar a { border-radius: 999px; font-family: var(--hb-body); font-weight: 800; text-transform: none; letter-spacing: normal; }
body.mtb-hb .mtb-mobile-bar .mtb-mobile-bar__quote { background: var(--hb-orange); border-color: var(--hb-orange); color: var(--hb-cream); }
body.mtb-hb .mtb-mobile-bar .mtb-mobile-bar__call { background: transparent; border: 2px solid rgba(217, 198, 248, .45); color: var(--hb-cream); }
@media (max-width: 1024px) { .hb-tpl .hb-news .wp-block-post-template { grid-template-columns: 1fr 1fr; } }
@media (max-width: 781px) {
	.hb-tpl .hb-news .wp-block-post-template { grid-template-columns: minmax(0, 1fr); }
	.hb-page .hb-post-content { font-size: 17px; }
}

/* ======================================================================
   Article page (single.html): like mtb.fi's article page – violet title area, date above the title,
   a bold violet lead, display-font subheadings, orange bullets – plus a cover image, contents list,
   a side quote card, share links, related articles and a reading progress bar.
   ====================================================================== */
.hb-art-hero { background: radial-gradient(70% 120% at 100% 0%, rgba(255, 139, 61, .28), rgba(255, 139, 61, 0) 60%), linear-gradient(135deg, #6a12d0 0%, var(--hb-violet) 45%, #45099c 100%); }
.hb-art-hero-grid { display: grid !important; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: clamp(36px, 5vw, 72px); align-items: center; max-width: 1160px; }
.hb-art-hero-grid:not(:has(.hb-art-hero-img)) { grid-template-columns: minmax(0, 900px); }
.hb-art-hero-grid > * { margin: 0 !important; min-width: 0; }
.hb-art-hero-text { display: grid !important; gap: 22px; }
.hb-art-hero-text > * { margin: 0 !important; }
.hb-page .hb-post .hb-tpl-title { font-size: clamp(38px, 4.6vw, 70px); line-height: .98; }
.hb-art-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font-weight: 800; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--hb-lav); }
.hb-art-dot { color: var(--hb-orange-2); }
.hb-page .hb-art-meta .hb-art-cat { padding: 6px 14px; border-radius: 999px; background: var(--hb-orange); color: var(--hb-bg-3); text-decoration: none; }
.hb-page .hb-art-meta .hb-art-cat:hover { background: var(--hb-cream); }
.hb-art-hero-img { position: relative; }
.hb-art-hero-img::before { content: ""; position: absolute; inset: 18px -14px -14px 18px; border-radius: 26px; background: var(--hb-orange); }
.hb-art-hero-img img { position: relative; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 26px; }

.hb-art-main { padding: clamp(48px, 6vw, 84px) 0 clamp(70px, 8vw, 110px); background: #fff; color: var(--hb-ink); }
.hb-art-grid { display: grid !important; grid-template-columns: minmax(0, 1fr) 300px; grid-template-areas: "body side"; gap: clamp(40px, 5vw, 84px); max-width: 1160px; }
.hb-art-grid > * { margin: 0 !important; min-width: 0; }
.hb-art-side { grid-area: side; }
.hb-art-body { grid-area: body; display: grid !important; gap: 34px; max-width: 760px; }
.hb-art-body > * { margin: 0 !important; min-width: 0; }
.hb-art-side-inner { position: sticky; top: calc(var(--hb-header-h) + 28px); display: grid; gap: 22px; }
/* contents list */
.hb-toc { padding: 4px 0 4px 18px; border-left: 3px solid rgba(93, 14, 192, .14); }
.hb-toc summary { cursor: pointer; list-style: none; font-weight: 800; font-size: 12.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--hb-orange); }
.hb-toc summary::-webkit-details-marker { display: none; }
.hb-toc summary::after { content: "+"; margin-left: 8px; color: var(--hb-violet); }
.hb-toc[open] summary::after { content: "–"; }
.hb-toc ol { display: grid; gap: 2px; margin: 12px 0 0 !important; padding: 0; list-style: none; counter-reset: hb-toc; }
.hb-toc li { margin: 0; }
.hb-page .hb-toc a { position: relative; display: block; padding: 7px 0 7px 0; font-weight: 600; font-size: 14.5px; line-height: 1.4; color: #5b4882; text-decoration: none; transition: color .2s ease; }
.hb-page .hb-toc a:hover, .hb-page .hb-toc a[aria-current="true"] { color: var(--hb-violet); }
.hb-page .hb-toc a[aria-current="true"]::before { content: ""; position: absolute; left: -21px; top: 8px; bottom: 8px; width: 3px; border-radius: 2px; background: var(--hb-orange); }
/* side quote card */
.hb-side-quote { display: grid; gap: 12px; padding: 26px 24px; border-radius: 24px; background: radial-gradient(120% 90% at 100% 0%, rgba(244, 105, 15, .25), rgba(244, 105, 15, 0) 60%), linear-gradient(160deg, var(--hb-bg), var(--hb-bg-3)); color: var(--hb-lav); }
.hb-side-quote p { margin: 0; }
.hb-side-quote__title { font-family: var(--hb-display); font-weight: 100; font-size: 28px; line-height: 1; text-transform: uppercase; color: var(--hb-cream); }
.hb-side-quote__text { font-size: 15px; line-height: 1.5; }
.hb-page .hb-side-quote__btn { display: block; padding: 14px 18px; border-radius: 999px; background: var(--hb-orange); font-weight: 800; font-size: 15.5px; text-align: center; color: var(--hb-cream); text-decoration: none; transition: transform .25s cubic-bezier(.2, .9, .3, 1.4), background-color .2s ease; }
.hb-page .hb-side-quote__btn:hover { transform: translateY(-2px); background: var(--hb-orange-2); }
.hb-page .hb-side-quote__tel { font-weight: 700; font-size: 14px; text-align: center; color: var(--hb-cream); text-decoration: none; }
/* article text, as on mtb.fi: bold violet lead, display-font subheadings in normal case, orange bullets */
.hb-page .hb-art-body .hb-post-content > p:first-child { font-weight: 700; font-size: clamp(19px, 1.6vw, 22px); line-height: 1.55; color: var(--hb-violet); }
.hb-page .hb-art-body .hb-post-content :is(h2, h3) { font-family: var(--hb-display); font-weight: 100; text-transform: none; letter-spacing: .005em; color: var(--hb-violet); scroll-margin-top: calc(var(--hb-header-h) + 24px); }
.hb-page .hb-art-body .hb-post-content h2 { font-size: clamp(32px, 3.2vw, 46px); line-height: 1.02; }
.hb-page .hb-art-body .hb-post-content h3 { font-size: clamp(24px, 2.2vw, 30px); line-height: 1.05; }
.hb-page .hb-art-body .hb-post-content ul { list-style: none; padding-left: 0; }
.hb-page .hb-art-body .hb-post-content ul > li { position: relative; padding-left: 24px; }
.hb-page .hb-art-body .hb-post-content ul > li::before { content: ""; position: absolute; left: 4px; top: .7em; width: 8px; height: 8px; border-radius: 50%; background: var(--hb-orange); }
.hb-page .hb-art-body .hb-post-content ol > li::marker { font-weight: 800; color: var(--hb-orange); }
/* share links */
.hb-share { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding-top: 26px; border-top: 1.5px solid rgba(93, 14, 192, .12); }
.hb-share span { margin-right: 6px; font-weight: 800; font-size: 12.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--hb-orange); }
.hb-page .hb-share a { padding: 9px 16px; border: 1.5px solid rgba(93, 14, 192, .25); border-radius: 999px; font-weight: 700; font-size: 14px; color: var(--hb-violet); text-decoration: none; transition: background-color .2s ease, color .2s ease, border-color .2s ease; }
.hb-page .hb-share a:hover { border-color: var(--hb-violet); background: var(--hb-violet); color: var(--hb-cream); }
/* related articles */
.hb-art-related:not(:has(.wp-block-post-template)) { display: none; }
.hb-art-related .hb-head { margin-bottom: 36px !important; }
/* reading progress */
@supports (animation-timeline: scroll()) {
	body.single-post::before { content: ""; position: fixed; top: 0; left: 0; right: 0; z-index: 100000; height: 4px; background: linear-gradient(90deg, var(--hb-orange), var(--hb-orange-2)); transform-origin: 0 50%; transform: scaleX(0); animation: hb-progress linear both; animation-timeline: scroll(root); pointer-events: none; }
	@keyframes hb-progress { to { transform: scaleX(1); } }
}
@media (max-width: 1024px) {
	.hb-art-hero-grid { grid-template-columns: minmax(0, 1fr); }
	.hb-art-hero-img { max-width: 560px; }
	.hb-art-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "side" "body"; gap: 28px; }
	.hb-art-side-inner { position: static; }
	.hb-side-quote { display: none; }
	.hb-toc { padding: 16px 18px; border: 1.5px solid rgba(93, 14, 192, .14); border-radius: 18px; background: var(--hb-cream); }
	.hb-page .hb-toc a[aria-current="true"]::before { display: none; }
}
@media (max-width: 781px) {
	.hb-art-meta { gap: 8px 16px; }
	.hb-art-dot { display: none; }
	.hb-art-hero-img::before { inset: 12px -8px -8px 12px; }
	.hb-page .hb-art-body .hb-post-content > p:first-child { font-size: 19px; }
}

/* ---------- polish (site-wide review) ---------- */
/* a word longer than its column breaks instead of running past the edge (Finnish compound words) */
.hb-page :is(h1, h2, h3, h4).hb-display, .hb-page .hb-tpl-title, .hb-page .hb-svc-card h3.hb-svc, .hb-page .hb-fcard h3 { overflow-wrap: break-word; hyphens: auto; -webkit-hyphens: auto; }
.hb-page .hb-qtext { overflow-wrap: break-word; }
/* a text-and-photo block without a photo uses one column */
.hb-split:not(:has(.hb-split-media, .hb-guide-book, .hb-split-side)) { grid-template-columns: minmax(0, 880px); }
/* a split whose right side is a stack of cards (e.g. PU floor coating) */
.hb-split.hb-split-cards { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: start; }
.hb-split-side { display: grid !important; gap: 18px; }
/* something under a split (e.g. a topic card under the photo) gets air, also past the orange photo backdrop */
.hb-sec > .hb-wrap > .hb-split + :is(.hb-fcard, .hb-cards) { margin-top: clamp(56px, 6vw, 84px) !important; }
/* pill links never underlined */
.hb-page ul.hb-links a, .hb-page ul.hb-links a:hover { text-decoration: none !important; }
/* the heading above the flipbook guide */
.hb-page .hb-embed > h3 { font-family: var(--hb-display); font-weight: 100; font-size: clamp(24px, 2.2vw, 30px); line-height: 1.05; letter-spacing: .005em; text-transform: uppercase; color: var(--hb-violet); }
/* the job application form's upload note */
.hb-form .mtb-form-field p { font-family: var(--hb-body); font-size: 13px; line-height: 1.5; color: var(--hb-lav); }
/* the home stats label with the long word */
.hb-stat .hb-lbl { overflow-wrap: break-word; hyphens: auto; }
@media (max-width: 1024px) {
	.hb-nums--4 { --cols: 2; }
}
@media (max-width: 781px) {
	.hb-page :is(.hb-head, .hb-split-text, .hb-faq-side, .hb-pa-price) h2.hb-display { font-size: clamp(28px, 8.4vw, 40px); }
	.hb-page .hb-hero--page .hb-hero-title { font-size: clamp(34px, 10vw, 56px); }
	.hb-nums--4 { --cols: 1; }
}

/* ---------- line spacing for Ä, Ö and Å in the display font ----------
   At line-height .94 the dots of Ä/Ö touch the letters of the line above; 1.06 leaves a clear gap. */
.hb-page :is(.hb-display, .hb-tpl-title, .hb-mission-quote, .hb-qtext, .hb-charm-text h3, .hb-text > h3, .hb-fcard h3, .hb-flow li strong,
	.hb-pa-areas h3, .hb-video h3, .hb-embed > h3, .hb-side-quote__title, .hb-help-text h3, .mtb-article-cta__title),
.hb-page .hb-svc-card h3.hb-svc,
.hb-page .hb-form h3.hb-form-title,
.hb-page .hb-post-content :is(h2, h3) { line-height: 1.06; }
.hb-page .hb-mission-quote, .hb-page .hb-qtext { line-height: 1.12; }

/* service cards: the text always starts below the icon and arrow chips, however long the description */
.hb-svc-grid .hb-svc-card { padding-top: 96px; min-height: 320px; }
@media (max-width: 781px) {
	.hb-svc-grid .hb-svc-card { padding-top: 64px; min-height: 230px; }
	/* the services page has longer descriptions: one card per row */
	.hb-page .hb-svc-grid.hb-svc-grid--long { grid-template-columns: minmax(0, 1fr); }
	.hb-page .hb-svc-grid--long .hb-svc-card { min-height: 260px; padding: 72px 20px 22px; }
	.hb-page .hb-svc-grid--long .hb-svc-card h3.hb-svc { font-size: 28px; }
	.hb-svc-grid--long .hb-svc-card .hb-svc-desc { font-size: 15px; hyphens: manual; }
}

/* ---------- job page: benefits section ---------- */
.hb-job .hb-split { margin-bottom: clamp(56px, 7vw, 96px) !important; }
.hb-job { padding-bottom: clamp(56px, 6vw, 80px); }
.hb-job + .hb-sec { padding-top: clamp(56px, 6vw, 80px); }
.hb-job .hb-split-text .hb-lead { font-weight: 600; font-size: clamp(18px, 1.5vw, 21px); line-height: 1.55; color: var(--hb-violet); }
.hb-job .hb-split-media img { aspect-ratio: 4 / 3; }
.hb-job .wp-block-buttons { margin-top: 14px !important; }
.hb-job-cards .hb-head { margin-bottom: 28px !important; }
.hb-job-cards .hb-head h2.hb-display { font-size: clamp(34px, 3.6vw, 54px); }
/* outline button on light backgrounds */
.hb-page :is(.hb-tone-cream, .hb-tone-white) .hb-ghost .wp-block-button__link { background: transparent; border-color: rgba(93, 14, 192, .35); color: var(--hb-violet); }
.hb-page :is(.hb-tone-cream, .hb-tone-white) .hb-ghost .wp-block-button__link:is(:hover, :focus-visible) { background: var(--hb-violet); border-color: var(--hb-violet); color: var(--hb-cream); }
/* help strip: questions → phone and email */
.hb-help {
	display: grid !important;
	grid-template-columns: minmax(0, 1fr) auto;
	grid-template-areas: "text btns" "links links";
	gap: 18px 40px;
	align-items: center;
	margin-top: clamp(40px, 5vw, 64px) !important;
	padding: clamp(26px, 3vw, 40px);
	border-radius: 28px;
	background: radial-gradient(100% 140% at 100% 0%, rgba(244, 105, 15, .24), rgba(244, 105, 15, 0) 60%), linear-gradient(160deg, var(--hb-bg), var(--hb-bg-3));
	color: var(--hb-lav);
}
.hb-help > * { margin: 0 !important; min-width: 0; }
.hb-help-text { grid-area: text; display: grid !important; gap: 8px; }
.hb-help-text > * { margin: 0 !important; }
.hb-page .hb-help-text h3 { font-family: var(--hb-display); font-weight: 100; font-size: clamp(30px, 3vw, 44px); text-transform: uppercase; color: var(--hb-cream); }
.hb-help-text p { font-size: 16.5px; line-height: 1.55; color: var(--hb-lav); }
.hb-help-btns { grid-area: btns; flex-wrap: nowrap !important; }
.hb-page .hb-help-btns .wp-block-button__link { gap: 10px; }
.hb-page .hb-help-btns .wp-block-button__link::before { content: ""; width: 18px; height: 18px; flex: none; background: currentcolor; -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat; }
.hb-page .hb-help-tel .wp-block-button__link { --ico: url("../icons/phone-alt.svg"); }
.hb-page .hb-help-mail .wp-block-button__link { --ico: url("../icons/envelope.svg"); background: transparent; border-color: rgba(217, 198, 248, .45); color: var(--hb-cream); }
.hb-page .hb-help-mail .wp-block-button__link:is(:hover, :focus-visible) { background: var(--hb-cream); border-color: var(--hb-cream); color: var(--hb-violet); }
.hb-help .hb-links { grid-area: links; padding-top: 18px; border-top: 1px solid rgba(217, 198, 248, .16); }
.hb-page .hb-tone-cream .hb-help .hb-links a { border-color: rgba(217, 198, 248, .4); color: var(--hb-cream); }
.hb-page .hb-tone-cream .hb-help .hb-links a::after { color: var(--hb-orange-2); }
.hb-page .hb-tone-cream .hb-help .hb-links a:is(:hover, :focus-visible) { border-color: var(--hb-orange); background: var(--hb-orange); color: var(--hb-bg-3); }
.hb-page .hb-tone-cream .hb-help .hb-links a:is(:hover, :focus-visible)::after { color: var(--hb-bg-3); }
@media (max-width: 1024px) {
	.hb-help { grid-template-columns: minmax(0, 1fr); grid-template-areas: "text" "btns" "links"; }
}
@media (max-width: 781px) {
	.hb-help-btns { flex-direction: column; align-items: stretch !important; }
	.hb-page .hb-help-btns .wp-block-button__link { justify-content: center; width: 100%; }
	.hb-job .wp-block-buttons:not(.hb-help-btns) { flex-direction: column; align-items: stretch; }
	.hb-job .wp-block-buttons:not(.hb-help-btns) .wp-block-button__link { justify-content: center; width: 100%; }
}

/* ---------- "Know your rights" guide: text left, the guide's cover right ---------- */
.hb-page .hb-split.hb-guide { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: center; }
.hb-guide .hb-split-text .hb-lead { font-weight: 600; font-size: clamp(18px, 1.5vw, 21px); line-height: 1.55; color: var(--hb-violet); }
.hb-guide .hb-text > p:not(.hb-lead) { margin-top: 6px !important; }
.hb-guide .wp-block-buttons { margin-top: 10px !important; }
.hb-guide-book {
	position: relative;
	isolation: isolate;
	display: grid !important;
	justify-items: center;
	gap: 22px;
	padding: clamp(40px, 5vw, 64px) 24px clamp(30px, 4vw, 44px);
	border-radius: 32px;
	background: radial-gradient(90% 80% at 80% 10%, rgba(255, 139, 61, .35), rgba(255, 139, 61, 0) 60%), linear-gradient(150deg, var(--hb-violet), var(--hb-bg-3));
	overflow: hidden;
}
.hb-guide-book > * { margin: 0 !important; }
/* a soft orange disc behind the book */
.hb-guide-book::before { content: ""; position: absolute; z-index: -1; top: 50%; left: 50%; width: 78%; aspect-ratio: 1; border-radius: 50%; background: var(--hb-orange); opacity: .9; transform: translate(-50%, -56%); }
.hb-page .hb-guide-book .df-popup-thumb { display: block; width: min(250px, 62%) !important; min-width: 0; margin: 0 auto !important; cursor: pointer; transform: rotate(-4deg); transition: transform .4s cubic-bezier(.2, .9, .3, 1.3); }
.hb-page .hb-guide-book .df-popup-thumb:hover { transform: rotate(0deg) translateY(-6px); }
.hb-page .hb-guide-book .df-book-wrapper { box-shadow: 0 30px 50px -10px rgba(20, 0, 50, .55); border-radius: 4px 10px 10px 4px; }
.hb-page .hb-guide-book .df-book-cover { border-radius: 4px 10px 10px 4px; }
.hb-page .hb-guide-book .df-book-title { display: none; }
.hb-page .hb-guide-book .hb-guide-caption { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 999px; background: rgba(42, 5, 96, .55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); font-weight: 700; font-size: 14px; color: var(--hb-cream); }
.hb-page .hb-guide-book .hb-guide-caption::before { content: "☝"; font-size: 15px; }
@media (max-width: 1024px) {
	.hb-page .hb-split.hb-guide { grid-template-columns: minmax(0, 1fr); }
	.hb-guide-book { max-width: 560px; }
}
@media (max-width: 781px) {
	.hb-guide .wp-block-buttons { flex-direction: column; align-items: stretch; }
	.hb-guide .wp-block-button__link { justify-content: center; width: 100%; }
	.hb-page .hb-guide-book .df-popup-thumb { width: min(240px, 70%) !important; }
}

/* ---------- layout: headings and text without a photo ---------- */
/* long display headings (60+ characters) are set smaller */
.hb-page h2.hb-display.hb-display--long { font-size: clamp(32px, 3.3vw, 50px); }
.hb-page .hb-split-text h2.hb-display.hb-display--long { font-size: clamp(30px, 2.9vw, 44px); }
/* text never runs the full page width */
.hb-sec > .hb-wrap > .hb-text, .hb-sec > .hb-wrap > .hb-text.hb-flow-foot { max-width: 860px; }
/* short heading + text: heading on the left, text on the right */
.hb-sec--side > .hb-wrap { display: grid !important; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(40px, 6vw, 96px); align-items: start; }
.hb-sec--side > .hb-wrap > * { grid-column: 1 / -1; min-width: 0; }
.hb-sec--side > .hb-wrap > .hb-head:first-child { grid-column: 1; margin-bottom: 0 !important; }
.hb-sec--side > .hb-wrap > .hb-head:first-child + .hb-text { grid-column: 2; max-width: 720px; padding-top: 34px; }
.hb-sec--side > .hb-wrap > .hb-head:first-child + .hb-text ~ * { margin-top: clamp(40px, 5vw, 64px) !important; }
/* a single card after the text stays in the text column */
.hb-sec--side > .hb-wrap > .hb-head:first-child + .hb-text + .hb-fcard:last-child { grid-column: 2; max-width: 720px; margin-top: 28px !important; }
.hb-sec--side .hb-head h2.hb-display { font-size: clamp(34px, 3.3vw, 50px); }
/* buttons right after the text stay in the text column */
.hb-sec--side > .hb-wrap > .hb-head:first-child + .hb-text + .wp-block-buttons { grid-column: 2; margin-top: 26px !important; }
/* long heading + text: heading across the top, text in two columns */
.hb-sec--stack > .hb-wrap > .hb-head:first-child { max-width: 1080px; }
.hb-sec--stack > .hb-wrap > .hb-head:first-child + .hb-text { display: block !important; max-width: none; column-count: 2; column-gap: clamp(40px, 5vw, 72px); }
.hb-sec--stack > .hb-wrap > .hb-head:first-child + .hb-text > * { margin: 0 0 16px !important; break-inside: avoid; }
.hb-sec--stack > .hb-wrap > .hb-head:first-child + .hb-text > :is(ol, ul) { break-inside: auto; }
.hb-sec--stack > .hb-wrap > .hb-head:first-child + .hb-text li { break-inside: avoid; }
.hb-sec--stack > .hb-wrap > .hb-head:first-child + .hb-text ~ * { margin-top: clamp(36px, 4vw, 56px) !important; }
@media (max-width: 1024px) {
	.hb-sec--side > .hb-wrap { display: block !important; }
	.hb-sec--side > .hb-wrap > .hb-head:first-child { margin-bottom: 28px !important; }
	.hb-sec--side > .hb-wrap > .hb-head:first-child + .hb-text { padding-top: 0; }
	.hb-sec--stack > .hb-wrap > .hb-head:first-child + .hb-text { column-count: 1; }
}

/* ---------- section headings above card grids, steps and service cards: centred ---------- */
.hb-sec > .hb-wrap > .hb-head:first-child:has(+ :is(.hb-cards, ol.hb-flow, .hb-svc-grid, .hb-nums, .hb-quotes, .hb-videos, .hb-logo-grid)),
.hb-job-cards > .hb-head {
	justify-items: center;
	max-width: 1040px;
	margin-inline: auto !important;
	text-align: center;
}
.hb-sec > .hb-wrap > .hb-head:first-child:has(+ :is(.hb-cards, ol.hb-flow, .hb-svc-grid, .hb-nums, .hb-quotes, .hb-videos, .hb-logo-grid)) > .hb-label::after,
.hb-job-cards > .hb-head > .hb-label::after { content: ""; width: 22px; height: 2px; margin-left: -.22em; background: var(--hb-orange); flex: none; }
.hb-sec > .hb-wrap > .hb-head:first-child:has(+ :is(.hb-cards, ol.hb-flow, .hb-svc-grid, .hb-nums, .hb-quotes, .hb-videos, .hb-logo-grid)) .hb-lead { margin-inline: auto; }
.hb-sec > .hb-wrap > .hb-head:first-child:has(+ :is(.hb-cards, ol.hb-flow, .hb-svc-grid, .hb-nums, .hb-quotes, .hb-videos, .hb-logo-grid)) h2.hb-display { text-wrap: balance; }
/* the buttons under the steps follow the centred heading */
.hb-sec > .hb-wrap > ol.hb-flow ~ .wp-block-buttons.hb-flow-foot { justify-content: center; }

/* ---------- text cards (light sections): white card, top accent, icon, calmer type ---------- */
.hb-page :is(.hb-tone-cream, .hb-tone-white) .hb-fcard {
	position: relative;
	gap: 14px;
	padding: 34px 32px 36px;
	border: 1px solid rgba(93, 14, 192, .09);
	border-radius: 26px;
	background: linear-gradient(var(--hb-orange), var(--hb-orange)) 32px 0 / 56px 4px no-repeat, #fff;
	box-shadow: 0 24px 48px -30px rgba(46, 7, 99, .35);
}
.hb-page .hb-tone-white .hb-fcard { background: linear-gradient(var(--hb-orange), var(--hb-orange)) 32px 0 / 56px 4px no-repeat, linear-gradient(180deg, #f8f4ff 0%, #fff 55%); }
.hb-page :is(.hb-tone-cream, .hb-tone-white) .hb-fcard:hover { transform: translateY(-4px); border-color: rgba(93, 14, 192, .16); }
.hb-page :is(.hb-tone-cream, .hb-tone-white) .hb-fcard::before { width: 34px; height: 34px; margin-bottom: 2px; }
.hb-page :is(.hb-tone-cream, .hb-tone-white) .hb-fcard h3 { font-size: clamp(24px, 1.9vw, 29px); line-height: 1.06; color: var(--hb-violet); }
.hb-page :is(.hb-tone-cream, .hb-tone-white) .hb-fcard p { font-size: 15.5px; line-height: 1.65; color: #4a3375; }
.hb-page .hb-fcard ul.hb-checks { gap: 10px; margin-top: 2px !important; }
.hb-page .hb-fcard .hb-checks li { padding-left: 30px; font-weight: 500; font-size: 15.5px; line-height: 1.55; color: #3f2b67; }
.hb-page .hb-fcard .hb-checks li::before { top: .15em; width: 20px; height: 20px; }
.hb-page .hb-fcard .hb-checks li::after { left: 4px; top: calc(.15em + 4px); width: 12px; height: 12px; }
.hb-page :is(.hb-tone-cream, .hb-tone-white) .hb-fcard a:not(.wp-block-button__link) { font-weight: 700; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.hb-page .hb-fcard .hb-links { margin-top: 4px !important; }

/* ---------- price + service areas (and other area sections): dark violet instead of orange ---------- */
.hb-price-sec { --ico-pin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s7-6.2 7-12a7 7 0 0 0-14 0c0 5.8 7 12 7 12z'/%3E%3Ccircle cx='12' cy='9' r='2.6'/%3E%3C/svg%3E"); background: radial-gradient(60% 90% at 100% 0%, rgba(244, 105, 15, .22), rgba(244, 105, 15, 0) 60%), linear-gradient(160deg, #3a0a84 0%, var(--hb-bg-3) 100%); }
.hb-price-sec .hb-pa-price h2.hb-display { color: var(--hb-cream); }
.hb-price-sec .hb-text p { color: var(--hb-lav); }
.hb-price-sec .hb-checks li { color: var(--hb-cream); }
/* the service-area card: light, so it stands apart from the dark section */
.hb-page .hb-price-sec .hb-pa-areas { background: #fff; color: #4a3375; box-shadow: 0 30px 60px -30px rgba(10, 0, 30, .6); }
.hb-page .hb-price-sec .hb-pa-areas h3 { display: flex; align-items: center; gap: 12px; color: var(--hb-violet); }
.hb-page .hb-price-sec .hb-pa-areas h3::before { content: ""; width: 26px; height: 26px; flex: none; background: var(--hb-orange); -webkit-mask: var(--ico-pin) center / contain no-repeat; mask: var(--ico-pin) center / contain no-repeat; }
.hb-page .hb-price-sec .hb-pa-areas p { color: #4a3375; }
.hb-page .hb-sec.hb-price-sec .hb-pa-areas .hb-links a { border-color: rgba(93, 14, 192, .3); color: var(--hb-violet); }
.hb-page .hb-sec.hb-price-sec .hb-pa-areas .hb-links a::after { color: var(--hb-orange); }
.hb-page .hb-sec.hb-price-sec .hb-pa-areas .hb-links a:is(:hover, :focus-visible) { border-color: var(--hb-violet); background: var(--hb-violet); color: var(--hb-cream); }
.hb-page .hb-sec.hb-price-sec .hb-pa-areas .hb-links a:is(:hover, :focus-visible)::after { color: var(--hb-orange-2); }
/* pills directly in the section (no card) */
.hb-page .hb-price-sec > .hb-wrap > .hb-links a { border-color: rgba(217, 198, 248, .4); color: var(--hb-cream); }
.hb-page .hb-price-sec > .hb-wrap > .hb-links a:is(:hover, :focus-visible) { border-color: var(--hb-orange); background: var(--hb-orange); color: var(--hb-bg-3); }

/* hero: direct line for urgent work (Erikoissiivous) */
.hb-page p.hb-hero-urgent { position: relative; margin-top: 16px !important; padding-left: 28px; font-size: 15px; font-weight: 600; line-height: 1.5; color: var(--hb-lav); }
.hb-page p.hb-hero-urgent::before { content: ""; position: absolute; left: 0; top: 2px; width: 18px; height: 18px; background: var(--hb-orange-2); -webkit-mask: var(--ico-phone) center / contain no-repeat; mask: var(--ico-phone) center / contain no-repeat; }
.hb-page .hb-hero-urgent a { color: var(--hb-cream); font-weight: 800; text-decoration: underline; text-decoration-color: var(--hb-orange-2); text-underline-offset: 4px; text-decoration-thickness: 2px; white-space: nowrap; }
.hb-page { --ico-phone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%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.9.4 1.8.7 2.7a2 2 0 0 1-.5 2.1L8 9.8a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.9.3 1.8.6 2.7.7a2 2 0 0 1 1.7 2z'/%3E%3C/svg%3E"); }

/* chips inside a light card (e.g. floor materials) */
.hb-page .hb-fcard ul.hb-chips { margin: 4px 0 0 !important; gap: 8px; }
.hb-page .hb-fcard .hb-chips li { padding: 7px 13px; border-color: rgba(93, 14, 192, .2); background: #f6f1ff; -webkit-backdrop-filter: none; backdrop-filter: none; font-size: 13.5px; color: var(--hb-ink); }
.hb-page .hb-fcard .hb-chips li::before { display: none; }

/* a photo as one tile of a card grid */
.hb-page .hb-cards > figure.hb-cards-photo { position: relative; margin: 0 !important; min-height: 260px; overflow: hidden; border-radius: 26px; box-shadow: 0 24px 48px -30px rgba(46, 7, 99, .35); }
.hb-page .hb-cards > figure.hb-cards-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hb-page .hb-cards--2 > figure.hb-cards-photo:first-child:nth-last-child(4) { min-height: 300px; }

/* customer logos as a calm static grid (campaign page) */
.hb-page .hb-logo-grid { display: grid !important; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.hb-page .hb-logo-grid > figure { display: grid; place-items: center; margin: 0 !important; min-height: 124px; padding: 22px 26px; border: 1px solid rgba(93, 14, 192, .09); border-radius: 22px; background: #fff; box-shadow: 0 20px 40px -32px rgba(46, 7, 99, .35); }
.hb-page .hb-logo-grid img { width: 100%; max-width: 156px; height: 66px; object-fit: contain; }

/* five cards in a three-column grid: 3 + 2 with the last two wider, so no slot is left empty */
.hb-cards.hb-cards--3:has(> :nth-child(5):last-child) { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.hb-cards.hb-cards--3:has(> :nth-child(5):last-child) > * { grid-column: span 2; }
.hb-cards.hb-cards--3:has(> :nth-child(5):last-child) > :nth-child(n+4) { grid-column: span 3; }
/* a single card sits centred under its centred heading */
.hb-page .hb-cards.hb-cards--1 { width: 100%; max-width: 880px; margin-inline: auto; }

/* in-page jumps (e.g. "Näin työskentelemme ↓") stop below the fixed header */
.hb-page :is(section, div)[id] { scroll-margin-top: 56px; }

/* a call-to-action band right after a section continues it: no second band of padding above the card */
.hb-sec + .hb-band { padding-top: 0; }

/* links inside the quote section's lead (e.g. the urgent line) */
.hb-page .hb-cta-intro .hb-lead a { font-weight: 800; color: var(--hb-violet); text-decoration: underline; text-decoration-color: var(--hb-orange); text-underline-offset: 4px; text-decoration-thickness: 2px; white-space: nowrap; }

/* small proof figures under a split's text (campaign page) */
.hb-page .hb-mini-stats { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 10px !important; }
.hb-page .hb-mini-stats > p { display: grid; gap: 4px; margin: 0 !important; padding: 16px 18px; border-left: 3px solid var(--hb-orange); border-radius: 4px 14px 14px 4px; background: #fff; font-size: 13.5px; line-height: 1.35; color: #4a3375; box-shadow: 0 16px 32px -26px rgba(46, 7, 99, .4); }
.hb-page .hb-mini-stats strong { font-family: var(--hb-display); font-weight: 100; font-size: clamp(26px, 2.4vw, 34px); line-height: 1; letter-spacing: .01em; color: var(--hb-violet); }

/* contact page: the contact tiles sit right under the hero, and the staff list follows them closely */
.hb-page .hb-sec.hb-contact-tiles { padding: 8px 0 clamp(48px, 5vw, 72px); }
.hb-page .hb-sec.hb-people-sec { padding: clamp(56px, 6vw, 88px) 0; }
.hb-page .hb-sec.hb-people-sec + .hb-cta { margin-top: 0 !important; }

/* a service grid whose last card is alone on its row: that card spans the whole row (e.g. 7 services in 3 columns) */
.hb-page .hb-svc-grid > .hb-svc-card:last-child:nth-child(3n+1) { grid-column: 1 / -1; min-height: 0; }
.hb-page .hb-svc-grid > .hb-svc-card:last-child:nth-child(3n+1) .hb-svc-photo img { object-position: center 55%; }

/* the homepage promo popup in the site's style (client 22.10.2026: "pop bannerin liila … yhtenäinen"): dark violet card
   with an orange glow, display heading, orange pill button */
.mtb-popup--promo .mtb-popup__panel.mtb-popup__panel {
	overflow: hidden;
	padding: clamp(34px, 5vw, 56px) clamp(24px, 5vw, 60px) clamp(36px, 5vw, 52px) !important;
	border: 1px solid rgba(217, 198, 248, .18);
	border-radius: 30px !important;
	border-color: rgba(217, 198, 248, .26);
	background:
		radial-gradient(55% 80% at 100% 0%, rgba(244, 105, 15, .26), rgba(244, 105, 15, 0) 62%),
		radial-gradient(50% 70% at 0% 100%, rgba(93, 14, 192, .38), rgba(93, 14, 192, 0) 70%),
		linear-gradient(160deg, rgba(58, 10, 132, .62) 0%, rgba(42, 5, 96, .74) 100%) !important;
	/* frosted glass: the page shows through, blurred */
	-webkit-backdrop-filter: blur(26px) saturate(1.5);
	backdrop-filter: blur(26px) saturate(1.5);
	box-shadow: 0 40px 90px -30px rgba(10, 0, 30, .7), inset 0 1px 0 rgba(255, 255, 255, .14);
	color: #fbf8ec;
}
.mtb-popup--promo .mtb-popup__panel::after { content: ""; position: absolute; right: -90px; bottom: -120px; width: 280px; height: 280px; border-radius: 50%; border: 2px solid rgba(255, 139, 61, .25); pointer-events: none; }
.mtb-popup--promo .mtb-popup__content { position: relative; z-index: 1; }
.mtb-popup--promo .mtb-popup__content h2.wp-block-heading {
	margin: 0 !important;
	font-family: "Cru", var(--hb-display, sans-serif) !important;
	font-weight: 100 !important;
	font-size: clamp(30px, 4vw, 46px) !important;
	line-height: 1.04 !important;
	letter-spacing: .005em !important;
	text-transform: uppercase;
	text-wrap: balance;
	color: #fbf8ec !important;
}
.mtb-popup--promo .mtb-popup__content p { margin: 0 !important; font-family: "Hanken Grotesk", sans-serif; font-size: 16.5px; line-height: 1.6; color: #d9c6f8 !important; }
.mtb-popup--promo .mtb-popup__content .wp-block-buttons { justify-content: center; }
.mtb-popup--promo .mtb-popup__content .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 17px 32px !important;
	border: 0 !important;
	border-radius: 999px !important;
	font-family: "Hanken Grotesk", sans-serif !important;
	font-weight: 800 !important;
	font-size: 16px !important;
	line-height: 1.2 !important;
	letter-spacing: normal !important;
	text-transform: none !important;
	color: #fbf8ec !important;
	background: #f4690f !important;
	transition: transform .25s cubic-bezier(.2, .9, .3, 1.4), background-color .2s ease;
}
.mtb-popup--promo .mtb-popup__content .wp-block-button__link::after { content: "→"; transition: transform .25s ease; }
.mtb-popup--promo .mtb-popup__content .wp-block-button__link:is(:hover, :focus-visible) { transform: translateY(-2px); background: #ff8b3d !important; }
.mtb-popup--promo .mtb-popup__content .wp-block-button__link:is(:hover, :focus-visible)::after { transform: translateX(4px); }
.mtb-popup--promo .mtb-popup__close { color: #fbf8ec !important; }

/* footer links: on hover the underline draws in from the left instead of appearing at once */
footer.wp-block-template-part :is(.wp-block-navigation-item__label, a:not(.wp-block-button__link):not(:has(img)):not(.wp-block-navigation-item__content)) {
	text-decoration: none !important;
	background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 0 1.5px;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
	padding-bottom: 2px;
	transition: background-size .35s cubic-bezier(.2, .8, .2, 1);
}
footer.wp-block-template-part a { text-decoration: none !important; }
footer.wp-block-template-part :is(a:is(:hover, :focus-visible) .wp-block-navigation-item__label, a:not(.wp-block-button__link):not(:has(img)):not(.wp-block-navigation-item__content):is(:hover, :focus-visible)) { background-size: 100% 1.5px; }
@media (prefers-reduced-motion: reduce) {
	footer.wp-block-template-part :is(.wp-block-navigation-item__label, a) { transition: none; }
}

/* ---------- responsive ---------- */
@media (max-width: 1024px) {
	.hb-page .hb-svc-grid > .hb-svc-card:last-child:nth-child(3n+1) { grid-column: auto; }
	.hb-page .hb-svc-grid:not(.hb-svc-grid--long) > .hb-svc-card:last-child:nth-child(odd) { grid-column: 1 / -1; }
	.hb-cards.hb-cards--3:has(> :nth-child(5):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.hb-cards.hb-cards--3:has(> :nth-child(5):last-child) > *, .hb-cards.hb-cards--3:has(> :nth-child(5):last-child) > :nth-child(n+4) { grid-column: auto; }
	.hb-cards.hb-cards--3:has(> :nth-child(5):last-child) > :nth-child(5), .hb-page .hb-cards--3:not(:has(> .hb-cards-photo)) > :last-child:nth-child(odd) { grid-column: 1 / -1; }
	.hb-page .hb-logo-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
	.hb-page .hb-logo-grid > figure { min-height: 96px; padding: 14px; }
	.hb-page .hb-logo-grid img { height: 50px; }
	.hb-split.hb-split-cards { grid-template-columns: minmax(0, 1fr); }
	.hb-page .hb-cards--3 > figure.hb-cards-photo:first-child:nth-last-child(3) { grid-column: 1 / -1; min-height: 0; aspect-ratio: 16 / 7; }
	.hb-stat { padding: 32px 20px 36px; column-gap: 14px; }
	.hb-stat::before { width: 44px; height: 44px; }
	.hb-stat .hb-big { font-size: clamp(40px, 5.4vw, 56px); }
	.hb-stat .hb-lbl { font-size: 13px; }
	/* the band gets the full width; the sticker moves just below it */
	.hb-tilt-row { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 44px; padding: 0 40px; }
	.hb-tiltband p { font-size: 18px; }
	.hb-tiltband p:nth-child(odd)::before { content: none; }
	.hb-stats > .hb-sticker { top: -40px; right: 24px; width: 104px; height: 104px; }
	.hb-tiltband:has(+ .hb-stats > .hb-sticker) .hb-tilt-row { padding-right: 170px; }
	/* "Miksi MTB": the three points become a swipeable row of cards */
	.hb-charm-list {
		grid-template-columns: none;
		grid-auto-flow: column;
		grid-auto-columns: min(76%, 400px);
		gap: 16px;
		margin-inline: -48px;
		padding: 4px 48px 18px;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
		scroll-padding-inline: 48px;
		scrollbar-width: none;
		border-block: 0;
	}
	.hb-charm-list::-webkit-scrollbar { display: none; }
	.hb-charm-row,
	.hb-charm-row:first-child,
	.hb-charm-row:last-child,
	.hb-charm-row + .hb-charm-row { padding: 28px 26px 30px; border: 1.5px solid rgba(93, 14, 192, .2); border-radius: 24px; background: #fff; scroll-snap-align: start; }
	.hb-news .wp-block-post-template { grid-template-columns: 1fr 1fr; }
	.hb-svc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.hb-mission-grid { grid-template-columns: 1fr; }
	.hb-qmark { display: none; }
	.hb-voices-grid { grid-template-columns: minmax(0, 1fr); }
	.hb-cta-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767px) {
	body.mtb-hb { --hb-header-h: 107.6px; }
}
@media (max-width: 781px) {
	/* the chatbot button (48px, 14px from the bottom right, mtb.fi) gets its own slot at the end of the call bar */
	body.mtb-hb:has(#chat-widget) .mtb-mobile-bar { padding-right: 72px; }
	.hb-page .hb-svc-grid > .hb-svc-card:last-child:nth-child(3n+1) { grid-column: auto; }
	.hb-page .hb-svc-grid:not(.hb-svc-grid--long) > .hb-svc-card:last-child:nth-child(odd) { grid-column: 1 / -1; }
	.hb-cards.hb-cards--3:has(> :nth-child(5):last-child) { grid-template-columns: minmax(0, 1fr); }
	.hb-page .hb-logo-grid > figure { min-height: 82px; padding: 12px 14px; }
	.hb-page .hb-logo-grid img { height: 44px; }
	.hb-band-grid::after { display: none; }
	.hb-page .hb-svc-grid:not(.hb-svc-grid--long) .hb-svc-card h3.hb-svc { font-size: 19px; letter-spacing: 0; }
	.hb-page .hb-mini-stats { grid-template-columns: minmax(0, 1fr); gap: 8px; }
	.hb-page .hb-mini-stats > p { grid-template-columns: auto 1fr; align-items: center; gap: 12px; padding: 12px 16px; }
	.hb-page .hb-logo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
	.hb-page .hb-cards > figure.hb-cards-photo:first-child:nth-last-child(n) { min-height: 0; aspect-ratio: 16 / 10; }
	.hb-wrap { width: calc(100% - 40px); }
	.hb-hero { min-height: 92svh; padding-bottom: 110px; }
	.hb-hero-badges { display: none !important; }
	.hb-hero-sub { font-size: 17px; }
	.hb-hero .wp-block-buttons { flex-direction: column; align-items: stretch; }
	.hb-hero .wp-block-button__link { justify-content: center; width: 100%; }
	.hb-tilt-row { grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 0 20px; }
	.hb-tiltband { padding: 16px 0; }
	.hb-tiltband p { font-size: 14.5px; }
	.hb-tiltband p + p::before { content: none; }
	.hb-stats { padding: 52px 0 40px; }
	.hb-stats > .hb-sticker { width: 88px; height: 88px; top: -4px; right: 16px; }
	.hb-tiltband:has(+ .hb-stats > .hb-sticker) .hb-tilt-row { padding-right: 20px; }
	.hb-stats-grid { grid-template-columns: 1fr; }
	.hb-stat { padding: 26px 6px 28px; }
	.hb-stat + .hb-stat { border-left: 0; }
	.hb-charm, .hb-services, .hb-voices { padding: 80px 0; }
	.hb-charm-list { grid-auto-columns: 84%; gap: 12px; margin-top: 40px !important; margin-inline: -20px; padding-inline: 20px; scroll-padding-inline: 20px; }
	.hb-charm-row,
	.hb-charm-row:first-child,
	.hb-charm-row:last-child,
	.hb-charm-row + .hb-charm-row { padding: 24px 22px 26px; }
	.hb-charm-row .hb-num { font-size: 52px; }
	.hb-charm-art img { height: 104px; }
	.hb-svc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
	.hb-svc-card { min-height: 220px; gap: 6px; padding: 16px; border-radius: 20px; }
	.hb-svc-card::after { top: 14px; right: 14px; width: 34px; height: 34px; font-size: 16px; }
	.hb-page .hb-svc-card h3.hb-svc::before { top: 16px; left: 16px; width: 30px; height: 30px; }
	.hb-page .hb-svc-card h3.hb-svc { font-size: clamp(15px, calc((50vw - 50px) / 7.2), 20px); }
	.hb-svc-card .hb-svc-desc { font-size: 13px; line-height: 1.4; overflow-wrap: anywhere; hyphens: auto; }
	.hb-mission { padding: 90px 0; }
	.hb-mission-art { margin-top: 20px; }
	.hb-mission-art .hb-sticker { right: -18px; top: -30px; width: 96px; height: 96px; }
	.hb-logos { padding: 64px 0; }
	.hb-logos .hb-mq-track > figure { margin-right: 48px !important; }
	.hb-logos img { width: 150px; height: 60px; }
	.hb-news { padding: 80px 0 90px; }
	.hb-news .wp-block-post-template { grid-template-columns: minmax(0, 1fr); }
	.hb-cta { padding-bottom: 90px; }
	.hb-bigline { margin-bottom: 64px !important; padding: 22px 20px; }
	.hb-bigline-row { flex-direction: column; }
	.hb-bigline p { font-size: min(9.4vw, 44px); white-space: normal; }
	.hb-bigline p + p::before { content: none; }
	.hb-wipe-btn { left: 14px; bottom: calc(84px + env(safe-area-inset-bottom)); width: 44px; height: 44px; }
	.hb-form .mtb-form__fields { grid-template-columns: minmax(0, 1fr); }
	.hb-form .mtb-form__fields > :is(p.hb-form-note, .mtb-form-field--submit) { grid-column: 1; justify-items: stretch; }
	.hb-form .mtb-form__submit { justify-content: center; width: 100% !important; }
	.hb-cta-contact { gap: 10px; }
	.hb-cta-contact .hb-big-link { flex: 1 1 0; min-width: 0; font-size: 15px; }
	.hb-cta-contact .hb-big-link a { gap: 8px; padding: 14px 12px; }
}