/* ==========================================================================
   WellWorks – main stylesheet
   Refreshed look on the existing markup. Same amber / charcoal palette.
   (Previous version: main.min.css.bak)
   ========================================================================== */

:root {
	/* Brand */
	--ww-amber: #ffb200;
	--ww-amber-strong: #ffa000;
	--ww-orange: #ff871c;
	--ww-amber-ink: #8a4600;
	--ww-amber-50: #fff8e8;
	--ww-amber-100: #ffefc7;
	--ww-link: #b05200;
	--ww-link-hover: #8a3c00;

	/* Neutrals */
	--ww-ink: #212427;
	--ww-text: #3d4246;
	--ww-muted: #6a7075;
	--ww-line: #e6e8e6;
	--ww-surface: #fff;
	--ww-subtle: #f4f5f3;
	--ww-page: #eceeec;
	--ww-footer: #2a2d30;

	--ww-radius-xl: 28px;
	--ww-radius-lg: 22px;
	--ww-radius: 16px;
	--ww-radius-sm: 12px;
	--ww-pill: 999px;

	--ww-shadow-sm: 0 1px 2px rgb(20 24 28 / .08), 0 4px 12px -4px rgb(20 24 28 / .12);
	--ww-shadow: 0 1px 2px rgb(20 24 28 / .04), 0 12px 32px -14px rgb(20 24 28 / .16);
	--ww-shadow-warm: 0 1px 2px rgb(120 60 0 / .08), 0 18px 36px -18px rgb(120 60 0 / .45);

	--ww-pad: clamp(20px, 5vw, 56px);
	--ww-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

	/* Front page hero: amber gradient + the brand "W" wave */
	--ww-hero:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 400' preserveAspectRatio='none'%3E%3Cpath d='M-20 330 C60 270 140 175 185 128 C225 88 265 90 298 128 L452 305 C484 342 532 342 564 305 L722 124 C748 96 774 88 814 88 L1020 88' fill='none' stroke='%23fff' stroke-opacity='.28' stroke-width='22' stroke-linecap='round' stroke-linejoin='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") center / 100% 100% no-repeat,
		radial-gradient(55% 75% at 20% 15%, rgb(255 236 170 / .8), transparent 70%),
		radial-gradient(45% 70% at 90% 100%, rgb(255 120 0 / .35), transparent 70%),
		linear-gradient(125deg, #ffc22e 0%, #ffb200 50%, #ff9d0a 100%);
}

/* Base
   ========================================================================== */
body *,
body *::before,
body *::after {
	box-sizing: border-box;
}
/* Magnific Popup's own layout assumes content-box */
.mfp-bg,
.mfp-wrap,
.mfp-wrap *,
.mfp-wrap *::before,
.mfp-wrap *::after {
	box-sizing: content-box;
}
html {
	color: var(--ww-text);
	background:
		radial-gradient(1100px 520px at 50% -200px, rgb(255 178 0 / .16), transparent 70%) no-repeat,
		var(--ww-page);
	font-family: var(--ww-font);
	font-size: 100%;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
body {
	max-width: 1120px;
	margin: 0 auto;
	padding: 14px 16px 16px;
}
h1, h2, h3, h4, h5, h6 {
	color: var(--ww-ink);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -.015em;
	text-wrap: balance;
}
h1 {
	margin: 0 0 .65em;
	font-size: clamp(1.85rem, 1.35rem + 1.6vw, 2.5rem);
	font-weight: 800;
	letter-spacing: -.028em;
}
h2 {
	margin: 1.8em 0 .55em;
	font-size: clamp(1.3rem, 1.15rem + .5vw, 1.55rem);
	letter-spacing: -.02em;
}
h3 {
	margin: 1.7em 0 .45em;
	font-size: 1.15rem;
}
p, ul, ol {
	margin: 0 0 1em;
}
p {
	text-wrap: pretty;
}
strong, b {
	color: var(--ww-ink);
	font-weight: 700;
}
a {
	color: var(--ww-link);
	text-decoration: underline;
	text-decoration-color: rgb(255 178 0 / .6);
	text-decoration-thickness: 2px;
	text-underline-offset: .2em;
	transition: color .2s ease, background-color .2s ease, text-decoration-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
a:hover {
	color: var(--ww-link-hover);
	text-decoration-color: var(--ww-orange);
}
:focus-visible {
	outline: 3px solid rgb(255 178 0 / .75);
	outline-offset: 3px;
}
::selection {
	background: #ffe08f;
	color: var(--ww-ink);
}
hr {
	height: 1px;
	margin: clamp(28px, 4vw, 40px) 0;
	border: 0;
	background: var(--ww-line);
}

/* Header & main navigation
   ========================================================================== */
header {
	position: sticky;
	top: 12px;
	z-index: 100;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px 24px;
	margin: 0 0 16px;
	padding: 10px 10px 10px 22px;
	background: rgb(255 255 255 / .86);
	-webkit-backdrop-filter: saturate(180%) blur(16px);
	backdrop-filter: saturate(180%) blur(16px);
	border: 1px solid rgb(255 255 255 / .8);
	border-radius: var(--ww-radius-lg);
	box-shadow: var(--ww-shadow);
}
header li {
	list-style-type: none;
}
#logo {
	display: block;
	flex: none;
	line-height: 0;
	text-decoration: none;
}
#logo img {
	display: block;
	width: 168px;
	height: auto;
}
#mainmenu {
	display: block;
	line-height: 1.25;
}
#mainmenu ul {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 2px;
	margin: 0;
	padding: 0;
}
#mainmenu li {
	margin: 0;
	padding: 0;
}
#mainmenu a {
	display: block;
	padding: 11px 15px;
	border-radius: var(--ww-pill);
	color: var(--ww-ink);
	font-size: .95rem;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}
#mainmenu a:hover {
	color: var(--ww-ink);
	background: var(--ww-subtle);
}
#mainmenu a.active {
	color: var(--ww-ink);
	background: var(--ww-amber-100);
	box-shadow: inset 0 0 0 1px rgb(255 178 0 / .35);
}
/* External link (Palkkauksenhallinta.fi) */
#mainmenu a[href^="http"]::after {
	content: "\2197";
	display: inline-block;
	margin-left: .3em;
	color: var(--ww-muted);
	font-size: .9em;
	transition: transform .2s ease, color .2s ease;
}
#mainmenu a[href^="http"]:hover::after {
	color: var(--ww-orange);
	transform: translate(2px, -2px);
}
/* "Ota yhteyttä" as the call to action */
#mainmenu a[href$="/yhteydenotto"] {
	margin-left: 6px;
	background: var(--ww-amber);
	box-shadow: 0 8px 20px -10px rgb(255 135 28 / .9);
}
#mainmenu a[href$="/yhteydenotto"]:hover {
	background: var(--ww-amber-strong);
	transform: translateY(-1px);
}
@supports selector(:has(*)) {
	#mainmenu li:has(> a[href$="/yhteydenotto"]) {
		order: 1;
	}
}
#mainmenu_toggle {
	display: none;
}
.menu_list li {
	display: block;
}

/* Content sheet
   ========================================================================== */
#content {
	position: relative;
	padding: var(--ww-pad);
	background: var(--ww-surface);
	border-radius: var(--ww-radius-xl);
	box-shadow: var(--ww-shadow);
	font-size: 1.0625rem;
	line-height: 1.7;
}
#content > :last-child {
	margin-bottom: 0;
}

#content form p {
	max-width: none;
}
#content img {
	max-width: 100%;
	height: auto;
}
#content h1:not(#front_title)::before,
#products > h2:first-child::before {
	content: "";
	display: block;
	width: 48px;
	height: 6px;
	margin-bottom: 18px;
	border-radius: var(--ww-pill);
	background: linear-gradient(90deg, var(--ww-amber), var(--ww-orange));
}
#content ul:not(.menu_list),
#content ol {
	max-width: 77ch;
	padding-left: 1.4em;
}
#content li {
	margin: .35em 0;
	padding-left: .15em;
}
#content ul:not(.menu_list) > li::marker {
	color: var(--ww-amber);
}
#content ol > li::marker {
	color: var(--ww-amber-ink);
	font-weight: 700;
}
#content li > em:first-child {
	color: var(--ww-ink);
	font-style: normal;
	font-weight: 700;
}
img#customers1, img#customers2 {
	display: block;
	max-width: 100%;
	height: auto;
	margin: 8px auto 0;
}

/* "Lue lisää" – details / summary
   ========================================================================== */
details, summary {
	display: block;
}
details {
	margin: 0 0 1em;
}
details > summary {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 8px 15px 8px 17px;
	list-style: none;
	cursor: pointer;
	color: var(--ww-amber-ink);
	background: var(--ww-amber-50);
	border: 1px solid rgb(255 178 0 / .4);
	border-radius: var(--ww-pill);
	font-size: .9rem;
	font-weight: 700;
	line-height: 1.3;
	-webkit-user-select: none;
	user-select: none;
	transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
details > summary::-webkit-details-marker {
	display: none;
}
details > summary::after {
	content: "";
	width: 7px;
	height: 7px;
	margin-top: -3px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	transition: transform .25s ease, margin .25s ease;
}
details > summary:hover {
	color: #6b3500;
	background: var(--ww-amber-100);
	border-color: rgb(255 178 0 / .7);
}
details[open] > summary,
details.open > summary {
	margin-bottom: 1.1em;
}
details[open] > summary::after,
details.open > summary::after {
	margin-top: 3px;
	transform: rotate(-135deg);
}
details[open] > :not(summary) {
	animation: ww-reveal .35s ease both;
}
@keyframes ww-reveal {
	from { opacity: 0; transform: translateY(-4px); }
	to { opacity: 1; transform: none; }
}
/* Smooth height animation where supported */
@supports (interpolate-size: allow-keywords) {
	:root {
		interpolate-size: allow-keywords;
	}
	details::details-content {
		block-size: 0;
		overflow-y: clip;
		transition: block-size .35s ease, content-visibility .35s allow-discrete;
	}
	details[open]::details-content {
		block-size: auto;
	}
}
/* Fallback for browsers without native details (jquery.details) */
.no-details details > * {
	display: none;
}
.no-details details > summary {
	display: inline-flex;
}

/* Sub navigation (Tuotteet, Palvelut)
   ========================================================================== */
#submenu {
	margin: 0 0 clamp(24px, 4vw, 40px);
	padding: 0;
}
#submenu ul {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 4px;
	margin: 0;
	padding: 5px;
	list-style: none;
	background: var(--ww-subtle);
	border: 1px solid var(--ww-line);
	border-radius: 18px;
}
#submenu li {
	margin: 0;
	padding: 0;
	line-height: 1.3;
}
#submenu li a {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 9px 16px;
	color: var(--ww-muted);
	background: transparent;
	border-radius: 13px;
	font-size: .92rem;
	font-weight: 600;
	text-decoration: none;
}
#submenu li a:hover {
	color: var(--ww-ink);
	background: rgb(255 255 255 / .7);
}
#submenu li a.active {
	color: var(--ww-ink);
	background: #fff;
	box-shadow: var(--ww-shadow-sm);
}
#submenu li a.active::before {
	content: "";
	flex: none;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--ww-amber);
	box-shadow: 0 0 0 3px rgb(255 178 0 / .22);
}
#submenu + h1 {
	margin-top: 0;
}

/* Products & services
   ========================================================================== */
#products {
	margin: 0;
}
#products > h2 {
	margin-top: 0;
	font-size: clamp(1.45rem, 1.15rem + 1.1vw, 2rem);
	letter-spacing: -.025em;
	max-width: 32ch;
}
#products article {
	display: grid;
	grid-template-columns: 148px minmax(0, 1fr);
	align-items: start;
	gap: 0 32px;
	margin: 0 0 16px;
	padding: 28px 32px 28px 28px;
	background: var(--ww-surface);
	border: 1px solid var(--ww-line);
	border-radius: var(--ww-radius-lg);
	transition: border-color .3s ease, box-shadow .3s ease;
}
#products article:last-child {
	margin-bottom: 0;
}
#products article:hover {
	border-color: rgb(255 178 0 / .5);
	box-shadow: 0 22px 44px -30px rgb(120 70 0 / .5);
}
#products article > div {
	margin: 0;
}
#products article > div:first-child,
#services > div:first-child {
	display: grid;
	place-items: center;
	width: 148px;
	height: 148px;
	margin: 0;
	padding: 4px;
	float: none;
	text-align: center;
	background: radial-gradient(120% 90% at 50% 10%, #fff 0%, var(--ww-subtle) 75%);
	border-radius: var(--ww-radius);
}
#products article > div:first-child img,
#services > div:first-child img {
	display: block;
	max-width: 100%;
	height: auto;
}
#products article h2,
#services h2 {
	margin: 2px 0 .5em;
	font-size: clamp(1.2rem, 1.1rem + .4vw, 1.4rem);
}
#products article h2 a {
	color: var(--ww-ink);
	text-decoration: none;
}
#products article h2 a:hover {
	color: var(--ww-link);
}
#products article > div:last-child > :last-child,
#products article > :last-child {
	margin-bottom: 0;
}
/* Articles that aren't icon + text cards (e.g. the Työturvallisuus intro):
   never squeeze their content into the icon column */
#products article > :not(div) {
	grid-column: 1 / -1;
}
@supports selector(:has(*)) {
	/* ...and show them as plain intro text, like the other category intros */
	#products article:not(:has(> div + div)),
	#products article:not(:has(> div + div)):hover {
		display: block;
		margin: 0 0 clamp(28px, 4vw, 40px);
		padding: 0 0 clamp(28px, 4vw, 40px);
		background: none;
		border: 0;
		border-bottom: 1px solid var(--ww-line);
		border-radius: 0;
		box-shadow: none;
	}
}
#services {
	display: flow-root;
}
#services > div:first-child {
	float: left;
}
#services > div {
	margin-left: 180px;
}
#services > div:first-child {
	margin-left: 0;
}
#tyoaika-gallery a:not(:empty) {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 17px;
	color: #fff;
	background: var(--ww-ink);
	border-radius: var(--ww-pill);
	font-size: .9rem;
	font-weight: 700;
	text-decoration: none;
}
#tyoaika-gallery a:not(:empty)::after {
	content: "\2192";
	transition: transform .2s ease;
}
#tyoaika-gallery a:not(:empty):hover {
	color: var(--ww-ink);
	background: var(--ww-amber);
}
#tyoaika-gallery a:not(:empty):hover::after {
	transform: translateX(3px);
}

/* Media, quotes
   ========================================================================== */
.embed-container {
	position: relative;
	height: 0;
	max-width: 100%;
	margin: 1.2em 0;
	padding-bottom: 56.25%;
	overflow: hidden;
	background: #111;
	border-radius: var(--ww-radius);
	box-shadow: var(--ww-shadow);
}
.embed-container + br {
	display: none;
}
.embed-container iframe, .embed-container object, .embed-container embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
blockquote {
	position: relative;
	margin: 1.5em 0;
	padding: 22px 64px 22px 26px;
	color: var(--ww-ink);
	background: var(--ww-amber-50);
	border-left: 4px solid var(--ww-amber);
	border-radius: 6px var(--ww-radius) var(--ww-radius) 6px;
	quotes: "\201C""\201D""\2018""\2019";
}
blockquote::before {
	content: open-quote;
	position: absolute;
	top: 8px;
	right: 18px;
	color: rgb(255 178 0 / .6);
	font: 700 4.5rem/1 Georgia, "Times New Roman", serif;
}
blockquote p {
	display: block;
}
blockquote p:last-child {
	margin-bottom: 0;
}

/* Front page
   ========================================================================== */
#front_bg {
	position: relative;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
	width: auto;
	height: auto;
	margin: calc(var(--ww-pad) * -1) calc(var(--ww-pad) * -1) 0;
	padding: 48px var(--ww-pad);
	background: var(--ww-hero);
	border: 0;
	border-radius: var(--ww-radius-xl) var(--ww-radius-xl) 0 0;
}
#front_title {
	margin: 1.2em 0 .6em;
}
#front_person,
#front_mobile,
#front_turva {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	width: auto;
	margin: 0;
	padding: 26px 16px 22px;
	float: none;
	text-align: center;
	background: #fff;
	border: 1px solid #fff;
	border-radius: var(--ww-radius-lg);
	box-shadow: var(--ww-shadow-warm);
	transition: transform .35s cubic-bezier(.2, .7, .2, 1), box-shadow .35s ease;
}
#front_person:hover,
#front_mobile:hover,
#front_turva:hover {
	transform: translateY(-6px);
	box-shadow: 0 1px 2px rgb(120 60 0 / .08), 0 30px 50px -22px rgb(120 60 0 / .55);
}
#front_bg a {
	text-decoration: none;
}
#front_bg img {
	position: static;
	display: block;
	width: 104px;
	height: auto;
	margin: 0;
	transition: transform .45s cubic-bezier(.2, .7, .2, 1);
}
#front_bg > div:hover img {
	transform: scale(1.06);
}
#front_person_text,
#front_mobile_text,
#front_turva_text {
	position: static;
	margin: 0;
	color: var(--ww-ink);
	font-size: clamp(.95rem, .85rem + .35vw, 1.1rem);
	font-weight: 700;
	letter-spacing: -.01em;
}
#front_bg a:hover {
	color: var(--ww-ink);
}
/* Whole card is clickable */
#front_person_text::before,
#front_mobile_text::before,
#front_turva_text::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
}
#front_person_text::after,
#front_mobile_text::after,
#front_turva_text::after {
	content: "\2192";
	display: inline-block;
	margin-left: .4em;
	color: var(--ww-orange);
	transition: transform .25s ease;
}
#front_bg > div:hover a::after {
	transform: translateX(4px);
}
/* Headline inside the hero */
@supports selector(:has(*)) {
	#content:has(> #front_bg) {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		align-content: start;
	}
	#content:has(> #front_bg)::before {
		content: "";
		grid-area: 1 / 1 / 3 / 2;
		margin: calc(var(--ww-pad) * -1) calc(var(--ww-pad) * -1) 0;
		background: var(--ww-hero);
		border-radius: var(--ww-radius-xl) var(--ww-radius-xl) 0 0;
	}
	#content:has(> #front_bg) > #front_title {
		grid-area: 1 / 1;
		position: relative;
		margin: clamp(4px, 1.5vw, 20px) 0 clamp(28px, 4vw, 44px);
		text-align: center;
		font-size: clamp(2.1rem, 1.3rem + 3vw, 3.4rem);
		letter-spacing: -.035em;
	}
	#content:has(> #front_bg) > #front_bg {
		grid-area: 2 / 1;
		width: 100%;
		max-width: 920px;
		margin: 0 auto;
		padding: 0 0 clamp(32px, 5vw, 56px);
		background: none;
		border-radius: 0;
	}
	#content:has(> #front_bg) > p {
		width: 100%;
		max-width: 760px;
		margin-inline: auto;
	}
	#content:has(> #front_bg) > #front_title + p {
		margin-top: clamp(32px, 5vw, 56px);
		color: var(--ww-ink);
		font-size: clamp(1.04em, .98em + .3vw, 1.12em);
	}
}

/* Forms
   ========================================================================== */
form {
	margin: 0;
}
label {
	display: block;
	margin: 0;
	padding: 14px 0 6px;
	color: var(--ww-ink);
	font-size: .9rem;
	font-weight: 600;
}
input[type='text'], textarea {
	display: block;
	width: 100%;
	padding: 12px 14px;
	color: var(--ww-ink);
	font: inherit;
	font-size: 1rem;
	line-height: 1.4;
	background: var(--ww-subtle);
	border: 1px solid #d9dddb;
	border-radius: var(--ww-radius-sm);
	transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}
input[type='text']:hover, textarea:hover {
	border-color: #c3c8c5;
}
input[type='text']:focus, textarea:focus {
	outline: none;
	background: #fff;
	border-color: var(--ww-amber);
	box-shadow: 0 0 0 4px rgb(255 178 0 / .22);
}
textarea {
	min-height: 150px;
	resize: vertical;
}
::placeholder {
	color: #9aa0a4;
	opacity: 1;
}
input[type='submit'] {
	-webkit-appearance: none;
	appearance: none;
	display: inline-block;
	padding: 14px 36px;
	color: var(--ww-ink);
	font: inherit;
	font-size: 1rem;
	font-weight: 700;
	background: var(--ww-amber);
	border: 0;
	border-radius: var(--ww-pill);
	cursor: pointer;
	box-shadow: 0 10px 24px -12px rgb(255 135 28 / .9);
	transition: background-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
input[type='submit']:hover {
	background: var(--ww-amber-strong);
	box-shadow: 0 14px 28px -12px rgb(255 135 28 / .95);
	transform: translateY(-1px);
}
input[type='submit']:active {
	transform: none;
}
#yhteys {
	padding: 0;
}
#yhteys_left,
#yhteys_right {
	float: left;
	width: 50%;
}
#yhteys_left {
	padding-right: 16px;
}
#yhteys_right {
	padding-left: 16px;
}
#yhteys_left > h3,
#yhteys_right > h3 {
	margin-top: .6em;
}
/* Textarea wrapper has an inline 5px side padding; align it with the inputs */
#content form > div[style*="padding"] {
	padding: 0 !important;
}
.row {
	position: relative;
	display: flex;
	gap: 0 16px;
}
.row > .clearfix {
	display: none;
}
.col, .col-33 {
	flex: 1 1 0;
	min-width: 0;
	width: auto;
	padding: 0;
	float: none;
}
.clearfix::before, .clearfix::after {
	content: " ";
	display: table;
}
.clearfix::after {
	clear: both;
}

/* Footer
   ========================================================================== */
footer {
	position: relative;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 32px clamp(24px, 4vw, 56px);
	width: auto;
	margin: 16px 0 0;
	padding: clamp(32px, 5vw, 52px) var(--ww-pad);
	overflow: hidden;
	color: #bfc4c8;
	font-size: .92rem;
	line-height: 1.7;
	background:
		radial-gradient(700px 260px at 100% 0%, rgb(255 178 0 / .13), transparent 70%),
		var(--ww-footer);
	border-radius: var(--ww-radius-xl);
}
footer::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: linear-gradient(90deg, var(--ww-amber), var(--ww-orange));
}
footer > section {
	width: auto;
	max-width: none;
	height: auto;
	margin: 0;
	padding: 0;
	float: none;
}
footer h4 {
	margin: 0 0 14px;
	color: var(--ww-amber);
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
}
footer a {
	color: #ffc23d;
	text-decoration: none;
}
footer a:hover {
	color: #ffd77a;
	text-decoration: underline;
	text-decoration-color: currentColor;
}
footer h4 a {
	color: inherit;
}
footer p {
	margin: 0 0 1em;
}
footer p:last-child {
	margin-bottom: 0;
}
footer .contact-information {
	margin: 0;
	float: none;
}
.contact-information span {
	display: block;
}
footer .contact-information [itemprop="address"] {
	margin-bottom: 1em;
}
footer .contact-information span[itemprop="name"] {
	color: #fff;
	font-weight: 600;
}
footer section article {
	margin: 0;
}
footer section article h5 {
	margin: 0 0 8px;
	color: #fff;
	font-size: .98rem;
	font-weight: 600;
	line-height: 1.45;
	letter-spacing: -.005em;
}
footer article a {
	display: inline-block;
	margin-top: 8px;
	font-weight: 600;
}
footer article a::after {
	content: "\2192";
	display: inline-block;
	margin-left: .35em;
	transition: transform .2s ease;
}
footer article a:hover::after {
	transform: translateX(3px);
}

/* Responsive
   ========================================================================== */
@media only screen and (max-width: 62em) {
	header {
		gap: 10px 16px;
		padding-left: 16px;
	}
	#mainmenu a {
		padding: 10px 12px;
		font-size: .92rem;
	}
}
@media only screen and (max-width: 56em) {
	header {
		position: relative;
		top: auto;
		justify-content: center;
		padding: 14px;
	}
	#mainmenu {
		flex-basis: 100%;
	}
	#mainmenu ul {
		justify-content: center;
	}
	footer {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	footer > section:last-child {
		grid-column: 1 / -1;
	}
}
@media only screen and (min-width: 40.0625em) {
	/* Undo jQuery's inline display:none if the mobile menu was closed before resizing */
	#mainmenu {
		display: block !important;
	}
}
@media only screen and (max-width: 40em) {
	body {
		padding: 8px 8px 10px;
	}
	header {
		position: sticky;
		top: 8px;
		justify-content: space-between;
		gap: 0;
		margin-bottom: 8px;
		padding: 8px 8px 8px 14px;
		border-radius: 18px;
	}
	#logo img {
		width: 140px;
	}
	#mainmenu_toggle {
		position: relative;
		display: block;
		flex: none;
		width: 44px;
		height: 44px;
		background: var(--ww-subtle);
		border-radius: 12px;
		cursor: pointer;
		-webkit-tap-highlight-color: transparent;
		transition: background-color .2s ease;
	}
	#mainmenu_toggle::before,
	#mainmenu_toggle::after {
		content: "";
		position: absolute;
		left: 13px;
		right: 13px;
		height: 2px;
		background: var(--ww-ink);
		border-radius: 2px;
		transition: transform .3s ease, box-shadow .3s ease;
	}
	#mainmenu_toggle::before {
		top: 15px;
		box-shadow: 0 6px 0 var(--ww-ink);
	}
	#mainmenu_toggle::after {
		top: 27px;
	}
	#mainmenu_toggle.active {
		background: var(--ww-amber-100);
	}
	#mainmenu_toggle.active::before {
		box-shadow: 0 0 0 transparent;
		transform: translateY(6px) rotate(45deg);
	}
	#mainmenu_toggle.active::after {
		transform: translateY(-6px) rotate(-45deg);
	}
	#mainmenu {
		display: none;
		flex-basis: 100%;
	}
	#mainmenu ul {
		flex-direction: column;
		align-items: stretch;
		gap: 2px;
		margin-top: 8px;
		padding: 8px 0 2px;
		border-top: 1px solid var(--ww-line);
	}
	#mainmenu a {
		padding: 12px 14px;
		border-radius: 12px;
		font-size: 1rem;
	}
	#mainmenu a[href$="/yhteydenotto"] {
		margin: 6px 0 0;
		text-align: center;
	}
	#content {
		border-radius: var(--ww-radius-lg);
		font-size: 1rem;
	}
	#submenu ul {
		display: flex;
	}
	#submenu li {
		flex: 1 1 auto;
	}
	#products article {
		grid-template-columns: minmax(0, 1fr);
		gap: 16px;
		padding: 20px;
	}
	#products article > div:first-child,
	#services > div:first-child {
		width: 116px;
		height: 96px;
		padding: 6px;
	}
	#services > div:first-child {
		float: none;
		margin-bottom: 16px;
	}
	#services > div {
		margin-left: 0;
	}
	#front_bg {
		grid-template-columns: minmax(0, 1fr);
		gap: 10px;
	}
	#front_person,
	#front_mobile,
	#front_turva {
		flex-direction: row;
		gap: 14px;
		padding: 10px 20px 10px 10px;
		text-align: left;
		border-radius: 18px;
	}
	#front_person:hover,
	#front_mobile:hover,
	#front_turva:hover {
		transform: translateY(-2px);
	}
	#front_bg img {
		width: 60px;
	}
	#front_person_text,
	#front_mobile_text,
	#front_turva_text {
		display: flex;
		flex: 1;
		align-items: center;
		justify-content: space-between;
		font-size: 1.05rem;
	}
	blockquote {
		padding: 18px 20px 18px 20px;
	}
	blockquote::before {
		content: none;
	}
	.row {
		flex-direction: column;
	}
	#yhteys_left,
	#yhteys_right {
		float: none;
		width: auto;
		padding: 0;
	}
	footer {
		grid-template-columns: minmax(0, 1fr);
		border-radius: var(--ww-radius-lg);
	}
}
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .01ms !important;
		transition-duration: .01ms !important;
	}
}