/* ==========================================================================
   eShop First — Main Stylesheet
   Mobile-first, single file, CSS custom properties
   ========================================================================== */

/* --- Fonts --- */
@font-face {
	font-family: 'Montserrat';
	src: url('../fonts/montserrat-var.woff2') format('woff2');
	font-weight: 100 900;
	font-display: swap;
	font-style: normal;
}

@font-face {
	font-family: 'Inter';
	src: url('../fonts/inter-var.woff2') format('woff2');
	font-weight: 100 900;
	font-display: swap;
	font-style: normal;
}

/* --- Custom Properties --- */
:root {
	--color-primary: #000852;
	--color-primary-light: #1a1a6e;
	--color-primary-dark: #00042e;
	--color-accent: #004dc1;
	--color-accent-hover: #003a91;
	--color-green: #2deab0;
	--color-active: #2deab0;
	--color-teal-dark: #036069;
	--color-blue-deep: #0431bf;
	--color-white: #ffffff;
	--color-gray-light: #edf3ff;
	--color-gray-lighter: #d6e2f6;
	--color-gray: #5a5a66;
	--color-gray-dark: #2a2a33;
	--color-black: #0f1020;
	--font-heading: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
	--font-body: 'Inter', 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
	--font-size-base: 1rem;
	--font-size-sm: 0.875rem;
	--font-size-lg: 1.125rem;
	--font-size-xl: 1.25rem;
	--font-size-h1: clamp(2.25rem, 4.5vw, 3.5rem);
	--font-size-h2: clamp(1.75rem, 3vw, 2.5rem);
	--font-size-h3: clamp(1.25rem, 2vw, 1.5rem);
	--container-max: 1240px;
	--container-padding: 1.5rem;
	--spacing-section: clamp(4rem, 8vw, 7rem);
	--border-radius: 8px;
	--border-radius-sm: 12px;
	--transition: 0.2s ease;
}

/* --- Reset --- */
*,
*::before,
*::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

body {
	font-family: var(--font-body);
	font-size: var(--font-size-base);
	line-height: 1.65;
	color: var(--color-gray-dark);
	background: var(--color-white);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}

img,
svg {
	display: block;
	max-width: 100%;
	height: auto;
}

a {
	color: inherit;
	text-decoration: none;
	cursor: pointer;
}

[role="button"],
.solution-card,
.service-card,
.card-item,
.post-card,
.sibling-card,
.accordion__trigger {
	cursor: pointer;
}

ul,
ol {
	list-style: none;
}

button {
	font: inherit;
	color: inherit;
	background: none;
	border: none;
	cursor: pointer;
}

address {
	font-style: normal;
}

/* --- Typography --- */
h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-heading);
	font-weight: 700;
	line-height: 1.2;
	color: var(--color-black);
	letter-spacing: -0.01em;
}

h1 {
	font-size: var(--font-size-h1);
	letter-spacing: -0.02em;
}
h2 {
	font-size: var(--font-size-h2);
	font-weight: 700;
	letter-spacing: -0.015em;
}
h3 {
	font-size: var(--font-size-h3);
	font-weight: 600;
	line-height: 1.3;
}
h4 {
	font-family: var(--font-heading);
	font-size: var(--font-size-lg);
	font-weight: 600;
}

.eyebrow {
	display: inline-block;
	font-family: var(--font-heading);
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--color-accent);
	margin-bottom: 0.75rem;
}

.section--dark .eyebrow {
	color: var(--color-green);
}

p + p {
	margin-top: 1em;
}

/* --- Layout --- */
.container {
	width: 100%;
	max-width: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--container-padding);
}

.page-content {
	padding-block: var(--spacing-section);
}

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

/* ==========================================================================
   Section background alternation
   Every page-builder section has --section-bg + --card-bg set, so adjacent
   sections always differ visually and cards always contrast with their host.
   Alternation is driven by sibling order under <main>; manual --gray / --dark
   modifiers still win.
   ========================================================================== */

main > section {
	--section-bg: var(--color-white);
	--card-bg: var(--color-gray-light);
	background: var(--section-bg);
}

/* Even-positioned sections: flip the palette (skip hero/inner-hero/usp/cta/dark
   so they keep their existing branded backgrounds). */
main > section:nth-of-type(even):not(.hero):not(.inner-hero):not(.cta-banner):not(.usp-bar):not(.section--dark) {
	--section-bg: var(--color-gray-light);
	--card-bg: var(--color-white);
}

/* Manual overrides */
.section--gray {
	--section-bg: var(--color-gray-light);
	--card-bg: var(--color-white);
	background: var(--section-bg);
}

.section--dark {
	--section-bg: var(--color-primary);
	--card-bg: rgba(255, 255, 255, 0.06);
	background: var(--section-bg);
	color: var(--color-white);
}

.section--dark h2,
.section--dark h3 {
	color: var(--color-white);
}

.section__header {
	text-align: center;
	max-width: 760px;
	margin-inline: auto;
	margin-bottom: clamp(2.5rem, 4vw, 3.5rem);
}

.section__header h2 {
	margin-bottom: 1rem;
	position: relative;
}

.section__header p {
	color: var(--color-gray);
	font-size: var(--font-size-lg);
	line-height: 1.6;
}

.section--dark .section__header p {
	color: rgba(255, 255, 255, 0.8);
}

/* --- Buttons --- */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.875rem 1.75rem;
	font-family: var(--font-heading);
	font-size: var(--font-size-sm);
	font-weight: 600;
	letter-spacing: 0.01em;
	border-radius: var(--border-radius);
	border: 1px solid transparent;
	transition: background var(--transition), color var(--transition), border-color var(--transition), box-shadow var(--transition), transform var(--transition);
	white-space: nowrap;
	min-height: 44px;
}

.btn--primary,
.btn--blue,
.btn--dark {
	background: var(--color-accent);
	color: var(--color-white);
	border-color: var(--color-accent);
	box-shadow: 0 1px 2px rgba(0, 11, 119, 0.15);
}

.btn--primary:hover,
.btn--primary:focus-visible,
.btn--blue:hover,
.btn--blue:focus-visible,
.btn--dark:hover,
.btn--dark:focus-visible {
	background: var(--color-accent-hover);
	border-color: var(--color-accent-hover);
	color: var(--color-white);
	box-shadow: 0 4px 14px rgba(0, 77, 193, 0.25);
}

.btn--outline {
	background: transparent;
	color: var(--color-white);
	border-color: rgba(255, 255, 255, 0.7);
}

.btn--outline:hover,
.btn--outline:focus-visible {
	background: rgba(255, 255, 255, 0.12);
	border-color: var(--color-white);
	color: var(--color-white);
}

/* --- Skip Link --- */
.skip-link {
	position: absolute;
	top: -100%;
	left: 1rem;
	z-index: 9999;
	padding: 0.5rem 1rem;
	background: var(--color-primary);
	color: var(--color-white);
	border-radius: var(--border-radius);
}

.skip-link:focus {
	top: 0.5rem;
}

.screen-reader-text {
	clip: rect(1px, 1px, 1px, 1px);
	position: absolute;
	height: 1px;
	width: 1px;
	overflow: hidden;
	word-wrap: normal;
}

.screen-reader-text:focus {
	clip: auto;
	height: auto;
	width: auto;
}

/* ==========================================================================
   Header
   ========================================================================== */
.site-header {
	position: sticky;
	top: 0;
	z-index: 1000;
	background: var(--color-primary);
	padding-block: 1rem;
	transition: box-shadow var(--transition);
}

.site-header--scrolled {
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

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

.site-header__logo img {
	height: 36px;
	width: auto;
}

.site-header__logo .custom-logo {
	height: 36px;
	width: auto;
}

.site-header__actions {
	display: flex;
	align-items: center;
	gap: 1rem;
}

/* --- Nav --- */
.site-nav {
	display: none;
}

.site-nav__list {
	display: flex;
	align-items: center;
	gap: 0.25rem;
}

.site-nav__list > .menu-item > a {
	display: inline-flex;
	align-items: center;
	padding: 0.5rem 0.75rem;
	color: var(--color-white);
	font-family: var(--font-heading);
	font-size: var(--font-size-sm);
	font-weight: 500;
	border-radius: var(--border-radius-sm);
	transition: background var(--transition);
}

.site-nav__list > .menu-item > a:hover,
.site-nav__list > .menu-item > a:focus-visible {
	background: rgba(255, 255, 255, 0.1);
}

.site-nav__list > .menu-item.current-menu-item > a,
.site-nav__list > .menu-item.current-menu-ancestor > a {
	background: rgba(255, 255, 255, 0.15);
}

.sub-menu .menu-item.current-menu-item > a {
	font-weight: 600;
	background: var(--color-gray-light);
	color: var(--color-primary);
}

/* Dropdown toggle */
.submenu-toggle {
	display: inline-flex;
	align-items: center;
	padding: 0.5rem 0.25rem;
	color: var(--color-white);
	min-width: 44px;
	min-height: 44px;
	justify-content: center;
}

.submenu-toggle svg {
	transition: transform var(--transition);
}

.submenu-toggle[aria-expanded="true"] svg {
	transform: rotate(180deg);
}

/* Dropdown — desktop */
.menu-item-has-children {
	position: relative;
}

.sub-menu {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 280px;
	background: var(--color-white);
	border-radius: var(--border-radius-sm);
	box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
	padding: 0.75rem 0;
	z-index: 100;
}

.sub-menu .menu-item a {
	display: block;
	padding: 0.5rem 1.25rem;
	color: var(--color-black);
	font-size: var(--font-size-sm);
	transition: background var(--transition);
}

.sub-menu .menu-item a:hover,
.sub-menu .menu-item a:focus-visible {
	background: var(--color-gray-light);
}

.menu-item-has-children.is-open > .sub-menu {
	display: block;
}

/* Grouped sub-menu: group labels + item subtitles */
.sub-menu--grouped {
	min-width: 340px;
}

.sub-menu__group-label {
	font-size: 0.65rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-gray);
	padding: 0.75rem 1.25rem 0.35rem;
	border-top: 1px solid var(--color-gray-light);
	margin-top: 0.25rem;
	pointer-events: none;
}

.sub-menu--grouped > .sub-menu__group-label:first-child {
	border-top: none;
	margin-top: 0;
	padding-top: 0.5rem;
}

.menu-item__title {
	display: block;
	font-weight: 500;
}

.menu-item__subtitle {
	display: block;
	font-size: 0.72rem;
	color: var(--color-gray);
	margin-top: 0.1rem;
	line-height: 1.3;
}

.sub-menu .menu-item a:hover .menu-item__subtitle,
.sub-menu .menu-item a:focus-visible .menu-item__subtitle {
	color: var(--color-teal-dark);
}

/* Third-level sub-menu (sub-sub-menu) — opens on hover on desktop */
.sub-menu .menu-item-has-children {
	position: relative;
}

.sub-menu .sub-menu {
	top: 0;
	left: 100%;
	position: absolute;
	display: none;
}

.sub-menu .menu-item-has-children.is-open > .sub-menu {
	display: block;
}

/* Toggle button inside dropdowns */
.sub-menu .submenu-toggle {
	color: var(--color-gray);
	min-width: 32px;
	min-height: 32px;
	padding: 0.25rem;
	position: absolute;
	right: 0.5rem;
	top: 50%;
	transform: translateY(-50%);
}

.sub-menu .submenu-toggle svg {
	transform: rotate(-90deg);
}

.sub-menu .submenu-toggle[aria-expanded="true"] svg {
	transform: rotate(0deg);
}

.sub-menu .menu-item-has-children {
	padding-right: 2rem;
}

/* --- Language Switcher --- */
.lang-switcher {
	display: flex;
	gap: 0.25rem;
}

.lang-switcher a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.25rem 0.5rem;
	color: rgba(255, 255, 255, 0.6);
	font-size: var(--font-size-sm);
	font-weight: 600;
	border-radius: 4px;
	transition: color var(--transition);
	min-width: 44px;
	min-height: 44px;
}

.lang-switcher .is-active a,
.lang-switcher a:hover {
	color: var(--color-white);
}

/* --- Hamburger --- */
.menu-toggle {
	display: flex;
	flex-direction: column;
	gap: 5px;
	padding: 0.5rem;
	min-width: 44px;
	min-height: 44px;
	justify-content: center;
	align-items: center;
}

.menu-toggle__bar {
	display: block;
	width: 24px;
	height: 2px;
	background: var(--color-white);
	border-radius: 2px;
	transition: transform var(--transition), opacity var(--transition);
}

.menu-toggle[aria-expanded="true"] .menu-toggle__bar:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}

.menu-toggle[aria-expanded="true"] .menu-toggle__bar:nth-child(2) {
	opacity: 0;
}

.menu-toggle[aria-expanded="true"] .menu-toggle__bar:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}

/* --- Mobile Menu --- */
body.menu-open {
	overflow: hidden;
}

.menu-close {
	display: none;
}

.site-nav.is-open .menu-close {
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	top: 1rem;
	right: 1.25rem;
	width: 48px;
	height: 48px;
	color: var(--color-white);
	z-index: 10;
}

.site-nav.is-open {
	display: block;
	position: fixed;
	inset: 0;
	z-index: 999;
	background: var(--color-primary);
	padding: 5rem 1.5rem 2rem;
	overflow-y: auto;
}

.site-nav.is-open .site-nav__list {
	flex-direction: column;
	align-items: stretch;
	gap: 0;
}

.site-nav.is-open .site-nav__list > .menu-item > a {
	padding: 1rem 0;
	font-size: var(--font-size-lg);
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.site-nav.is-open .sub-menu {
	position: static;
	background: transparent;
	box-shadow: none;
	padding: 0 0 0 1rem;
	border-radius: 0;
}

.site-nav.is-open .sub-menu .sub-menu {
	padding-left: 1rem;
}

.site-nav.is-open .sub-menu .menu-item-has-children {
	padding-right: 0;
}

.site-nav.is-open .sub-menu .submenu-toggle {
	color: var(--color-white);
	right: 0;
	top: 0;
	transform: none;
	height: auto;
	padding: 0.75rem 0.25rem;
	display: flex;
	align-items: center;
}

.site-nav.is-open .sub-menu .submenu-toggle svg {
	transform: rotate(0);
}

.site-nav.is-open .sub-menu__group-label {
	color: rgba(255, 255, 255, 0.4);
	border-top-color: rgba(255, 255, 255, 0.1);
	padding-left: 1rem;
}

.site-nav.is-open .sub-menu--grouped > .sub-menu__group-label:first-child {
	border-top: none;
}

.site-nav.is-open .menu-item__subtitle {
	color: rgba(255, 255, 255, 0.45);
}

.site-nav.is-open .sub-menu .menu-item a {
	color: rgba(255, 255, 255, 0.7);
	padding: 0.75rem 0 0.75rem 1rem;
	border-bottom: 1px solid rgba(255, 255, 255, 0.05);
	border-left: 3px solid transparent;
}

.site-nav.is-open .sub-menu .menu-item a:hover {
	color: var(--color-white);
}

/* Mobile active states */
.site-nav.is-open .menu-item.current-menu-item > a,
.site-nav.is-open .menu-item.current-menu-ancestor > a {
	background: none;
	color: var(--color-green);
}

.site-nav.is-open .sub-menu .menu-item.current-menu-item > a,
.site-nav.is-open .sub-menu .menu-item.current-menu-ancestor > a {
	color: var(--color-green);
	border-left-color: var(--color-green);
	background: transparent;
}

.site-nav.is-open .submenu-toggle {
	position: absolute;
	right: 0;
	top: 0.5rem;
}

.site-nav.is-open .menu-item-has-children {
	position: relative;
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
	background: var(--color-primary);
	background-image:
		radial-gradient(ellipse 800px 600px at 15% 25%, rgba(0, 77, 193, 0.32) 0%, transparent 60%),
		radial-gradient(ellipse 600px 500px at 90% 90%, rgba(45, 234, 176, 0.05) 0%, transparent 60%);
	color: var(--color-white);
	padding: clamp(1.5rem, 3vw, 2.5rem) 0 clamp(1.5rem, 3vw, 2.5rem);
	position: relative;
	overflow: hidden;
}

.hero > .container {
	position: relative;
	z-index: 1;
}

.hero__inner {
	display: grid;
	gap: 2rem;
	align-items: center;
}

.hero__content {
	/* Text column */
}

.hero h1 {
	color: var(--color-white);
	margin-bottom: 1rem;
	line-height: 1.1;
}

.hero__subtitle {
	font-family: var(--font-heading);
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	margin-bottom: 0.75rem;
	color: rgba(255, 255, 255, 0.7);
}

.hero__description {
	font-size: var(--font-size-lg);
	color: rgba(255, 255, 255, 0.82);
	max-width: 620px;
	margin-bottom: 1.5rem;
	line-height: 1.65;
}

.hero__buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
}

/* Hero image */
.hero__image {
	display: none;
}

.hero__image img {
	width: 100%;
	height: auto;
	border-radius: var(--border-radius-sm);
	animation: heroFloat 6s ease-in-out 2;
}

/* Hero variant: raster image rendered as section background, positioned
   right and faded into the hero gradient on the left. The image URL is
   passed via the --hero-bg-image custom property on the section element.

   Strategy: image uses `cover` so it spans the entire hero (no hard edge to
   collide with the gradient). A 4-stop horizontal overlay gradually reveals
   the image: opaque navy on the left, fading through 75% / 30% / transparent
   so there's no visible boundary between image and background. */
.hero--bg-image {
	background:
		/* Top: brightness glow on the left under H1 */
		radial-gradient(ellipse 800px 600px at 15% 25%, rgba(0, 77, 193, 0.32) 0%, transparent 60%) center / 100% 100% no-repeat,
		/* Multi-stop horizontal overlay — long, soft falloff */
		linear-gradient(to right,
			var(--color-primary)      0%,
			var(--color-primary)      22%,
			rgba(0, 8, 82, 0.75)      42%,
			rgba(0, 8, 82, 0.30)      65%,
			transparent               88%
		) center / 100% 100% no-repeat,
		/* Image covers entire hero, anchored right (subject stays on right) */
		var(--hero-bg-image, none) right center / cover no-repeat,
		var(--color-primary);
}

/* Per-page focal-point overrides. The image is layer 3 in the background
   stack, so we re-declare all four background-position values to change
   only its anchor. Desktop only — mobile has its own single-layer rule. */
@media (min-width: 601px) {
	body.home .hero--bg-image {
		background-position: center, center, right top, center;
	}
}


.hero--bg-image .hero__inner {
	grid-template-columns: 1fr;
	min-height: 380px;
}

.hero--bg-image .hero__content {
	max-width: 58%;
}

@media (max-width: 900px) {
	.hero--bg-image .hero__content { max-width: 70%; }
}

@media (max-width: 600px) {
	/* Mobile hero layout: the image renders as a full-width square at the
	   top of the section (center-cropped from the same file desktop uses).
	   Breadcrumbs + H1 are pulled up to overlap the bottom of the image —
	   a scrim gradient fades the image bottom into the hero color so they
	   stay legible. Subtitle, description and buttons sit below the image
	   on the solid hero color. */
	.hero--bg-image {
		background: var(--color-primary);
		padding-top: 0;
	}

	.hero--bg-image::before {
		content: '';
		display: block;
		width: 100%;
		aspect-ratio: 1 / 1;
		background:
			/* Scrim: bottom of the image fades into the hero color. */
			linear-gradient(to bottom,
				transparent          55%,
				rgba(0, 8, 82, 0.55) 82%,
				var(--color-primary) 100%
			) center / 100% 100% no-repeat,
			var(--hero-bg-image-mobile, var(--hero-bg-image, none)) center top / cover no-repeat,
			var(--color-primary);
	}

	.hero--bg-image .hero__inner {
		min-height: 0;
		padding-top: 0;
		margin-top: -2.5rem; /* pull H1 up so its top edge overlaps the image bottom */
	}

	/* When breadcrumbs are present they sit above the H1, so pull the block
	   up further to keep the H1 itself on the image edge. */
	.hero--bg-image .hero__inner:has(.breadcrumbs) {
		margin-top: -5rem;
	}

	.hero--bg-image .hero__content {
		max-width: 100%;
		position: relative;
		z-index: 1;
	}

	.hero--bg-image .hero__content h1 {
		margin-top: 0;
		/* Soft shadow so the H1 stays legible where it overlaps the image. */
		text-shadow: 0 2px 14px rgba(0, 8, 82, 0.85);
	}

	/* Breadcrumbs overlap the image too — boost contrast. */
	.hero--bg-image .breadcrumbs {
		opacity: 0.9;
		text-shadow: 0 1px 8px rgba(0, 8, 82, 0.9);
	}

	/* Subtitle + description sit on the solid hero color, no shadow needed. */
}

/* Raster images (not SVG illustrations) blend into the hero background on
   all four edges via a soft radial mask. Without this, dark-bg photos read
   as a hard rectangle. */
.hero__image:not(.hero__image--illustration) img {
	border-radius: 0;
	-webkit-mask-image: radial-gradient(
		ellipse 75% 85% at 58% 50%,
		#000 30%,
		rgba(0, 0, 0, 0.55) 70%,
		transparent 100%
	);
	mask-image: radial-gradient(
		ellipse 75% 85% at 58% 50%,
		#000 30%,
		rgba(0, 0, 0, 0.55) 70%,
		transparent 100%
	);
}

@keyframes heroFloat {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-6px); }
}

/* ==========================================================================
   Hero Illustrations (inline SVG, transparent, sit on hero gradient)
   ========================================================================== */
.hero__image--illustration {
	display: block;
	width: 100%;
	max-width: 720px;
	margin-inline: auto;
	padding: 0;
	background: transparent;
	box-shadow: none;
	margin-top: 1rem;
	justify-self: stretch;
}

@media (min-width: 1024px) {
	.hero__image--illustration {
		margin-top: 0;
	}
}

.hero-illustration {
	width: 100%;
	height: auto;
	max-width: 100%;
	max-height: 380px;
	display: block;
	overflow: visible;
	aspect-ratio: 1 / 1;
}

/* Outer ring: slow clockwise rotation */
.hi-ring--outer {
	animation: hi-rotate 60s linear infinite;
}

/* Mid ring: slower counter-rotation */
.hi-ring--mid {
	animation: hi-rotate-rev 90s linear infinite;
}

/* Central pulse */
.hi-pulse {
	transform-origin: 300px 300px;
	animation: hi-pulse 3.5s ease-in-out infinite;
}

@keyframes hi-rotate {
	from { transform: rotate(0deg); }
	to   { transform: rotate(360deg); }
}
@keyframes hi-rotate-rev {
	from { transform: rotate(0deg); }
	to   { transform: rotate(-360deg); }
}
@keyframes hi-pulse {
	0%, 100% { transform: scale(1); opacity: 0.35; }
	50%      { transform: scale(1.12); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
	.hi-ring--outer, .hi-ring--mid, .hi-pulse { animation: none; }
}

/* ==========================================================================
   Video + Text
   ========================================================================== */
.video-text {
	padding-block: var(--spacing-section);
}

.video-text__inner {
	display: grid;
	gap: 2rem;
	align-items: center;
}

.video-text__media {
	position: relative;
	aspect-ratio: 16 / 9;
	border-radius: var(--border-radius-sm);
	overflow: hidden;
	background: var(--color-black);
}

.video-text__media lite-youtube,
.video-text__media iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.video-text__content h2 {
	margin-bottom: 1rem;
}

.video-text__content p {
	color: var(--color-gray);
	margin-bottom: 1rem;
}

.video-text__content a:not(.btn) {
	color: var(--color-accent);
	font-weight: 600;
}

.video-text__content a:not(.btn):hover {
	text-decoration: underline;
}

/* ==========================================================================
   Solutions Cards
   ========================================================================== */
.solutions-grid {
	display: grid;
	gap: 2rem;
}

/* ============================================================
   Icon containers — solid colored circles, white glyph.
   ============================================================
   Every icon container across the site is a flat filled circle;
   the fill color carries the tier:
   - Tier 1 Ratkaisut  → deep navy  (--color-primary)
   - Tier 2 Palvelut   → dark teal  (--color-teal-dark)
   - Tier 3 Sub-services → deep blue (--color-blue-deep)
   Sizes vary by context (Ratkaisut bigger, Palvelut medium,
   siblings small) but the style is unified. No borders, no glow.
   ============================================================ */

.solutions-grid--ratkaisut .solution-card__icon,
.solutions-grid--palvelut .solution-card__icon,
.card-item--tier-ratkaisu .card-item__icon,
.card-item--tier-palvelu .card-item__icon,
.card-item--tier-sub-palvelu .card-item__icon,
.feature-item__icon,
.sibling-card--compact .sibling-card__icon {
	background: var(--color-primary);
	border-radius: 50%;
	color: #ffffff;
}

/* Tier 2: Services → dark teal circle. */
.solutions-grid--palvelut .solution-card__icon,
.card-item--tier-palvelu .card-item__icon {
	background: var(--color-teal-dark);
}

/* Tier 3: Sub-services → deep blue circle. */
.card-item--tier-sub-palvelu .card-item__icon {
	background: var(--color-blue-deep);
}

.solutions-grid--ratkaisut .solution-card__icon .icon,
.solutions-grid--palvelut .solution-card__icon .icon,
.card-item--tier-ratkaisu .card-item__icon .icon,
.card-item--tier-palvelu .card-item__icon .icon,
.card-item--tier-sub-palvelu .card-item__icon .icon,
.feature-item__icon .icon,
.sibling-card--compact .sibling-card__icon .icon {
	color: #ffffff;
}

/* Per-tier size tweaks — visual hierarchy stays via dimensions, not style. */
/* ==========================================================================
   Solutions list (Ratkaisut archive) — stacked rows on a flat background:
   deep blue circle icon left; title, teaser and read-more link right.
   ========================================================================== */
.solutions-list {
	display: grid;
	gap: clamp(2.5rem, 5vw, 4rem);
	max-width: 880px;
	margin-inline: auto;
}

.solutions-list__item {
	display: flex;
	gap: clamp(1.25rem, 4vw, 3rem);
	align-items: center;
}

.solutions-list__icon {
	flex-shrink: 0;
	width: clamp(88px, 13vw, 150px);
	height: clamp(88px, 13vw, 150px);
	border-radius: 50%;
	background: var(--color-blue-deep);
	color: var(--color-white);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.solutions-list__icon a {
	display: flex;
	align-items: center;
	justify-content: center;
	color: inherit;
}

.solutions-list__icon .icon {
	width: clamp(36px, 5.5vw, 56px);
	height: clamp(36px, 5.5vw, 56px);
}

.solutions-list__icon--image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.solutions-list__body h2 {
	margin-bottom: 0.5rem;
}

.solutions-list__body h2 a {
	color: inherit;
	transition: color var(--transition);
}

.solutions-list__body h2 a:hover {
	color: var(--color-accent);
}

.solutions-list__body p {
	color: var(--color-gray);
	line-height: 1.6;
	margin-bottom: 0.5rem;
}

.solutions-grid--ratkaisut {
	gap: 1.5rem;
}

.solutions-grid--ratkaisut .solution-card {
	background: var(--card-bg, var(--color-gray-light));
	padding: 2.5rem 2rem;
}

.solutions-grid--ratkaisut .solution-card__icon,
.card-item--tier-ratkaisu .card-item__icon {
	width: 88px;
	height: 88px;
}

.solutions-grid--ratkaisut .solution-card h3 {
	font-size: var(--font-size-xl);
}

.solutions-grid--palvelut .solution-card {
	background: var(--color-white);
}

.solutions-grid--palvelut .solution-card__icon,
.card-item--tier-palvelu .card-item__icon {
	width: 72px;
	height: 72px;
}

/* Tier 3: sub-service sizing + minimal card */
.card-item--tier-sub-palvelu .card-item__icon {
	width: 60px;
	height: 60px;
}
.card-item--tier-sub-palvelu {
	background: var(--color-white);
}

.solutions-grid--palvelut .solution-card__icon--svg {
	color: var(--color-accent);
}

.solutions-grid--compact {
	grid-template-columns: repeat(2, 1fr);
	gap: 0.75rem;
	overflow: hidden;
}

.solutions-grid--compact .solution-card {
	padding: 1rem 0.75rem;
	overflow: hidden;
	word-break: break-word;
}

.solutions-grid--compact .solution-card__icon {
	width: 60px;
	height: 60px;
	margin-bottom: 0.5rem;
}

.solutions-grid--compact .solution-card h3 {
	font-size: calc(var(--font-size-sm) - 1px);
	line-height: 1.3;
}

.solutions-grid--compact .solution-card p {
	font-size: calc(var(--font-size-sm) - 2px);
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.solutions-grid--compact .btn {
	font-size: calc(var(--font-size-sm) - 2px);
	padding: 0.5rem 1rem;
}

.solution-card {
	text-align: center;
	padding: 2.25rem 1.75rem;
	background: var(--card-bg, var(--color-gray-light));
	border-radius: var(--border-radius-sm);
	position: relative;
	cursor: pointer;
}

/* Stretched link: the H3 anchor expands to cover the whole card. */
.solution-card h3 a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

/* card-link sits above the overlay so clicking "Lue lisää →" works independently.
   Icon intentionally NOT raised — clicks on it fall through to the h3 stretched link. */
.solution-card .card-link {
	position: relative;
	z-index: 2;
}

.solution-card:has(h3 a) .solution-card__icon {
	pointer-events: none;
}

/* Hover feedback lives on the icon circle + title only (see icon hover rules
   further down) — the card box itself stays still. */

.solution-card__icon {
	width: 80px;
	height: 80px;
	margin-inline: auto;
	margin-bottom: 1.25rem;
	border-radius: var(--border-radius);
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* ==========================================================================
   Lucide icon styling (line icons via currentColor)
   ========================================================================== */
.icon {
	display: block;
	flex-shrink: 0;
	stroke-width: 2;
	max-width: none;
}

/* Respect explicit width/height attributes — escape the global svg{height:auto} */
.card-item__icon .icon,
.solution-card__icon .icon,
.service-card__icon .icon {
	width: 36px;
	height: 36px;
}

.sibling-card__icon .icon {
	width: 28px;
	height: 28px;
}

.solution-card__icon--svg,
.card-item__icon--svg {
	color: var(--color-accent);
	transition: color var(--transition);
}

.section--dark .solution-card__icon--svg,
.section--dark .card-item__icon--svg {
	color: var(--color-green);
}

.sibling-card__icon--svg {
	color: var(--color-accent);
	display: flex;
	align-items: center;
	justify-content: center;
}

.solution-card__icon img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.solution-card h3 {
	margin-bottom: 0.5rem;
	font-size: var(--font-size-lg);
}

.solution-card p {
	color: var(--color-gray);
	font-size: var(--font-size-sm);
	line-height: 1.6;
}

/* Card text-link — used inside cards instead of full-size buttons */
.card-link {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	margin-top: 1rem;
	font-family: var(--font-heading);
	font-size: var(--font-size-sm);
	font-weight: 600;
	color: var(--color-accent);
	letter-spacing: 0.01em;
	transition: color var(--transition);
}

.card-link span {
	transition: transform var(--transition);
	display: inline-block;
}

.solution-card:hover .card-link,
.service-card:hover .card-link,
.card-item:hover .card-link,
a:hover > .card-link,
.card-link:hover {
	color: var(--color-accent-hover);
}

.solution-card:hover .card-link span,
.service-card:hover .card-link span,
.card-item:hover .card-link span,
a:hover > .card-link span,
.card-link:hover span {
	transform: translateX(3px);
}

/* Compact variant for palvelut (more items, smaller cards) */
.solutions-grid--compact .solution-card {
	padding: 1.25rem 1rem;
}

.solutions-grid--compact .solution-card__icon {
	width: 80px;
	height: 80px;
	margin-bottom: 0.75rem;
}

.solutions-grid--compact .solution-card h3 {
	font-size: var(--font-size-sm);
}

.solutions-grid--compact .solution-card p {
	font-size: calc(var(--font-size-sm) - 1px);
}

.solutions-grid--compact .btn {
	font-size: calc(var(--font-size-sm) - 2px);
	padding: 0.6rem 1.25rem;
}

/* ==========================================================================
   Services Nav — tier-3 compact link rows (sub-services within a palvelut category)
   ========================================================================== */
.services-nav {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 0.5rem;
}

.services-nav__item {
	display: flex;
	align-items: center;
	gap: 0.875rem;
	padding: 0.75rem 1rem 0.75rem 0.875rem;
	border: 1px solid var(--color-border);
	border-radius: var(--border-radius-sm);
	background: var(--color-white);
	color: var(--color-text);
	text-decoration: none;
	transition: background var(--transition), border-color var(--transition), color var(--transition);
}

.services-nav__item:hover {
	background: var(--color-gray-light);
	border-color: var(--color-teal-dark);
	color: var(--color-teal-dark);
}

.services-nav__icon {
	flex-shrink: 0;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--color-blue-deep);
	color: var(--color-white);
	display: flex;
	align-items: center;
	justify-content: center;
}

.services-nav__title {
	flex: 1;
	font-weight: 600;
	font-size: var(--font-size-sm);
	line-height: 1.3;
}

.services-nav__arrow {
	color: var(--color-teal-dark);
	flex-shrink: 0;
	transition: transform var(--transition);
}

.services-nav__item:hover .services-nav__arrow {
	transform: translateX(3px);
}

/* ==========================================================================
   Services Grid
   ========================================================================== */
.services-grid {
	display: grid;
	gap: 2rem;
}

.service-card {
	text-align: center;
	padding: 1.75rem 1.25rem;
	background: var(--card-bg, var(--color-gray-light));
	border-radius: var(--border-radius-sm);
}

.service-card__icon {
	width: 72px;
	height: 72px;
	margin-inline: auto;
	margin-bottom: 1rem;
	border-radius: 50%;
	background: var(--color-teal-dark);
	color: var(--color-white);
	display: flex;
	align-items: center;
	justify-content: center;
}

.service-card__icon img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.service-card h3 {
	font-size: var(--font-size-base);
	margin-bottom: 0.5rem;
}

.service-card p {
	color: var(--color-gray);
	font-size: var(--font-size-sm);
	line-height: 1.6;
}

/* ==========================================================================
   References
   ========================================================================== */
.references-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;
	max-width: 960px;
	margin-inline: auto;
}

.references-grid--count-1 {
	justify-content: center;
}

@media (max-width: 639px) {
	.references-grid--carousel {
		display: flex;
		justify-content: initial;
		gap: 1rem;
		max-width: none;
		margin-inline: 0;
		overflow-x: auto;
		overflow-y: hidden;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		padding-bottom: 0.5rem;
	}

	.references-grid--carousel .reference-card {
		flex: 0 0 72%;
		min-width: 0;
		scroll-snap-align: start;
	}
}

a.reference-card {
	text-decoration: none;
	color: inherit;
}

.reference-card {
	background: var(--color-white);
	border-radius: var(--border-radius-sm);
	overflow: hidden;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
	transition: box-shadow 0.2s, transform 0.2s;
	display: flex;
	flex-direction: column;
}

a.reference-card:hover {
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.13);
	transform: translateY(-2px);
}

.reference-card__logo {
	background: var(--color-white);
	padding: 2rem;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 100px;
	border-bottom: 1px solid var(--color-gray-light, #e8eaed);
}

.reference-card__logo img {
	max-height: 48px;
	width: auto;
	filter: grayscale(1);
}

.reference-card__body {
	padding: 1.5rem;
	background: #f5f6f8;
	flex: 1;
}

.reference-card__body h3 {
	margin-bottom: 0.75rem;
	font-size: var(--font-size-lg);
	word-break: break-word;
}

.reference-card__body p {
	color: var(--color-gray);
	font-size: var(--font-size-sm);
}

/* ==========================================================================
   Partners
   ========================================================================== */
.partners-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	align-items: center;
	justify-items: center;
	gap: 2rem 2rem;
}

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

@media (min-width: 1024px) {
	.partners-grid {
		grid-template-columns: repeat(6, 1fr);
	}
}

.partners-grid > a,
.partners-grid > img {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
}

.partners-grid img {
	max-height: 50px;
	max-width: 100%;
	width: auto;
	filter: grayscale(100%);
	opacity: 0.6;
	transition: filter var(--transition), opacity var(--transition);
}

.partners-grid img:hover {
	filter: grayscale(0%);
	opacity: 1;
}

/* Partners list (detailed view with descriptions) */
.partners-list {
	display: flex;
	flex-direction: column;
	gap: 2.5rem;
}

.partner-entry {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	align-items: flex-start;
}

.partner-entry__logo {
	display: flex;
	align-items: flex-start;
}

.partner-entry__logo img {
	max-width: 120px;
	max-height: 56px;
	width: auto;
	height: auto;
	filter: grayscale(100%);
	opacity: 0.7;
}

.partner-entry__body h3 {
	font-size: var(--font-size-base);
	margin: 0 0 0.5rem;
}

.partner-entry__body p {
	color: var(--color-gray);
	font-size: var(--font-size-sm);
	margin: 0;
}

@media (min-width: 640px) {
	.partner-entry {
		flex-direction: row;
		gap: 2rem;
	}

	.partner-entry__logo {
		flex: 0 0 120px;
		padding-top: 0.25rem;
	}
}

/* ==========================================================================
   Team
   ========================================================================== */
.team-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 220px));
	justify-content: center;
	gap: 1.5rem;
	max-width: 1000px;
	margin-inline: auto;
}

.team-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: 2rem 1.25rem 1.5rem;
	background: var(--card-bg, var(--color-gray-light));
	border-radius: var(--border-radius-sm);
}

.team-card__photo {
	width: 96px;
	height: 96px;
	border-radius: 50%;
	overflow: hidden;
	margin-bottom: 1rem;
	flex-shrink: 0;
}

.team-card__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.team-card__info {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0;
}

.team-card h3 {
	font-size: var(--font-size-base);
	margin: 0 0 0.2rem;
}

.team-card__title {
	color: var(--color-gray);
	font-size: var(--font-size-sm);
	margin: 0 0 0.75rem;
	line-height: 1.3;
}

.team-card__contact {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
}

.team-card__contact p {
	margin: 0;
}

.team-card a {
	color: var(--color-accent);
	font-size: var(--font-size-sm);
	word-break: break-all;
}

.team-card a:hover {
	text-decoration: underline;
}

@media (max-width: 639px) {
	.cta-banner__text {
		gap: 1.5rem;
	}

	.team-grid {
		display: flex;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		gap: 1rem;
		padding-bottom: 0.5rem;
		max-width: none;
		margin-inline: 0;
		justify-content: initial;
	}
	.team-card {
		scroll-snap-align: start;
		flex: 0 0 72%;
		min-width: 0;
	}
}

/* ==========================================================================
   CTA Banner
   ========================================================================== */
.cta-banner {
	background: var(--color-primary);
	color: var(--color-white);
	padding-block: clamp(4rem, 7vw, 6rem);
}

.cta-banner__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1rem;
	text-align: center;
}

.cta-banner h2 {
	color: var(--color-white);
}

.cta-banner__text {
	display: grid;
	justify-items: center;
	gap: 1.25rem;
}

.cta-banner__text h2,
.cta-banner__text p {
	margin: 0;
}

.cta-banner p {
	opacity: 0.9;
	max-width: 700px;
}

.cta-banner .btn {
	margin-top: 0.5rem;
}

/* ==========================================================================
   Inner Page Hero (ACF)
   ========================================================================== */
.inner-hero {
	background: var(--color-primary);
	background-image:
		radial-gradient(ellipse at 70% 30%, rgba(37, 99, 235, 0.3) 0%, transparent 50%),
		radial-gradient(ellipse at 30% 70%, rgba(45, 234, 176, 0.08) 0%, transparent 50%);
	color: var(--color-white);
	padding: clamp(3rem, 8vw, 6rem) 0;
	position: relative;
}

.inner-hero::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image:
		radial-gradient(ellipse 600px 400px at 80% 20%, rgba(0, 77, 193, 0.35) 0%, transparent 60%);
	pointer-events: none;
}

.inner-hero h1 {
	color: var(--color-white);
	margin-bottom: 1rem;
}

.inner-hero {
	padding: clamp(2.5rem, 5vw, 4rem) 0;
}

.inner-hero__subtitle {
	font-family: var(--font-heading);
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	margin-bottom: 1rem;
	color: rgba(255, 255, 255, 0.7);
}

.inner-hero__description,
.inner-hero__description h3,
.inner-hero__description p {
	color: var(--color-white);
	opacity: 0.9;
}

.inner-hero__description {
	opacity: 0.9;
	max-width: 700px;
}

/* ==========================================================================
   Content Section (image + text)
   ========================================================================== */
.content-section {
	padding-block: var(--spacing-section);
}

.content-section__inner {
	display: grid;
	gap: 2rem;
	align-items: center;
}

.content-section__image {
	position: relative;
}

.content-section__image img {
	display: block;
	max-width: 100%;
	height: auto;
	margin-inline: auto;
	border-radius: var(--border-radius-sm);
	box-shadow: 0 12px 40px rgba(15, 16, 32, 0.12);
}

.content-section__text h2,
.content-section__text h3 {
	margin-bottom: 1rem;
}

.content-section__text p {
	color: var(--color-gray-dark);
	margin-bottom: 1em;
	line-height: 1.7;
}

.content-section__text ul {
	list-style: none;
	padding-left: 0;
	color: var(--color-gray-dark);
}

.content-section__text li {
	padding-left: 1.75rem;
	margin-bottom: 0.75em;
	position: relative;
}

.content-section__text li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0.5em;
	width: 1rem;
	height: 1rem;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23004dc1' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.5l3 3 7-7'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
}

.content-section__text strong {
	color: var(--color-black);
}

.content-section__text a {
	color: var(--color-accent);
	text-decoration: underline;
	text-underline-offset: 0.15em;
	transition: color var(--transition);
}

.content-section__text a:hover,
.content-section__text a:focus {
	color: var(--color-accent-hover);
}

.content-section__text li {
	margin-bottom: 0.5em;
}

/* --- Summary Section --- */
.summary-section {
	padding-block: var(--spacing-section);
}

.summary-content {
	max-width: 640px;
	margin-inline: auto;
}

.summary-section__inner {
	max-width: 800px;
	margin-inline: auto;
	padding: 2.5rem;
	border-radius: var(--border-radius-sm);
	background: var(--card-bg, var(--color-white));
}

.section--dark .summary-section__inner {
	background: rgba(255, 255, 255, 0.05);
}

.summary-section h2 {
	margin-bottom: 1rem;
}

.summary-section p {
	color: var(--color-gray-dark);
	margin-bottom: 1em;
}

.summary-section ul {
	list-style: none;
	padding-left: 0;
	color: var(--color-gray-dark);
	margin-bottom: 1.5rem;
}

.summary-section li {
	margin-bottom: 0.75em;
	padding-left: 1.75rem;
	position: relative;
}

.summary-section li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0.5em;
	width: 1rem;
	height: 1rem;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23004dc1' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.5l3 3 7-7'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
}

.section--dark .summary-section li::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%232deab0' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.5l3 3 7-7'/%3E%3C/svg%3E");
}

.summary-section .btn {
	margin-top: 1.5rem;
}

/* ==========================================================================
   Blog
   ========================================================================== */

/* --- Post Grid --- */
.post-grid {
	display: grid;
	gap: 2rem;
}

.post-grid--3col {
	gap: 2rem;
}

.post-card {
	background: var(--card-bg, var(--color-gray-light));
	border-radius: var(--border-radius-sm);
	overflow: hidden;
}

.post-card__image {
	display: block;
	aspect-ratio: 16 / 9;
	overflow: hidden;
}

.post-card__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.3s ease;
}

.post-card:hover .post-card__image img {
	transform: scale(1.05);
}

.post-card__body {
	padding: 1.25rem;
}

.post-card__meta {
	display: flex;
	gap: 0.75rem;
	font-size: var(--font-size-sm);
	color: var(--color-gray);
	margin-bottom: 0.5rem;
}

.post-card__cat {
	color: var(--color-accent);
	font-weight: 600;
}

.post-card__body h2 {
	font-size: var(--font-size-lg);
	margin-bottom: 0.5rem;
	line-height: 1.3;
}

.post-card__body h2 a:hover {
	color: var(--color-accent);
}

.post-card__excerpt {
	color: var(--color-gray);
	font-size: var(--font-size-sm);
	line-height: 1.6;
}

/* ==========================================================================
   Single Post
   ========================================================================== */

/* Hero for blog */
.inner-hero--blog {
	padding-bottom: clamp(2rem, 4vw, 3rem);
}

.single-post__breadcrumb {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: var(--font-size-sm);
	margin-bottom: 1.5rem;
	opacity: 0.7;
}

.single-post__breadcrumb a {
	color: var(--color-white);
}

.single-post__breadcrumb a:hover {
	text-decoration: underline;
}

.single-post__hero-meta {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	font-size: var(--font-size-sm);
	opacity: 0.85;
	margin-top: 1.5rem;
	flex-wrap: wrap;
}

.hero-meta__photo {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	overflow: hidden;
	flex-shrink: 0;
	border: 2px solid rgba(255, 255, 255, 0.3);
}

.hero-meta__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hero-meta__details {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.25rem 0.5rem;
}

.hero-meta__author {
	font-weight: 600;
	color: var(--color-white);
}

.hero-meta__sep {
	opacity: 0.5;
}

.hero-meta__item {
	color: rgba(255, 255, 255, 0.85);
}

.hero-meta__item strong {
	font-weight: 600;
	color: var(--color-white);
}

/* Layout: sidebar + content */
.single-post__layout {
	display: grid;
	gap: 3rem;
	padding-block: var(--spacing-section);
}

.single-post__main {
	min-width: 0;
}

.single-post__sidebar {
	display: none; /* Hidden on mobile, shown at 1024px+ */
}

.single-post__featured {
	margin-bottom: 2rem;
	border-radius: var(--border-radius-sm);
	overflow: hidden;
}

/* Content styling */
.single-post__content {
	font-size: var(--font-size-lg);
	line-height: 1.8;
	color: var(--color-gray-dark);
}

.single-post__content p {
	margin-bottom: 1.5em;
}

.single-post__content h2 {
	margin-top: 2.5em;
	margin-bottom: 0.75em;
	padding-top: 0.5em;
}

.single-post__content h3 {
	margin-top: 2em;
	margin-bottom: 0.75em;
}

.single-post__content img {
	border-radius: var(--border-radius-sm);
	margin-block: 1.5em;
}

.single-post__content a {
	color: var(--color-accent);
}

.single-post__content a:hover {
	text-decoration: underline;
}

.single-post__content ul,
.single-post__content ol {
	padding-left: 1.5rem;
	margin-bottom: 1.5em;
}

.single-post__content ul {
	list-style: disc;
}

.single-post__content ol {
	list-style: decimal;
}

.single-post__content li {
	margin-bottom: 0.5em;
}

.single-post__content blockquote {
	border-left: 4px solid var(--color-primary);
	padding: 1.25rem 1.5rem;
	margin-block: 2em;
	background: var(--color-gray-light);
	border-radius: 0 var(--border-radius-sm) var(--border-radius-sm) 0;
	font-style: italic;
}

.single-post__content table,
.wp-block-table table {
	width: 100%;
	border-collapse: collapse;
	margin: 2em 0;
	font-size: var(--font-size-sm);
	border-radius: var(--border-radius-sm);
	overflow: hidden;
}

.single-post__content table th,
.single-post__content table td,
.wp-block-table table th,
.wp-block-table table td {
	border: 1px solid var(--color-gray-lighter);
	padding: 0.75rem 1rem;
	text-align: left;
}

.single-post__content table thead th,
.wp-block-table table thead th {
	background: var(--color-primary);
	color: var(--color-white);
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: var(--font-size-sm);
	text-transform: uppercase;
	letter-spacing: 0.03em;
	border-color: var(--color-primary-dark);
}

.single-post__content table tbody tr:nth-child(even),
.wp-block-table table tbody tr:nth-child(even) {
	background: var(--color-gray-light);
}

.single-post__content table tbody tr:hover,
.wp-block-table table tbody tr:hover {
	background: var(--color-gray-lighter);
}

/* Share buttons */
.single-post__share {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding-top: 2rem;
	margin-top: 2rem;
	border-top: 1px solid var(--color-gray-lighter);
	font-size: var(--font-size-sm);
	font-weight: 600;
	color: var(--color-gray-dark);
}

.single-post__share a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--color-gray-light);
	color: var(--color-gray-dark);
	transition: background var(--transition), color var(--transition);
}

.single-post__share a:hover {
	background: var(--color-primary);
	color: var(--color-white);
}

/* Author card (bottom of article) */
.author-card {
	display: flex;
	gap: 1.5rem;
	padding: 2rem;
	margin-top: 2.5rem;
	background: var(--color-gray-light);
	border-radius: var(--border-radius-sm);
}

.author-card__photo {
	width: 100px;
	height: 100px;
	border-radius: 50%;
	overflow: hidden;
	flex-shrink: 0;
}

.author-card__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.author-card__label {
	display: block;
	font-size: var(--font-size-sm);
	color: var(--color-gray);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin-bottom: 0.25rem;
}

.author-card__name {
	font-size: var(--font-size-lg);
	margin-bottom: 0.25rem;
	text-transform: none;
}

.author-card__title {
	font-size: var(--font-size-sm);
	color: var(--color-gray);
	margin-bottom: 0.5rem;
}

.author-card__bio {
	font-size: var(--font-size-sm);
	color: var(--color-gray-dark);
	line-height: 1.6;
}

/* ==========================================================================
   TOC Sidebar
   ========================================================================== */
.toc {
	margin-bottom: 2rem;
}

.single-post__sidebar {
	position: sticky;
	top: 80px;
	max-height: calc(100vh - 100px);
	overflow-y: auto;
	align-self: start;
}

/* Hide scrollbar but keep scrollable */
.single-post__sidebar::-webkit-scrollbar {
	width: 0;
}

.single-post__sidebar {
	scrollbar-width: none;
}

.toc__title {
	font-size: var(--font-size-sm);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--color-gray);
	font-weight: 600;
	margin-bottom: 1rem;
	padding-bottom: 0.75rem;
	border-bottom: 1px solid var(--color-gray-lighter);
}

.toc__list {
	list-style: none;
	padding: 0;
	font-size: var(--font-size-sm);
	line-height: 1.4;
}

.toc__item {
	margin-bottom: 0.25rem;
}

.toc__link {
	display: block;
	padding: 0.35rem 0 0.35rem 0.75rem;
	color: var(--color-gray);
	border-left: 2px solid transparent;
	transition: color var(--transition), border-color var(--transition);
}

.toc__link:hover {
	color: var(--color-black);
}

.toc__item.is-active > .toc__link {
	color: var(--color-primary);
	border-left-color: var(--color-primary);
	font-weight: 600;
}

/* Sub-items: collapsed by default, expanded when parent is active */
.toc__sublist {
	list-style: none;
	padding: 0 0 0 0.75rem;
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.3s ease;
}

.toc__item--parent.is-expanded > .toc__sublist {
	max-height: 500px;
}

.toc__item--sub .toc__link {
	font-size: calc(var(--font-size-sm) - 1px);
	padding-block: 0.25rem;
}

/* Sidebar CTA */
.sidebar-cta {
	background: var(--color-gray-light);
	border-radius: var(--border-radius-sm);
	padding: 1.5rem;
	margin-top: 1.5rem;
}

.sidebar-cta h4 {
	font-size: var(--font-size-sm);
	margin-bottom: 0.5rem;
	text-transform: none;
}

.sidebar-cta p {
	font-size: var(--font-size-sm);
	color: var(--color-gray);
	margin-bottom: 1rem;
	line-height: 1.6;
}

.sidebar-cta .btn {
	width: 100%;
	justify-content: center;
	font-size: calc(var(--font-size-sm) - 1px);
	padding: 0.75rem 1rem;
}

/* --- Pagination --- */
.pagination {
	margin-top: 3rem;
	display: flex;
	justify-content: center;
	gap: 0.5rem;
}

.pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0.5rem;
	border-radius: var(--border-radius);
	font-weight: 600;
	font-family: var(--font-heading);
	font-size: var(--font-size-sm);
	transition: background var(--transition), color var(--transition);
}

.pagination .page-numbers.current {
	background: var(--color-primary);
	color: var(--color-white);
}

.pagination .page-numbers:not(.current):hover {
	background: var(--color-gray-light);
}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer {
	background: var(--color-primary);
	color: var(--color-white);
	padding-block: clamp(2.5rem, 5vw, 4rem);
}

.site-footer__inner {
	display: grid;
	gap: 2.5rem;
}

/* Menu columns live inside a slightly lighter rounded panel; the contact
   block sits unboxed next to it. */
.site-footer__panel {
	display: grid;
	gap: 2rem;
}

.site-footer__logo {
	display: inline-block;
	margin-bottom: 0.5rem;
}

.site-footer__logo img {
	height: 36px;
	width: auto;
}

.site-footer__address p {
	font-size: var(--font-size-sm);
	opacity: 0.8;
	margin-bottom: 0.125rem;
}

.site-footer__address a {
	opacity: 0.8;
	transition: opacity var(--transition);
}

.site-footer__address a:hover {
	opacity: 1;
}

.site-footer__heading {
	font-family: var(--font-heading);
	color: var(--color-white);
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	margin-bottom: 1.25rem;
	opacity: 0.7;
}

.site-footer__links .menu-item a {
	display: block;
	padding-block: 0.25rem;
	font-size: var(--font-size-sm);
	opacity: 0.8;
	transition: opacity var(--transition);
}

.site-footer__links .menu-item a:hover {
	opacity: 1;
}

.site-footer__bottom {
	border-top: 1px solid rgba(255, 255, 255, 0.15);
	margin-top: 2rem;
	padding-top: 1.5rem;
}

.site-footer__bottom p {
	font-size: var(--font-size-sm);
	opacity: 0.6;
	text-align: center;
}

/* ==========================================================================
   Search & 404
   ========================================================================== */
.search-form {
	display: flex;
	gap: 0.5rem;
	max-width: 500px;
}

.search-form input[type="search"] {
	flex: 1;
	padding: 0.75rem 1rem;
	border: 2px solid #ddd;
	border-radius: var(--border-radius);
	font: inherit;
}

.search-form input[type="search"]:focus {
	border-color: var(--color-accent);
	outline: none;
}

.search-form button {
	padding: 0.75rem 1.5rem;
	background: var(--color-primary);
	color: var(--color-white);
	border-radius: var(--border-radius);
	font-weight: 600;
}

.page-404,
.page-search {
	text-align: center;
	padding-block: var(--spacing-section);
}

.page-404 h1 {
	font-size: clamp(3rem, 8vw, 6rem);
	margin-bottom: 1rem;
}

.page-404 p {
	color: var(--color-gray);
	margin-bottom: 2rem;
}

.page-404 .search-form {
	margin-inline: auto;
}

/* ==========================================================================
   Contact Form
   ========================================================================== */
.contact-form-layout {
	display: grid;
	grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
	gap: clamp(2rem, 5vw, 4rem);
	align-items: start;
}

.contact-form-copy {
	max-width: 34rem;
}

.contact-form-copy h2 {
	margin-bottom: 1rem;
}

.contact-form-copy p {
	color: var(--color-gray);
	font-size: var(--font-size-lg);
	line-height: 1.65;
}

.contact-form {
	width: 100%;
	max-width: 760px;
	padding: clamp(1.25rem, 3vw, 2rem);
	background: var(--card-bg, var(--color-gray-light));
	border: 1px solid rgba(0, 8, 82, 0.08);
	border-radius: var(--border-radius);
	box-shadow: 0 18px 45px rgba(0, 8, 82, 0.08);
}

.contact-form__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.25rem 1rem;
}

.contact-form__field {
	min-width: 0;
}

.contact-form__field--full {
	grid-column: 1 / -1;
}

.contact-form label {
	display: block;
	font-family: var(--font-heading);
	font-size: var(--font-size-sm);
	font-weight: 600;
	color: var(--color-black);
	margin-bottom: 0.5rem;
}

.contact-form label span[aria-hidden="true"] {
	color: var(--color-accent);
	margin-left: 0.2rem;
}

.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form textarea,
.contact-form select {
	display: block;
	width: 100%;
	padding: 0.8rem 1rem;
	border: 2px solid rgba(0, 8, 82, 0.16);
	border-radius: var(--border-radius);
	font-family: var(--font-body);
	font-size: var(--font-size-base);
	color: var(--color-black);
	background: var(--color-white);
	transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
	-webkit-appearance: none;
	appearance: none;
}

.contact-form select {
	background-image: linear-gradient(45deg, transparent 50%, var(--color-primary) 50%), linear-gradient(135deg, var(--color-primary) 50%, transparent 50%);
	background-position: calc(100% - 18px) 50%, calc(100% - 12px) 50%;
	background-size: 6px 6px, 6px 6px;
	background-repeat: no-repeat;
	padding-right: 2.75rem;
}

.contact-form textarea {
	min-height: 150px;
	resize: vertical;
}

.contact-form input:focus,
.contact-form textarea:focus,
.contact-form select:focus {
	border-color: var(--color-accent);
	box-shadow: 0 0 0 3px rgba(0, 77, 193, 0.12);
	outline: none;
}

.contact-form .contact-form__honeypot,
.contact-form input[type="hidden"] {
	display: none;
}

.contact-form__submit {
	margin-top: 1.5rem;
	min-width: 12rem;
	border: 0;
}

.contact-form__submit:disabled {
	cursor: wait;
	opacity: 0.72;
}

.contact-form__status {
	min-height: 1.5rem;
	margin-top: 1rem;
	font-size: var(--font-size-sm);
	font-weight: 600;
}

.contact-form__status.is-error {
	color: var(--color-accent);
}

@media (max-width: 800px) {
	.contact-form-layout,
	.contact-form__grid {
		grid-template-columns: 1fr;
	}

	.contact-form {
		max-width: none;
	}
}

/* ==========================================================================
   Focus & Accessibility
   ========================================================================== */
:focus-visible {
	outline: 3px solid var(--color-accent);
	outline-offset: 2px;
}

a:focus:not(:focus-visible),
button:focus:not(:focus-visible) {
	outline: none;
}

/* ==========================================================================
   Animations
   ========================================================================== */
.fade-in {
	opacity: 1;
	transform: none;
}

.js .fade-in {
	opacity: 1;
	transform: none;
}

.js .fade-in.is-visible {
	opacity: 1;
	transform: translateY(0);
}

/* ==========================================================================
   Cards Grid (Page Builder)
   ========================================================================== */
.cards-grid {
	display: grid;
	gap: 2rem;
}

.cards-grid--2col { grid-template-columns: repeat(1, 1fr); }
.cards-grid--3col { grid-template-columns: repeat(1, 1fr); }
.cards-grid--4col { grid-template-columns: repeat(1, 1fr); }

.card-item {
	text-align: center;
	padding: 2.25rem 1.75rem;
	background: var(--card-bg, var(--color-gray-light));
	border-radius: var(--border-radius-sm);
	position: relative;
}

/* Cards without a link aren't clickable. */
.card-item:not(:has(a)) {
	cursor: default;
}

/* ==========================================================================
   Features grid — informational layout (no boxes, no hover, not clickable).
   Used by the cards_grid section when layout_style = "features".
   ========================================================================== */
.features-grid {
	display: grid;
	gap: 2.5rem 2rem;
	grid-template-columns: 1fr;
}

@media (min-width: 640px) {
	.features-grid--2col { grid-template-columns: repeat(2, 1fr); }
	.features-grid--3col { grid-template-columns: repeat(2, 1fr); }
	.features-grid--4col { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
	.features-grid--2col { grid-template-columns: repeat(2, 1fr); }
	.features-grid--3col { grid-template-columns: repeat(3, 1fr); }
	.features-grid--4col { grid-template-columns: repeat(4, 1fr); }
}

.feature-item {
	text-align: center;
	padding: 0 0.5rem;
	background: transparent;
	border: none;
	box-shadow: none;
	cursor: default;
}

.feature-item__icon {
	width: 64px;
	height: 64px;
	margin-inline: auto;
	margin-bottom: 1rem;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Icon hover — icon circle glows on clickable card hover; card box stays still. */
.solutions-grid--ratkaisut .solution-card__icon,
.solutions-grid--palvelut .solution-card__icon,
.service-card__icon,
.card-item--tier-ratkaisu .card-item__icon,
.card-item--tier-palvelu .card-item__icon,
.card-item--tier-sub-palvelu .card-item__icon,
.feature-item__icon,
.sibling-card--compact .sibling-card__icon {
	position: relative;
	transition: box-shadow 0.25s ease-out;
}

.solution-card:hover .solution-card__icon,
.service-card:hover .service-card__icon,
.card-item:has(a):hover .card-item__icon,
.sibling-card--compact:hover .sibling-card__icon {
	box-shadow:
		inset 0 0 20px rgba(0, 77, 193, 0.55),
		0 0 18px rgba(100, 180, 255, 0.5),
		0 0 40px rgba(45, 234, 176, 0.2);
}

/* Icon glyph brightens on hover. */
.solutions-grid--ratkaisut .solution-card__icon .icon,
.solutions-grid--palvelut .solution-card__icon .icon,
.service-card__icon .icon,
.card-item--tier-ratkaisu .card-item__icon .icon,
.card-item--tier-palvelu .card-item__icon .icon,
.card-item--tier-sub-palvelu .card-item__icon .icon,
.sibling-card--compact .sibling-card__icon .icon {
	transition: filter 0.25s ease-out;
}

.solution-card:hover .solution-card__icon .icon,
.service-card:hover .service-card__icon .icon,
.card-item:has(a):hover .card-item__icon .icon,
.sibling-card--compact:hover .sibling-card__icon .icon {
	filter:
		drop-shadow(0 0 2px rgba(255, 255, 255, 0.9))
		drop-shadow(0 0 6px rgba(120, 200, 255, 0.7));
}

.feature-item__icon .icon {
	width: 28px;
	height: 28px;
}

.feature-item__icon--svg {
	color: var(--color-accent);
}

.feature-item h3 {
	margin: 0 0 0.5rem;
	font-size: 1.125rem;
	color: var(--color-primary);
}

.feature-item p {
	color: var(--color-gray);
	margin: 0;
	line-height: 1.55;
}

/* Tier hierarchy — applied to cards based on what they link to.
   Mirrors the .solutions-grid--ratkaisut / --palvelut treatment on archives. */

/* Card backgrounds for the cards-grid tier modifiers (icon style is handled
   by the shared HUD shell above). */
.card-item--tier-ratkaisu {
	background: var(--card-bg, var(--color-gray-light));
}
.card-item--tier-palvelu {
	background: var(--color-white);
}
.card-item--tier-palvelu .card-item__icon--svg {
	color: var(--color-accent);
}

/* Cards with a link: make the entire card the click target via stretched
   link on the H3 anchor. Same pattern as .solution-card. */
.card-item:has(a) {
	cursor: pointer;
}
.card-item h3 a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}
.card-item__icon,
.card-item .card-link {
	position: relative;
	z-index: 2;
}

.card-item:has(h3 a) .card-item__icon {
	pointer-events: none;
}


.card-item__icon {
	width: 80px;
	height: 80px;
	margin-inline: auto;
	margin-bottom: 1.25rem;
	border-radius: var(--border-radius);
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}

.card-item__icon img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.card-item h3 {
	font-size: var(--font-size-lg);
	margin-bottom: 0.5rem;
}

.card-item h3 a {
	transition: color var(--transition);
}

.card-item h3 a:hover {
	color: var(--color-accent);
}

.card-item p {
	color: var(--color-gray);
	font-size: var(--font-size-sm);
	line-height: 1.6;
}

/* ==========================================================================
   Accordion
   ========================================================================== */
.accordion {
	max-width: 800px;
	margin-inline: auto;
}

.accordion__item {
	border-bottom: 1px solid #e5e5e5;
}

.accordion__trigger {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	padding: 1.25rem 0;
	font-size: var(--font-size-lg);
	font-weight: 600;
	text-align: left;
	color: var(--color-black);
	min-height: 44px;
}

.accordion__trigger:hover {
	color: var(--color-accent);
}

.accordion__icon {
	flex-shrink: 0;
	transition: transform var(--transition);
}

.accordion__trigger[aria-expanded="true"] .accordion__icon {
	transform: rotate(180deg);
}

.accordion__panel[hidden] {
	display: none;
}

.accordion__content {
	padding-bottom: 1.5rem;
	color: var(--color-gray-dark);
}

.accordion__content p {
	margin-bottom: 1em;
}

.accordion__content ul {
	list-style: disc;
	padding-left: 1.5rem;
	margin-bottom: 1em;
}

.accordion__content li {
	margin-bottom: 0.5em;
}

/* ==========================================================================
   WYSIWYG Section
   ========================================================================== */
.wysiwyg-section .single-post__content,
.wysiwyg-content {
	max-width: 960px;
	margin-inline: auto;
}

.wysiwyg-content h2 {
	margin-bottom: 1rem;
}

.wysiwyg-content p {
	color: var(--color-gray);
	line-height: 1.7;
}

.wysiwyg-section--narrow .single-post__content {
	max-width: 720px;
}

.wysiwyg-section--full .single-post__content {
	max-width: 100%;
}

@media (max-width: 639px) {
	.wysiwyg-content h2 {
		margin-bottom: 1.5rem;
	}
}

/* ==========================================================================
   USP Bar
   ========================================================================== */
.usp-bar {
	padding-block: clamp(2rem, 4vw, 3rem);
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.usp-bar__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem;
}

.usp-bar__item {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.usp-bar__icon {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: rgba(45, 234, 176, 0.15);
	color: var(--color-green);
}

.section--gray .usp-bar__icon,
.usp-bar:not(.section--dark) .usp-bar__icon {
	background: var(--color-primary);
	color: var(--color-white);
}

.usp-bar__emoji {
	font-size: 1.5rem;
}

.usp-bar__text {
	font-family: var(--font-heading);
	font-size: calc(var(--font-size-sm) - 1px);
	font-weight: 600;
	line-height: 1.3;
}

/* ==========================================================================
   Steps / Process
   ========================================================================== */
.steps-grid {
	display: flex;
	flex-direction: column;
	gap: 0;
	align-items: stretch;
	max-width: 800px;
	margin-inline: auto;
}

.step-item {
	display: flex;
	gap: 1.25rem;
	align-items: flex-start;
}

.step-item__number {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--color-accent);
	color: var(--color-white);
	font-family: var(--font-heading);
	font-size: var(--font-size-xl);
	font-weight: 700;
}

.step-item__content h3 {
	margin-bottom: 0.25rem;
}

.step-item__content p {
	color: var(--color-gray);
	font-size: var(--font-size-sm);
	line-height: 1.6;
}

.step-item__connector {
	flex-shrink: 0;
	width: 2px;
	height: 2.5rem;
	background: var(--color-gray-lighter);
	margin-left: 27px; /* (56px circle − 2px line) / 2 */
}

/* ==========================================================================
   Checklist — stacked benefits list, check mark left, text right.
   Same stacked layout on mobile and desktop (no ball icons by design).
   ========================================================================== */
.checklist {
	list-style: none;
	max-width: 720px;
	margin-inline: auto;
	display: grid;
	gap: 1.5rem;
}

.checklist__item {
	display: flex;
	gap: 1rem;
	align-items: flex-start;
}

.checklist__check {
	flex-shrink: 0;
	color: var(--color-accent);
	margin-top: 0.2em;
}

.checklist__check .icon {
	width: 22px;
	height: 22px;
	stroke-width: 3;
}

.checklist__body h3 {
	font-size: var(--font-size-lg);
	margin-bottom: 0.25rem;
}

.checklist__body p {
	color: var(--color-gray);
	font-size: var(--font-size-base);
	line-height: 1.6;
	margin: 0;
}

.section--dark .checklist__check {
	color: var(--color-green);
}

.section--dark .checklist__body p {
	color: rgba(255, 255, 255, 0.8);
}

/* ==========================================================================
   Siblings Scroll (horizontal scrollable row for palvelut)
   ========================================================================== */
.container-full {
	width: 100%;
	overflow: hidden;
}

.siblings-scroll-wrapper {
	position: relative;
	max-width: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--container-padding);
}

.siblings-scroll {
	display: flex;
	gap: 1rem;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	padding: 0.5rem 0 1.5rem;
}

.siblings-scroll::-webkit-scrollbar {
	height: 4px;
}

.siblings-scroll::-webkit-scrollbar-track {
	background: transparent;
}

.siblings-scroll::-webkit-scrollbar-thumb {
	background: var(--color-gray-lighter);
	border-radius: 2px;
}

/* Scroll arrows */
.scroll-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 5;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--color-white);
	color: var(--color-primary);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
	transition: background var(--transition), color var(--transition), opacity var(--transition);
	cursor: pointer;
}

.scroll-arrow:hover {
	background: var(--color-primary);
	color: var(--color-white);
}

.scroll-arrow--left {
	left: 0;
}

.scroll-arrow--right {
	right: 0;
}

.scroll-arrow.is-hidden {
	opacity: 0;
	pointer-events: none;
}

.sibling-card--compact {
	flex: 0 0 auto;
	width: 170px;
	scroll-snap-align: start;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: 1.25rem 0.75rem;
	background: var(--card-bg, var(--color-white));
	border-radius: var(--border-radius-sm);
	text-decoration: none;
	color: var(--color-black);
}

.sibling-card__icon {
	width: 60px;
	height: 60px;
	border-radius: 50%;
	overflow: hidden;
	margin-bottom: 0.5rem;
	flex-shrink: 0;
}

/* Palvelut siblings (compact scrollable): inherit the HUD look from the
   shared shell above. Just need flex centering + overflow for the glow. */
.sibling-card--compact .sibling-card__icon {
	overflow: visible;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Tier-aware colors for palvelut siblings — circles everywhere, fill carries
   the tier (matches the cards-grid system). */
.siblings-scroll--palvelu .sibling-card__icon {
	background: var(--color-teal-dark);
}

.siblings-scroll--sub-palvelu .sibling-card__icon {
	background: var(--color-blue-deep);
}

.sibling-card__icon img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.sibling-card__title {
	font-family: var(--font-heading);
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0;
	line-height: 1.3;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	word-break: normal;
	overflow-wrap: normal;
}

/* ==========================================================================
   Lite YouTube Embed
   ========================================================================== */
lite-youtube {
	background-color: #000;
	position: relative;
	display: block;
	contain: content;
	background-position: center;
	background-size: cover;
	cursor: pointer;
	width: 100%;
	aspect-ratio: 16 / 9;
}

lite-youtube::before {
	content: '';
	display: block;
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0,0,0,0.4) 0%, transparent 40%);
}

lite-youtube .lty-playbtn {
	display: block;
	width: 68px;
	height: 48px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 1;
	background: transparent;
	border: none;
	cursor: pointer;
	transition: filter 0.1s;
}

lite-youtube:hover .lty-playbtn {
	filter: brightness(1.1);
}

lite-youtube.lyt-activated {
	cursor: unset;
}

lite-youtube.lyt-activated::before,
lite-youtube.lyt-activated .lty-playbtn {
	display: none;
}

lite-youtube iframe {
	width: 100%;
	height: 100%;
	position: absolute;
	inset: 0;
	border: 0;
}

/* ==========================================================================
   Responsive — Tablet (768px+)
   ========================================================================== */
@media (min-width: 768px) {
	.solutions-grid--compact {
		grid-template-columns: repeat(4, 1fr);
		gap: 1.25rem;
	}

	.siblings-scroll-wrapper {
		padding-inline: 3rem;
	}

	.sibling-card--compact {
		width: 180px;
		padding: 1.5rem 1rem;
	}

	.sibling-card__icon {
		width: 70px;
		height: 70px;
	}

	.sibling-card__title {
		font-size: 11px;
	}

	.scroll-arrow--left {
		left: 0.5rem;
	}

	.scroll-arrow--right {
		right: 0.5rem;
	}

	.usp-bar__grid {
		display: flex;
		justify-content: center;
		gap: 2rem 3rem;
	}

	.usp-bar__icon {
		width: 48px;
		height: 48px;
	}

	.usp-bar__text {
		font-size: var(--font-size-sm);
	}

	.video-text__inner {
		grid-template-columns: 1fr 1fr;
	}

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

	.solutions-grid--ratkaisut {
		grid-template-columns: repeat(3, 1fr);
	}

	/* Palvelut: keeps 3-up menu density (default already). */

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

	.cards-grid--2col { grid-template-columns: repeat(2, 1fr); }
	.cards-grid--3col { grid-template-columns: repeat(2, 1fr); }

	.steps-grid {
		flex-direction: row;
		align-items: flex-start;
		max-width: 100%;
	}

	.step-item {
		flex-direction: column;
		align-items: center;
		text-align: center;
		flex: 1;
		gap: 0.75rem;
	}

	.step-item__connector {
		width: 1.5rem;
		height: 2px;
		margin-left: 0;
		margin-top: 27px; /* center on 56px circle */
		align-self: flex-start;
	}
	.cards-grid--4col { grid-template-columns: repeat(2, 1fr); }

	.references-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 2rem;
	}

	.references-grid--carousel {
		gap: 1.5rem;
	}

	.references-grid--carousel .reference-card {
		flex-basis: 300px;
	}

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

	.post-grid--3col {
		grid-template-columns: repeat(3, 1fr);
	}

	.site-footer__inner {
		grid-template-columns: 5fr 7fr;
		align-items: center;
	}

	.site-footer__panel {
		grid-template-columns: 1fr 1fr;
	}

	.content-section__inner {
		grid-template-columns: 1fr 1fr;
	}

	.content-section--reversed .content-section__image {
		order: 1;
	}

	.content-section--reversed .content-section__text {
		order: 2;
	}

	.cta-banner__inner {
		flex-direction: row;
		justify-content: space-between;
		text-align: left;
	}

	.cta-banner__text {
		justify-items: start;
	}

	.cta-banner .btn {
		flex-shrink: 0;
	}
}

/* ==========================================================================
   Responsive — Desktop (1024px+)
   ========================================================================== */
@media (min-width: 1024px) {
	:root {
		--container-padding: 2rem;
	}

	/* Sub-sub-menu hover on desktop only */
	.sub-menu .menu-item-has-children:hover > .sub-menu,
	.sub-menu .menu-item-has-children:focus-within > .sub-menu {
		display: block;
	}

	.hero__inner {
		grid-template-columns: 1fr 1.1fr;
		gap: 3rem;
	}

	.hero__image {
		display: block;
	}

	.site-nav {
		display: block;
	}

	.menu-toggle {
		display: none;
	}

	.cards-grid--3col { grid-template-columns: repeat(3, 1fr); }
	.cards-grid--4col { grid-template-columns: repeat(4, 1fr); }

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

	/* Cap column count to number of items so 1/2/3-item grids stay centered. */
	.references-grid--count-1 { grid-template-columns: minmax(0, 480px); }
	.references-grid--count-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 680px; }
	.references-grid--count-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.references-grid--count-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 1200px; }

	.references-grid--carousel {
		max-width: none;
	}

	.references-grid--carousel .reference-card {
		flex-basis: 320px;
	}

	/* Single post: sidebar layout */
	.single-post__layout {
		grid-template-columns: 260px 1fr;
	}

	.single-post__sidebar {
		display: block;
		order: -1;
	}
}

/* ==========================================================================
   Print
   ========================================================================== */
@media print {
	.site-header,
	.site-footer,
	.cta-banner,
	.menu-toggle,
	.skip-link {
		display: none;
	}

	body {
		color: #000;
		background: #fff;
	}
}

/* ==========================================================================
   Breadcrumbs
   ========================================================================== */
.breadcrumbs {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	font-size: calc(var(--font-size-sm) - 1px);
	margin-bottom: 1.25rem;
	opacity: 0.7;
	flex-wrap: wrap;
}

.breadcrumbs a {
	color: var(--color-white);
	transition: opacity var(--transition);
}

.breadcrumbs a:hover {
	opacity: 0.8;
	text-decoration: underline;
}

.breadcrumbs__current {
	opacity: 0.6;
}

/* ==========================================================================
   Active / Pressed States
   ========================================================================== */
.btn:active {
	transform: scale(0.97);
}

.solution-card:active,
.service-card:active,
.card-item:active,
.post-card:active,
.sibling-card--compact:active {
	transform: scale(0.98);
}

/* ==========================================================================
   Shadow Scale (consistent elevation)
   ========================================================================== */
:root {
	--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.04);
	--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.06);
	--shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.1);
	--shadow-xl: 0 16px 40px rgba(0, 0, 0, 0.12);
}

/* ==========================================================================
   Section Dividers — wave SVG between dark and light sections
   ========================================================================== */

/* Dark-to-light wave (only on last dark section before light content) */
.hero,
.usp-bar.section--dark,
.cta-banner,
.inner-hero {
	position: relative;
}

/* Wave dividers removed for cleaner, more authoritative section transitions. */

/* Ensure sections have relative positioning for waves */
.section--gray,
.summary-section,
.content-section {
	position: relative;
}

/* ==========================================================================
   Enhanced Card Hovers
   ========================================================================== */
.card-item:hover {
	background: var(--color-white);
}

.section--gray .card-item:hover {
	background: var(--color-white);
	box-shadow: var(--shadow-lg);
}

.post-card:hover .post-card__image img {
	transform: scale(1.03);
}

/* ==========================================================================
   Skeleton Loading (image placeholders)
   ========================================================================== */

@keyframes shimmer {
	0% { background-position: -200% 0; }
	100% { background-position: 200% 0; }
}

.solution-card__icon:empty,
.card-item__icon:empty,
.team-card__photo:empty {
	background: linear-gradient(90deg, var(--color-gray-lighter) 25%, var(--color-gray-light) 50%, var(--color-gray-lighter) 75%);
	background-size: 200% 100%;
	animation: shimmer 1.5s ease-in-out infinite;
}

/* ==========================================================================
   Reduced Motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}

	.fade-in,
	.js .fade-in {
		opacity: 1;
		transform: none;
	}
}

/* Author card */
.author-card {
	display: flex;
	gap: 1.25rem;
	align-items: flex-start;
	padding: 1.5rem;
	background: var(--color-gray-light);
	border-radius: var(--border-radius-sm);
	margin-top: 3rem;
	border-left: 3px solid var(--color-accent);
}

.author-card__photo {
	flex-shrink: 0;
	width: 80px;
	height: 80px;
	border-radius: 50%;
	overflow: hidden;
}

.author-card__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.author-card__label {
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--color-accent);
	margin-bottom: 0.25rem;
}

.author-card__name {
	font-weight: 700;
	font-size: 1.05rem;
	color: var(--color-black);
	margin-bottom: 0.4rem;
}

.author-card__bio {
	font-size: var(--font-size-sm);
	color: var(--color-gray);
	line-height: 1.65;
	margin: 0;
}