/**
 * Umbra — component & behaviour CSS.
 *
 * Ownership rule: theme.json owns tokens and standard block/element defaults.
 * This file owns only components and behaviour that block supports cannot
 * express (grid geometry, the drawer, submenu overrides, form framing).
 */

:root {
	--umbra-section-y: var(--wp--preset--spacing--70, clamp(4.5rem, 9vw, 7rem));
	--umbra-card-radius: 14px;
	--umbra-card-padding: clamp(1.5rem, 3vw, 2.25rem);
	--umbra-intro: 860px;
	--umbra-measure: 68ch;
	--umbra-nav-collapse: 1080px;
	--umbra-header-h: 76px;
	--umbra-gutter: clamp(1.25rem, 4vw, 2.5rem);
}

/* ---------------------------------------------------------------------------
   1. Layout hygiene
   ------------------------------------------------------------------------ */

/* Gotcha #6 — kill root blockGap so full-width bands sit flush. */
.wp-site-blocks > main,
.wp-site-blocks > footer {
	margin-top: 0;
}

/* Composed pages render sections flush; regular prose pages keep their gaps. */
.umbra-flow > .wp-block-post-content > * {
	margin-block-start: 0;
}

html {
	scroll-behavior: smooth;
}

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

	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		transition-duration: 0.001ms !important;
	}
}

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	overflow-x: hidden;
}

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

:where(a, button, summary, input, textarea, select):focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 3px;
	border-radius: 4px;
}

/* Core prints the block-theme skip link as `.skip-link.screen-reader-text`;
   the selector has to match core's own specificity to restyle its focus state. */
.skip-link.screen-reader-text:focus {
	position: fixed;
	z-index: 999999;
	top: 12px;
	left: 12px;
	padding: 0.75rem 1.25rem;
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--on-accent);
	border-radius: 999px;
	font-weight: 600;
	text-decoration: none;
}

/* Every full-width band shares one vertical rhythm — the design contract. */
.umbra-section {
	padding-top: var(--umbra-section-y);
	padding-bottom: var(--umbra-section-y);
}

.umbra-intro {
	max-width: var(--umbra-intro);
}

.umbra-measure p {
	max-width: var(--umbra-measure);
}

/* ---------------------------------------------------------------------------
   2. Grids — auto-fit (gotcha #5) with zeroed child margins (gotcha #12)
   ------------------------------------------------------------------------ */

.umbra-grid-2,
.umbra-grid-3,
.umbra-grid-4 {
	display: grid;
	align-items: stretch;
	gap: var(--wp--preset--spacing--40);
}

.umbra-grid-2 > *,
.umbra-grid-3 > *,
.umbra-grid-4 > * {
	margin-top: 0 !important;
	margin-block-start: 0 !important;
}

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

@media (max-width: 700px) {
	.umbra-grid-2 {
		grid-template-columns: minmax(0, 1fr);
	}
}

.umbra-grid-3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

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

@media (max-width: 900px) {
	.umbra-grid-3,
	.umbra-grid-4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 560px) {
	.umbra-grid-3,
	.umbra-grid-4 {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ---------------------------------------------------------------------------
   3. Cards
   ------------------------------------------------------------------------ */

.is-style-umbra-card,
.umbra-card {
	background-color: var(--wp--preset--color--surface-raised);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--umbra-card-radius);
	padding: var(--umbra-card-padding);
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--20);
	height: 100%;
}

.is-style-umbra-card-bone,
.umbra-card.is-on-bone {
	background-color: #fff;
	border: 1px solid var(--wp--preset--color--line-bone);
	border-radius: var(--umbra-card-radius);
	padding: var(--umbra-card-padding);
	color: var(--wp--preset--color--ink-dark);
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--20);
	height: 100%;
}

.is-style-umbra-card-bone :where(h2, h3, h4, h5),
.umbra-card.is-on-bone :where(h2, h3, h4, h5) {
	color: var(--wp--preset--color--ink-dark);
}

.is-style-umbra-card-bone p,
.umbra-card.is-on-bone p {
	color: var(--wp--preset--color--ink-dark-muted);
}

.is-style-umbra-card > *,
.umbra-card > *,
.is-style-umbra-card-bone > *,
.umbra-card.is-on-bone > * {
	margin-top: 0;
	margin-block-start: 0;
}

/* A numbered/iconed step marker reused by process and feature grids. */
.umbra-marker {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 50%;
	background: color-mix(in srgb, var(--wp--preset--color--accent) 16%, transparent);
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--accent) 42%, transparent);
	color: var(--wp--preset--color--accent);
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.125rem;
	line-height: 1;
	margin-bottom: var(--wp--preset--spacing--20);
}

/* ---------------------------------------------------------------------------
   4. Media framing — the library contains imagery rather than bleeding it
   ------------------------------------------------------------------------ */

.is-style-umbra-frame img,
.umbra-figure img {
	border-radius: var(--umbra-card-radius);
	border: 1px solid var(--wp--preset--color--line);
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.umbra-figure {
	margin: 0;
	overflow: hidden;
	border-radius: var(--umbra-card-radius);
	background: var(--wp--preset--color--surface-raised);
}

/* Gallery tiles: portrait-first, so 600px-tall source photos stay sharp. */
.umbra-gallery {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
	gap: var(--wp--preset--spacing--30);
}

.umbra-gallery > * {
	margin-top: 0 !important;
	margin-block-start: 0 !important;
}

.umbra-gallery figure,
.umbra-gallery .wp-block-image {
	margin: 0;
	border-radius: var(--umbra-card-radius);
	overflow: hidden;
	background: #fff;
	border: 1px solid var(--wp--preset--color--line-bone);
}

.umbra-gallery img {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	border-radius: 0;
	border: 0;
}

/* On the dark bands the same tiles get a dark mat instead. */
.umbra-gallery.is-on-dark figure,
.umbra-gallery.is-on-dark .wp-block-image {
	background: var(--wp--preset--color--surface-raised);
	border-color: var(--wp--preset--color--line);
}

/* ---------------------------------------------------------------------------
   5. Hero
   ------------------------------------------------------------------------ */

.umbra-hero {
	position: relative;
	overflow: hidden;
}

.umbra-hero__media img {
	border-radius: var(--umbra-card-radius);
	border: 1px solid var(--wp--preset--color--line);
	width: 100%;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	box-shadow: var(--wp--preset--shadow--lift);
}

/* Variant: boxed media on the left (columns reversed, copy on the right). */
.umbra-hero.is-style-hero-media-left .wp-block-columns {
	flex-direction: row-reverse;
}

@media (max-width: 781px) {
	/* Stacked: media first reads better than a reversed stack. */
	.umbra-hero.is-style-hero-media-left .wp-block-columns {
		flex-direction: column;
	}
}

/* Variant: full-width background image. The image itself is set on the block
   (Styles > Background), so it stays editable; this only handles the veil,
   stacking and the fact that the boxed media column is no longer needed. */
.umbra-hero.is-style-hero-cover {
	/* Overridden per section from the editor's "Background overlay" panel,
	   which writes these two custom properties onto the block. */
	--umbra-overlay-color: #0f1012;
	--umbra-overlay-opacity: 0.55;

	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	min-height: clamp(28rem, 58vh, 40rem);
	display: flex;
	align-items: center;
}

.umbra-hero.is-style-hero-cover::after {
	content: "";
	position: absolute;
	inset: 0;
	/* Dark enough for text, light enough that the photograph still reads. The
	   flat wash is the editor-controlled overlay; the two gradients only shape
	   it towards the copy column and the lower edge, and they scale with it, so
	   dropping the opacity to 0 really does remove the overlay. */
	background:
		linear-gradient(
			90deg,
			color-mix(in srgb, var(--umbra-overlay-color) calc(var(--umbra-overlay-opacity) * 60%), transparent) 0%,
			transparent 62%
		),
		linear-gradient(
			180deg,
			transparent 0%,
			color-mix(in srgb, var(--umbra-overlay-color) calc(var(--umbra-overlay-opacity) * 45%), transparent) 100%
		),
		color-mix(in srgb, var(--umbra-overlay-color) calc(var(--umbra-overlay-opacity) * 100%), transparent);
	pointer-events: none;
	z-index: 0;
}

.umbra-hero.is-style-hero-cover > * {
	position: relative;
	z-index: 1;
	width: 100%;
}

.umbra-hero.is-style-hero-cover .umbra-hero__media {
	display: none;
}

/* On a cover hero the copy column should not be squeezed to 56%. */
.umbra-hero.is-style-hero-cover .wp-block-column:not(.umbra-hero__media) {
	flex-basis: 100% !important;
	max-width: 640px;
}

.umbra-hero.is-style-hero-cover::before {
	display: none;
}

/* Quiet texture so the dark hero is not a flat void. */
.umbra-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(60% 55% at 78% 18%, color-mix(in srgb, var(--wp--preset--color--accent) 15%, transparent) 0%, transparent 62%),
		radial-gradient(45% 40% at 10% 92%, rgba(255, 255, 255, 0.045) 0%, transparent 70%);
	pointer-events: none;
}

.umbra-hero > * {
	position: relative;
}

.umbra-eyebrow {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent);
}

/* ---------------------------------------------------------------------------
   6. Buttons — always set fill AND text, including hover (gotcha #13)
   ------------------------------------------------------------------------ */

.wp-block-button__link {
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

/* One button box size, filled or outline. WordPress emits the
   `is-style-outline--N` variation CSS *after* Global Styles, and that rule uses
   em padding (0.667em/1.33em) plus a 2px border — which made every outline
   button several pixels shorter and narrower than the filled one beside it.
   Both variants therefore get the padding restated here, minus the 1px border
   that filled buttons carry as transparent so the border-box heights match. */
.wp-block-button > .wp-block-button__link,
.wp-block-button.is-style-outline > .wp-block-button__link {
	padding: calc(0.85rem - 1px) calc(1.6rem - 1px);
	border: 1px solid transparent;
}

.wp-block-button.is-style-outline > .wp-block-button__link {
	background-color: transparent;
	border-color: color-mix(in srgb, var(--wp--preset--color--ink) 42%, transparent);
	color: var(--wp--preset--color--ink);
}

.wp-block-button.is-style-outline > .wp-block-button__link:hover,
.wp-block-button.is-style-outline > .wp-block-button__link:focus {
	background-color: var(--wp--preset--color--ink);
	border-color: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--base);
}

/* Outline buttons sitting on the light band flip to dark ink. */
.has-bone-background-color .wp-block-button.is-style-outline > .wp-block-button__link,
.umbra-on-bone .wp-block-button.is-style-outline > .wp-block-button__link {
	border-color: color-mix(in srgb, var(--wp--preset--color--ink-dark) 34%, transparent);
	color: var(--wp--preset--color--ink-dark);
}

.has-bone-background-color .wp-block-button.is-style-outline > .wp-block-button__link:hover,
.umbra-on-bone .wp-block-button.is-style-outline > .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--ink-dark);
	border-color: var(--wp--preset--color--ink-dark);
	color: var(--wp--preset--color--bone);
}

/* No section link rule may repaint a button label. */
.umbra-section a:not(.wp-block-button__link):not(.wp-block-navigation-item__content) {
	text-underline-offset: 0.22em;
	text-decoration-thickness: 1px;
}

.umbra-on-bone a:not(.wp-block-button__link) {
	color: var(--wp--preset--color--accent-dark);
}

/* Buttons stay compact — never a full-width slab. */
.wp-block-button__link {
	max-width: 320px;
}

/* ---------------------------------------------------------------------------
   7. Light band ("bone") text colours
   ------------------------------------------------------------------------ */

.umbra-on-bone,
.has-bone-background-color {
	color: var(--wp--preset--color--ink-dark);
}

.umbra-on-bone :where(h1, h2, h3, h4, h5) {
	color: var(--wp--preset--color--ink-dark);
}

.umbra-on-bone :where(p, li) {
	color: var(--wp--preset--color--ink-dark-muted);
}

.umbra-on-bone .umbra-eyebrow,
.umbra-on-bone h6 {
	color: var(--wp--preset--color--accent-dark);
}

/* ---------------------------------------------------------------------------
   8. Lists, FAQ, quotes
   ------------------------------------------------------------------------ */

.is-style-umbra-check {
	list-style: none;
	padding-left: 0;
	display: grid;
	gap: 0.65rem;
}

.is-style-umbra-check li {
	position: relative;
	padding-left: 1.9rem;
}

.is-style-umbra-check li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.52em;
	width: 0.7rem;
	height: 0.38rem;
	border-left: 2px solid var(--wp--preset--color--accent);
	border-bottom: 2px solid var(--wp--preset--color--accent);
	transform: rotate(-45deg);
}

.umbra-on-bone .is-style-umbra-check li::before {
	border-color: var(--wp--preset--color--accent-dark);
}

/* The row's vertical padding lives on the summary, not the details, so the
   whole row is the tap target — with it on the details, only the 22px line of
   question text responded to a finger. */
.wp-block-details.is-style-umbra-faq,
.umbra-details .wp-block-details {
	border-top: 1px solid var(--wp--preset--color--line);
	padding: 0;
	background: transparent;
}

.umbra-details .wp-block-details:last-child {
	border-bottom: 1px solid var(--wp--preset--color--line);
}

.umbra-details summary {
	cursor: pointer;
	list-style: none;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.35;
	color: var(--wp--preset--color--ink);
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1.5rem;
	padding: 1.35rem 0.25rem 1.35rem 0;
}

.umbra-details details[open] > summary {
	padding-bottom: 0.9rem;
}

.umbra-details summary::-webkit-details-marker {
	display: none;
}

.umbra-details summary::after {
	content: "";
	flex: none;
	width: 0.65rem;
	height: 0.65rem;
	margin-top: 0.45rem;
	border-right: 2px solid var(--wp--preset--color--accent);
	border-bottom: 2px solid var(--wp--preset--color--accent);
	transform: rotate(45deg);
	transition: transform 0.25s ease;
}

.umbra-details details[open] > summary::after {
	transform: rotate(-135deg);
}

.umbra-details .wp-block-details > :not(summary) {
	margin-top: 0.9rem;
	color: var(--wp--preset--color--ink-muted);
	max-width: var(--umbra-measure);
}

.umbra-details .wp-block-details > summary + * {
	margin-top: 0;
}

.umbra-details .wp-block-details > :not(summary):last-child {
	margin-bottom: 1.35rem;
}

/* ---------------------------------------------------------------------------
   9. Stat row
   ------------------------------------------------------------------------ */

.umbra-stat__value {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(2.25rem, 4.5vw, 3.25rem);
	line-height: 1;
	color: var(--wp--preset--color--ink);
	letter-spacing: -0.03em;
}

.umbra-stat__label {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--ink-muted);
	margin-top: 0.5rem;
}

/* ---------------------------------------------------------------------------
   10. Header
   ------------------------------------------------------------------------ */

/* Sticky must sit on the template-part wrapper, not on .umbra-header: the
   wrapper is the inner header's containing block and is exactly its height, so
   a sticky inner element would have no distance to travel and never engage. */
.wp-site-blocks > header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 900;
}

.umbra-header {
	position: relative;
	/* No backdrop-filter/transform/filter here — gotcha #3. */
	background-color: var(--wp--preset--color--base);
	border-bottom: 1px solid var(--wp--preset--color--line);
}

.umbra-header__inner {
	min-height: var(--umbra-header-h);
}

.umbra-header .wp-block-site-logo img {
	height: 34px;
	width: auto;
	border-radius: 0;
	border: 0;
}

.umbra-brand {
	display: inline-flex;
	align-items: center;
	gap: 0.7rem;
	text-decoration: none;
}

.umbra-brand__mark {
	flex: none;
	width: 34px;
	height: 34px;
	display: block;
}

.umbra-brand__text {
	display: flex;
	flex-direction: column;
	line-height: 1.05;
}

.umbra-brand__name {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.25rem;
	font-weight: 500;
	letter-spacing: -0.015em;
	color: var(--wp--preset--color--ink);
}

.umbra-brand__meta {
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent);
	margin-top: 0.28rem;
}

/* Desktop submenu — override the preset overlay colour classes (gotcha #14). */
@media (min-width: 782px) {
	.umbra-header .wp-block-navigation__submenu-container {
		background-color: var(--wp--preset--color--surface-raised) !important;
		color: var(--wp--preset--color--ink) !important;
		border: 1px solid var(--wp--preset--color--line) !important;
		border-radius: 12px;
		box-shadow: var(--wp--preset--shadow--lift);
		padding: 0.4rem !important;
		min-width: 258px;
		gap: 1px !important;
		margin-top: 8px;
	}

	/* Bridge the offset so hover never drops — gotcha #8. */
	.umbra-header .wp-block-navigation__submenu-container::before {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		top: -10px;
		height: 10px;
	}

	.umbra-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
		color: var(--wp--preset--color--ink) !important;
		padding: 0.6rem 0.85rem !important;
		border-radius: 8px;
		white-space: nowrap;
		font-weight: 500;
	}

	.umbra-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
		background-color: color-mix(in srgb, var(--wp--preset--color--accent) 16%, transparent);
		color: var(--wp--preset--color--accent) !important;
	}
}

.umbra-header .wp-block-navigation-item__content {
	text-decoration: none;
	padding: 0.5rem 0.15rem;
}

.umbra-header .wp-block-navigation .current-menu-item > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--accent);
}

/* Header phone CTA: full pill on desktop, compact icon on phones (gotcha #16c). */
.umbra-callbtn {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.62rem 1.15rem;
	border-radius: 999px;
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--on-accent);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 0.2s ease;
}

.umbra-callbtn:hover,
.umbra-callbtn:focus {
	background: var(--wp--preset--color--accent-dark);
	color: var(--wp--preset--color--on-accent);
}

.umbra-callbtn svg {
	flex: none;
	width: 16px;
	height: 16px;
	fill: currentColor;
}

@media (max-width: 600px) {
	.umbra-callbtn {
		padding: 0;
		width: 40px;
		height: 40px;
		justify-content: center;
	}

	.umbra-callbtn__label {
		display: none;
	}
}

/* ---------------------------------------------------------------------------
   11. Mobile drawer — a designed overlay, not the raw block one (gotcha #16)
   ------------------------------------------------------------------------ */

.umbra-burger {
	display: none;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	padding: 0;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 10px;
	background: transparent;
	color: var(--wp--preset--color--ink);
	cursor: pointer;
}

.umbra-burger span {
	display: block;
	width: 18px;
	height: 1.5px;
	background: currentColor;
	position: relative;
}

.umbra-burger span::before,
.umbra-burger span::after {
	content: "";
	position: absolute;
	left: 0;
	width: 18px;
	height: 1.5px;
	background: currentColor;
}

.umbra-burger span::before {
	top: -5.5px;
}

.umbra-burger span::after {
	top: 5.5px;
}

/* Collapse before the inline nav can wrap to two rows (gotcha #16b). */
@media (max-width: 1080px) {
	.umbra-header .umbra-header__nav {
		display: none;
	}

	.umbra-burger {
		display: inline-flex;
	}
}

.umbra-drawer {
	position: fixed;
	inset: 0;
	z-index: 1000;
	background: var(--wp--preset--color--base);
	display: flex;
	flex-direction: column;
	transform: translateX(100%);
	visibility: hidden;
	transition: transform 0.34s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 0.34s;
	overflow-y: auto;
	overscroll-behavior: contain;
}

.umbra-drawer.is-open {
	transform: translateX(0);
	visibility: visible;
	transition: transform 0.34s cubic-bezier(0.2, 0.7, 0.3, 1), visibility 0s;
}

body.umbra-drawer-open {
	overflow: hidden;
}

.umbra-drawer__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	min-height: var(--umbra-header-h);
	padding: 0.75rem var(--umbra-gutter);
	border-bottom: 1px solid var(--wp--preset--color--line);
}

.umbra-drawer__close {
	width: 42px;
	height: 42px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 10px;
	background: transparent;
	color: var(--wp--preset--color--ink);
	cursor: pointer;
	font-size: 0;
}

.umbra-drawer__close svg {
	width: 16px;
	height: 16px;
	stroke: var(--wp--preset--color--ink);
	stroke-width: 1.8;
	fill: none;
}

.umbra-drawer__nav {
	padding: 0.5rem var(--umbra-gutter) 0;
	flex: 1 0 auto;
}

.umbra-drawer__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.umbra-drawer__item {
	border-bottom: 1px solid var(--wp--preset--color--line);
}

.umbra-drawer__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}

.umbra-drawer__link {
	display: block;
	flex: 1;
	padding: 1.05rem 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.5rem;
	line-height: 1.2;
	color: var(--wp--preset--color--ink);
	text-decoration: none;
	text-align: left;
}

.umbra-drawer__link:hover,
.umbra-drawer__link:focus {
	color: var(--wp--preset--color--accent);
}

.umbra-drawer__item.is-current > .umbra-drawer__row > .umbra-drawer__link {
	color: var(--wp--preset--color--accent);
}

.umbra-drawer__toggle {
	flex: none;
	width: 40px;
	height: 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: 0;
	cursor: pointer;
	color: var(--wp--preset--color--ink-muted);
}

.umbra-drawer__toggle::after {
	content: "";
	width: 0.55rem;
	height: 0.55rem;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg) translate(-2px, -2px);
	transition: transform 0.25s ease;
}

.umbra-drawer__item.is-expanded > .umbra-drawer__row > .umbra-drawer__toggle::after {
	transform: rotate(-135deg) translate(-2px, -2px);
}

.umbra-drawer__sub {
	list-style: none;
	margin: 0;
	padding: 0;
	display: none;
}

.umbra-drawer__item.is-expanded > .umbra-drawer__sub {
	display: block;
	padding-bottom: 0.6rem;
}

.umbra-drawer__sub .umbra-drawer__link {
	font-family: var(--wp--preset--font-family--body);
	font-size: 1rem;
	padding: 0.6rem 0 0.6rem 1rem;
	color: var(--wp--preset--color--ink-muted);
}

.umbra-drawer__foot {
	padding: var(--wp--preset--spacing--40) var(--umbra-gutter) var(--wp--preset--spacing--50);
	display: grid;
	justify-items: start;
	gap: var(--wp--preset--spacing--30);
	border-top: 1px solid var(--wp--preset--color--line);
	margin-top: var(--wp--preset--spacing--40);
}

/* Keep the drawer CTA a button, not a full-width slab on wide tablets.
   border-box matters: the CTA carries 1.5rem of horizontal padding. */
.umbra-drawer__foot > * {
	box-sizing: border-box;
	width: 100%;
	max-width: 420px;
}

.umbra-drawer__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.55rem;
	padding: 1rem 1.5rem;
	border-radius: 999px;
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--on-accent);
	font-weight: 600;
	text-decoration: none;
}

.umbra-drawer__cta:hover,
.umbra-drawer__cta:focus {
	background: var(--wp--preset--color--accent-dark);
	color: var(--wp--preset--color--on-accent);
}

.umbra-drawer__contact {
	display: grid;
	gap: 0.4rem;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--ink-muted);
}

.umbra-drawer__contact a {
	color: var(--wp--preset--color--ink-muted);
	text-decoration: none;
}

.umbra-drawer__contact a:hover {
	color: var(--wp--preset--color--accent);
}

/* ---------------------------------------------------------------------------
   12. Footer
   ------------------------------------------------------------------------ */

.umbra-footer {
	background-color: var(--wp--preset--color--surface);
	border-top: 1px solid var(--wp--preset--color--line);
}

/* The registered "Hairline" separator style had no CSS, so it fell through to
   core's 100px-wide centred default — a stub of a line instead of the divider
   the footer asks for. Core's rule is
   `.wp-block-separator:not(.is-style-wide):not(.is-style-dots)`, so this
   override needs three classes of its own to match it and win on order. */
.wp-block-separator.is-style-umbra-hairline:not(.is-style-dots) {
	width: 100%;
	max-width: none;
	height: 1px;
	border: 0;
	opacity: 1;
}

/* Brand column carries a logo and a paragraph, and the contact column holds an
   email address that must not be forced to break, so those two get the width. */
.umbra-footer__cols {
	display: grid;
	grid-template-columns: 1.5fr 1.4fr 1fr 1fr;
	align-items: start;
	gap: var(--wp--preset--spacing--50);
}

.umbra-footer__cols > * {
	margin-top: 0 !important;
	margin-block-start: 0 !important;
}

.umbra-footer__brand p {
	max-width: 36ch;
}

.umbra-footer__brandrow .wp-block-site-title {
	line-height: 1.15;
}

/* Footer rhythm: a wide gap under the columns (set on the rule itself in
   parts/footer.html, because an inline margin is the only thing that beats the
   block's own inline reset), then a tight symmetrical 40px band around the
   colophon line, matching the footer's 40px bottom padding. The colophon's
   blockGap margin has to go, or it collapses against the rule's 40px and the
   band stops being symmetrical. */
.umbra-footer > .umbra-colophon,
.umbra-footer > .umbra-footer__bottom {
	margin-block-start: 0;
}

/* Bottom row: © and address on the left, the agency credit on the right. */
.umbra-footer__bottom {
	gap: var(--wp--preset--spacing--20) var(--wp--preset--spacing--40);
}

.umbra-footer__bottom > .umbra-colophon {
	flex: 1 1 auto;
}

.umbra-footer__credit {
	margin: 0;
}

/* TB Compliance's floating "Evästeasetukset" button is fixed 16px from the
   bottom-left corner and about 44px tall, so at the very end of the page it
   sat on top of the © line (desktop) and the credit (phone). While it exists,
   the bottom row gets enough extra room that the button sits below it. */
body:has(> .tbc-reopen) .umbra-footer__bottom {
	padding-bottom: 32px;
}

.umbra-footer__credit a {
	display: inline-flex;
	min-height: 24px;
	align-items: center;
}

.umbra-footer__credit img {
	display: block;
	border-radius: 0;
	opacity: 0.7;
	transition: opacity 0.2s ease;
}

.umbra-footer__credit a:hover img,
.umbra-footer__credit a:focus-visible img {
	opacity: 1;
}

.umbra-footer__brand .wp-block-site-logo img {
	border-radius: 0;
	border: 0;
}

@media (max-width: 900px) {
	.umbra-footer__cols {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.umbra-footer__brand {
		grid-column: 1 / -1;
	}
}

@media (max-width: 480px) {
	.umbra-footer__cols {
		grid-template-columns: minmax(0, 1fr);
	}
}

.umbra-footer a {
	text-decoration: none;
}

.umbra-footer a:hover {
	text-decoration: underline;
	text-underline-offset: 0.22em;
}

.umbra-social {
	display: inline-flex;
	gap: 0.5rem;
}

.umbra-social a {
	width: 38px;
	height: 38px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 50%;
	color: var(--wp--preset--color--ink-muted);
}

.umbra-social a:hover {
	color: var(--wp--preset--color--accent);
	border-color: var(--wp--preset--color--accent);
}

.umbra-social svg {
	width: 17px;
	height: 17px;
	fill: currentColor;
}

/* ---------------------------------------------------------------------------
   13. Forms — framed card, branded focus ring
   ------------------------------------------------------------------------ */

/* Forms are Formation. It is built to be themed through custom properties
   scoped to `.formation-form`, so the theme maps its tokens onto those rather
   than restyling individual inputs — a new field type then inherits the look
   for free. Two properties cannot be expressed as tokens: the pill-shaped,
   theme-typed submit button and the label weight. */
.umbra-form .formation-form {
	--formation-font: var(--wp--preset--font-family--body);
	--formation-text: var(--wp--preset--color--ink);
	--formation-muted: var(--wp--preset--color--ink-muted);
	--formation-border: var(--wp--preset--color--line);
	--formation-border-focus: var(--wp--preset--color--accent);
	--formation-bg: var(--wp--preset--color--base);
	--formation-bg-subtle: var(--wp--preset--color--surface);
	--formation-accent: var(--wp--preset--color--accent);
	--formation-accent-text: var(--wp--preset--color--on-accent);
	/* Readable on the dark card: the plugin's reds are tuned for white. */
	--formation-error: #e0654a;
	--formation-error-text: #f0917c;
	--formation-success: var(--wp--preset--color--accent);
	--formation-radius: 10px;
	--formation-gap: 1.1rem;
	--formation-control-height: 48px;
	--formation-focus-ring: 0 0 0 3px color-mix(in srgb, var(--wp--preset--color--accent) 32%, transparent);
}

.umbra-form .formation-label {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
}

/* A choice group's legend has no margin of its own, so the first option sat
   flush under the question. Give it the same breathing room as a text label. */
.umbra-form .formation-fieldset > .formation-label {
	margin-bottom: 0.75rem;
}

.umbra-form .formation-required {
	color: var(--wp--preset--color--accent);
}

.umbra-form .formation-choice__label {
	color: var(--wp--preset--color--ink-muted);
}

.umbra-form .formation-input::placeholder {
	color: color-mix(in srgb, var(--wp--preset--color--ink-muted) 78%, transparent);
}

/* Same pill, type and hover as every other primary button on the site. */
.umbra-form .formation-submit {
	border-radius: 999px;
	padding: calc(0.85rem - 1px) calc(1.6rem - 1px);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: 0.01em;
	transition: background-color 0.2s ease;
}

.umbra-form .formation-submit:hover:not([disabled]) {
	background: var(--wp--preset--color--accent-dark);
}

/* reCAPTCHA v3's floating badge sat over the bottom-right corner of the page on
   phones. Google allows hiding it as long as the form itself states that
   reCAPTCHA is used and links Google's Privacy Policy and Terms — the quote
   form's privacy note does exactly that. Do not hide the badge on a form that
   lacks that text. */
.grecaptcha-badge {
	visibility: hidden;
}

/* The privacy notice at the point of collection reads as a footnote. */
.umbra-form .umbra-form-note p + p {
	margin-top: 0.4rem;
}

.umbra-form .umbra-form-note p {
	margin: 0;
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--ink-muted);
}

.umbra-form .formation-success {
	background: color-mix(in srgb, var(--wp--preset--color--accent) 14%, transparent);
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--accent) 40%, transparent);
	border-radius: 10px;
	padding: 1rem 1.25rem;
	color: var(--wp--preset--color--ink);
}

/* Contact info card sits level with the form card — no floating heading. */
.umbra-contactgrid {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
	gap: var(--wp--preset--spacing--40);
	align-items: stretch;
}

.umbra-contactgrid > * {
	margin-top: 0 !important;
	margin-block-start: 0 !important;
}

@media (max-width: 900px) {
	.umbra-contactgrid {
		grid-template-columns: minmax(0, 1fr);
	}
}

.umbra-contactrow {
	display: flex;
	gap: 0.9rem;
	align-items: flex-start;
	padding: 0.9rem 0;
	border-bottom: 1px solid var(--wp--preset--color--line);
}

.umbra-contactrow:last-of-type {
	border-bottom: 0;
}

.umbra-contactrow svg {
	flex: none;
	width: 18px;
	height: 18px;
	margin-top: 0.2rem;
	fill: var(--wp--preset--color--accent);
}

.umbra-contactrow__label {
	font-size: var(--wp--preset--font-size--x-small);
	text-transform: uppercase;
	letter-spacing: 0.12em;
	font-weight: 600;
	color: var(--wp--preset--color--ink-muted);
}

/* Inline-block so the line height counts towards the hit area: as an inline
   link the phone number — the most-used control on a phone — was a 22px strip. */
.umbra-contactrow__value {
	display: inline-block;
	min-height: 24px;
	font-size: var(--wp--preset--font-size--large);
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}

.umbra-contactrow__value:hover {
	color: var(--wp--preset--color--accent);
}

/* ---------------------------------------------------------------------------
   14. Section head — heading left, supporting copy right
   Keeps a wide band from reading half-empty with a lone left-aligned heading.
   ------------------------------------------------------------------------ */

.umbra-sectionhead {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
	gap: var(--wp--preset--spacing--50);
	align-items: end;
	margin-bottom: var(--wp--preset--spacing--60);
}

.umbra-sectionhead > * {
	margin-top: 0 !important;
	margin-block-start: 0 !important;
}

.umbra-sectionhead__lead {
	padding-bottom: 0.35rem;
}

@media (max-width: 860px) {
	.umbra-sectionhead {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--wp--preset--spacing--30);
		align-items: start;
	}
}

/* ---------------------------------------------------------------------------
   15. Icon tiles — a visual anchor to the left of card copy
   ------------------------------------------------------------------------ */

.umbra-card--icon {
	flex-direction: row;
	gap: var(--wp--preset--spacing--30);
	align-items: flex-start;
}

.umbra-card--icon .umbra-card__body {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--20);
	min-width: 0;
}

.umbra-card--icon .umbra-card__body > * {
	margin-top: 0 !important;
	margin-block-start: 0 !important;
}

.umbra-icontile {
	flex: none;
	width: 54px;
	height: 54px;
	border-radius: 14px;
	background: color-mix(in srgb, var(--wp--preset--color--accent) 15%, transparent);
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--accent) 40%, transparent);
	display: flex;
	align-items: center;
	justify-content: center;
}

.umbra-icontile::before {
	content: "";
	display: block;
	width: 26px;
	height: 26px;
	background-color: var(--wp--preset--color--accent);
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
}

.umbra-icontile--fire::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13.6 2c.4 3 1.9 4.3 3.3 5.9C18.4 9.5 19 11 19 13a7 7 0 1 1-14 0c0-2.7 1.3-4.7 2.9-6.3.2 1.2.8 2 1.7 2.5-.3-3.1.9-5.8 4-7.2z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13.6 2c.4 3 1.9 4.3 3.3 5.9C18.4 9.5 19 11 19 13a7 7 0 1 1-14 0c0-2.7 1.3-4.7 2.9-6.3.2 1.2.8 2 1.7 2.5-.3-3.1.9-5.8 4-7.2z'/%3E%3C/svg%3E");
}

.umbra-icontile--oven::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 19h20v3H2zM12 3a9 9 0 0 1 9 9v5H3v-5a9 9 0 0 1 9-9zm0 4a5 5 0 0 0-5 5v1h10v-1a5 5 0 0 0-5-5z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 19h20v3H2zM12 3a9 9 0 0 1 9 9v5H3v-5a9 9 0 0 1 9-9zm0 4a5 5 0 0 0-5 5v1h10v-1a5 5 0 0 0-5-5z'/%3E%3C/svg%3E");
}

.umbra-icontile--repair::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20.7 3.3a5.5 5.5 0 0 1-6.6 7.2l-8 8a2.1 2.1 0 1 1-3-3l8-8a5.5 5.5 0 0 1 7.2-6.6l-3 3 2.4 2.4 3-3z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20.7 3.3a5.5 5.5 0 0 1-6.6 7.2l-8 8a2.1 2.1 0 1 1-3-3l8-8a5.5 5.5 0 0 1 7.2-6.6l-3 3 2.4 2.4 3-3z'/%3E%3C/svg%3E");
}

.umbra-on-bone .umbra-icontile {
	background: color-mix(in srgb, var(--wp--preset--color--accent-dark) 12%, transparent);
	border-color: color-mix(in srgb, var(--wp--preset--color--accent-dark) 34%, transparent);
}

.umbra-on-bone .umbra-icontile::before {
	background-color: var(--wp--preset--color--accent-dark);
}

@media (max-width: 560px) {
	.umbra-icontile {
		width: 46px;
		height: 46px;
		border-radius: 12px;
	}

	.umbra-icontile::before {
		width: 22px;
		height: 22px;
	}
}

/* ---------------------------------------------------------------------------
   16. Gallery captions — projects read as projects, not loose images
   ------------------------------------------------------------------------ */

.umbra-gallery figure {
	position: relative;
	display: flex;
	flex-direction: column;
}

.umbra-gallery figcaption {
	margin: 0;
	padding: 0.75rem 0.9rem;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--x-small);
	line-height: 1.35;
	letter-spacing: 0.01em;
	color: var(--wp--preset--color--ink-dark-muted);
	background: #fff;
	border-top: 1px solid var(--wp--preset--color--line-bone);
}

.umbra-gallery.is-on-dark figcaption {
	color: var(--wp--preset--color--ink-muted);
	background: var(--wp--preset--color--surface-raised);
	border-top-color: var(--wp--preset--color--line);
}

.umbra-gallery figcaption strong {
	display: block;
	color: var(--wp--preset--color--ink-dark);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--small);
	margin-bottom: 0.1rem;
}

.umbra-gallery.is-on-dark figcaption strong {
	color: var(--wp--preset--color--ink);
}

/* ---------------------------------------------------------------------------
   17. Responsive refinements
   ------------------------------------------------------------------------ */

/* Two gallery columns on phones: one huge tile per row wastes the viewport
   and makes the grid feel endless. */
@media (max-width: 700px) {
	.umbra-gallery {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--wp--preset--spacing--20);
	}

	.umbra-gallery figcaption {
		padding: 0.6rem 0.7rem;
	}
}

@media (max-width: 380px) {
	.umbra-gallery {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Stats stay 2-up on phones rather than a four-row column. */
.umbra-statgrid {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 900px) {
	.umbra-statgrid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--wp--preset--spacing--40);
	}
}

@media (max-width: 560px) {
	.umbra-statgrid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.umbra-stat__value {
		font-size: clamp(1.85rem, 8vw, 2.35rem);
	}
}

@media (max-width: 781px) {
	/* Cards get tighter padding so copy keeps its measure on a phone. */
	.is-style-umbra-card,
	.umbra-card,
	.is-style-umbra-card-bone,
	.umbra-card.is-on-bone {
		padding: clamp(1.15rem, 5vw, 1.6rem);
	}

	/* Stacked columns should not keep desktop flex-basis. */
	.wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column {
		flex-basis: 100% !important;
	}

	/* Contained hero media should not eat the whole first screen. */
	.umbra-hero__media img {
		aspect-ratio: 4 / 3;
		max-height: 58vh;
		object-position: center;
	}

	.umbra-hero.is-style-hero-cover {
		min-height: clamp(22rem, 62vh, 30rem);
	}

	/* Buttons go full-width-ish but stay readable and never overflow. Equal
	   flex-basis, so a longer label does not win a wider pill. */
	.wp-block-buttons > .wp-block-button {
		flex: 1 1 0;
	}

	.wp-block-button__link {
		display: block;
		text-align: center;
		max-width: none;
	}

	.umbra-details summary {
		font-size: var(--wp--preset--font-size--medium);
		gap: 1rem;
	}
}

@media (max-width: 480px) {
	/* One action per row reads better than two cramped pills. */
	.wp-block-buttons {
		flex-direction: column;
		align-items: stretch;
	}

	.wp-block-buttons > .wp-block-button {
		width: 100%;
	}
}

/* Long words (Finnish compounds) must never push a card wider than the grid. */
.umbra-card h3,
.umbra-card p,
.umbra-gallery figcaption,
.umbra-stat__label {
	overflow-wrap: anywhere;
}

/* ---------------------------------------------------------------------------
   18. Prose pages
   ------------------------------------------------------------------------ */

.umbra-prose :where(h2) {
	margin-top: var(--wp--preset--spacing--50);
}

.umbra-prose :where(h3) {
	margin-top: var(--wp--preset--spacing--40);
}

.umbra-prose :where(p, ul, ol) {
	max-width: var(--umbra-measure);
}

/* ---------------------------------------------------------------------------
   19. Count-up numbers
   ------------------------------------------------------------------------ */

/* Tabular figures keep the box from twitching as the digits roll, and the
   authored value stays available to assistive tech in the hidden copy. */
.is-style-umbra-count,
.umbra-count {
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum" 1;
}

.umbra-count__readable {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* ---------------------------------------------------------------------------
   20. CTA band with a background image
   ------------------------------------------------------------------------ */

/* Photography behind a CTA only works if the copy never has to compete with
   it. Same construction as `.umbra-hero.is-style-hero-cover`: a veil in
   `::after` at z-index 0, content lifted to z-index 1. The image, its position
   and its size are set on the block through Styles > Background, so they stay
   editable and the inline block-supports styles win over the fallbacks here.

   The overlay colour and strength come from the editor's "Background overlay"
   panel, which writes these two custom properties onto the block. */
.umbra-section.is-style-cta-cover {
	--umbra-overlay-color: #0f1012;
	--umbra-overlay-opacity: 0.72;

	position: relative;
	overflow: hidden;
	background-color: var(--wp--preset--color--base);
	background-position: 50% 50%;
	background-repeat: no-repeat;
	background-size: cover;
	min-height: clamp(20rem, 46vh, 28rem);
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.umbra-section.is-style-cta-cover::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	/* A flat wash guarantees the contrast floor; the gradient on top keeps the
	   band from looking like a grey rectangle with a photo trapped behind it.
	   Both scale with the overlay opacity, so setting it to 0 removes the
	   overlay outright instead of leaving a mystery gradient behind. */
	background:
		linear-gradient(
			180deg,
			transparent 0%,
			color-mix(in srgb, var(--umbra-overlay-color) calc(var(--umbra-overlay-opacity) * 45%), transparent) 100%
		),
		color-mix(in srgb, var(--umbra-overlay-color) calc(var(--umbra-overlay-opacity) * 100%), transparent);
}

.umbra-section.is-style-cta-cover > * {
	position: relative;
	z-index: 1;
	width: 100%;
}

/* Text on a cover band is always ink, whatever the photo underneath. */
.umbra-section.is-style-cta-cover,
.umbra-section.is-style-cta-cover :where(h1, h2, h3, h4, h5) {
	color: var(--wp--preset--color--ink);
}

.umbra-section.is-style-cta-cover :where(p) {
	color: color-mix(in srgb, var(--wp--preset--color--ink) 84%, transparent);
	text-shadow: 0 1px 24px rgba(15, 16, 18, 0.55);
}

.umbra-section.is-style-cta-cover :where(h1, h2, h3) {
	text-shadow: 0 2px 32px rgba(15, 16, 18, 0.6);
}

@media (max-width: 781px) {
	.umbra-section.is-style-cta-cover {
		min-height: 0;
		background-position: 50% 40%;
	}
}

/* ---------------------------------------------------------------------------
   21. Portfolio band on `surface-raised`
   ------------------------------------------------------------------------ */

/* When the gallery band itself is the raised surface, the tiles step one shade
   *down* instead of up — otherwise mat and band are the same colour and the
   grid stops reading as a set of tiles. */
.has-surface-raised-background-color .umbra-gallery.is-on-dark figure,
.has-surface-raised-background-color .umbra-gallery.is-on-dark .wp-block-image,
.has-surface-raised-background-color .umbra-gallery.is-on-dark figcaption {
	background: var(--wp--preset--color--surface);
}

/* ---------------------------------------------------------------------------
   22. core/gallery — editor-managed tiles that match the hand-built grids
   ------------------------------------------------------------------------ */

/* The galleries started life as a group of core/image blocks, which meant the
   client could not add or remove a photo without editing block markup. They are
   core/gallery now. Core lays that block out as a wrapped flexbox with
   percentage widths and captions printed over the image; all of that is
   replaced here so an editor-managed gallery looks like what it replaced.

   Every override below carries a `:not(#umbra)` that matches nothing. Core
   scopes its own gallery rules with `:not(#individual-image)`, and an id inside
   :not() still counts towards specificity, so a plain class selector loses to
   them however many classes it has. This puts the overrides on equal footing,
   and theme.css is enqueued last, so they win on order. */
.umbra-gallery.wp-block-gallery {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
	gap: var(--wp--preset--spacing--30);
	margin: 0;
	align-items: stretch;
}

.umbra-gallery.wp-block-gallery.has-nested-images figure.wp-block-image:not(#umbra) {
	width: auto;
	max-width: none;
	flex: none;
	margin: 0;
	align-self: stretch;
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
}

/* Core's `.is-cropped` rule gives the image `flex: 1 0 0%; height: 100%`. In a
   column flex box whose height comes from its own content that resolves to
   zero, so the photo vanished and the tile was left holding only its caption.
   The tile's proportions come from the aspect ratio here instead. */
.umbra-gallery.wp-block-gallery.has-nested-images figure.wp-block-image:not(#umbra) > img,
.umbra-gallery.wp-block-gallery.has-nested-images figure.wp-block-image:not(#umbra) > a,
.umbra-gallery.wp-block-gallery.has-nested-images figure.wp-block-image:not(#umbra) a > img {
	flex: none;
	width: 100%;
	height: auto;
	max-width: 100%;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	display: block;
}

/* Caption sits under the photo as a labelled plate, not as white text printed
   across the bottom of the image over a blurred gradient. */
.umbra-gallery.wp-block-gallery.has-nested-images figure.wp-block-image:not(#umbra) figcaption {
	position: static;
	max-height: none;
	width: auto;
	flex: none;
	margin: 0;
	padding: 0.75rem 0.9rem;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--x-small);
	line-height: 1.35;
	letter-spacing: 0.01em;
	text-align: left;
	text-shadow: none;
	overflow: visible;
	scrollbar-gutter: auto;
	color: var(--wp--preset--color--ink-dark-muted);
	background: #fff;
	border-top: 1px solid var(--wp--preset--color--line-bone);
	box-sizing: border-box;
}

.umbra-gallery.is-on-dark.wp-block-gallery.has-nested-images figure.wp-block-image:not(#umbra) figcaption {
	color: var(--wp--preset--color--ink-muted);
	background: var(--wp--preset--color--surface-raised);
	border-top-color: var(--wp--preset--color--line);
}

.has-surface-raised-background-color .umbra-gallery.is-on-dark.wp-block-gallery.has-nested-images figure.wp-block-image:not(#umbra) figcaption {
	background: var(--wp--preset--color--surface);
}

.umbra-gallery.wp-block-gallery.has-nested-images figure.wp-block-image:not(#umbra) figcaption strong {
	display: block;
	color: var(--wp--preset--color--ink-dark);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--small);
	margin-bottom: 0.1rem;
}

.umbra-gallery.is-on-dark.wp-block-gallery.has-nested-images figure.wp-block-image:not(#umbra) figcaption strong {
	color: var(--wp--preset--color--ink);
}

/* The blurred plate core paints behind an overlaid caption has nothing left to
   sit behind. */
.umbra-gallery.wp-block-gallery.has-nested-images figure.wp-block-image:not(#umbra)::before {
	display: none;
}

/* A lightbox-enabled image wraps its <img> in a button; it must not be styled
   like a link or add a box of its own. */
.umbra-gallery button.lightbox-trigger {
	border: 0;
	background: transparent;
}

/* ---------------------------------------------------------------------------
   23. Gallery slider — 4 / 2 / 1
   ------------------------------------------------------------------------ */

/* The scrolling is pure CSS, so the strip still works with JavaScript off;
   slider.js only adds the arrows and dots. Tiles-per-page lives here and
   nowhere else — the script reads it back from the rendered geometry. */
.umbra-gallery.is-style-umbra-slider {
	--umbra-slider-per-view: 4;
	--umbra-slider-gap: var(--wp--preset--spacing--30);

	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: calc(
		(100% - (var(--umbra-slider-per-view) - 1) * var(--umbra-slider-gap)) /
			var(--umbra-slider-per-view)
	);
	grid-template-columns: none;
	gap: var(--umbra-slider-gap);
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scroll-padding-left: 0;
	scrollbar-width: none;
	-ms-overflow-style: none;
	padding-bottom: 2px;
}

.umbra-gallery.is-style-umbra-slider::-webkit-scrollbar {
	display: none;
}

.umbra-gallery.is-style-umbra-slider.has-nested-images figure.wp-block-image:not(#umbra) {
	scroll-snap-align: start;
}

@media (max-width: 1024px) {
	.umbra-gallery.is-style-umbra-slider {
		--umbra-slider-per-view: 2;
	}
}

@media (max-width: 640px) {
	.umbra-gallery.is-style-umbra-slider {
		--umbra-slider-per-view: 1;
	}
}

.umbra-slider {
	position: relative;
}

.umbra-slider__controls {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--wp--preset--spacing--30);
	margin-top: var(--wp--preset--spacing--40);
}

.umbra-slider.is-static .umbra-slider__controls {
	display: none;
}

.umbra-slider__arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	flex: none;
	border-radius: 50%;
	border: 1px solid var(--wp--preset--color--line);
	background: transparent;
	color: var(--wp--preset--color--ink);
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease,
		opacity 0.2s ease;
}

.umbra-slider__arrow:hover:not(:disabled) {
	background: var(--wp--preset--color--accent);
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--on-accent);
}

.umbra-slider__arrow:disabled {
	opacity: 0.35;
	cursor: default;
}

.umbra-slider__dots {
	display: flex;
	align-items: center;
	gap: 0;
}

/* A 9px dot is what the eye wants and a 24px button is what a finger needs
   (WCAG 2.5.8), so the button is the hit area and the dot is drawn inside it. */
.umbra-slider__dot {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	cursor: pointer;
}

.umbra-slider__dot::before {
	content: "";
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: color-mix(in srgb, var(--wp--preset--color--ink) 30%, transparent);
	transition: background-color 0.2s ease, transform 0.2s ease;
}

.umbra-slider__dot:hover::before {
	background: color-mix(in srgb, var(--wp--preset--color--ink) 55%, transparent);
}

.umbra-slider__dot[aria-current="true"]::before {
	background: var(--wp--preset--color--accent);
	transform: scale(1.25);
}

/* The strip is keyboard-operable, so it needs a visible focus ring of its own. */
.umbra-gallery.is-style-umbra-slider:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 4px;
}

/* ---------------------------------------------------------------------------
   24. Section openers align with what is beneath them
   ------------------------------------------------------------------------ */

/* `.umbra-intro` is a centred 860px measure box. That is correct for a centred
   CTA and wrong for a section heading, which was starting 170px inside the
   first card of the grid below it and reading as a broken layout.

   The fix is *not* to un-centre the 860px box — it would then start at the
   band's padding edge, 80px outside the content column, which is just as
   misaligned. `.umbra-sectionlead` carries no max-width of its own, so it takes
   the band's full content width from the layout and lines up with the grid;
   the measure moves down to its children.

   `!important` is not optional: WordPress's constrained layout writes
   `margin-left: auto !important; margin-right: auto !important` onto every
   child of a constrained group, so nothing else can win. */
.umbra-sectionlead > * {
	max-width: var(--umbra-intro);
	margin-left: 0 !important;
	margin-right: 0 !important;
}

/* ---------------------------------------------------------------------------
   25. Hero — no image
   ------------------------------------------------------------------------ */

/* The fourth hero answer: type on the band colour, nothing else. The copy
   column stops being a 56% column, or the hero reads as a layout missing its
   picture rather than a deliberate one. */
.umbra-hero.is-style-hero-plain .umbra-hero__media {
	display: none;
}

.umbra-hero.is-style-hero-plain .wp-block-column:not(.umbra-hero__media) {
	flex-basis: 100% !important;
	max-width: 760px;
}

/* ---------------------------------------------------------------------------
   26. Lightbox detail panel
   ------------------------------------------------------------------------ */

/* Sits at the foot of the enlarged image. The gradient is what keeps the text
   readable on a short viewport, where the panel overlaps a light photograph
   instead of sitting below it on the scrim. */
.wp-lightbox-overlay .umbra-lightbox-meta {
	position: absolute;
	z-index: 2147483646;
	left: 50%;
	bottom: 0;
	transform: translateX(-50%);
	width: min(46rem, calc(100% - 6rem));
	box-sizing: border-box;
	padding: 2.5rem 1.25rem 1.5rem;
	text-align: center;
	pointer-events: none;
	opacity: 0;
	background: linear-gradient(180deg, rgba(15, 16, 18, 0) 0%, rgba(15, 16, 18, 0.86) 45%);
	transition: opacity 0.25s ease 0.1s;
}

/* Core fades the overlay in through `.active`, so the panel follows it rather
   than flashing in over an image that is still animating open.

   Do NOT hook `.show-closing-animation` here: despite the name, core binds that
   class to `state.overlayOpened`, so it is present the whole time the lightbox
   is open — a rule on it hides the panel permanently. */
.wp-lightbox-overlay.active .umbra-lightbox-meta {
	opacity: 1;
}

.wp-lightbox-overlay .umbra-lightbox-meta > p {
	margin: 0;
	text-wrap: pretty;
	/* `pre-line` belongs on the lines themselves, never on the wrapper: on the
	   wrapper it also preserves the newlines between the <p> tags in the markup
	   and pads the panel out with hundreds of pixels of blank lines. */
	white-space: pre-line;
}

.wp-lightbox-overlay .umbra-lightbox-meta > p[hidden] {
	display: none;
}

.wp-lightbox-overlay .umbra-lightbox-meta__counter {
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent);
	font-variant-numeric: tabular-nums;
	margin-bottom: 0.4rem;
}

.wp-lightbox-overlay .umbra-lightbox-meta__title {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 500;
	line-height: 1.25;
	color: var(--wp--preset--color--ink);
}

.wp-lightbox-overlay .umbra-lightbox-meta__caption {
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.5;
	color: var(--wp--preset--color--ink-muted);
	margin-top: 0.35rem;
}

.wp-lightbox-overlay .umbra-lightbox-meta__description {
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.6;
	color: var(--wp--preset--color--ink-muted);
	margin-top: 0.5rem;
}

@media (max-width: 781px) {
	.wp-lightbox-overlay .umbra-lightbox-meta {
		width: calc(100% - 2rem);
		padding: 0.75rem 1rem 1rem;
	}
}

/* ---------------------------------------------------------------------------
   26. Plugin tables on narrow screens
   ------------------------------------------------------------------------ */

/* TB Compliance's cookie declaration is a five-column table, about 500px wide
   at its narrowest. On a phone it pushed the page wider than the screen, and
   because body clips horizontal overflow the right-hand columns were simply
   cut off. As a block-level scroller it keeps its layout and scrolls instead. */
.tbc-declaration__table {
	display: block;
	max-width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	/* Dark scrollbar track to match the page, not the browser's light default. */
	color-scheme: dark;
	border-collapse: collapse;
	font-size: var(--wp--preset--font-size--small);
}

.tbc-declaration__table :where(th, td) {
	padding: 0.65rem 0.9rem 0.65rem 0;
	text-align: left;
	vertical-align: top;
	border-bottom: 1px solid var(--wp--preset--color--line);
	min-width: 7rem;
}

.tbc-declaration__table th {
	color: var(--wp--preset--color--ink-muted);
	font-weight: 600;
	white-space: nowrap;
}

/* ---------------------------------------------------------------------------
   27. Display headings on phones
   ------------------------------------------------------------------------ */

/* Finnish compounds are long: "yhteydenotostasi!", "Tietosuojaseloste" and
   "mittatilaustyönä" are each about 8.5em wide in Source Serif 4, and at the
   display preset's 40px floor none of them fit a 390px screen — one broke
   mid-word, one pushed its "!" onto a line of its own, one was simply clipped.
   Below 480px the H1 scales with the viewport so an 8.5em word fits down to a
   320px screen; hyphenation is the net for anything longer still. */
@media (max-width: 480px) {
	h1,
	h1.wp-block-heading,
	h1.wp-block-post-title {
		font-size: clamp(1.75rem, 9.3vw, 2.5rem);
		hyphens: auto;
		-webkit-hyphens: auto;
	}
}

/* Between phone and wide desktop the split hero's copy column is only ~480px
   wide, while its H1 still renders at the display size — so an 8.5em Finnish
   compound ("mittatilaustyönä", "yhteydenotostasi!") overran it at 1024px.
   Tie the hero H1 to the viewport across that range. */
@media (min-width: 481px) and (max-width: 1180px) {
	.umbra-hero h1 {
		font-size: clamp(2.5rem, 5.2vw, 4.25rem);
	}
}

/* Icon cards in a three-up grid: beside a 54px icon tile the text column was
   ~150px at tablet widths, too narrow for "Takkaremontit". Until the grid is
   wide enough, the icon sits above the copy and the copy gets the full card. */
@media (max-width: 1180px) {
	.umbra-grid-3 .umbra-card--icon {
		flex-direction: column;
	}
}