/* Generated by tools/build-assets.mjs from themes/gullsten-theme/src/css/ — edit the sources, not this file. */
/* 00-base.css */
/*
 * Base: the design's global rules. Every colour, family and size is a theme.json
 * token (tools/tokenize-css.py); a class here is a registered style variation.
 */

/* The design's universal reset, in a layer so core, theme.json and block styles win. */
@layer gi-reset {
	*,
	*::before,
	*::after {
		margin: 0;
		padding: 0;
		box-sizing: border-box;
	}
	img {
		max-width: 100%;
		display: block;
	}
}

html {
	scroll-behavior: smooth;
}

body {
	-webkit-font-smoothing: antialiased;
}

/* The block document root adds no spacing of its own; sections own their padding. */
.wp-site-blocks > * + *,
.wp-site-blocks > main + footer {
	margin-block-start: 0;
}

/* Hero entrance — shared site-wide pattern. */
@keyframes heroFadeUp {
	from { opacity: 0; transform: translateY(22px); }
	to { opacity: 1; transform: translateY(0); }
}

/* Scroll reveal (assets/js/site.js adds .gi-reveal, then .is-in when in view). */
.gi-reveal {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity .8s cubic-bezier(.22, 1, .36, 1), transform .8s cubic-bezier(.22, 1, .36, 1);
}
.gi-reveal.is-in {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.gi-reveal { opacity: 1; transform: none; }
	* {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

/* Arrow after a button label — decoration, so it is not part of the editable text. */
.wp-block-button[class*="is-style-gi-"] .wp-block-button__link::after {
	content: "→";
	font-size: 1.35em;
	line-height: 1;
	display: inline-block;
	font-weight: 700;
}

/* .btn-square — accent, sweeping to the darker accent on hover. */
.wp-block-button.is-style-gi-square .wp-block-button__link {
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	gap: 0.85rem;
	padding: 0.75rem 1.5rem;
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--meta);
	font-weight: 700;
	line-height: 1.7;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	text-align: start;
	text-decoration: none;
	border-radius: 0;
	border: 0;
	position: relative;
	overflow: hidden;
	isolation: isolate;
	transition: color 250ms ease, transform 250ms cubic-bezier(0.22, 1, 0.36, 1);
}
.wp-block-button.is-style-gi-square .wp-block-button__link::before {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--wp--preset--color--primary-dark);
	transform: translateX(-101%);
	transition: transform 450ms cubic-bezier(0.22, 1, 0.36, 1);
	z-index: -1;
}
.wp-block-button.is-style-gi-square .wp-block-button__link:hover::before {
	transform: translateX(0);
}
.wp-block-button.is-style-gi-square .wp-block-button__link::after {
	transition: transform 300ms cubic-bezier(0.22, 1, 0.36, 1);
}
.wp-block-button.is-style-gi-square .wp-block-button__link:hover::after {
	transform: translateX(6px);
}
.wp-block-button.is-style-gi-square .wp-block-button__link:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 3px;
}

/* .cta-button — outlined on dark, filling white on hover. */
.wp-block-button.is-style-gi-outline-light .wp-block-button__link {
	display: inline-block;
	font-family: var(--wp--preset--font-family--body);
	color: var(--wp--preset--color--white);
	background: transparent;
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-size: var(--wp--preset--font-size--meta);
	font-weight: 700;
	line-height: 1.7;
	border: 1px solid var(--wp--preset--color--white);
	border-radius: 0;
	padding: 1rem 2.5rem;
	transition: all 200ms ease;
}
.wp-block-button.is-style-gi-outline-light .wp-block-button__link::after {
	margin-left: 0.3em;
	vertical-align: middle;
}
.wp-block-button.is-style-gi-outline-light .wp-block-button__link:hover {
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--contrast);
}
/* Only the front page's design narrows the button on phones. */
@media (max-width: 720px) {
	.home .wp-block-button.is-style-gi-outline-light .wp-block-button__link {
		padding: 0.85rem 1.75rem;
	}
}

/* .section-eyebrow / .eyebrow — small accent label above a section title. */
.is-style-gi-eyebrow {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small);
	text-transform: uppercase;
	letter-spacing: 0.22em;
	font-weight: 700;
	color: var(--wp--preset--color--primary);
}

/* .section-title — the site's section heading. */
.is-style-gi-section-title {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 400;
	text-transform: uppercase;
	font-size: var(--wp--preset--font-size--fluid-title);
	line-height: 1.1;
	color: var(--wp--preset--color--contrast);
	margin: 0 0 1rem;
}

/* 05-header.css */
/*
 * Header shell: the template part around gullsten/site-header is the design's
 * .header box — over the page's photo (position absolute), fixed once scrolled,
 * in the flow (sticky) where a template has no photo (search, 404: .is-solid).
 * The block's own look is in blocks/site-header/style.css.
 */
header.wp-block-template-part:has(> .wp-block-gullsten-site-header) {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100;
	transition: all 300ms ease;
}
header.wp-block-template-part:has(> .wp-block-gullsten-site-header:is(.is-scrolled, .is-solid)) {
	background: var(--wp--preset--color--white);
}
header.wp-block-template-part:has(> .wp-block-gullsten-site-header.is-scrolled:not(.is-solid)) {
	position: fixed;
}
header.wp-block-template-part:has(> .wp-block-gullsten-site-header.is-solid) {
	position: sticky;
}
/* The open mobile menu covers the page like the design's body-level overlay. */
header.wp-block-template-part:has(> .wp-block-gullsten-site-header.is-menu-open) {
	z-index: 200;
}
body.menu-open {
	overflow: hidden;
}

/* Logged in: the admin bar stays above the header and the open menu. */
body.admin-bar header.wp-block-template-part:has(> .wp-block-gullsten-site-header) {
	top: var(--wp-admin--admin-bar--height, 0px);
}
body.admin-bar .wp-block-gullsten-site-header .mobile-menu {
	top: var(--wp-admin--admin-bar--height, 0px);
}
@media (max-width: 600px) {
	/* The admin bar scrolls away on phones. */
	body.admin-bar header.wp-block-template-part:has(> .wp-block-gullsten-site-header:is(.is-scrolled, .is-solid)) {
		top: 0;
	}
	body.admin-bar.header-scrolled .wp-block-gullsten-site-header .mobile-menu {
		top: 0;
	}
}

/* 10-page-banner.css */
/*
 * Page banner — core/cover.is-style-gi-page-banner(-alt).
 * Design: .page-banner, .page-banner-bg, .page-banner::after, .page-banner-inner,
 * .page-banner-eyebrow (+ gi-type-unify override), .page-banner-title, .page-banner-lede.
 */
@keyframes bannerSlowZoom {
	from { transform: scale(1.08); }
	to { transform: scale(1.0); }
}

.wp-block-cover.is-style-gi-page-banner,
.wp-block-cover.is-style-gi-page-banner-alt {
	position: relative;
	height: 72vh;
	min-height: 560px;
	max-height: 820px;
	overflow: hidden;
	background: var(--wp--preset--color--charcoal);
	color: var(--wp--preset--color--white);
	display: flex;
	align-items: flex-end;
	justify-content: flex-start;
	padding: 0;
}
.wp-block-cover.is-style-gi-page-banner .wp-block-cover__image-background {
	opacity: 0.85;
	transform: scale(1.04);
}
.wp-block-cover.is-style-gi-page-banner-alt .wp-block-cover__image-background {
	opacity: 0.92;
	transform: scale(1.04);
	animation: bannerSlowZoom 18000ms ease-out forwards;
}
.wp-block-cover.is-style-gi-page-banner::after,
.wp-block-cover.is-style-gi-page-banner-alt::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
}
.wp-block-cover.is-style-gi-page-banner::after {
	background: linear-gradient(180deg, var(--wp--custom--alpha--black-45) 0%, var(--wp--custom--alpha--black-25) 35%, var(--wp--custom--alpha--black-65) 100%);
}
.wp-block-cover.is-style-gi-page-banner-alt::after {
	background: linear-gradient(45deg, var(--wp--custom--alpha--black-55) 0%, var(--wp--custom--alpha--black-20) 45%, var(--wp--custom--alpha--black-0) 75%), linear-gradient(180deg, var(--wp--custom--alpha--black-45) 0%, var(--wp--custom--alpha--black-10) 30%, var(--wp--custom--alpha--black-35) 70%, var(--wp--custom--alpha--black-70) 100%);
}
.wp-block-cover.is-style-gi-page-banner .wp-block-cover__inner-container,
.wp-block-cover.is-style-gi-page-banner-alt .wp-block-cover__inner-container {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: 1600px;
	margin: 0 auto;
	padding: 0 2rem 4.5rem;
	color: inherit;
}

/* Eyebrow: the banner form of the eyebrow (line before, lighter weight). */
.wp-block-cover.is-style-gi-page-banner .is-style-gi-eyebrow,
.wp-block-cover.is-style-gi-page-banner-alt .is-style-gi-eyebrow {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small);
	text-transform: uppercase;
	letter-spacing: 0.22em;
	font-weight: 400;
	color: var(--wp--custom--alpha--white-95);
	margin: 0 0 1rem;
	display: inline-flex;
	align-items: center;
	gap: 0.85rem;
	line-height: 1.7;
}
.wp-block-cover.is-style-gi-page-banner .is-style-gi-eyebrow::before,
.wp-block-cover.is-style-gi-page-banner-alt .is-style-gi-eyebrow::before {
	content: "";
	width: 28px;
	height: 1px;
	background: var(--wp--custom--alpha--white-70);
}

.wp-block-cover.is-style-gi-page-banner h1,
.wp-block-cover.is-style-gi-page-banner-alt h1 {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 400;
	font-size: var(--wp--preset--font-size--fluid-banner);
	line-height: 1.05;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	text-shadow: 0 2px 14px var(--wp--custom--alpha--black-35);
	margin: 0 0 1rem;
	color: inherit;
}
.wp-block-cover.is-style-gi-page-banner-alt h1 {
	line-height: 1.0;
	letter-spacing: 0.005em;
	margin: 0 0 1.25rem;
}
.wp-block-cover.is-style-gi-page-banner p:not(.is-style-gi-eyebrow),
.wp-block-cover.is-style-gi-page-banner-alt p:not(.is-style-gi-eyebrow) {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--body);
	line-height: 1.55;
	color: var(--wp--custom--alpha--white-92);
	max-width: 620px;
	text-shadow: 0 1px 6px var(--wp--custom--alpha--black-35);
	font-weight: 400;
}
.wp-block-cover.is-style-gi-page-banner-alt p:not(.is-style-gi-eyebrow) {
	line-height: 1.6;
	max-width: 640px;
}

/* Hero entrance (.hero-anim, --i: 0..2). */
.wp-block-cover.is-style-gi-page-banner .wp-block-cover__inner-container > *,
.wp-block-cover.is-style-gi-page-banner-alt .wp-block-cover__inner-container > * {
	animation: heroFadeUp 1100ms cubic-bezier(0.22, 1, 0.36, 1) both;
	animation-delay: 250ms;
	will-change: opacity, transform;
}
.wp-block-cover[class*="is-style-gi-page-banner"] .wp-block-cover__inner-container > :nth-child(2) { animation-delay: 390ms; }
.wp-block-cover[class*="is-style-gi-page-banner"] .wp-block-cover__inner-container > :nth-child(3) { animation-delay: 530ms; }
@media (prefers-reduced-motion: reduce) {
	.wp-block-cover[class*="is-style-gi-page-banner"] .wp-block-cover__inner-container > * {
		animation: none;
		opacity: 1;
		transform: none;
	}
}
/* The editing canvas shows the text at once. */
.editor-styles-wrapper .wp-block-cover[class*="is-style-gi-page-banner"] .wp-block-cover__inner-container > * {
	animation: none;
	opacity: 1;
}

@media (max-width: 900px) {
	.wp-block-cover.is-style-gi-page-banner .wp-block-cover__inner-container,
	.wp-block-cover.is-style-gi-page-banner-alt .wp-block-cover__inner-container {
		padding: 0 1.5rem 2.5rem;
	}
}
@media (max-width: 720px) {
	.wp-block-cover.is-style-gi-page-banner {
		height: 38vh;
		min-height: 280px;
	}
	.wp-block-cover.is-style-gi-page-banner-alt {
		height: 50vh;
		min-height: 360px;
	}
}

/* 20-hero.css */
/*
 * Front-page hero (gullsten/hero-slider) — core-block variations inside it.
 * Design: .hero-btn / .hero-btn-primary / .hero-btn-secondary, .hero-eyebrow-item.
 */

/* Hero buttons: white fill (primary) or white outline (secondary), no arrow. */
.wp-block-button.is-style-gi-hero-primary,
.wp-block-button.is-style-gi-hero-secondary {
	display: flex;
	flex-direction: column;
}
.wp-block-button.is-style-gi-hero-primary .wp-block-button__link,
.wp-block-button.is-style-gi-hero-secondary .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--meta);
	font-weight: 700;
	line-height: 1.7;
	text-transform: uppercase;
	text-align: start;
	letter-spacing: 0.1em;
	padding: 0.75rem 1.5rem;
	text-decoration: none;
	border: 1px solid var(--wp--preset--color--white);
	border-radius: 0;
	transition: all 200ms ease;
	position: relative;
	z-index: 30;
}
.wp-block-button.is-style-gi-hero-primary .wp-block-button__link::after,
.wp-block-button.is-style-gi-hero-secondary .wp-block-button__link::after {
	content: none;
}
.wp-block-button.is-style-gi-hero-primary .wp-block-button__link {
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--contrast);
}
.wp-block-button.is-style-gi-hero-primary .wp-block-button__link:hover {
	background: transparent;
	color: var(--wp--preset--color--white);
}
.wp-block-button.is-style-gi-hero-secondary .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--white);
}
.wp-block-button.is-style-gi-hero-secondary .wp-block-button__link:hover {
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--contrast);
}
@media (max-width: 768px) {
	.wp-block-button.is-style-gi-hero-primary .wp-block-button__link,
	.wp-block-button.is-style-gi-hero-secondary .wp-block-button__link {
		justify-content: center;
	}
}
@media (max-width: 720px) {
	.wp-block-button.is-style-gi-hero-primary .wp-block-button__link,
	.wp-block-button.is-style-gi-hero-secondary .wp-block-button__link {
		padding: 0.85rem 1.25rem;
	}
}

/* Rotating eyebrow: one phrase per list item, stacked; .active shows, .exit leaves upwards. */
.wp-block-list.is-style-gi-hero-eyebrow {
	list-style: none;
	margin: 0;
	padding: 0;
}
.wp-block-list.is-style-gi-hero-eyebrow > li {
	position: absolute;
	top: 0;
	left: 0;
	margin: 0;
	opacity: 0;
	transform: translateY(100%);
	transition: opacity 500ms ease, transform 500ms ease;
}
.wp-block-list.is-style-gi-hero-eyebrow > li.active {
	opacity: 1;
	transform: translateY(0);
}
.wp-block-list.is-style-gi-hero-eyebrow > li.exit {
	opacity: 0;
	transform: translateY(-100%);
}

/* 23-aboutus.css */
/*
 * About ("Meistä") — core/group.is-style-gi-aboutus.
 * Design: .aboutus-section, .aboutus-inner (first child group), .aboutus-media
 * (gullsten/photo-rotator), .aboutus-text (second group), .aboutus-eyebrow,
 * .aboutus-title, .aboutus-lede, .btn-square, .aboutus-stats (is-style-gi-aboutus-stats),
 * .aboutus-stat, .aboutus-stat-num, .aboutus-stat-label.
 * The media queries keep the design's source order (900 → 1024 → 720): at 721–900 px
 * the 1024 rules win where both set a value.
 */
.wp-block-group.is-style-gi-aboutus {
	padding: 2rem 2rem 4.5rem;
	background: var(--wp--preset--color--surface);
}
.is-style-gi-aboutus > .wp-block-group:first-child {
	max-width: 1400px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
	gap: 5rem;
	align-items: center;
}
.is-style-gi-aboutus > .wp-block-group:first-child > .wp-block-group {
	display: flex;
	flex-direction: column;
}
.is-style-gi-aboutus .is-style-gi-eyebrow {
	margin-bottom: 1.5rem;
}
.is-style-gi-aboutus h2 {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 400;
	text-transform: uppercase;
	font-size: var(--wp--preset--font-size--fluid-h-2);
	line-height: 1.15;
	letter-spacing: 0.01em;
	color: var(--wp--preset--color--contrast);
	margin: 0 0 1.25rem;
	text-wrap: balance;
}
.is-style-gi-aboutus > .wp-block-group:first-child p:not(.is-style-gi-eyebrow) {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--body);
	line-height: 1.7;
	color: var(--wp--preset--color--ink-soft);
	margin: 0 0 1.25rem;
}

/* Stats row. */
.wp-block-group.is-style-gi-aboutus-stats {
	max-width: 1400px;
	margin: 2rem auto 0;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	border-top: 1px solid var(--wp--preset--color--line);
}
.is-style-gi-aboutus-stats > .wp-block-group {
	padding: 2.25rem 1.5rem 0.5rem;
	border-right: 1px solid var(--wp--preset--color--line);
}
.is-style-gi-aboutus-stats > .wp-block-group:last-child {
	border-right: none;
}
.is-style-gi-aboutus-stats > .wp-block-group > p:first-child {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 400;
	font-size: var(--wp--preset--font-size--fluid-h-2);
	line-height: 1;
	letter-spacing: -0.02em;
	color: var(--wp--preset--color--contrast);
	margin-bottom: 0.85rem;
}
.is-style-gi-aboutus-stats > .wp-block-group > p:last-child {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--meta);
	text-transform: uppercase;
	letter-spacing: 0.14em;
	font-weight: 700;
	color: var(--wp--preset--color--muted);
}

@media (max-width: 900px) {
	.wp-block-group.is-style-gi-aboutus {
		padding: 4rem 1.5rem 3rem;
	}
	.is-style-gi-aboutus > .wp-block-group:first-child {
		grid-template-columns: 1fr;
		gap: 2.5rem;
	}
	.is-style-gi-aboutus .wp-block-gullsten-photo-rotator {
		aspect-ratio: 4 / 3;
	}
	.wp-block-group.is-style-gi-aboutus-stats {
		grid-template-columns: repeat(2, 1fr);
		margin-top: 3rem;
	}
	.is-style-gi-aboutus-stats > .wp-block-group {
		padding: 2rem 1.25rem 0.5rem;
	}
	.is-style-gi-aboutus-stats > .wp-block-group:nth-child(2) {
		border-right: none;
	}
	.is-style-gi-aboutus-stats > .wp-block-group:nth-child(1),
	.is-style-gi-aboutus-stats > .wp-block-group:nth-child(2) {
		border-bottom: 1px solid var(--wp--preset--color--line);
		padding-bottom: 2rem;
	}
}
@media (max-width: 1024px) {
	.wp-block-group.is-style-gi-aboutus {
		padding: 4.5rem 2rem;
	}
	.is-style-gi-aboutus > .wp-block-group:first-child {
		gap: 3rem;
	}
}
/*
 * Phones: the design's second gallery (.aboutus-media-mobile) sits between the
 * heading and the text. The text column dissolves into the grid (display:
 * contents) so the one rotator can take that place.
 */
@media (max-width: 720px) {
	.wp-block-group.is-style-gi-aboutus {
		padding: 3.5rem 1.25rem 2.5rem;
	}
	.is-style-gi-aboutus > .wp-block-group:first-child {
		grid-template-columns: 1fr;
		gap: 0;
	}
	.is-style-gi-aboutus > .wp-block-group:first-child > .wp-block-group {
		display: contents;
	}
	.is-style-gi-aboutus > .wp-block-group:first-child > .wp-block-group > * {
		order: 4;
	}
	.is-style-gi-aboutus > .wp-block-group:first-child > .wp-block-group > .is-style-gi-eyebrow {
		order: 1;
	}
	.is-style-gi-aboutus > .wp-block-group:first-child > .wp-block-group > h2 {
		order: 2;
	}
	.is-style-gi-aboutus .wp-block-gullsten-photo-rotator {
		order: 3;
		margin: 1.5rem 0 0.5rem;
		aspect-ratio: 4 / 3;
	}
	.is-style-gi-aboutus h2 {
		font-size: var(--wp--preset--font-size--h-2);
	}
	.wp-block-group.is-style-gi-aboutus-stats {
		grid-template-columns: repeat(2, 1fr);
		margin-top: 2.5rem;
	}
	.is-style-gi-aboutus-stats > .wp-block-group {
		padding: 1.5rem 1rem 0.5rem;
	}
	.is-style-gi-aboutus-stats > .wp-block-group:nth-child(2) {
		border-right: none;
	}
	.is-style-gi-aboutus-stats > .wp-block-group:nth-child(1),
	.is-style-gi-aboutus-stats > .wp-block-group:nth-child(2) {
		border-bottom: 1px solid var(--wp--preset--color--line);
		padding-bottom: 1.5rem;
	}
}

/* 26-logos.css */
/*
 * Clients + logo wall — core/group.is-style-gi-logos.
 * Design: .about-logos-section, .about-logos-grid (first child group), .about-text-col
 * (its first group), .logo-wall (is-style-gi-logos-wall), .logo-cell (core/image),
 * .logo-cell.tall (image variation gi-logos-tall).
 */
.wp-block-group.is-style-gi-logos {
	padding: 6rem 2rem;
	border-top: 1px solid var(--wp--preset--color--line);
}
.is-style-gi-logos > .wp-block-group:first-child {
	max-width: 1400px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr 1.1fr;
	gap: 5rem;
	align-items: center;
}
.is-style-gi-logos .is-style-gi-eyebrow {
	display: block;
	margin-bottom: 1.25rem;
}
.is-style-gi-logos h2 {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 400;
	text-transform: uppercase;
	font-size: var(--wp--preset--font-size--fluid-title);
	line-height: 1.15;
	letter-spacing: 0.01em;
	margin: 0 0 1.75rem;
	color: var(--wp--preset--color--contrast);
	text-wrap: balance;
	max-width: 22ch;
}
.is-style-gi-logos p:not(.is-style-gi-eyebrow) {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--body);
	line-height: 1.7;
	color: var(--wp--preset--color--ink-soft);
	margin-bottom: 1.25rem;
}
.is-style-gi-logos p:not(.is-style-gi-eyebrow):last-of-type {
	margin-bottom: 2rem;
}
.is-style-gi-logos p a {
	color: var(--wp--preset--color--contrast);
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
}
.is-style-gi-logos p a:hover {
	color: var(--wp--preset--color--primary);
}

/* Logo wall. */
.wp-block-group.is-style-gi-logos-wall {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 2.5rem 3rem;
	width: 100%;
	align-items: center;
	justify-items: center;
}
.is-style-gi-logos-wall > .wp-block-image {
	width: 100%;
	height: 56px;
	margin: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}
.is-style-gi-logos-wall > .wp-block-image.is-style-gi-logos-tall {
	height: 80px;
}
.is-style-gi-logos-wall > .wp-block-image img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
	filter: grayscale(100%);
	opacity: 0.85;
	transition: opacity 200ms ease, transform 200ms ease;
}
.is-style-gi-logos-wall > .wp-block-image:hover img {
	opacity: 1;
	transform: translateY(-1px);
}
/* The design starts a last row of three logos in the second column. */
@media (min-width: 721px) {
	.is-style-gi-logos-wall > .wp-block-image:nth-child(4n+1):nth-last-child(3) {
		grid-column: 2;
	}
}

@media (max-width: 1024px) {
	.wp-block-group.is-style-gi-logos {
		padding: 4.5rem 2rem 3.5rem;
	}
	.is-style-gi-logos > .wp-block-group:first-child {
		gap: 3rem;
	}
	.wp-block-group.is-style-gi-logos-wall {
		grid-template-columns: repeat(3, 1fr);
		gap: 2rem;
	}
}
@media (max-width: 720px) {
	.wp-block-group.is-style-gi-logos {
		padding: 3.5rem 1.25rem 3rem;
	}
	.is-style-gi-logos > .wp-block-group:first-child {
		grid-template-columns: 1fr;
		gap: 2.5rem;
	}
	.is-style-gi-logos h2 {
		font-size: var(--wp--preset--font-size--h-2);
	}
	.wp-block-group.is-style-gi-logos-wall {
		grid-template-columns: repeat(3, 1fr);
		gap: 1.25rem;
	}
	.is-style-gi-logos-wall > .wp-block-image {
		height: 48px;
	}
	.is-style-gi-logos-wall > .wp-block-image.is-style-gi-logos-tall {
		height: 60px;
	}
}

/* 27-eaa.css */
/*
 * EAA affiliation — core/group.is-style-gi-eaa.
 * Design: .eaa-section, .eaa-inner (first child group), .eaa-logo (core/image), .eaa-text.
 */
.wp-block-group.is-style-gi-eaa {
	padding: 5rem 2rem;
	border-top: 1px solid var(--wp--preset--color--line);
	border-bottom: 1px solid var(--wp--preset--color--line);
	background: var(--wp--preset--color--white);
}
.is-style-gi-eaa > .wp-block-group:first-child {
	max-width: 1100px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 4rem;
	align-items: center;
}
.is-style-gi-eaa .wp-block-image {
	display: block;
	width: 140px;
	margin: 0;
}
.is-style-gi-eaa .wp-block-image img {
	display: block;
	width: 100%;
	height: auto;
}
.is-style-gi-eaa p {
	font-family: var(--wp--preset--font-family--body);
	font-style: normal;
	font-weight: 400;
	font-size: var(--wp--preset--font-size--fluid-lede);
	line-height: 1.55;
	color: var(--wp--preset--color--contrast);
	margin: 0;
	letter-spacing: -0.005em;
}
.is-style-gi-eaa p a {
	color: var(--wp--preset--color--contrast);
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
	transition: color 200ms ease;
}
.is-style-gi-eaa p a:hover {
	color: var(--wp--preset--color--primary);
}
@media (max-width: 1024px) {
	.wp-block-group.is-style-gi-eaa {
		padding: 3.5rem 2rem;
	}
}
@media (max-width: 720px) {
	.wp-block-group.is-style-gi-eaa {
		padding: 3rem 1.25rem;
	}
	.is-style-gi-eaa > .wp-block-group:first-child {
		grid-template-columns: 1fr;
		gap: 1.5rem;
		text-align: left;
	}
	.is-style-gi-eaa .wp-block-image {
		width: 100px;
	}
	.is-style-gi-eaa p {
		font-size: var(--wp--preset--font-size--small);
	}
}

/* 30-split.css */
/*
 * Split section — core/group.is-style-gi-split / -split-top (align-items:start),
 * and their -wide forms (1600px: Yritys and Työpaikat use their own design
 * stylesheet, 1400px on the service pages).
 * Design: .split-section, .split-text (the text group), .split-media (the image).
 * The padding-top the design sets inline per page is the group's padding attribute.
 */
.wp-block-group:is(.is-style-gi-split, .is-style-gi-split-top, .is-style-gi-split-wide, .is-style-gi-split-top-wide) {
	max-width: 1400px;
	margin: 0 auto;
	padding: 0 2rem 7rem;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 4.5rem;
	align-items: center;
}
.wp-block-group:is(.is-style-gi-split-top, .is-style-gi-split-top-wide) {
	align-items: start;
}
.wp-block-group:is(.is-style-gi-split-wide, .is-style-gi-split-top-wide) {
	max-width: 1600px;
}

/* .split-text */
:is(.is-style-gi-split, .is-style-gi-split-top, .is-style-gi-split-wide, .is-style-gi-split-top-wide) > .wp-block-group .is-style-gi-eyebrow {
	margin-bottom: 1.25rem;
}
:is(.is-style-gi-split, .is-style-gi-split-top, .is-style-gi-split-wide, .is-style-gi-split-top-wide) > .wp-block-group .is-style-gi-section-title {
	margin: 1.25rem 0 1rem;
}
:is(.is-style-gi-split, .is-style-gi-split-top, .is-style-gi-split-wide, .is-style-gi-split-top-wide) > .wp-block-group p:not(.is-style-gi-eyebrow) {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--body);
	line-height: 1.8;
	color: var(--wp--preset--color--ink-soft);
	margin: 0 0 1.25rem;
}

/* .split-media — the 4:3 cover crop is the image block's aspectRatio/scale attributes. */
:is(.is-style-gi-split, .is-style-gi-split-top, .is-style-gi-split-wide, .is-style-gi-split-top-wide) > .wp-block-image {
	overflow: hidden;
	background: var(--wp--preset--color--surface);
	margin: 0;
}
:is(.is-style-gi-split, .is-style-gi-split-top, .is-style-gi-split-wide, .is-style-gi-split-top-wide) > .wp-block-image img {
	width: 100%;
	display: block;
}

@media (max-width: 900px) {
	.wp-block-group:is(.is-style-gi-split, .is-style-gi-split-top, .is-style-gi-split-wide, .is-style-gi-split-top-wide) {
		grid-template-columns: 1fr;
		gap: 2rem;
		padding: 0 1.5rem 4rem;
	}
}

/* 31-values.css */
/*
 * Values section — core/group.is-style-gi-values (-wide: 1600px) and its content forms.
 * Design: .values-section, .values-head (gi-section-head), .feature-rows + .feature-row
 * (gi-feature-rows > group), .values-grid(--2) + .value-card (gi-values-grid(-2) > group),
 * .area-lede, .svc-list, .svc-examples, .svc-quote; the service pages' cross-section
 * rules and the gi-type-unify overrides (card and row headings).
 * Service pages are the base; Yritys and Työpaikat have their own design stylesheet:
 * gi-values-wide (1600px) and gi-values-grid-grey (grey cards, one column ≤900px).
 */
.wp-block-group:is(.is-style-gi-values, .is-style-gi-values-wide) {
	max-width: 1400px;
	margin: 0 auto;
	padding: 7rem 2rem;
}
.wp-block-group.is-style-gi-values-wide {
	max-width: 1600px;
}
@media (max-width: 900px) {
	.wp-block-group:is(.is-style-gi-values, .is-style-gi-values-wide) {
		padding: 4rem 1.5rem;
	}
}
/*
 * A values section followed by another keeps its full bottom space at every width.
 * Not before the FAQ (#ukk): in the design the placeholder testimonials section (not
 * shipped) or a <style> element sits there, so the rule never applies.
 */
.wp-block-group.is-style-gi-values:has(+ .is-style-gi-values:not(#ukk)) {
	padding-bottom: 7rem;
}
#ukk,
#palaute {
	scroll-margin-top: 110px;
}

/*
 * .values-head. Margins on flow children are written at (0,2,0)+ specificity: the
 * editing canvas prints core's `:root :where(.is-layout-flow) > * { margin-block: 0 }`
 * after this stylesheet, and a single-class rule would lose there.
 */
:is(.is-style-gi-values, .is-style-gi-values-wide, .is-style-gi-process) > .wp-block-group.is-style-gi-section-head {
	margin-bottom: 3rem;
	max-width: 60ch;
}
.is-style-gi-section-head .is-style-gi-section-title {
	margin: 1.25rem 0 1rem;
	overflow-wrap: normal;
}

/* .area-lede */
p.is-style-gi-area-lede {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--body);
	line-height: 1.8;
	color: var(--wp--preset--color--ink-soft);
	margin: 1rem 0 0;
}

/* .svc-list */
.wp-block-list.is-style-gi-svc-list {
	list-style: none;
	margin: 1rem 0 1.25rem;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.55rem;
}
.is-style-gi-section-head > .wp-block-list.is-style-gi-svc-list {
	margin-top: 1.5rem;
}
.is-style-gi-svc-list > li {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--body);
	line-height: 1.6;
	color: var(--wp--preset--color--ink-soft);
	padding-left: 1.1rem;
	position: relative;
}
.is-style-gi-svc-list > li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.55em;
	width: 5px;
	height: 5px;
	background: var(--wp--preset--color--primary);
}
.is-style-gi-svc-list li strong {
	color: var(--wp--preset--color--contrast);
}

/* .svc-examples */
p.is-style-gi-svc-examples {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
	margin-top: 1rem;
}
.is-style-gi-feature-rows + p.is-style-gi-svc-examples {
	margin-top: 2rem;
}
.is-style-gi-svc-examples a {
	color: var(--wp--preset--color--primary);
	text-decoration: none;
	font-weight: 700;
}
.is-style-gi-svc-examples a:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* .feature-rows */
.wp-block-group.is-style-gi-feature-rows {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 0 4rem;
}
.is-style-gi-feature-rows > .wp-block-group {
	border-top: 1px solid var(--wp--preset--color--line);
	padding: 1.75rem 0 2rem;
	min-width: 0;
}
.is-style-gi-feature-rows > .wp-block-group:nth-child(1),
.is-style-gi-feature-rows > .wp-block-group:nth-child(2) {
	border-top: none;
	padding-top: 0;
}
.is-style-gi-feature-rows > .wp-block-group h3 {
	font-family: var(--wp--preset--font-family--body);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--lede);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	line-height: 1.3;
	margin: 0 0 0.75rem;
	color: var(--wp--preset--color--contrast);
}
.is-style-gi-feature-rows > .wp-block-group p {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--body);
	line-height: 1.8;
	color: var(--wp--preset--color--ink-soft);
	margin: 0;
}
@media (max-width: 760px) {
	.wp-block-group.is-style-gi-feature-rows {
		grid-template-columns: 1fr;
		gap: 0;
	}
	.is-style-gi-feature-rows > .wp-block-group:nth-child(2) {
		border-top: 1px solid var(--wp--preset--color--line);
		padding-top: 1.75rem;
	}
}

/* .values-grid + .value-card */
.wp-block-group:is(.is-style-gi-values-grid, .is-style-gi-values-grid-2, .is-style-gi-values-grid-grey) {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.5rem;
}
.wp-block-group.is-style-gi-values-grid-2 {
	grid-template-columns: repeat(2, 1fr);
}
:is(.is-style-gi-values-grid, .is-style-gi-values-grid-2, .is-style-gi-values-grid-grey) > .wp-block-group {
	min-width: 0;
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--line);
	padding: 2.5rem 2rem;
	transition: border-color 0.25s ease, transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.is-style-gi-values-grid-grey > .wp-block-group {
	background: var(--wp--preset--color--surface);
}
:is(.is-style-gi-values-grid, .is-style-gi-values-grid-2, .is-style-gi-values-grid-grey) > .wp-block-group:hover {
	border-color: var(--wp--preset--color--contrast);
	transform: translateY(-4px);
}
:is(.is-style-gi-values-grid, .is-style-gi-values-grid-2, .is-style-gi-values-grid-grey) > .wp-block-group h3 {
	font-family: var(--wp--preset--font-family--body);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--lede);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	line-height: 1.3;
	color: var(--wp--preset--color--contrast);
	margin: 0 0 1rem;
	overflow-wrap: break-word;
	hyphens: auto;
}
:is(.is-style-gi-values-grid, .is-style-gi-values-grid-2, .is-style-gi-values-grid-grey) > .wp-block-group p {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--body);
	line-height: 1.8;
	color: var(--wp--preset--color--ink-soft);
	margin: 0;
}
@media (max-width: 1000px) {
	.wp-block-group:is(.is-style-gi-values-grid, .is-style-gi-values-grid-2) {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (max-width: 900px) {
	.wp-block-group.is-style-gi-values-grid-grey {
		grid-template-columns: 1fr;
	}
}
@media (max-width: 640px) {
	.wp-block-group:is(.is-style-gi-values-grid, .is-style-gi-values-grid-2) {
		grid-template-columns: 1fr;
	}
}

/* .svc-quote — group of the quote paragraph and the attribution paragraph. */
.wp-block-group.is-style-gi-svc-quote {
	max-width: 760px;
	/* 4rem in the shared rules, but each page's own later svc-quote rule sets 3rem. */
	margin: 3rem auto 0;
	text-align: center;
}
.wp-block-group.is-style-gi-svc-quote::before {
	content: "";
	display: block;
	width: 40px;
	height: 2px;
	background: var(--wp--preset--color--primary);
	margin: 0 auto 1.5rem;
}
.is-style-gi-svc-quote > p:first-child {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--h-3);
	line-height: 1.5;
	font-weight: 700;
	color: var(--wp--preset--color--contrast);
	margin: 0 0 1rem;
	text-wrap: balance;
}
.is-style-gi-svc-quote > p:last-child {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
}

/* 32-process.css */
/*
 * Service process band — core/group.is-style-gi-process.
 * Design: .service-process (late full-width override), .values-head, .process-diagram,
 * .process-grid (gi-process-grid) + .process-step (group), .num (gi-step-num);
 * gi-type-unify: no rule above the steps on desktop, uppercase step headings.
 */
.wp-block-group.is-style-gi-process {
	max-width: none;
	margin: 0;
	background: var(--wp--preset--color--surface);
	border-top: 1px solid var(--wp--preset--color--line);
	border-bottom: 1px solid var(--wp--preset--color--line);
	padding: 7rem 2rem;
}
.wp-block-group.is-style-gi-process + .wp-block-group.is-style-gi-values {
	padding-top: 7rem !important;
}
.wp-block-group.is-style-gi-process > .wp-block-group.is-style-gi-section-head,
.wp-block-group.is-style-gi-process > .wp-block-group.is-style-gi-process-grid {
	max-width: 1336px;
	margin-left: auto;
	margin-right: auto;
}

/* .process-diagram — the client's diagram; an empty image renders nothing. */
.wp-block-image.is-style-gi-process-diagram {
	max-width: 1336px;
	margin: 0 auto 3.5rem;
}
.wp-block-image.is-style-gi-process-diagram img {
	display: block;
	width: 100%;
	height: 380px;
	object-fit: contain;
}
@media (max-width: 900px) {
	.wp-block-image.is-style-gi-process-diagram img {
		height: 260px;
	}
}

.wp-block-group.is-style-gi-process-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1.5rem;
}
.is-style-gi-process-grid > .wp-block-group {
	border-top: 1px solid var(--wp--preset--color--line);
	padding-top: 1.5rem;
}
@media (min-width: 901px) {
	.is-style-gi-process .is-style-gi-process-grid > .wp-block-group {
		border-top: none;
		padding-top: 0;
	}
}
p.is-style-gi-step-num {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--meta);
	color: var(--wp--preset--color--primary);
	letter-spacing: 0.14em;
	margin-bottom: 0.75rem;
}
.is-style-gi-process-grid > .wp-block-group h3 {
	font-family: var(--wp--preset--font-family--body);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--lede);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	line-height: 1.3;
	color: var(--wp--preset--color--contrast);
	margin: 0 0 0.6rem;
}
.is-style-gi-process-grid > .wp-block-group p:not(.is-style-gi-step-num) {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--body);
	line-height: 1.65;
	color: var(--wp--preset--color--ink-soft);
	margin: 0;
}
@media (max-width: 900px) {
	.wp-block-group.is-style-gi-process-grid {
		grid-template-columns: 1fr 1fr;
		gap: 2rem;
	}
}
@media (max-width: 520px) {
	.wp-block-group.is-style-gi-process-grid {
		grid-template-columns: 1fr;
	}
}

/* 33-faq.css */
/*
 * FAQ — core/group.is-style-gi-faq-list of core/details.is-style-gi-faq.
 * Design: .faq-list, .faq-item, summary (+ rotating "+"), .faq-answer p.
 * The smooth open/close is src/js/30-inner.js.
 */
.wp-block-group.is-style-gi-faq-list {
	border-top: 1px solid var(--wp--preset--color--contrast);
}
.wp-block-details.is-style-gi-faq {
	border-bottom: 1px solid var(--wp--preset--color--line);
}
.wp-block-details.is-style-gi-faq > summary {
	list-style: none;
	cursor: pointer;
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1.5rem;
	padding: 1.4rem 0.25rem;
	font-family: var(--wp--preset--font-family--body);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--body);
	line-height: 1.4;
	color: var(--wp--preset--color--contrast);
	transition: color 160ms ease;
}
.wp-block-details.is-style-gi-faq > summary::-webkit-details-marker {
	display: none;
}
.wp-block-details.is-style-gi-faq > summary:hover {
	color: var(--wp--preset--color--primary);
}
.wp-block-details.is-style-gi-faq > summary::after {
	content: "+";
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--h-3);
	line-height: 1;
	color: var(--wp--preset--color--primary);
	flex: none;
	transition: transform 250ms ease;
}
.wp-block-details.is-style-gi-faq[open] > summary::after {
	transform: rotate(45deg);
}
.wp-block-details.is-style-gi-faq > p {
	margin: 0;
	padding: 0 0.25rem 1.6rem;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--body);
	line-height: 1.75;
	color: var(--wp--preset--color--ink-soft);
	max-width: 70ch;
}

/* 34-testimonials.css */
/*
 * Testimonials — core/group.is-style-gi-testimonials of core/quote.is-style-gi-testimonial.
 * Design: .testimonial-grid, .testimonial-card (quote mark, text, name + title).
 */
.wp-block-group.is-style-gi-testimonials {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.75rem;
}
.wp-block-quote.is-style-gi-testimonial {
	margin: 0;
	padding: 2rem;
	border: 1px solid var(--wp--preset--color--line);
	background: var(--wp--preset--color--surface);
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}
.wp-block-quote.is-style-gi-testimonial::before {
	content: "\201D";
	font-family: var(--wp--preset--font-family--heading);
	font-size: 3rem;
	line-height: 0.5;
	color: var(--wp--preset--color--primary);
	display: block;
}
.wp-block-quote.is-style-gi-testimonial p {
	margin: 0;
	font-size: var(--wp--preset--font-size--body);
	line-height: 1.7;
	color: var(--wp--preset--color--ink-soft);
	flex: 1;
}
.wp-block-quote.is-style-gi-testimonial cite {
	font-style: normal;
	font-size: var(--wp--preset--font-size--meta);
	color: var(--wp--preset--color--muted);
}
.wp-block-quote.is-style-gi-testimonial cite strong {
	display: block;
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--small);
}
@media (max-width: 900px) {
	.wp-block-group.is-style-gi-testimonials {
		grid-template-columns: 1fr;
	}
}

/* 35-stats-band.css */
/*
 * Stats band — core/group.is-style-gi-stats > group (.stats-inner) > groups (.stat)
 * of two paragraphs (.stat-num, .stat-label). Design: Yritys.
 */
.wp-block-group.is-style-gi-stats {
	background: var(--wp--preset--color--surface);
	border-top: 1px solid var(--wp--preset--color--line);
	border-bottom: 1px solid var(--wp--preset--color--line);
	padding: 5rem 2rem;
}
.is-style-gi-stats > .wp-block-group {
	max-width: 1600px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 2.5rem;
}
.is-style-gi-stats > .wp-block-group > .wp-block-group > p:first-child {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 400;
	font-size: var(--wp--preset--font-size--fluid-h-2);
	letter-spacing: -0.02em;
	line-height: 1;
	color: var(--wp--preset--color--contrast);
	margin-bottom: 0.85rem;
}
.is-style-gi-stats > .wp-block-group > .wp-block-group > p:last-child {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--meta);
	line-height: 1.5;
	color: var(--wp--preset--color--muted);
}
@media (max-width: 760px) {
	.is-style-gi-stats > .wp-block-group {
		grid-template-columns: 1fr 1fr;
		gap: 2rem;
	}
}

/* 40-project-hero.css */
/*
 * Project hero — core/cover.is-style-gi-project-hero with the featured image
 * (templates/single-project.html). Design: GI - Project.html .project-hero,
 * .project-hero-bg (slow zoom), .project-hero::after, .project-hero-inner/-text,
 * .project-hero-title, .project-hero-slogan,
 * .project-hero-scroll (button variation gi-scroll-down), .hero-anim entrance.
 * The back link and the categories are gullsten/project-terms.
 */
@keyframes giProjectHeroZoom {
	from { transform: scale(1.1); }
	to { transform: scale(1.0); }
}
@keyframes giScrollBounce {
	0%, 100% { transform: rotate(45deg) translate(-3px, -3px); opacity: 0.5; }
	50% { transform: rotate(45deg) translate(2px, 2px); opacity: 1; }
}

.wp-block-cover.is-style-gi-project-hero {
	position: relative;
	height: 100vh;
	min-height: 640px;
	max-height: 1080px;
	overflow: hidden;
	background: var(--wp--preset--color--charcoal);
	color: var(--wp--preset--color--white);
	display: flex;
	align-items: flex-end;
	justify-content: flex-start;
	padding: 0;
}
.wp-block-cover.is-style-gi-project-hero .wp-block-cover__image-background,
.wp-block-cover.is-style-gi-project-hero .wp-block-cover__image-background.is-repeated {
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	object-position: center;
	transform: scale(1.05);
	animation: giProjectHeroZoom 16s ease-out forwards;
}
.wp-block-cover.is-style-gi-project-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	/* Above the background image (z-index 0, earlier), below the text (core gives the container z-index 1). */
	z-index: 0;
	pointer-events: none;
	background: linear-gradient(45deg, var(--wp--custom--alpha--black-65) 0%, var(--wp--custom--alpha--black-25) 40%, var(--wp--custom--alpha--black-0) 70%), linear-gradient(180deg, var(--wp--custom--alpha--black-35) 0%, var(--wp--custom--alpha--black-10) 25%, var(--wp--custom--alpha--black-10) 55%, var(--wp--custom--alpha--black-55) 100%);
}
.wp-block-cover.is-style-gi-project-hero .wp-block-cover__inner-container {
	position: relative;
	width: 100%;
	max-width: 1600px;
	margin: 0 auto;
	padding: 0 2rem 5rem;
	color: inherit;
}
.wp-block-cover.is-style-gi-project-hero .wp-block-cover__inner-container > :not(.wp-block-buttons) {
	max-width: 900px;
}

.wp-block-cover.is-style-gi-project-hero .wp-block-post-title {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 400;
	font-size: clamp(2.4rem, 5.5vw, 5rem);
	line-height: 1;
	letter-spacing: -0.005em;
	text-transform: uppercase;
	text-shadow: 0 2px 18px var(--wp--custom--alpha--black-35);
	margin: 0 0 1.5rem;
	text-wrap: balance;
	color: inherit;
}
.wp-block-cover.is-style-gi-project-hero .wp-block-post-excerpt {
	margin: 0;
}
.wp-block-cover.is-style-gi-project-hero .wp-block-post-excerpt__excerpt {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--fluid-lede);
	font-weight: 400;
	line-height: 1.45;
	color: var(--wp--custom--alpha--white-92);
	max-width: 650px;
	text-shadow: 0 1px 6px var(--wp--custom--alpha--black-35);
	text-wrap: balance;
	margin: 0;
}
.wp-block-cover.is-style-gi-project-hero .wp-block-post-excerpt__more-text {
	display: none;
}

/* "Tutustu" — scrolls to the meta strip (the link's #projektin-tiedot). */
.wp-block-cover.is-style-gi-project-hero .wp-block-buttons {
	position: absolute;
	bottom: 1.75rem;
	left: 50%;
	z-index: 3;
	margin: 0;
}
.wp-block-button.is-style-gi-scroll-down .wp-block-button__link {
	color: var(--wp--custom--alpha--white-85);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--micro);
	text-transform: uppercase;
	letter-spacing: 0.22em;
	font-weight: 700;
	line-height: normal;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.5rem;
	background: none;
	border: none;
	border-radius: 0;
	padding: 0.5rem 1rem;
	cursor: pointer;
	text-decoration: none;
	transition: color 200ms ease;
}
.wp-block-button.is-style-gi-scroll-down .wp-block-button__link:hover {
	color: var(--wp--preset--color--white);
}
.wp-block-button.is-style-gi-scroll-down .wp-block-button__link::after {
	content: "";
	width: 9px;
	height: 9px;
	font-size: 0;
	border-right: 1px solid currentColor;
	border-bottom: 1px solid currentColor;
	transform: rotate(45deg);
	animation: giScrollBounce 2s ease-in-out infinite;
}

/* Entrance (.hero-anim, --i: 0..4): back link, categories, title, slogan, "Tutustu". */
.wp-block-cover.is-style-gi-project-hero .wp-block-cover__inner-container > :not(.wp-block-gullsten-project-terms),
.wp-block-cover.is-style-gi-project-hero .wp-block-gullsten-project-terms > * {
	animation: heroFadeUp 1100ms cubic-bezier(0.22, 1, 0.36, 1) both;
	animation-delay: 120ms;
	will-change: opacity, transform;
}
.wp-block-cover.is-style-gi-project-hero .wp-block-gullsten-project-terms > :nth-child(2) { animation-delay: 260ms; }
.wp-block-cover.is-style-gi-project-hero .wp-block-cover__inner-container > .wp-block-post-title:not(.x) { animation-delay: 400ms; }
.wp-block-cover.is-style-gi-project-hero .wp-block-cover__inner-container > .wp-block-post-excerpt:not(.x) { animation-delay: 540ms; }
/* The design's entrance replaces the button's translateX(-50%), so it rests with its left edge at the centre. */
.wp-block-cover.is-style-gi-project-hero .wp-block-cover__inner-container > .wp-block-buttons:not(.x) {
	animation-delay: 680ms;
}
@media (prefers-reduced-motion: reduce) {
	.wp-block-cover.is-style-gi-project-hero .wp-block-cover__inner-container > :not(.wp-block-gullsten-project-terms):not(.x),
	.wp-block-cover.is-style-gi-project-hero .wp-block-cover__inner-container > .wp-block-gullsten-project-terms > *:not(.x) {
		animation: none;
		opacity: 1;
		transform: none;
	}
}
.editor-styles-wrapper .wp-block-cover.is-style-gi-project-hero .wp-block-cover__inner-container > :not(.wp-block-gullsten-project-terms):not(.x),
.editor-styles-wrapper .wp-block-cover.is-style-gi-project-hero .wp-block-cover__inner-container > .wp-block-gullsten-project-terms > *:not(.x) {
	animation: none;
	opacity: 1;
}

@media (max-width: 1024px) {
	.wp-block-cover.is-style-gi-project-hero {
		height: 80vh;
		min-height: 560px;
	}
	.wp-block-cover.is-style-gi-project-hero .wp-block-cover__inner-container {
		padding: 0 1.5rem 3.5rem;
	}
}
@media (max-width: 720px) {
	.wp-block-cover.is-style-gi-project-hero {
		height: 90vh;
	}
	.wp-block-cover.is-style-gi-project-hero .wp-block-post-title {
		font-size: clamp(2.2rem, 11vw, 4rem);
	}
}

/* 41-project-archive.css */
/*
 * Project category archive (templates/taxonomy-project_taxonomy.html) —
 * core/group.is-style-gi-project-archive holding a Query Loop of
 * gullsten/project-card blocks. The design has no archive page; it reuses the
 * projects page's grid (GI - Projects.html .projects-grid, .load-more look for
 * the pagination).
 */
.wp-block-group.is-style-gi-project-archive {
	max-width: 1600px;
	margin: 0 auto;
	padding: 4rem 2rem 6rem;
}
.is-style-gi-project-archive .wp-block-post-template {
	display: grid;
	grid-template-columns: repeat(8, 1fr);
	grid-auto-rows: clamp(240px, 22vw, 320px);
	gap: 10px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.is-style-gi-project-archive .wp-block-post-template > li {
	grid-column: span 2;
	margin: 0;
}
.is-style-gi-project-archive .wp-block-post-template > li:nth-child(6n+1),
.is-style-gi-project-archive .wp-block-post-template > li:nth-child(6n+2),
.is-style-gi-project-archive .wp-block-post-template > li:nth-child(6n+5),
.is-style-gi-project-archive .wp-block-post-template > li:nth-child(6n+6) {
	grid-column: span 3;
}
.is-style-gi-project-archive .wp-block-post-template > li > .wp-block-gullsten-project-card {
	height: 100%;
}
.is-style-gi-project-archive .wp-block-query-pagination {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 0.5rem;
	margin-top: 3rem;
}
.is-style-gi-project-archive .wp-block-query-pagination a,
.is-style-gi-project-archive .wp-block-query-pagination .page-numbers {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--meta);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: var(--wp--preset--color--contrast);
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--contrast);
	padding: 0.75rem 1.1rem;
	text-decoration: none;
	transition: all 250ms ease;
}
.is-style-gi-project-archive .wp-block-query-pagination a:hover,
.is-style-gi-project-archive .wp-block-query-pagination .page-numbers.current {
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--white);
}
.is-style-gi-project-archive .wp-block-query-no-results p {
	font-family: var(--wp--preset--font-family--body);
	color: var(--wp--preset--color--muted);
	text-align: center;
	padding: 4rem 1rem;
}
@media (max-width: 1100px) {
	.is-style-gi-project-archive .wp-block-post-template {
		grid-template-columns: repeat(2, 1fr);
		grid-auto-rows: clamp(220px, 34vw, 320px);
	}
	.is-style-gi-project-archive .wp-block-post-template > li,
	.is-style-gi-project-archive .wp-block-post-template > li:nth-child(n) {
		grid-column: span 1;
	}
}
@media (max-width: 900px) {
	.wp-block-group.is-style-gi-project-archive {
		padding: 2.5rem 1.5rem 4rem;
	}
}
@media (max-width: 720px) {
	.wp-block-group.is-style-gi-project-archive {
		padding: 2rem 1.25rem 4rem;
	}
	.is-style-gi-project-archive .wp-block-post-template {
		grid-template-columns: 1fr;
		grid-auto-rows: 240px;
		gap: 8px;
	}
	.is-style-gi-project-archive .wp-block-post-template > li,
	.is-style-gi-project-archive .wp-block-post-template > li:nth-child(n) {
		grid-column: 1 / -1;
	}
}

/* 50-blog.css */
/*
 * Blog lists — core/query.is-style-gi-articles (posts page, archives, search)
 * and the article card (GI.postCard) wherever it is used.
 * Design ("GI - Articles.html"): .articles-wrap, .articles-grid, .article-card(-img
 * |-date|-title|-excerpt|-read), .grid-empty, .load-more-wrap.
 * The card's related-articles form is in 52-article.css.
 */

/* ---------- the list ---------- */
.wp-block-query.is-style-gi-articles {
	max-width: 1600px;
	margin: 0 auto;
	padding: 1.25rem 2rem 6rem;
}
.is-style-gi-articles > .wp-block-post-template {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 3.5rem 2rem;
}

/* ---------- the card ---------- */
.is-style-gi-articles .wp-block-post,
.is-style-gi-related .wp-block-post {
	display: flex;
	flex-direction: column;
	margin: 0;
}
.is-style-gi-articles .wp-block-post-featured-image,
.is-style-gi-related .wp-block-post-featured-image {
	position: relative;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--wp--preset--color--graphite);
	margin: 0 0 1.5rem;
}
.is-style-gi-articles .wp-block-post-featured-image a,
.is-style-gi-related .wp-block-post-featured-image a {
	position: absolute;
	inset: 0;
}
.is-style-gi-articles .wp-block-post-featured-image img,
.is-style-gi-related .wp-block-post-featured-image img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: opacity 500ms ease, transform 1000ms cubic-bezier(0.22, 1, 0.36, 1);
}
.is-style-gi-articles .wp-block-post:hover .wp-block-post-featured-image img,
.is-style-gi-related .wp-block-post:hover .wp-block-post-featured-image img {
	transform: scale(1.04);
}
.is-style-gi-articles .wp-block-post-date,
.is-style-gi-related .wp-block-post-date {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--meta);
	font-weight: 700;
	line-height: 1.7;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: var(--wp--preset--color--ink-soft);
	margin: 0 0 0.6rem;
}
.is-style-gi-articles .wp-block-post-title,
.is-style-gi-related .wp-block-post-title {
	font-family: var(--wp--preset--font-family--body);
	font-weight: 700;
	text-transform: none;
	font-size: var(--wp--preset--font-size--body);
	line-height: 1.4;
	letter-spacing: -0.005em;
	margin: 0 0 0.85rem;
	color: var(--wp--preset--color--contrast);
	text-wrap: pretty;
	transition: color 200ms ease;
}
.is-style-gi-articles .wp-block-post-title a,
.is-style-gi-related .wp-block-post-title a {
	color: inherit;
	text-decoration: none;
}
.is-style-gi-articles .wp-block-post:hover .wp-block-post-title,
.is-style-gi-related .wp-block-post:hover .wp-block-post-title {
	color: var(--wp--preset--color--primary);
}
.is-style-gi-articles .wp-block-post-excerpt,
.is-style-gi-related .wp-block-post-excerpt {
	margin: 0;
}
.is-style-gi-articles .wp-block-post-excerpt__excerpt,
.is-style-gi-related .wp-block-post-excerpt__excerpt {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--body);
	line-height: 1.6;
	color: var(--wp--preset--color--ink-soft);
	margin: 0 0 1rem;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.is-style-gi-articles .wp-block-read-more,
.is-style-gi-related .wp-block-read-more {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--meta);
	font-weight: 700;
	line-height: 1.7;
	text-transform: uppercase;
	letter-spacing: 0.16em;
	color: var(--wp--preset--color--primary);
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	width: fit-content;
	margin-top: auto;
	padding-top: 0.25rem;
}
.is-style-gi-articles .wp-block-read-more::after,
.is-style-gi-related .wp-block-read-more::after {
	content: "→";
	font-size: 1.35em;
	line-height: 1;
	display: inline-block;
	vertical-align: middle;
	transition: transform 250ms cubic-bezier(0.22, 1, 0.36, 1);
}
.is-style-gi-articles .wp-block-post:hover .wp-block-read-more::after,
.is-style-gi-related .wp-block-post:hover .wp-block-read-more::after {
	transform: translateX(4px);
}

/* ---------- empty state ---------- */
.is-style-gi-articles .wp-block-query-no-results {
	padding: 6rem 1rem;
	text-align: center;
	color: var(--wp--preset--color--muted);
	font-family: var(--wp--preset--font-family--body);
}
.is-style-gi-articles .wp-block-query-no-results h3 {
	font-family: var(--wp--preset--font-family--heading);
	text-transform: uppercase;
	font-size: var(--wp--preset--font-size--h-3);
	line-height: 1.7;
	color: var(--wp--preset--color--contrast);
	margin: 0 0 0.75rem;
}
.is-style-gi-articles .wp-block-query-no-results .wp-block-buttons {
	justify-content: center;
	margin-top: 1.5rem;
}
.is-style-gi-articles .wp-block-query-no-results .wp-block-button__link {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--meta);
	font-weight: 700;
	line-height: normal;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--white);
	padding: 0.75rem 1.5rem;
	transition: background 200ms ease;
}
.is-style-gi-articles .wp-block-query-no-results .wp-block-button__link:hover,
.is-style-gi-articles .wp-block-query-no-results .wp-block-button__link:focus-visible {
	background: var(--wp--preset--color--primary);
}

/* ---------- "Näytä lisää" (.load-more-wrap) ---------- */
.is-style-gi-articles > .wp-block-query-pagination {
	display: flex;
	justify-content: center;
	margin: 4rem 0 0;
}

@media (max-width: 1100px) {
	.is-style-gi-articles > .wp-block-post-template {
		grid-template-columns: repeat(2, 1fr);
		gap: 3rem 1.5rem;
	}
}
@media (max-width: 900px) {
	.wp-block-query.is-style-gi-articles {
		padding: 1rem 1.5rem 4rem;
	}
}
@media (max-width: 720px) {
	.is-style-gi-articles > .wp-block-post-template {
		grid-template-columns: 1fr;
		gap: 2.5rem;
	}
}

/* 52-article.css */
/*
 * Single article — design: "GI - Article.html".
 *   core/cover.is-style-gi-article-hero        .article-hero (+ -bg, ::after, -inner,
 *                                              -breadcrumb, -title); meta: gullsten/post-meta
 *   core/group.is-style-gi-article-body        .article-body-wrap (+ -eyebrow, -col)
 *   core/post-content.is-style-gi-article-content  .article-body typography: every
 *                                              article looks the same
 *   core/group.is-style-gi-article-meta-bar    .article-meta-bar
 *   core/group.is-style-gi-related             .related (+ -header, -grid, -card)
 *   .gi-reading-progress                       .reading-progress (made by 50-article.js)
 */

/* ---------- reading progress ---------- */
.gi-reading-progress {
	position: fixed;
	top: 0;
	left: 0;
	height: 2px;
	background: var(--wp--preset--color--primary);
	z-index: 200;
	width: 0;
	transition: width 100ms linear;
	pointer-events: none;
}

/* ---------- hero ---------- */
@keyframes articleHeroZoom {
	from { transform: scale(1.1); }
	to { transform: scale(1.0); }
}
.wp-block-cover.is-style-gi-article-hero {
	position: relative;
	min-height: 78vh;
	max-height: 880px;
	overflow: hidden;
	background: var(--wp--preset--color--charcoal);
	color: var(--wp--preset--color--white);
	display: flex;
	align-items: flex-end;
	justify-content: flex-start;
	padding: 9rem 2rem 4rem;
}
.wp-block-cover.is-style-gi-article-hero .wp-block-cover__image-background {
	opacity: 0.92;
	transform: scale(1.05);
	animation: articleHeroZoom 16s ease-out forwards;
}
/* The design's ::after overlay, as ::before: at core's z-index 1 for the text it must paint first. */
.wp-block-cover.is-style-gi-article-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(45deg, var(--wp--custom--alpha--black-70) 0%, var(--wp--custom--alpha--black-30) 45%, var(--wp--custom--alpha--black-0) 75%), linear-gradient(180deg, var(--wp--custom--alpha--black-40) 0%, var(--wp--custom--alpha--black-15) 30%, var(--wp--custom--alpha--black-15) 60%, var(--wp--custom--alpha--black-75) 100%);
}
.wp-block-cover.is-style-gi-article-hero .wp-block-cover__inner-container {
	position: relative;
	z-index: 2;
	max-width: 1600px;
	width: 100%;
	margin: 0 auto;
	padding: 0;
	color: inherit;
}
.is-style-gi-article-hero .is-style-gi-breadcrumb {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.7;
	text-transform: uppercase;
	letter-spacing: 0.2em;
	font-weight: 700;
	color: var(--wp--custom--alpha--white-85);
	margin: 0 0 2rem;
	display: inline-flex;
	align-items: center;
	gap: 0.85rem;
}
.is-style-gi-breadcrumb a {
	color: inherit;
	text-decoration: none;
	transition: color 200ms ease;
	display: inline-flex;
	align-items: center;
	gap: 0.85rem;
}
.is-style-gi-breadcrumb a::before {
	content: "";
	width: 24px;
	height: 1px;
	background: var(--wp--custom--alpha--white-55);
}
.is-style-gi-breadcrumb a:hover,
.is-style-gi-breadcrumb a:focus-visible {
	color: var(--wp--preset--color--white);
}
.wp-block-cover.is-style-gi-article-hero h1 {
	font-family: var(--wp--preset--font-family--body);
	font-weight: 700;
	font-size: clamp(1.7rem, 2.9vw, 2.6rem);
	line-height: 1.22;
	letter-spacing: -0.01em;
	text-transform: none;
	text-shadow: 0 2px 18px var(--wp--custom--alpha--black-40);
	margin: 0 0 2rem;
	text-wrap: balance;
	max-width: 28ch;
	color: inherit;
}
/* Hero entrance (.hero-defer .hero-anim: breadcrumb --i 0, title --i 2, meta --i 3). */
.wp-block-cover.is-style-gi-article-hero .wp-block-cover__inner-container > * {
	animation: heroFadeUp 1100ms cubic-bezier(0.22, 1, 0.36, 1) both;
	animation-delay: 120ms;
	will-change: opacity, transform;
}
.wp-block-cover.is-style-gi-article-hero .wp-block-cover__inner-container > :nth-child(2) { animation-delay: 400ms; }
.wp-block-cover.is-style-gi-article-hero .wp-block-cover__inner-container > :nth-child(3) { animation-delay: 540ms; }
@media (prefers-reduced-motion: reduce) {
	.wp-block-cover.is-style-gi-article-hero .wp-block-cover__inner-container > * {
		animation: none;
		opacity: 1;
		transform: none;
	}
}
.editor-styles-wrapper .wp-block-cover.is-style-gi-article-hero .wp-block-cover__inner-container > * {
	animation: none;
	opacity: 1;
}

/* ---------- body ---------- */
.wp-block-group.is-style-gi-article-body {
	padding: 6rem 2rem 5rem;
	max-width: 1240px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 200px 1fr;
	gap: 5rem;
	align-items: start;
}
.is-style-gi-article-body > .wp-block-group {
	min-width: 0;
}
.is-style-gi-article-label {
	position: sticky;
	top: 7rem;
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--h-2);
	text-transform: uppercase;
	letter-spacing: 0.02em;
	font-weight: 400;
	line-height: 1.1;
	color: var(--wp--preset--color--contrast);
}
.is-style-gi-article-label::before {
	content: "";
	display: block;
	width: 40px;
	height: 2px;
	background: var(--wp--preset--color--primary);
	margin-bottom: 1.1rem;
}

/* ---------- article typography ---------- */
.is-style-gi-article-content {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--body);
	line-height: 1.75;
	color: var(--wp--preset--color--ink-soft);
}
.is-style-gi-article-content > p,
.is-style-gi-article-content > h2,
.is-style-gi-article-content > h3,
.is-style-gi-article-content > h4,
.is-style-gi-article-content > ul,
.is-style-gi-article-content > ol,
.is-style-gi-article-content > blockquote {
	max-width: 680px;
}
/* Lede: the opening paragraph keeps the desktop measure on phones (design: .lede). */
.is-style-gi-article-content > p:first-child {
	line-height: 1.75;
}
.is-style-gi-article-content p {
	margin: 0 0 1.5rem;
	padding: 0;
	text-wrap: pretty;
}
.is-style-gi-article-content h2 {
	font-family: var(--wp--preset--font-family--body);
	font-weight: 700;
	text-transform: none;
	font-size: var(--wp--preset--font-size--h-2);
	line-height: 1.3;
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--contrast);
	margin: 3rem 0 1.25rem;
	padding: 0;
}
.is-style-gi-article-content h3,
.is-style-gi-article-content h4 {
	font-family: var(--wp--preset--font-family--body);
	font-weight: 700;
	text-transform: none;
	font-size: var(--wp--preset--font-size--lede);
	line-height: 1.35;
	letter-spacing: -0.005em;
	color: var(--wp--preset--color--contrast);
	margin: 2.5rem 0 1rem;
	padding: 0;
}
.is-style-gi-article-content strong {
	color: var(--wp--preset--color--contrast);
	font-weight: 700;
}
.is-style-gi-article-content em {
	font-style: normal;
}
.is-style-gi-article-content a {
	color: var(--wp--preset--color--primary);
	text-decoration: none;
	background: linear-gradient(currentColor, currentColor) bottom left / 100% 1px no-repeat;
	transition: background-size 300ms cubic-bezier(0.22, 1, 0.36, 1), color 200ms ease;
}
.is-style-gi-article-content a:hover,
.is-style-gi-article-content a:focus-visible {
	color: var(--wp--preset--color--primary-dark);
	background-size: 0% 1px;
}
.is-style-gi-article-content ul,
.is-style-gi-article-content ol {
	margin: 1.5rem 0 1.5rem 1.5rem;
	padding-left: 0.5rem;
}
.is-style-gi-article-content li {
	margin-bottom: 0.5rem;
}
.is-style-gi-article-content li::marker {
	color: var(--wp--preset--color--primary);
}
.is-style-gi-article-content blockquote {
	margin: 3rem 0;
	padding: 0;
	border: 0;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--fluid-h-3);
	line-height: 1.4;
	letter-spacing: -0.01em;
	text-transform: none;
	color: var(--wp--preset--color--contrast);
	font-weight: 700;
	text-align: center;
	text-wrap: balance;
}
.is-style-gi-article-content blockquote::before,
.is-style-gi-article-content blockquote::after {
	content: "";
	display: block;
	width: 48px;
	height: 1px;
	background: var(--wp--preset--color--primary);
	margin: 0 auto 2rem;
}
.is-style-gi-article-content blockquote::after {
	margin: 2rem auto 0;
}
/* Images and embeds run the full column width. */
.is-style-gi-article-content figure {
	display: block;
	width: 100%;
	max-width: 100%;
	margin: 3rem 0;
}
.is-style-gi-article-content img {
	display: block;
	width: 100% !important;
	max-width: 100% !important;
	height: auto !important;
	margin: 0;
}
.is-style-gi-article-content figcaption {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--meta);
	color: var(--wp--preset--color--muted);
	line-height: 1.55;
	margin: 0.85rem 0 0;
	text-align: center;
	font-style: normal;
}
/* Tail: a paragraph that is one emphasised note (credits, boilerplate). */
.is-style-gi-article-content > p > em:only-child {
	display: block;
	margin-top: 3rem;
	padding-top: 2rem;
	border-top: 1px solid var(--wp--preset--color--line);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--meta);
	line-height: 1.7;
	color: var(--wp--preset--color--muted);
	font-style: normal;
}

/* ---------- published + share ---------- */
.wp-block-group.is-style-gi-article-meta-bar {
	border-top: 1px solid var(--wp--preset--color--line);
	border-bottom: 1px solid var(--wp--preset--color--line);
	margin: 4rem 0 0;
	padding: 1.75rem 0;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1.5rem;
	flex-wrap: wrap;
}

/* ---------- related ---------- */
.wp-block-group.is-style-gi-related {
	padding: 6rem 2rem;
	background: var(--wp--preset--color--surface);
}
.is-style-gi-related > * {
	max-width: 1600px;
	margin-left: auto;
	margin-right: auto;
}
.wp-block-group.is-style-gi-related-head {
	display: flex;
	justify-content: space-between;
	align-items: end;
	margin-bottom: 3rem;
	gap: 2rem;
	flex-wrap: wrap;
}
.is-style-gi-related-head h2 {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 400;
	font-size: var(--wp--preset--font-size--fluid-h-2);
	text-transform: uppercase;
	letter-spacing: 0.01em;
	margin: 0;
}
.is-style-gi-related-head p {
	display: flex;
}
.is-style-gi-related-head a {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--meta);
	line-height: 1.7;
	text-transform: uppercase;
	letter-spacing: 0.18em;
	font-weight: 700;
	color: var(--wp--preset--color--primary);
	text-decoration: none;
	padding-bottom: 0.25rem;
	border-bottom: 1px solid var(--wp--preset--color--primary);
	transition: color 200ms ease, border-color 200ms ease;
}
.is-style-gi-related-head a:hover,
.is-style-gi-related-head a:focus-visible {
	color: var(--wp--preset--color--primary-dark);
	border-color: var(--wp--preset--color--primary-dark);
}
.is-style-gi-related .wp-block-post-template {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2.5rem 2rem;
}
/* The related card: no excerpt, the unified project-card title (gi-type-unify). */
.is-style-gi-related .wp-block-post-featured-image {
	margin-bottom: 1.25rem;
}
.is-style-gi-related .wp-block-post-date {
	margin-bottom: 0.5rem;
}
.is-style-gi-related .wp-block-post-title {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 400;
	font-size: var(--wp--preset--font-size--h-3);
	text-transform: uppercase;
	letter-spacing: 0.02em;
	line-height: 1.1;
	margin: 0 0 0.75rem;
	text-wrap: balance;
}

@media (max-width: 1024px) {
	.wp-block-cover.is-style-gi-article-hero {
		min-height: 65vh;
		padding: 8rem 1.5rem 3rem;
	}
	.wp-block-group.is-style-gi-article-body {
		padding: 4rem 1.5rem 3rem;
		grid-template-columns: 1fr;
		gap: 2rem;
	}
	.is-style-gi-article-label {
		position: static;
	}
	.is-style-gi-article-content figure {
		margin: 2.5rem 0;
	}
	.wp-block-group.is-style-gi-related {
		padding: 4rem 1.5rem;
	}
	.is-style-gi-related .wp-block-post-template {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (max-width: 720px) {
	.wp-block-cover.is-style-gi-article-hero {
		min-height: 60vh;
		padding: 6.5rem 1.25rem 2.5rem;
	}
	.is-style-gi-article-content {
		line-height: 1.7;
	}
	.wp-block-group.is-style-gi-article-body {
		padding: 3rem 1.25rem 2rem;
	}
	.is-style-gi-article-content blockquote {
		font-size: var(--wp--preset--font-size--lede);
		margin: 2.5rem 0;
	}
	.wp-block-group.is-style-gi-article-meta-bar {
		flex-direction: column;
		align-items: flex-start;
		gap: 1rem;
	}
	.is-style-gi-related .wp-block-post-template {
		grid-template-columns: 1fr;
	}
}

/* 60-cta.css */
/*
 * CTA — core/cover.is-style-gi-cta. Design: .cta-section, .cta-inner, .cta-title,
 * .cta-lede, .cta-button (outline-light button variation, 00-base.css).
 * The cover's own image div is the parallax background and its overlay span the
 * gradient (block attributes, editable in the sidebar).
 */
.wp-block-cover.is-style-gi-cta {
	position: relative;
	display: block;
	min-height: 0;
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--white);
	padding: 7rem 2rem;
	text-align: center;
	overflow: hidden;
	isolation: isolate;
}
/* text-align again here: the editor's cover CSS sets the inner container to left. */
.wp-block-cover.is-style-gi-cta .wp-block-cover__inner-container {
	max-width: 720px;
	margin: 0 auto;
	width: 100%;
	text-align: center;
}
.wp-block-cover.is-style-gi-cta h2 {
	font-size: var(--wp--preset--font-size--fluid-h-2);
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 400;
	text-transform: uppercase;
	margin: 0 0 1rem;
	line-height: 1.2;
	color: inherit;
}
.wp-block-cover.is-style-gi-cta p {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--body);
	line-height: 1.65;
	color: var(--wp--custom--alpha--white-85);
	margin: 0 auto 2.25rem;
	max-width: 540px;
}
.wp-block-cover.is-style-gi-cta .wp-block-buttons {
	justify-content: center;
	gap: 0;
}
/* Front page: the design's front CTA has its own title tracking and steps. */
.home .wp-block-cover.is-style-gi-cta h2 {
	letter-spacing: -0.01em;
}
@media (max-width: 1024px) and (min-width: 721px) {
	.home .wp-block-cover.is-style-gi-cta {
		padding: 6rem 2rem;
	}
}
@media (max-width: 720px) {
	.wp-block-cover.is-style-gi-cta {
		padding: 4.5rem 1.25rem;
	}
	.wp-block-cover.is-style-gi-cta .wp-block-cover__image-background {
		background-attachment: scroll;
	}
	.home .wp-block-cover.is-style-gi-cta h2 {
		font-size: var(--wp--preset--font-size--h-2);
	}
	.home .wp-block-cover.is-style-gi-cta p {
		font-size: var(--wp--preset--font-size--small);
	}
}

/* 70-yhteystiedot.css */
/*
 * Yhteystiedot — the contact page's own banner tuning (design "GI - Contact.html"
 * .page-banner): a stronger overlay, the text padding stepping down at 1024 px,
 * and 55vh on phones. The rest is the gi-page-banner-alt variation (10-page-banner.css).
 */
.gi-page-yhteystiedot .wp-block-cover.is-style-gi-page-banner-alt::after {
	background: linear-gradient(45deg, var(--wp--custom--alpha--black-65) 0%, var(--wp--custom--alpha--black-25) 45%, var(--wp--custom--alpha--black-0) 75%), linear-gradient(180deg, var(--wp--custom--alpha--black-50) 0%, var(--wp--custom--alpha--black-15) 30%, var(--wp--custom--alpha--black-35) 65%, var(--wp--custom--alpha--black-70) 100%);
}
@media (max-width: 1024px) {
	.gi-page-yhteystiedot .wp-block-cover.is-style-gi-page-banner-alt .wp-block-cover__inner-container {
		padding: 0 1.5rem 2.5rem;
	}
}
@media (max-width: 720px) {
	.gi-page-yhteystiedot .wp-block-cover.is-style-gi-page-banner-alt {
		height: 55vh;
		min-height: 400px;
	}
}

/* 71-quickbar.css */
/*
 * Quickbar — core/group.is-style-gi-quickbar. Design: .quickbar, .quickbar-inner,
 * .quickbar-item, .quickbar-label, .quickbar-value (.is-email), .quickbar-item .socials.
 * Inner group = .quickbar-inner; its groups = items; an item's first paragraph is
 * the label, the next one the value.
 */
.wp-block-group.is-style-gi-quickbar {
	border-bottom: 1px solid var(--wp--preset--color--line);
	background: var(--wp--preset--color--white);
}
.wp-block-group.is-style-gi-quickbar > .wp-block-group {
	max-width: 1600px;
	margin: 0 auto;
	padding: 2.5rem 2rem;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 2rem;
}
.wp-block-group.is-style-gi-quickbar > .wp-block-group > .wp-block-group {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
}
.wp-block-group.is-style-gi-quickbar > .wp-block-group > .wp-block-group > p:first-child {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--meta);
	text-transform: uppercase;
	letter-spacing: 0.16em;
	font-weight: 700;
	color: var(--wp--preset--color--muted);
	display: inline-flex;
	align-items: center;
	gap: 0.65rem;
}
.wp-block-group.is-style-gi-quickbar > .wp-block-group > .wp-block-group > p:not(:first-child) {
	font-family: var(--wp--preset--font-family--body);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--body);
	line-height: 1.3;
	letter-spacing: 0;
	color: var(--wp--preset--color--contrast);
	text-transform: none;
}
.wp-block-group.is-style-gi-quickbar > .wp-block-group > .wp-block-group > p a {
	display: block;
	color: inherit;
	text-decoration: none;
	transition: color 200ms ease;
}
.wp-block-group.is-style-gi-quickbar > .wp-block-group > .wp-block-group > p a:hover {
	color: var(--wp--preset--color--primary);
}
/* .quickbar-value.is-email */
.wp-block-group.is-style-gi-quickbar > .wp-block-group > .wp-block-group > p a[href^="mailto:"] {
	font-size: clamp(1.05rem, 1.3vw, 1.25rem);
	word-break: break-word;
}

/*
 * Socials — core/social-links.is-style-gi-quickbar-socials: bare 28 px glyphs in
 * the ink colour, accent on hover. The glyphs are the design's own (drawn as a
 * mask in the text colour), not the core service logos.
 */
ul.wp-block-social-links.is-style-gi-quickbar-socials {
	display: flex;
	flex-wrap: nowrap;
	gap: 1.4rem;
	align-items: center;
	height: calc(var(--wp--preset--font-size--body) * 1.3);
	margin: 0;
	padding: 0;
	font-size: inherit;
	list-style: none;
}
ul.wp-block-social-links.is-style-gi-quickbar-socials li.wp-social-link {
	width: auto;
	height: auto;
	margin: 0;
	padding: 0;
	border: none;
	border-radius: 0;
	background: transparent;
	color: var(--wp--preset--color--contrast);
	line-height: inherit;
	transition: color 200ms ease;
}
ul.wp-block-social-links.is-style-gi-quickbar-socials li.wp-social-link:hover {
	background: transparent;
	color: var(--wp--preset--color--primary);
	transform: none;
}
ul.wp-block-social-links.is-style-gi-quickbar-socials li.wp-social-link a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: auto;
	height: auto;
	padding: 0;
	color: inherit;
	line-height: inherit;
	text-decoration: none;
}
ul.wp-block-social-links.is-style-gi-quickbar-socials li.wp-social-link svg {
	display: none;
}
ul.wp-block-social-links.is-style-gi-quickbar-socials li.wp-social-link a::before {
	content: "";
	display: block;
	width: 28px;
	height: 28px;
	background-color: currentColor;
	-webkit-mask: var(--gi-social-glyph) center / contain no-repeat;
	mask: var(--gi-social-glyph) center / contain no-repeat;
}
ul.wp-block-social-links.is-style-gi-quickbar-socials li.wp-social-link-instagram {
	--gi-social-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M8 3h8a5 5 0 0 1 5 5v8a5 5 0 0 1-5 5H8a5 5 0 0 1-5-5V8a5 5 0 0 1 5-5zm4 5a4 4 0 1 0 0 8 4 4 0 0 0 0-8zm0 1.4a2.6 2.6 0 1 1 0 5.2 2.6 2.6 0 0 1 0-5.2zM16.8 5.9a1.1 1.1 0 1 0 0 2.2 1.1 1.1 0 0 0 0-2.2z'/%3E%3C/svg%3E");
}
ul.wp-block-social-links.is-style-gi-quickbar-socials li.wp-social-link-linkedin {
	--gi-social-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 3a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h14m-.5 15.5v-5.3a3.26 3.26 0 0 0-3.26-3.26c-.85 0-1.84.52-2.32 1.3v-1.11h-2.79v8.37h2.79v-4.93c0-.77.62-1.4 1.39-1.4a1.4 1.4 0 0 1 1.4 1.4v4.93h2.79M6.88 8.56a1.68 1.68 0 0 0 1.68-1.68c0-.93-.75-1.69-1.68-1.69a1.69 1.69 0 0 0-1.69 1.69c0 .93.76 1.68 1.69 1.68m1.39 9.94v-8.37H5.5v8.37h2.77z'/%3E%3C/svg%3E");
}
ul.wp-block-social-links.is-style-gi-quickbar-socials li.wp-social-link-facebook {
	--gi-social-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13.5 21.5v-8h2.7l.4-3.2h-3.1V8.3c0-.9.3-1.6 1.6-1.6h1.7V3.8c-.3 0-1.3-.1-2.5-.1-2.5 0-4.2 1.5-4.2 4.2v2.4H7.4v3.2h2.7v8z'/%3E%3C/svg%3E");
}

@media (max-width: 1024px) {
	.wp-block-group.is-style-gi-quickbar > .wp-block-group {
		grid-template-columns: 1fr;
		gap: 1.75rem;
		padding: 2rem 1.5rem;
	}
}

/* 72-contact-band.css */
/*
 * Contact band — core/group.is-style-gi-contact-band. Design: .contact-band,
 * .contact-band-inner, .contact-band-side (eyebrow, h2, .lede), .detail-group-rows,
 * .detail-group-row (.detail-name, links). The form is gullsten/contact-form.
 * Inner group = .contact-band-inner; its first group = the side; the side's group =
 * the rows, each row a group of name + phone + e-mail paragraphs.
 */
.wp-block-group.is-style-gi-contact-band {
	position: relative;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	padding: 7rem 2rem;
	border-top: 1px solid var(--wp--preset--color--line);
}
.wp-block-group.is-style-gi-contact-band > .wp-block-group {
	position: relative;
	max-width: 1400px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 5.5rem;
	align-items: start;
}
.is-style-gi-contact-band > .wp-block-group > .wp-block-group > .is-style-gi-eyebrow {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small);
	text-transform: uppercase;
	letter-spacing: 0.18em;
	font-weight: 700;
	color: var(--wp--preset--color--primary);
	margin-bottom: 1.5rem;
}
.is-style-gi-contact-band > .wp-block-group > .wp-block-group > h2 {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 400;
	font-size: var(--wp--preset--font-size--fluid-title);
	line-height: 1.1;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	margin: 0 0 1.5rem;
	text-wrap: balance;
	color: var(--wp--preset--color--contrast);
	max-width: 16ch;
}
.is-style-gi-contact-band > .wp-block-group > .wp-block-group > p:not(.is-style-gi-eyebrow) {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--body);
	line-height: 1.7;
	color: var(--wp--preset--color--ink-soft);
	margin-bottom: 3.25rem;
	max-width: 42ch;
}
.is-style-gi-contact-band > .wp-block-group > .wp-block-group > .wp-block-group {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}
.is-style-gi-contact-band > .wp-block-group > .wp-block-group > .wp-block-group > .wp-block-group {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}
/* .detail-name */
.is-style-gi-contact-band > .wp-block-group > .wp-block-group > .wp-block-group > .wp-block-group > p:first-child {
	font-family: var(--wp--preset--font-family--body);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--body);
	letter-spacing: 0;
	line-height: 1.3;
	color: var(--wp--preset--color--contrast);
}
.is-style-gi-contact-band > .wp-block-group > .wp-block-group > .wp-block-group > .wp-block-group > p a {
	display: block;
	width: fit-content;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--body);
	color: var(--wp--preset--color--ink-soft);
	text-decoration: none;
	transition: color 200ms ease;
}
.is-style-gi-contact-band > .wp-block-group > .wp-block-group > .wp-block-group > .wp-block-group > p a:hover {
	color: var(--wp--preset--color--primary);
}

@media (max-width: 1024px) {
	.wp-block-group.is-style-gi-contact-band {
		padding: 5rem 1.5rem;
	}
	.wp-block-group.is-style-gi-contact-band > .wp-block-group {
		grid-template-columns: 1fr;
		gap: 3.5rem;
	}
}

/* 73-info-band.css */
/*
 * Info band — core/group.is-style-gi-info-band. Design: .info-band, .info-band-inner,
 * .info-band-text (h3, p). The map is gullsten/map (.map-block).
 */
.wp-block-group.is-style-gi-info-band {
	padding: 6rem 2rem;
	background: var(--wp--preset--color--surface);
	border-top: 1px solid var(--wp--preset--color--line);
}
.wp-block-group.is-style-gi-info-band > .wp-block-group {
	max-width: 1400px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 4rem;
	align-items: center;
}
.is-style-gi-info-band > .wp-block-group > .wp-block-group > h3 {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 400;
	font-size: var(--wp--preset--font-size--fluid-h-2);
	text-transform: uppercase;
	letter-spacing: 0.01em;
	margin: 0 0 1rem;
}
.is-style-gi-info-band > .wp-block-group > .wp-block-group > p {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--body);
	line-height: 1.7;
	color: var(--wp--preset--color--ink-soft);
	max-width: 52ch;
	margin-bottom: 2rem;
}

@media (max-width: 1024px) {
	.wp-block-group.is-style-gi-info-band {
		padding: 4rem 1.5rem;
	}
	.wp-block-group.is-style-gi-info-band > .wp-block-group {
		grid-template-columns: 1fr;
		gap: 2.5rem;
	}
}

/* 90-footer.css */
/*
 * Footer — design .footer / .footer-content / .footer-section / .footer-links /
 * .footer-logo / .footer-bottom. Core blocks in parts/footer.html:
 *   group gi-footer          the band (white, top border)
 *   group gi-footer-columns  four columns spread with space-between
 *   list gi-footer-links     a column's links (Yhteystiedot)
 *   list gi-footer-menu      a link column with the sliding accent line (Palvelut, Info)
 *   image gi-footer-logo     the logo
 *   group gi-footer-bottom   the copyright bar
 */
footer.wp-block-template-part:has(> .is-style-gi-footer) {
	background: var(--wp--preset--color--white);
}
.is-style-gi-footer {
	background: var(--wp--preset--color--white);
	padding: 3rem 2rem 2rem;
	border-top: 1px solid var(--wp--preset--color--line);
}
.is-style-gi-footer-columns {
	margin: 0 auto 3rem;
	display: flex;
	justify-content: space-between;
	gap: 3rem;
}
.is-style-gi-footer-columns h4 {
	text-transform: uppercase;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--lede);
	letter-spacing: 0;
	margin-bottom: 1.5rem;
	font-weight: 700;
}
.is-style-gi-footer-columns p,
.is-style-gi-footer-columns li,
.is-style-gi-footer-columns a {
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.8;
	color: var(--wp--preset--color--ink-soft);
	text-decoration: none;
}
.is-style-gi-footer-columns a:hover {
	color: var(--wp--preset--color--primary);
}

.wp-block-image.is-style-gi-footer-logo {
	margin: 0 0 1.25rem;
}
.wp-block-image.is-style-gi-footer-logo img {
	display: block;
	height: 32px;
	width: auto;
}
/* The link hugs the image, so no line box adds space under it. */
.wp-block-image.is-style-gi-footer-logo a {
	display: block;
	width: fit-content;
}

.wp-block-list:is(.is-style-gi-footer-links, .is-style-gi-footer-menu) {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	list-style: none;
	padding: 0;
	margin: 0;
}
.wp-block-list:is(.is-style-gi-footer-links, .is-style-gi-footer-menu) a {
	display: block;
}
.is-style-gi-footer-menu a {
	position: relative;
	padding-left: 0;
	transition: color 200ms ease, padding-left 300ms cubic-bezier(0.4, 0, 0.2, 1);
}
.is-style-gi-footer-menu a::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	width: 0;
	height: 1px;
	background: var(--wp--preset--color--primary);
	transition: width 300ms cubic-bezier(0.4, 0, 0.2, 1);
}
.is-style-gi-footer-menu a:hover {
	padding-left: 18px;
}
.is-style-gi-footer-menu a:hover::before {
	width: 12px;
}

.is-style-gi-footer-bottom {
	text-align: center;
	padding-top: 2rem;
	border-top: 1px solid var(--wp--preset--color--line);
	font-size: var(--wp--preset--font-size--meta);
	color: var(--wp--preset--color--ink-soft);
}

/*
 * Narrow screens: the front page's footer turns into two columns at 1024 px and one
 * at 720 px. The inner pages' design keeps four columns and overflows the screen
 * below ~920 px, so they follow the front page from 960 px down.
 */
@media (max-width: 1024px) {
	body.home .is-style-gi-footer-columns {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 2.5rem;
	}
}
@media (max-width: 960px) {
	.is-style-gi-footer-columns {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 2.5rem;
	}
}
@media (max-width: 720px) {
	.is-style-gi-footer {
		padding: 3rem 1.25rem 1.5rem;
	}
	.is-style-gi-footer-columns,
	body.home .is-style-gi-footer-columns {
		grid-template-columns: 1fr;
		gap: 2rem;
		margin-bottom: 2rem;
	}
}

/* 99-phones.css */
/*
 * Phones: the design's one-word headings ("Suunnitteluprosessi", "Työympäristöprojekteja",
 * "Suunnittelutoimisto") are wider than the screen at their minimum size and pushed the
 * page sideways. On phones they break inside the word instead (hyphenated where the
 * browser has Finnish hyphenation). Last in the cascade so it outranks section rules
 * that keep desktop headings unbroken.
 */
@media (max-width: 720px) {
	:is(h1, h2, h3, h4).wp-block-heading,
	.wp-block-cover :is(h1, h2),
	.is-style-gi-section-head .is-style-gi-section-title,
	.wp-block-post-title {
		overflow-wrap: anywhere;
		hyphens: auto;
	}
}
/* The narrowest phones (320 px): stat labels and FAQ questions wrap inside long words too. */
@media (max-width: 400px) {
	:is(.is-style-gi-aboutus-stats, .is-style-gi-stats) > *,
	:is(.is-style-gi-aboutus-stats, .is-style-gi-stats) p,
	.wp-block-details.is-style-gi-faq summary {
		min-width: 0;
		overflow-wrap: anywhere;
		hyphens: auto;
	}
}