/**
 * Lämpöliiga — teeman tyylit.
 *
 * theme.json hoitaa värit, fontit, välit ja lohkojen perustyylit. Tässä
 * tiedostossa on se, mitä lohkoasetuksilla ei saa: teeman omat komponentit,
 * lohkotyylit ja navigaatio.
 *
 * Sisällys:
 *   1. Perusta ja apuluokat
 *   2. Ylätunniste ja navigaatio
 *   3. Kelluva yhteydenottopainike
 *   4. Herot
 *   5. Kortit ja lohkotyylit
 *   6. Etukortit, vaihestepperi ja tilanjakaja
 *   7. Sitaattikaruselli
 *   8. Urakat ja henkilöt
 *   9. Alatunniste
 *  10. Lomake (Gravity Forms)
 */

/* ── 1. Perusta ja apuluokat ─────────────────────────────────────────────── */

html {
	scroll-behavior: smooth;
}

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

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

body {
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

/*
 * Tarkennusrengas on teeman oma, ei selaimen sininen. Ilman tätä
 * näppäimistökäyttäjä ei näe missä on — ja tämä on sivuston ainoa
 * saavutettavuusvaatimus, jota lohkoasetuksilla ei voi hoitaa.
 */
:focus-visible {
	outline: 2px solid var( --wp--preset--color--korostus-tumma );
	outline-offset: 2px;
	border-radius: 4px;
}

::selection {
	background: var( --wp--preset--color--korostus-vaalea-2 );
}

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

.screen-reader-text:focus {
	position: fixed !important;
	top: 12px;
	left: 12px;
	z-index: 200;
	width: auto;
	height: auto;
	padding: 12px 20px;
	clip-path: none;
	background: var( --wp--preset--color--kortti );
	border-radius: var( --wp--custom--kaari--pilleri );
	box-shadow: var( --wp--preset--shadow--korkea );
	font-weight: 700;
}

/* Ylläpitäjälle näkyvä huomautus tyhjästä lohkosta. */
.ll-huomio {
	padding: 14px 18px;
	border: 1px dashed var( --wp--preset--color--viiva );
	border-radius: var( --wp--custom--kaari--keski );
	color: var( --wp--preset--color--teksti-haalea );
	font-size: var( --wp--preset--font-size--pieni );
}

/* Pilleripainike — toistuu yhteystiedoissa ja kelluvassa valikossa. */
.ll-pilleri {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 16px;
	border-radius: var( --wp--custom--kaari--pilleri );
	background: var( --wp--preset--color--korostus-vaalea );
	color: var( --wp--preset--color--korostus-syva );
	font-size: var( --wp--preset--font-size--pieni );
	font-weight: 700;
	text-decoration: none;
	transition: background-color 0.15s ease;
}

.ll-pilleri:hover,
.ll-pilleri:focus-visible {
	background: var( --wp--preset--color--korostus-vaalea-2 );
	color: var( --wp--preset--color--korostus-syva );
}

.ll-pilleri--salvia {
	background: var( --wp--preset--color--salvia-vaalea );
	color: var( --wp--preset--color--salvia-syva );
}

.ll-pilleri--salvia:hover,
.ll-pilleri--salvia:focus-visible {
	background: var( --wp--preset--color--salvia-vaalea-2 );
	color: var( --wp--preset--color--salvia-syva );
}

.ll-pilleri svg {
	flex: none;
}

/* ── 2. Ylätunniste ja navigaatio ────────────────────────────────────────── */

.ll-ylatunniste {
	position: sticky;
	top: 0;
	z-index: 50;
	background: var( --wp--preset--color--pohja );
	border-bottom: 1px solid var( --wp--preset--color--viiva );
}

.ll-ylatunniste__brandi {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	text-decoration: none;
	color: var( --wp--preset--color--teksti );
	font-weight: 800;
	font-size: 14.5px;
	letter-spacing: 0.16em;
}

.ll-ylatunniste__brandi img {
	height: 40px;
	width: 40px;
	object-fit: contain;
	mix-blend-mode: multiply;
}

/* Navigaatio: WordPressin navigaatiolohko, teeman muotoilulla. */
.ll-navi .wp-block-navigation-item__content {
	padding: 10px 14px;
	border-radius: var( --wp--custom--kaari--pilleri );
	font-weight: 700;
	font-size: 14.5px;
	text-decoration: none;
	color: var( --wp--preset--color--teksti );
	transition: background-color 0.15s ease;
}

.ll-navi .wp-block-navigation-item__content:hover,
.ll-navi .wp-block-navigation-item__content:focus-visible {
	background: var( --wp--preset--color--korostus-vaalea );
	color: var( --wp--preset--color--teksti );
}

/* Nykyinen sivu erottuu — muuten navigaatiosta ei näe missä ollaan. */
.ll-navi .current-menu-item > .wp-block-navigation-item__content,
.ll-navi .current-menu-ancestor > .wp-block-navigation-item__content {
	background: var( --wp--preset--color--korostus-vaalea );
	color: var( --wp--preset--color--korostus-syva );
}

.ll-navi .wp-block-navigation__submenu-container {
	background: var( --wp--preset--color--kortti );
	border: 0;
	border-radius: var( --wp--custom--kaari--iso );
	box-shadow: var( --wp--preset--shadow--korkea );
	padding: 8px;
	min-width: 260px;
}

.ll-navi .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	border-radius: var( --wp--custom--kaari--pieni );
	font-size: 14px;
	font-weight: 600;
	padding: 11px 14px;
}

/* Mobiilivalikon avaus. Väri on tarkoituksella tumma: hampurilainen
   terrakotalla ei yltäisi 3:1-kontrastiin kermanväristä pohjaa vasten. */
.ll-navi .wp-block-navigation__responsive-container-open,
.ll-navi .wp-block-navigation__responsive-container-close {
	color: var( --wp--preset--color--teksti );
}

.ll-navi .wp-block-navigation__responsive-container.is-menu-open {
	background: var( --wp--preset--color--pohja );
	padding: 24px var( --wp--custom--sisennys--reuna ) 48px;
}

.ll-navi .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-size: 18px;
	padding: 14px 4px;
	border-bottom: 1px solid var( --wp--preset--color--viiva );
	border-radius: 0;
	width: 100%;
}

/* Otsikon "Pyydä tarjous" -painike. */
.ll-ylatunniste .wp-block-button__link {
	box-shadow: var( --wp--preset--shadow--kevyt );
	white-space: nowrap;
}

/*
 * Hampurilaisvalikko myös tabletissa.
 *
 * WordPress vaihtaa navigaatiolohkon ylitysvalikkoon vasta 600 pikselissä.
 * Tässä valikossa on kuusi kohtaa ja kaksi pudotusvalikkoa, joten 768 pikselin
 * tabletilla vaakavalikko on 803 px leveä ja työntää koko sivun
 * vaakavieritykseen. Nostetaan raja 960 pikseliin kumoamalla ytimen
 * min-width: 600px -säännöt.
 */
@media ( max-width: 959px ) {
	.ll-navi .wp-block-navigation__responsive-container-open:not( .always-shown ) {
		display: flex;
	}

	.ll-navi .wp-block-navigation__responsive-container:not( .hidden-by-default ):not( .is-menu-open ) {
		display: none;
	}
}

/* Välileveyksillä valikko tiivistyy, jotta se mahtuu riville. */
@media ( min-width: 960px ) and ( max-width: 1199px ) {
	.ll-navi .wp-block-navigation-item__content {
		padding: 9px 10px;
		font-size: 13.5px;
	}
}

/*
 * Kapealla näytöllä ylätunnisteessa on logo, nimi, hampurilainen ja
 * tarjousnappi. Ilman kavennusta nimi katkeaa kahdelle riville ja rivi
 * kasvaa kaksinkertaiseksi.
 */
@media ( max-width: 781px ) {
	.ll-ylatunniste .wp-block-site-title {
		white-space: nowrap;
		font-size: 11.5px !important;
		letter-spacing: 0.12em !important;
	}

	.ll-ylatunniste .wp-block-site-logo img {
		width: 32px;
		height: 32px;
	}

	.ll-ylatunniste .wp-block-button__link {
		font-size: 12px;
		padding: 10px 14px;
	}
}

/* Kaikkein kapeimmilla näytöillä nimi väistyy — logo riittää tunnisteeksi. */
@media ( max-width: 340px ) {
	.ll-ylatunniste .wp-block-site-title {
		display: none;
	}
}

/* ── 3. Kelluva yhteydenottopainike ──────────────────────────────────────── */

.ll-kelluva {
	position: fixed;
	right: clamp( 14px, 3vw, 24px );
	bottom: clamp( 14px, 3vw, 26px );
	z-index: 60;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 10px;
}

.ll-kelluva__valikko {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 250px;
	padding: 8px;
	background: var( --wp--preset--color--kortti );
	border-radius: var( --wp--custom--kaari--iso );
	box-shadow: var( --wp--preset--shadow--korkea );
}

.ll-kelluva__valikko[hidden] {
	display: none;
}

.ll-kelluva__kohde {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 14px;
	border-radius: var( --wp--custom--kaari--keski );
	text-decoration: none;
	color: var( --wp--preset--color--teksti );
	transition: background-color 0.15s ease;
}

.ll-kelluva__kohde:hover,
.ll-kelluva__kohde:focus-visible {
	background: var( --wp--preset--color--korostus-vaalea );
	color: var( --wp--preset--color--teksti );
}

.ll-kelluva__ikoni {
	display: grid;
	place-items: center;
	flex: none;
	width: 36px;
	height: 36px;
	border-radius: var( --wp--custom--kaari--pilleri );
	background: var( --wp--preset--color--korostus-vaalea );
	color: var( --wp--preset--color--korostus-syva );
}

.ll-kelluva__ikoni--salvia {
	background: var( --wp--preset--color--salvia-vaalea );
	color: var( --wp--preset--color--salvia-syva );
}

.ll-kelluva__ikoni--tayte {
	background: var( --wp--preset--color--korostus-tumma );
	color: var( --wp--preset--color--valkoinen );
}

.ll-kelluva__otsikko {
	font-weight: 700;
	font-size: 14px;
}

.ll-kelluva__selite {
	font-size: 12px;
	color: var( --wp--preset--color--teksti-haalea );
}

.ll-kelluva__nappi {
	display: grid;
	place-items: center;
	width: 54px;
	height: 54px;
	border: 0;
	border-radius: var( --wp--custom--kaari--pilleri );
	background: var( --wp--preset--color--korostus-tumma );
	color: var( --wp--preset--color--valkoinen );
	box-shadow: var( --wp--preset--shadow--korkea );
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.ll-kelluva__nappi:hover {
	background: var( --wp--preset--color--korostus-syva );
}

.ll-kelluva__nappi .ll-kelluva__sulje {
	display: none;
}

.ll-kelluva__nappi[aria-expanded='true'] .ll-kelluva__sulje {
	display: block;
}

.ll-kelluva__nappi[aria-expanded='true'] .ll-kelluva__avaa {
	display: none;
}

/* ── 4. Herot ────────────────────────────────────────────────────────────── */

/*
 * Hero on core/cover, jonka peitteeksi on valittu hero-terrakotta-liukuväri
 * (asetetaan kuviossa, ei täällä — niin sen voi vaihtaa editorista).
 */
.ll-hero {
	border-radius: var( --wp--custom--kaari--iso );
	overflow: hidden;
}

.ll-hero,
.ll-hero :where( h1, h2, p, li ) {
	color: var( --wp--preset--color--valkoinen );
}

.ll-hero :where( h1, h2 ) {
	text-shadow: 0 1px 10px rgba( 90, 40, 5, 0.35 );
	/*
	 * Pitkat yhdyssanat ("paukkupakkasillakin") ovat kapealla naytolla
	 * leveampia kuin heron sisapalsta. Cover-lohko on flex-container ja
	 * sisaltolaatikko flex-item, jonka min-width: auto estaa kutistumisen —
	 * ilman tavutusta rivi tyontyy yli ja overflow: hidden leikkaa sen.
	 */
	overflow-wrap: break-word;
	/* Chromiumissa ei ole suomen tavutussaantoja, joten hyphens: auto ei tee
	   mitaan. Pehmeat tavuviivat otsikkotekstissa katkaisevat sanan oikein;
	   break-word on viimeinen varakeino. */
	hyphens: manual;
}

.ll-hero .wp-block-cover__inner-container {
	min-width: 0;
}

/* Hero-tagi: ääriviivalaatta otsikon yllä. */
.ll-tagi {
	display: inline-flex;
	align-items: center;
	padding: 5px 13px;
	border-radius: var( --wp--custom--kaari--pilleri );
	background: var( --wp--preset--color--pohja );
	color: var( --wp--preset--color--korostus-syva );
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.04em;
}

.ll-tagi-aariviiva {
	background: transparent;
	border: 1.5px solid rgba( 255, 255, 255, 0.75 );
	color: var( --wp--preset--color--valkoinen );
}

/* Heron ikoninostot: valkoinen ruksi renkaassa + teksti. */
.ll-nostot {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.ll-nostot li {
	display: flex;
	align-items: center;
	gap: 9px;
	font-size: 13.5px;
	font-weight: 600;
}

/*
 * Nostorivin merkki on designissa aihekohtainen ikoni läpikuultavassa
 * ympyrässä, ei sama ruksi joka rivillä. Ikoni tulee markkauksesta, joten
 * ::before-ruksi on poistettu.
 */
.ll-nostot__ikoni {
	display: grid;
	place-items: center;
	flex: none;
	width: 22px;
	height: 22px;
	border-radius: var( --wp--custom--kaari--pilleri );
	background: rgba( 255, 255, 255, 0.22 );
	color: var( --wp--preset--color--valkoinen );
}

.ll-nostot__ikoni svg {
	width: 13px;
	height: 13px;
}

/* Toissijaisessa heronapissa on designissa kalenteri-ikoni tekstin edessä. */
.ll-nappi-kalenteri .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.ll-nappi-kalenteri .wp-block-button__link::before {
	content: '';
	flex: none;
	width: 15px;
	height: 15px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2356633f' stroke-width='2.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 2v4'/%3E%3Cpath d='M16 2v4'/%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M3 10h18'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Murupolku tuotesivun yläreunassa. */
.ll-murupolku {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: var( --wp--preset--font-size--pieni );
	font-weight: 600;
	color: var( --wp--preset--color--korostus-syva );
	text-decoration: none;
}

.ll-murupolku:hover {
	text-decoration: underline;
}

/* ── 5. Kortit ja lohkotyylit ────────────────────────────────────────────── */

/*
 * Otsikko, joka on samalla linkki, ei ala viivaa. Leipätekstin linkit
 * alleviivataan (theme.json), mutta otsikossa viiva rikkoo Caprasimon
 * rivin eikä sitä tarvita — otsikko erottuu muutenkin.
 */
:where( h1, h2, h3, h4, h5, h6 ) a {
	text-decoration: none;
}

:where( h1, h2, h3, h4, h5, h6 ) a:hover,
:where( h1, h2, h3, h4, h5, h6 ) a:focus-visible {
	text-decoration: underline;
	text-underline-offset: 4px;
}

.is-style-kortti,
.is-style-kortti-korostus,
.is-style-kortti-salvia {
	border-radius: var( --wp--custom--kaari--kortti );
	padding: clamp( 18px, 3vw, 28px );
}

.is-style-kortti {
	position: relative;
	overflow: hidden;
	background: var( --wp--preset--color--kortti );
	box-shadow: var( --wp--preset--shadow--kevyt );
}

/* Sama persikkahaipyma kuin etukorteissa — designissa se on kaikissa
   vaaleissa korteissa, ei vain etukorteissa. */
.is-style-kortti::after {
	content: '';
	position: absolute;
	inset: auto 0 0 0;
	height: 46px;
	background: var( --wp--preset--gradient--haipyma-persikka );
	pointer-events: none;
}

.is-style-kortti-korostus {
	background: var( --wp--preset--color--korostus-vaalea );
}

.is-style-kortti-salvia {
	background: var( --wp--preset--color--salvia-vaalea );
}

/* Valintalista: vihreä ruksi luodin tilalla. */
.wp-block-list.is-style-valintalista {
	list-style: none;
	padding-left: 0;
	display: grid;
	gap: 10px;
}

.wp-block-list.is-style-valintalista li {
	display: flex;
	align-items: flex-start;
	gap: 11px;
	padding: 11px 16px;
	border-radius: var( --wp--custom--kaari--keski );
	background: var( --wp--preset--color--salvia-vaalea );
}

.wp-block-list.is-style-valintalista li::before {
	content: '';
	flex: none;
	width: 20px;
	height: 20px;
	margin-top: 1px;
	border-radius: var( --wp--custom--kaari--pilleri );
	background: var( --wp--preset--color--valkoinen ) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2356633f' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 12px no-repeat;
}

/* Ääriviivapainike — designin toissijainen nappi. */
.wp-block-button.is-style-aariviiva .wp-block-button__link {
	background: transparent;
	border: 1.5px solid var( --wp--preset--color--korostus-tumma );
	color: var( --wp--preset--color--korostus-syva );
}

.wp-block-button.is-style-aariviiva .wp-block-button__link:hover,
.wp-block-button.is-style-aariviiva .wp-block-button__link:focus-visible {
	background: var( --wp--preset--color--korostus-vaalea );
	color: var( --wp--preset--color--korostus-syva );
}

/* Pehmennetty kuva: designjärjestelmän .washed. */
.wp-block-image.is-style-pehmennetty img {
	filter: saturate( 0.72 ) contrast( 0.92 ) brightness( 1.05 );
}

/*
 * Palvelukortti: teksti vasemmalla, kuva oikealla kaarirajattuna.
 *
 * Kolme designin yksityiskohtaa, jotka tekevät kortista sen näköisen kuin
 * prototyypissä: kuvan 90 px:n kaari vasemmassa reunassa, korttiin alhaalta
 * nouseva terrakottahäivytys, ja nosto hiiren alla.
 */
.ll-palvelukortti {
	position: relative;
	display: grid;
	grid-template-columns: 1fr;
	gap: 0;
	overflow: hidden;
	border-radius: 24px;
	background: var( --wp--preset--color--kortti );
	box-shadow: var( --wp--preset--shadow--kevyt );
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.ll-palvelukortti:hover,
.ll-palvelukortti:focus-within {
	transform: translateY( -4px );
	box-shadow: var( --wp--preset--shadow--korkea );
}

@media ( prefers-reduced-motion: reduce ) {
	.ll-palvelukortti:hover,
	.ll-palvelukortti:focus-within {
		transform: none;
	}
}

/* Häivytys nousee kortin alareunasta puoliväliin — myös kuvan päälle. */
.ll-palvelukortti::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 50%;
	background: linear-gradient( to top, rgba( 215, 110, 38, 0.18 ), transparent );
	pointer-events: none;
}

/* Ensimmäinen kortti on nosto: voimakkaampi häivytys ja isompi otsikko. */
.ll-palvelukortti-nosto::after {
	background: linear-gradient( to top, rgba( 215, 110, 38, 0.22 ), transparent );
}

@media ( min-width: 641px ) {
	.ll-palvelukortti {
		grid-template-columns: 1fr 1fr;
		align-items: stretch;
	}
}

/*
 * Ruudukon lapsi ei saa kasvaa sisältönsä mukaan: ilman min-width: 0
 * "Ilmavesilämpöpumput" leventää tekstipalstan yli kortin reunan.
 */
.ll-palvelukortti > * {
	min-width: 0;
}

.ll-palvelukortti__teksti {
	position: relative;
	z-index: 1;
	padding: clamp( 18px, 2.4vw, 26px );
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.ll-palvelukortti__kuva {
	overflow: hidden;
}

.ll-palvelukortti__kuva img {
	width: 100%;
	height: 100%;
	min-height: 170px;
	object-fit: cover;
	border-radius: 90px 0 0 90px;
}

/*
 * Mobiiliasettelu. Designissa kapealla näytöllä vain ensimmäinen kortti
 * säilyttää kuvan ja koko leveyden; loput neljä tiivistyvät kuvattomiksi
 * korteiksi kahteen palstaan. Viisi täysleveää kuvakorttia peräkkäin
 * venyttäisi osion kohtuuttoman pitkäksi.
 */
@media ( max-width: 781px ) {
	/* Osion tunnus: ikoni siirtyy oikeaan reunaan. */
	.ll-osiotunnus {
		flex-direction: row-reverse;
		justify-content: space-between;
		gap: 16px;
	}

	.ll-osiotunnus--tiivis {
		flex-direction: row;
		justify-content: flex-start;
	}

	.ll-palveluruudukko {
		grid-template-columns: 1fr 1fr !important;
		gap: var( --wp--preset--spacing--30 );
	}

	/*
	 * Ilman min-width: 0 ruudukon palsta ei voi kaventua sisältöään
	 * pienemmäksi, ja "Ilmavesilämpöpumput" työntäisi kortit yli näytön
	 * oikean reunan.
	 */
	.ll-palveluruudukko > * {
		min-width: 0;
	}

	/*
	 * Tiiviissä korteissa otsikko on leipäfontilla eikä Caprasimolla, kuten
	 * designissa: Figtree on kapeampi, joten "Ilmavesilämpöpumput" mahtuu
	 * yhdelle riville 173 px:n kortissa. !important on pakko, koska
	 * WordPress asettaa has-*-font-size-luokat itse !important-merkinnällä.
	 */
	.ll-palvelukortti:not( .ll-palvelukortti-nosto ) :where( h2, h3, h4 ) {
		font-family: var( --wp--preset--font-family--leipa );
		font-size: 13px !important;
		font-weight: 700;
		letter-spacing: 0;
		line-height: 1.25;
		overflow-wrap: break-word;
		hyphens: auto;
	}

	.ll-palvelukortti:not( .ll-palvelukortti-nosto ) .ll-palvelukortti__teksti p {
		overflow-wrap: break-word;
		hyphens: auto;
	}

	.ll-palvelukortti:not( .ll-palvelukortti-nosto ) .ll-palvelukortti__teksti {
		padding: 16px;
		gap: 6px;
	}

	/* Nostokortti ja elinkaarikortti vievät molemmat palstat. */
	.ll-palveluruudukko > .ll-palvelukortti-nosto,
	.ll-palveluruudukko > .ll-elinkaarikortti {
		grid-column: 1 / -1;
	}

	/* Nostokortissa teksti ja kuva pysyvät rinnakkain, kaari säilyy. */
	.ll-palvelukortti-nosto {
		grid-template-columns: 1fr minmax( 130px, 42% );
	}

	.ll-palvelukortti-nosto .ll-palvelukortti__kuva img {
		border-radius: 90px 0 0 90px;
		min-height: 100%;
	}

	/* Muissa korteissa kuva jää pois — tilaa ei ole kahdelle palstalle. */
	.ll-palvelukortti:not( .ll-palvelukortti-nosto ) .ll-palvelukortti__kuva {
		display: none;
	}

	.ll-palvelukortti:not( .ll-palvelukortti-nosto ) {
		grid-template-columns: 1fr;
	}

	/* "Tutustu" asettuu kortin alaoikealle kuten designissa. */
	.ll-palvelukortti:not( .ll-palvelukortti-nosto ) .ll-palvelukortti__teksti {
		height: 100%;
	}

	.ll-palvelukortti:not( .ll-palvelukortti-nosto ) .ll-palvelukortti__teksti > p:last-child {
		margin-top: auto;
		text-align: right;
	}
}

/*
 * Kortin otsikko on linkki, mutta se luetaan otsikkona — siksi se on tumma
 * kuten designissa, ei linkkiväri. Koko kortti johtaa samaan osoitteeseen.
 */
.ll-palvelukortti__teksti :where( h2, h3, h4 ) a {
	color: var( --wp--preset--color--teksti );
}

.ll-palvelukortti__ikoni {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: var( --wp--custom--kaari--pilleri );
	background: var( --wp--preset--color--korostus-vaalea );
	color: var( --wp--preset--color--korostus-syva );
}

/* Tiivis osiotunnus kortin sisällä — ei erillistä ingressiä. */
.ll-osiotunnus--tiivis {
	align-items: center;
	gap: 12px;
	margin-bottom: 6px;
}

.ll-osiotunnus--tiivis .ll-osiotunnus__merkki {
	width: 32px;
	height: 32px;
	margin-top: 0;
	background: var( --wp--preset--color--valkoinen );
}

/*
 * Elinkaarikortin alakortit ovat kokonaan linkkejä: koko kortti on
 * klikattava, ei pelkkä "Tutustu" -rivi. Nouseva kortti, jonka vain osa on
 * klikattava, lupaisi enemmän kuin antaa.
 */
.ll-elinkaari {
	display: grid;
	gap: var( --wp--preset--spacing--30 );
	grid-template-columns: 1fr;
	margin-top: var( --wp--preset--spacing--40 );
}

/* Kolme pientä korttia mahtuu riville myös kapealla näytöllä. */
.ll-elinkaari {
	grid-template-columns: repeat( 3, 1fr );
}

.ll-elinkaari > * {
	min-width: 0;
}

@media ( max-width: 781px ) {
	.ll-elinkaari {
		gap: 8px;
	}

	.ll-elinkaari__kortti {
		padding: 12px 10px;
	}

	.ll-elinkaari__otsikko {
		font-size: var( --wp--preset--font-size--pieni );
		overflow-wrap: break-word;
		hyphens: auto;
	}
}

.ll-elinkaari__kortti {
	position: relative;
	overflow: hidden;
	display: block;
	padding: 16px;
	border-radius: var( --wp--custom--kaari--keski );
	background: var( --wp--preset--color--kortti );
	color: var( --wp--preset--color--teksti );
	text-decoration: none;
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.ll-elinkaari__kortti:hover,
.ll-elinkaari__kortti:focus-visible {
	transform: translateY( -4px );
	box-shadow: var( --wp--preset--shadow--keski );
	color: var( --wp--preset--color--teksti );
}

@media ( prefers-reduced-motion: reduce ) {
	.ll-elinkaari__kortti:hover,
	.ll-elinkaari__kortti:focus-visible {
		transform: none;
	}
}

/* Sama pohjahäivytys kuin isoissa palvelukorteissa. */
.ll-elinkaari__kortti::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 55%;
	background: linear-gradient( to top, rgba( 215, 110, 38, 0.14 ), transparent );
	pointer-events: none;
}

.ll-elinkaari__otsikko {
	display: block;
	font-weight: 700;
	font-size: var( --wp--preset--font-size--perus );
	margin-bottom: 2px;
}

.ll-elinkaari__selite {
	display: block;
	font-size: var( --wp--preset--font-size--pikku );
	color: var( --wp--preset--color--teksti-haalea );
}

.ll-elinkaari__linkki {
	display: block;
	position: relative;
	z-index: 1;
	margin-top: 8px;
	font-size: var( --wp--preset--font-size--pieni );
	font-weight: 600;
	color: var( --wp--preset--color--korostus-syva );
}

.ll-elinkaari__kortti:hover .ll-elinkaari__linkki {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Elinkaarikortin alakorttien ikoni. */
.ll-elinkaari__ikoni {
	display: grid;
	place-items: center;
	width: 28px;
	height: 28px;
	margin-bottom: 8px;
	border-radius: var( --wp--custom--kaari--pilleri );
	background: var( --wp--preset--color--salvia-vaalea );
	color: var( --wp--preset--color--salvia-syva );
}

/* ── 6. Etukortit, vaihestepperi ja tilanjakaja ──────────────────────────── */

.ll-edut {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 14px;
	grid-template-columns: 1fr;
}

@media ( min-width: 641px ) {
	.ll-edut {
		grid-template-columns: repeat( 2, 1fr );
	}
}

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

.ll-edut__kortti {
	position: relative;
	overflow: hidden;
	padding: 18px 18px 30px;
	border-radius: var( --wp--custom--kaari--kortti );
	background: var( --wp--preset--color--kortti );
	box-shadow: var( --wp--preset--shadow--kevyt );
}

/* Haalea persikkahäivytys alareunassa — designin tunnusmerkki. */
.ll-edut__kortti::after {
	content: '';
	position: absolute;
	inset: auto 0 0 0;
	height: 46px;
	background: var( --wp--preset--gradient--haipyma-persikka );
	pointer-events: none;
}

.ll-edut__ylarivi {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 10px;
}

.ll-edut__ikoni {
	display: grid;
	place-items: center;
	flex: none;
	width: 34px;
	height: 34px;
	border-radius: var( --wp--custom--kaari--pilleri );
	background: var( --wp--preset--color--korostus-vaalea );
	color: var( --wp--preset--color--korostus-syva );
}

/* Lattialammityksen korteissa lukuarvoa ei ole; tyhja span jattaisi flex-valin. */
.ll-edut__luku:empty {
	display: none;
}

.ll-edut__luku {
	font-family: var( --wp--preset--font-family--otsikko );
	font-size: var( --wp--preset--font-size--iso );
	color: var( --wp--preset--color--korostus-tumma );
	line-height: 1.15;
}

/*
 * Korttien otsikot ovat designissa leipäfontilla lihavana, eivät
 * Caprasimolla. Caprasimossa on vain yksi leikkaus (400), joten
 * font-weight: 700 tuottaisi selaimen keinotekoisen lihavoinnin — juuri se
 * teki otsikoista väärän näköisiä.
 */
.ll-edut__otsikko,
.ll-kortti-otsikko {
	font-family: var( --wp--preset--font-family--leipa );
	font-weight: 700;
	letter-spacing: 0;
	line-height: 1.3;
}

.ll-edut__otsikko {
	font-size: var( --wp--preset--font-size--perus );
	margin: 0 0 4px;
}

.ll-kortti-otsikko {
	font-size: var( --wp--preset--font-size--perus ) !important;
}

/* Listakorteissa otsikko on Caprasimoa ja salvian syvää — kuten designissa. */
.ll-kortti-otsikko-display {
	color: var( --wp--preset--color--salvia-syva );
}

.ll-edut__teksti {
	position: relative;
	z-index: 1;
	margin: 0;
	font-size: var( --wp--preset--font-size--pieni );
	color: var( --wp--preset--color--teksti-haalea );
}

/* Vaihestepperi: salvianväriset numeropallot ja niitä yhdistävä viiva. */
.ll-vaiheet {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0;
	counter-reset: ll-vaihe;
}

.ll-vaiheet__vaihe {
	position: relative;
	display: grid;
	grid-template-columns: 40px 1fr;
	gap: 16px;
	padding-bottom: 22px;
}

.ll-vaiheet__vaihe:last-child {
	padding-bottom: 0;
}

.ll-vaiheet__numero {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: var( --wp--custom--kaari--pilleri );
	background: var( --wp--preset--color--salvia );
	color: var( --wp--preset--color--valkoinen );
	font-family: var( --wp--preset--font-family--otsikko );
	font-size: var( --wp--preset--font-size--perus );
	line-height: 1;
}

/* Yhdysviiva pallojen välillä. Viimeisestä se jätetään pois. */
.ll-vaiheet__vaihe:not( :last-child )::before {
	content: '';
	position: absolute;
	left: 19px;
	top: 44px;
	bottom: 4px;
	width: 2px;
	background: var( --wp--preset--color--teksti );
	opacity: 0.22;
}

.ll-vaiheet__teksti {
	margin: 0;
	padding-top: 9px;
	font-size: var( --wp--preset--font-size--perus );
}

/* Tilanjakaja: liekki persikkaympyrässä, viivat häipyvät molempiin suuntiin. */
.ll-jakaja {
	display: flex;
	align-items: center;
	gap: 18px;
	margin-block: var( --wp--preset--spacing--70 );
}

/*
 * Viivat ovat 2 px ja päättyvät 300-saveleen. Vaaleampi 200-sävy katoaa
 * kermaiselle taustalle kokonaan — etenkin salvian puoleinen viiva.
 */
.ll-jakaja::before,
.ll-jakaja::after {
	content: '';
	flex: 1;
	height: 2px;
	border-radius: var( --wp--custom--kaari--pilleri );
}

.ll-jakaja::before {
	background: linear-gradient( to right, transparent, var( --wp--preset--color--korostus-vaalea-3 ) );
}

.ll-jakaja::after {
	background: linear-gradient( to left, transparent, var( --wp--preset--color--salvia-vaalea-3 ) );
}

.ll-jakaja__keskus {
	display: flex;
	align-items: center;
	flex: none;
	gap: 8px;
}

.ll-jakaja__piste {
	width: 8px;
	height: 8px;
	border-radius: var( --wp--custom--kaari--pilleri );
	background: var( --wp--preset--color--korostus-vaalea );
}

.ll-jakaja__piste--salvia {
	background: var( --wp--preset--color--salvia-vaalea-2 );
}

.ll-jakaja__merkki {
	display: grid;
	place-items: center;
	flex: none;
	width: clamp( 34px, 4vw, 44px );
	height: clamp( 34px, 4vw, 44px );
	border-radius: var( --wp--custom--kaari--pilleri );
	background: var( --wp--preset--color--korostus-vaalea );
	color: var( --wp--preset--color--korostus-syva );
	box-shadow: var( --wp--preset--shadow--kevyt );
}

/* ── 7. Sitaattikaruselli ────────────────────────────────────────────────── */

.ll-karuselli__otsikko {
	/* Ylamarginaali nollataan, jotta palstassa otsikko alkaa kuvan tasalta. */
	margin-top: 0;
	margin-bottom: var( --wp--preset--spacing--40 );
}

/*
 * Etusivulla karuselli on kapea ja keskitetty heron alla — se on nosto, ei
 * oma osionsa. Muualla se saa koko leveyden.
 */
.ll-karuselli.is-style-kapea {
	max-width: 640px;
	margin-inline: auto;
}

.ll-karuselli__kehys {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: clamp( 20px, 3vw, 32px ) clamp( 8px, 2vw, 20px );
	border-radius: var( --wp--custom--kaari--kortti );
	background: var( --wp--preset--color--salvia-vaalea );
}

.ll-karuselli__lava {
	flex: 1;
	min-width: 0;
	text-align: center;
}

.ll-karuselli__dia {
	margin: 0;
	display: grid;
	justify-items: center;
	gap: 10px;
}

/*
 * Tekijän `display: grid` voittaa selaimen oman [hidden]-säännön, joten
 * piilotus on kirjoitettava itse. Ilman tätä karuselli näyttää kaikki
 * sitaatit allekkain.
 */
.ll-karuselli__dia[hidden] {
	display: none;
}

.ll-karuselli__merkki {
	color: var( --wp--preset--color--salvia );
	opacity: 0.8;
}

.ll-karuselli__merkki svg {
	fill: currentColor;
	stroke: none;
}

.ll-karuselli__teksti {
	margin: 0;
	max-width: 46ch;
	font-size: var( --wp--preset--font-size--keski );
	line-height: 1.5;
}

.ll-karuselli__teksti p {
	margin: 0;
}

.ll-karuselli__lahde {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font-size: var( --wp--preset--font-size--pieni );
	font-weight: 600;
	color: var( --wp--preset--color--salvia-syva );
}

.ll-karuselli__kuvake {
	display: grid;
	place-items: center;
	width: 28px;
	height: 28px;
	border-radius: var( --wp--custom--kaari--pilleri );
	background: var( --wp--preset--color--valkoinen );
	color: var( --wp--preset--color--salvia-syva );
}

.ll-karuselli__nuoli {
	display: grid;
	place-items: center;
	flex: none;
	width: 36px;
	height: 36px;
	border: 0;
	border-radius: var( --wp--custom--kaari--pilleri );
	background: var( --wp--preset--color--valkoinen );
	color: var( --wp--preset--color--salvia-syva );
	box-shadow: var( --wp--preset--shadow--kevyt );
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.ll-karuselli__nuoli:hover {
	background: var( --wp--preset--color--salvia-vaalea-2 );
}

.ll-karuselli__pisteet {
	display: flex;
	justify-content: center;
	gap: 7px;
	margin-top: 14px;
}

.ll-karuselli__piste {
	width: 22px;
	height: 22px;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	display: grid;
	place-items: center;
}

.ll-karuselli__piste::before {
	content: '';
	width: 7px;
	height: 7px;
	border-radius: var( --wp--custom--kaari--pilleri );
	background: var( --wp--preset--color--salvia-vaalea-2 );
	transition: background-color 0.15s ease;
}

.ll-karuselli__piste[aria-selected='true']::before {
	background: var( --wp--preset--color--salvia );
}

/* ── 8. Urakat ja henkilöt ───────────────────────────────────────────────── */

/*
 * Urakkakortit: yksi palsta, ja tiedot neljänä sarakkeena vaakaan. Taustat
 * vuorottelevat, jotta pitkä lista pysyy luettavana ilman raskaita rajoja.
 */
.ll-urakat {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 12px;
	grid-template-columns: 1fr;
}

.ll-urakat__kortti {
	padding: clamp( 16px, 2vw, 22px ) clamp( 18px, 2.4vw, 26px );
	border-radius: var( --wp--custom--kaari--kortti );
	background: var( --wp--preset--color--kortti );
	box-shadow: var( --wp--preset--shadow--kevyt );
}

.ll-urakat__kortti--persikka {
	background: var( --wp--preset--color--korostus-vaalea );
	box-shadow: none;
}

.ll-urakat__otsikko {
	margin: 0 0 14px;
	font-size: var( --wp--preset--font-size--keski );
}

.ll-urakat__tiedot {
	margin: 0;
	display: grid;
	gap: 12px;
	grid-template-columns: 1fr;
}

@media ( min-width: 700px ) {
	.ll-urakat__tiedot {
		grid-template-columns: repeat( 2, minmax( 0, 220px ) );
		gap: 18px;
	}
}

/*
 * "Lue asiakastarina" naytetaan vain kohteille joille tarina on kirjoitettu.
 * Kortti ei ole kokonaan linkki, koska useimmilla kohteilla ei ole tarinaa —
 * silloin klikattava kortti lupaisi jotain mita ei ole.
 */
.ll-urakat__tarina {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin-top: 14px;
	padding: 9px 18px;
	border-radius: var( --wp--custom--kaari--pilleri );
	background: var( --wp--preset--color--korostus-tumma );
	color: var( --wp--preset--color--valkoinen );
	font-size: var( --wp--preset--font-size--pieni );
	font-weight: 700;
	text-decoration: none;
	transition: background-color 0.15s ease, transform 0.15s ease;
}

.ll-urakat__tarina:hover,
.ll-urakat__tarina:focus-visible {
	background: var( --wp--preset--color--korostus-syva );
	color: var( --wp--preset--color--valkoinen );
	transform: translateX( 2px );
}

.ll-urakat__rivi dt {
	margin: 0 0 3px;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var( --wp--preset--color--teksti-haalea );
}

.ll-urakat__rivi dd {
	margin: 0;
	font-weight: 600;
	font-size: var( --wp--preset--font-size--pieni );
}

/* — henkilökortit — */

.ll-henkilot {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 16px;
	grid-template-columns: 1fr;
}

@media ( min-width: 641px ) {
	.ll-henkilot {
		grid-template-columns: repeat( 2, 1fr );
	}
}

/* Yhteystiedoissa kortteja on kolme ja ne mahtuvat yhdelle riville. */
@media ( min-width: 900px ) {
	.ll-henkilot--yhteystiedot {
		grid-template-columns: repeat( 3, 1fr );
	}
}

.ll-henkilot__kortti {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: clamp( 16px, 2vw, 20px );
	border-radius: var( --wp--custom--kaari--kortti );
	background: var( --wp--preset--color--kortti );
	box-shadow: var( --wp--preset--shadow--kevyt );
}

/*
 * Yhteystietokortit olivat persikkaisia ilman varjoa: #fce2d4 kermaisella
 * #f5ead8 -taustalla on niin lahella toisiaan, etta kortin reuna katoaa.
 * Designissa kortti on vaalea ja erottuu varjolla — sama ratkaisu kuin
 * muualla sivustolla.
 */
.ll-henkilot--yhteystiedot .ll-henkilot__kortti {
	background: var( --wp--preset--color--kortti );
	box-shadow: var( --wp--preset--shadow--keski );
}

.ll-henkilot__ylaosa {
	display: flex;
	align-items: center;
	gap: 12px;
}

.ll-henkilot__kuva,
.ll-henkilot__alkukirjain {
	flex: none;
	width: 40px;
	height: 40px;
	border-radius: var( --wp--custom--kaari--pilleri );
}

.ll-henkilot__kuva {
	object-fit: cover;
}

.ll-henkilot__alkukirjain {
	display: grid;
	place-items: center;
	background: var( --wp--preset--color--salvia-vaalea );
	color: var( --wp--preset--color--salvia-syva );
	font-family: var( --wp--preset--font-family--otsikko );
	font-size: var( --wp--preset--font-size--perus );
}

.ll-henkilot__nimi {
	margin: 0;
	font-family: var( --wp--preset--font-family--leipa );
	font-weight: 700;
	font-size: var( --wp--preset--font-size--perus );
	letter-spacing: 0;
}

.ll-henkilot__rooli {
	margin: 1px 0 0;
	font-size: var( --wp--preset--font-size--pieni );
	font-weight: 600;
	color: var( --wp--preset--color--korostus-syva );
}

.ll-henkilot--yhteystiedot .ll-pilleri {
	background: var( --wp--preset--color--valkoinen );
	font-weight: 600;
}

.ll-henkilot__esittely p:last-child {
	margin-bottom: 0;
}

.ll-henkilot__linkit {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: auto;
}

/* ── 8b. Osiotunnus, linkkipalkit ja ikonikortit ─────────────────────────── */

/* Osion otsikko, jonka vasemmalla on salvianvärinen ikoniympyrä. */
.ll-osiotunnus {
	display: flex;
	align-items: flex-start;
	gap: 14px;
}

.ll-osiotunnus__merkki {
	display: grid;
	place-items: center;
	flex: none;
	width: 38px;
	height: 38px;
	margin-top: 4px;
	border-radius: var( --wp--custom--kaari--pilleri );
	background: var( --wp--preset--color--salvia-vaalea );
	color: var( --wp--preset--color--salvia-syva );
}

.ll-osiotunnus__teksti > * {
	margin: 0;
}

.ll-osiotunnus__teksti p {
	margin-top: 4px;
	font-size: var( --wp--preset--font-size--pieni );
	color: var( --wp--preset--color--teksti-haalea );
}

/*
 * Ohut linkkipalkki: koko rivi on klikattava, nuoli oikeassa reunassa.
 * Käytetään esim. "Maalämpö lämmitysmuotona" -nostossa.
 */
.ll-linkkipalkki {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 16px clamp( 18px, 2.4vw, 26px );
	border-radius: var( --wp--custom--kaari--kortti );
	background: var( --wp--preset--color--salvia-vaalea );
	color: var( --wp--preset--color--teksti );
	text-decoration: none;
	transition: background-color 0.15s ease;
}

.ll-linkkipalkki:hover,
.ll-linkkipalkki:focus-visible {
	background: var( --wp--preset--color--salvia-vaalea-2 );
	color: var( --wp--preset--color--teksti );
}

.ll-linkkipalkki--persikka {
	background: var( --wp--preset--color--korostus-vaalea );
}

.ll-linkkipalkki--persikka:hover,
.ll-linkkipalkki--persikka:focus-visible {
	background: var( --wp--preset--color--korostus-vaalea-2 );
}

.ll-linkkipalkki__ikoni {
	display: grid;
	place-items: center;
	flex: none;
	width: 40px;
	height: 40px;
	border-radius: var( --wp--custom--kaari--pilleri );
	background: var( --wp--preset--color--valkoinen );
	color: var( --wp--preset--color--korostus-syva );
}

.ll-linkkipalkki__teksti {
	flex: 1;
	min-width: 0;
}

.ll-linkkipalkki__otsikko {
	display: block;
	font-family: var( --wp--preset--font-family--otsikko );
	font-size: var( --wp--preset--font-size--iso );
	line-height: 1.2;
}

.ll-linkkipalkki__selite {
	display: block;
	margin-top: 3px;
	font-size: var( --wp--preset--font-size--pieni );
	color: var( --wp--preset--color--teksti-haalea );
}

.ll-linkkipalkki__nuoli {
	flex: none;
	color: var( --wp--preset--color--korostus-syva );
}

/* Tumma salviapalkki — huoltovarmuustakuun kaltaiset lupaukset. */
.ll-tummapalkki {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	padding: clamp( 18px, 2.4vw, 24px ) clamp( 18px, 2.4vw, 26px );
	border-radius: var( --wp--custom--kaari--kortti );
	background: var( --wp--preset--color--salvia );
	color: var( --wp--preset--color--valkoinen );
}

.ll-tummapalkki__ikoni {
	flex: none;
	margin-top: 2px;
}

.ll-tummapalkki__otsikko {
	font-family: var( --wp--preset--font-family--otsikko );
	font-size: var( --wp--preset--font-size--iso );
	line-height: 1.2;
	margin-bottom: 6px;
}

.ll-tummapalkki__teksti {
	font-size: var( --wp--preset--font-size--pieni );
	opacity: 0.95;
}

/* Kortti, jossa ikoni on tekstin vasemmalla puolella. */
.ll-ikonikortit {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 14px;
	grid-template-columns: 1fr;
}

@media ( min-width: 700px ) {
	.ll-ikonikortit {
		grid-template-columns: repeat( 2, 1fr );
	}
}

.ll-ikonikortti {
	position: relative;
	overflow: hidden;
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: clamp( 16px, 2vw, 20px );
	border-radius: var( --wp--custom--kaari--kortti );
	background: var( --wp--preset--color--kortti );
	box-shadow: var( --wp--preset--shadow--kevyt );
}

/*
 * Designissa kortit ovat keskenaan samanlaisia: vaalea kortti varjolla ja
 * persikkainen ikoniympyra. Vuorotteleva persikkatausta oli teeman oma lisays
 * ja teki huoltosivusta levottoman, joten se on pudotettu pois.
 */
.ll-ikonikortti::after {
	content: '';
	position: absolute;
	inset: auto 0 0 0;
	height: 40px;
	background: var( --wp--preset--gradient--haipyma-persikka );
	pointer-events: none;
}

.ll-ikonikortti__ikoni {
	display: grid;
	place-items: center;
	flex: none;
	width: 40px;
	height: 40px;
	border-radius: var( --wp--custom--kaari--pilleri );
	background: var( --wp--preset--color--korostus-vaalea );
	color: var( --wp--preset--color--korostus-syva );
}

.ll-ikonikortti__otsikko {
	font-weight: 700;
	font-size: var( --wp--preset--font-size--perus );
	margin-bottom: 3px;
}

.ll-ikonikortti__teksti {
	font-size: var( --wp--preset--font-size--pieni );
	color: var( --wp--preset--color--teksti-haalea );
}

/* Pieni tagi kortin sisällä (esim. "Huoltosopimus"). */
.ll-korttitagi {
	display: inline-flex;
	align-items: center;
	padding: 4px 12px;
	margin-bottom: 10px;
	border-radius: var( --wp--custom--kaari--pilleri );
	background: var( --wp--preset--color--salvia );
	color: var( --wp--preset--color--valkoinen );
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.04em;
}

/* Sivun otsikkobanneri (Yritys-sivu). */
.ll-banneri {
	padding: clamp( 24px, 3.5vw, 36px ) clamp( 20px, 3vw, 32px );
	border-radius: var( --wp--custom--kaari--kortti );
	background: var( --wp--preset--color--korostus-tumma );
	color: var( --wp--preset--color--valkoinen );
}

.ll-banneri .ll-tagi {
	background: rgba( 255, 255, 255, 0.22 );
	color: var( --wp--preset--color--valkoinen );
}

/* Ruksilista ilman laatikkoa — ammattitaidon lupaukset. */
.ll-lupaukset {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 14px;
}

.ll-lupaukset li {
	display: flex;
	align-items: flex-start;
	gap: 11px;
}

.ll-lupaukset li::before {
	content: '';
	flex: none;
	width: 18px;
	height: 18px;
	margin-top: 2px;
	border-radius: var( --wp--custom--kaari--pilleri );
	background: var( --wp--preset--color--valkoinen ) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2356633f' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 11px no-repeat;
}

.ll-lupaukset__otsikko {
	font-weight: 700;
	font-size: var( --wp--preset--font-size--perus );
	margin-bottom: 2px;
}

.ll-lupaukset__teksti {
	font-size: var( --wp--preset--font-size--pieni );
	color: var( --wp--preset--color--teksti-haalea );
}

/* ── 9. Alatunniste ──────────────────────────────────────────────────────── */

.ll-alatunniste {
	border-top: 1px solid var( --wp--preset--color--viiva );
}

.ll-alatunniste__tiedot {
	font-size: var( --wp--preset--font-size--pieni );
	color: var( --wp--preset--color--teksti-haalea );
}

.ll-alatunniste__tiedot a {
	color: inherit;
}


/*
 * Vaiheet vierekkain isoilla naytoilla, kuten designissa: pallot rivissa ja
 * niiden valissa yhdysviiva nuolikarjella. Kapealla naytolla lista pysyy
 * pystyssa, koska kolme keskitettya tekstipalstaa ei mahdu rinnakkain.
 */
@media ( min-width: 782px ) {
	.ll-vaiheet {
		grid-auto-flow: column;
		grid-auto-columns: 1fr;
	}

	.ll-vaiheet__vaihe {
		grid-template-columns: 1fr;
		justify-items: center;
		text-align: center;
		gap: 12px;
		padding: 0 10px;
	}

	/* Rengas taustan varilla katkaisee yhdysviivan siististi pallon kohdalla. */
	.ll-vaiheet__numero {
		box-shadow: 0 0 0 6px var( --wp--preset--color--pohja );
	}

	.ll-vaiheet__teksti {
		padding-top: 0;
		max-width: 230px;
		font-size: var( --wp--preset--font-size--pieni );
	}

	.ll-vaiheet__vaihe:not( :last-child )::before {
		left: calc( 50% + 30px );
		right: calc( -50% + 30px );
		top: 19px;
		bottom: auto;
		width: auto;
		height: 2px;
		background: var( --wp--preset--color--salvia );
		opacity: 1;
	}

	/* Nuolenkarki viivan paassa. */
	.ll-vaiheet__vaihe:not( :last-child )::after {
		content: '';
		position: absolute;
		top: 15px;
		right: calc( -50% + 30px );
		width: 9px;
		height: 9px;
		border-top: 2px solid var( --wp--preset--color--salvia );
		border-right: 2px solid var( --wp--preset--color--salvia );
		transform: rotate( 45deg );
	}
}

/*
 * Kohdelista ("Millaisiin taloihin se sopii?"). Designissa merkki on taytetty
 * salviaympyra valkoisella ruksilla — sama lista muualla (kartoituskortti,
 * hero) kayttaa vaaleaa merkkia, joten tama on oma muunnelmansa.
 */
.wp-block-list.ll-kohdelista li::before {
	width: 26px;
	height: 26px;
	margin-top: 0;
	background: var( --wp--preset--color--salvia ) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 14px no-repeat;
}

.wp-block-list.ll-kohdelista li {
	align-items: center;
	gap: 12px;
	padding: 13px 16px;
	font-weight: 600;
}

@media ( min-width: 782px ) {
	.wp-block-list.ll-kohdelista--ruudukko {
		grid-template-columns: repeat( 3, 1fr );
	}

	.wp-block-list.ll-kohdelista--ruudukko li {
		align-items: flex-start;
	}

	.wp-block-list.ll-kohdelista--ruudukko li::before {
		margin-top: 1px;
	}
}

/*
 * Kiintea palstamaara ei jousta itsestaan, joten se porrastetaan kasin:
 * yksi palsta puhelimessa, kaksi tabletissa, designin mukainen maara vasta
 * tyopoydalla.
 */
@media ( max-width: 781px ) {
	.wp-block-group.ll-korttiruudukko.is-layout-grid {
		grid-template-columns: 1fr;
	}
}

@media ( min-width: 782px ) and ( max-width: 1100px ) {
	.wp-block-group.ll-korttiruudukko.is-layout-grid {
		grid-template-columns: repeat( 2, 1fr );
	}
}

/* Huomiolaatikko: varauma persikkalaatikossa info-ikonilla. */
.ll-huomio {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin-top: var( --wp--preset--spacing--40 );
	padding: 16px 18px;
	border-radius: var( --wp--custom--kaari--keski );
	background: var( --wp--preset--color--korostus-vaalea );
}

.ll-huomio__ikoni {
	flex: none;
	display: grid;
	place-items: center;
	margin-top: 1px;
	color: var( --wp--preset--color--korostus-syva );
}

.ll-huomio__teksti {
	margin: 0;
	font-size: var( --wp--preset--font-size--pieni );
	line-height: var( --wp--custom--rivikorkeus--leipa, 1.55 );
}

/* ── 10. Lomake (Gravity Forms) ──────────────────────────────────────────── */

/*
 * Gravity Formsin oma tyylitiedosto on jätetty päälle, koska se hoitaa
 * virheilmoitukset ja monisivuisuuden. Nämä säännöt vievät sen designin
 * mukaiseksi: pillerit, pyöreät kentät, terrakottanappi.
 *
 * TÄRKEÄÄ — valitsimen tarkkuus. Gravity Forms kirjoittaa omat sääntönsä
 * muodossa `.gform_wrapper.gravity-theme .gfield_label`, eli kaksi luokkaa
 * ennen kohdetta. Pelkkä `.ll-lomake .gfield_label` häviää sille, vaikka
 * teeman tyylitiedosto ladataan viimeisenä — tarkkuus ratkaisee ennen
 * järjestystä. Siksi jokainen Gravity Formsin merkkaukseen osuva sääntö
 * alkaa `.ll-lomake .gform_wrapper.gravity-theme`. Jos lisäät säännön ilman
 * tuota etuliitettä, se jää hiljaa tehottomaksi.
 */
.ll-lomake .gform_wrapper.gravity-theme .gform_fields {
	grid-row-gap: var( --wp--preset--spacing--40 );
}

/* Valintakentät ovat fieldsetejä, joilla on selaimen oma reunus ja täyte. */
.ll-lomake .gform_wrapper.gravity-theme fieldset.gfield {
	border: 0;
	margin: 0;
	padding: 0;
	min-width: 0;
}

/* Otsikko on legend valintakentissä ja label muissa — sama ulkoasu molemmille. */
.ll-lomake .gform_wrapper.gravity-theme .gfield_label,
.ll-lomake .gform_wrapper.gravity-theme legend.gfield_label {
	font-family: var( --wp--preset--font-family--leipa );
	font-size: var( --wp--preset--font-size--pieni );
	font-weight: 700;
	color: var( --wp--preset--color--teksti );
	margin-bottom: 8px;
	padding: 0;
	display: block;
	float: none;
	width: 100%;
}

/*
 * Prototyypissä pakollisuutta ei merkitä lainkaan, mutta merkintä on
 * saavutettavuuden kannalta tarpeen. Kompromissi: merkintä säilyy, mutta
 * kursivoimattomana ja haaleana, jotta se ei kilpaile otsikon kanssa.
 */
.ll-lomake .gform_wrapper.gravity-theme .gfield_required,
.ll-lomake .gform_wrapper.gravity-theme .gfield_required_text {
	font-style: normal;
	font-weight: 400;
	font-size: var( --wp--preset--font-size--pikku );
	color: var( --wp--preset--color--teksti-haalea );
}

.ll-lomake .gform_wrapper.gravity-theme .gfield_description {
	margin-top: 6px;
	padding: 0;
	font-size: var( --wp--preset--font-size--pieni );
	color: var( --wp--preset--color--teksti-haalea );
}

.ll-lomake .gform_wrapper.gravity-theme input[type='text'],
.ll-lomake .gform_wrapper.gravity-theme input[type='email'],
.ll-lomake .gform_wrapper.gravity-theme input[type='tel'],
.ll-lomake .gform_wrapper.gravity-theme input[type='number'],
.ll-lomake .gform_wrapper.gravity-theme textarea {
	width: 100%;
	padding: 13px 18px;
	font: inherit;
	font-size: var( --wp--preset--font-size--perus );
	color: var( --wp--preset--color--teksti );
	background: var( --wp--preset--color--kortti );
	border: 1.5px solid var( --wp--preset--color--viiva );
	border-radius: var( --wp--custom--kaari--pilleri );
	caret-color: var( --wp--preset--color--korostus-tumma );
}

.ll-lomake .gform_wrapper.gravity-theme textarea {
	border-radius: var( --wp--custom--kaari--keski );
	min-height: 120px;
}

.ll-lomake .gform_wrapper.gravity-theme input:hover,
.ll-lomake .gform_wrapper.gravity-theme textarea:hover {
	border-color: var( --wp--preset--color--teksti-haalea );
}

.ll-lomake .gform_wrapper.gravity-theme input:focus-visible,
.ll-lomake .gform_wrapper.gravity-theme textarea:focus-visible {
	border-color: var( --wp--preset--color--korostus-tumma );
	outline: 2px solid var( --wp--preset--color--korostus-tumma );
	outline-offset: 2px;
}

/*
 * Valintapillerit. Painike piilotetaan visuaalisesti mutta jätetään
 * saavutettavaksi: näppäimistö ja ruudunlukija käyttävät yhä oikeaa
 * radio- tai valintaruutuelementtiä, vain ulkoasu on pilleri.
 *
 * Sama ulkoasu koskee molempia listoja: .gfield_radio (valitse yksi) ja
 * .gfield_checkbox (valitse useampi). Suostumusruutu ei kuulu kumpaankaan
 * — se on .ginput_container_consent ja pysyy tavallisena valintaruutuna.
 */
.ll-lomake .gform_wrapper.gravity-theme :is( .gfield_radio, .gfield_checkbox ) {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

/*
 * Monivalinnan ohje ("Voit valita useamman") kuuluu valintojen yläpuolelle,
 * mutta Gravity Forms renderöi kuvauksen aina listan jälkeen. Kentän sisältö
 * järjestetään uudelleen, jotta ohje on luettavissa ennen valintoja.
 *
 * Kaksi valitsinta, koska kenttätyypin luokka .gfield--type-checkbox tuli
 * vasta Gravity Forms 2.7:ssä ja tässä on 2.6.8. :is() on armollinen: jos
 * selain ei tue :has():ia, vain se osa jää huomiotta eikä koko sääntö kaadu.
 */
.ll-lomake .gform_wrapper.gravity-theme :is( .gfield--type-checkbox, .gfield:has( > .ginput_container_checkbox ) ) {
	display: flex;
	flex-direction: column;
}

.ll-lomake .gform_wrapper.gravity-theme :is( .gfield--type-checkbox, .gfield:has( > .ginput_container_checkbox ) ) > .gfield_label {
	order: 1;
	margin-bottom: 4px;
}

.ll-lomake .gform_wrapper.gravity-theme :is( .gfield--type-checkbox, .gfield:has( > .ginput_container_checkbox ) ) > .gfield_description {
	order: 2;
	margin: 0 0 10px;
}

.ll-lomake .gform_wrapper.gravity-theme :is( .gfield--type-checkbox, .gfield:has( > .ginput_container_checkbox ) ) > .ginput_container {
	order: 3;
}

.ll-lomake .gform_wrapper.gravity-theme .gchoice {
	margin: 0;
	position: relative;
}

.ll-lomake .gform_wrapper.gravity-theme :is( .gfield_radio, .gfield_checkbox ) .gchoice input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
	margin: 0;
}

.ll-lomake .gform_wrapper.gravity-theme :is( .gfield_radio, .gfield_checkbox ) .gchoice label {
	display: inline-flex;
	align-items: center;
	margin: 0;
	/*
	 * Gravity Forms varaa labelille max-width: calc(100% - 32px), koska
	 * tavallisesti sen vieressä on näkyvä radiopainike. Pillerissä painike on
	 * piilotettu, joten varaus jää haamutilaksi jokaisen pillerin oikealle
	 * puolelle ja välit näyttävät satunnaisilta.
	 */
	max-width: none;
	white-space: nowrap;
	padding: 9px 15px;
	border: 1.5px solid var( --wp--preset--color--viiva );
	border-radius: var( --wp--custom--kaari--pilleri );
	background: var( --wp--preset--color--kortti );
	font-size: var( --wp--preset--font-size--pieni );
	font-weight: 600;
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.ll-lomake .gform_wrapper.gravity-theme :is( .gfield_radio, .gfield_checkbox ) .gchoice label:hover {
	border-color: var( --wp--preset--color--korostus-tumma );
}

.ll-lomake .gform_wrapper.gravity-theme :is( .gfield_radio, .gfield_checkbox ) .gchoice input:checked + label {
	background: var( --wp--preset--color--korostus-tumma );
	border-color: var( --wp--preset--color--korostus-tumma );
	color: var( --wp--preset--color--valkoinen );
}

/*
 * Tarkennusrengas piirretään labelin ympärille, koska itse radiopainike on
 * piilotettu. Ilman tätä näppäimistökäyttäjä ei näkisi missä on.
 */
.ll-lomake .gform_wrapper.gravity-theme :is( .gfield_radio, .gfield_checkbox ) .gchoice input:focus-visible + label {
	outline: 2px solid var( --wp--preset--color--korostus-tumma );
	outline-offset: 2px;
}

/* Suostumusruutu pysyy tavallisena valintaruutuna — pilleri ei viesti
   "tämän voi jättää valitsematta" riittävän selvästi. */
.ll-lomake .gform_wrapper.gravity-theme .gfield_consent_label,
.ll-lomake .gform_wrapper.gravity-theme .ginput_container_consent label {
	font-size: var( --wp--preset--font-size--pieni );
	font-weight: 400;
	line-height: 1.5;
	display: inline;
	max-width: none;
}

.ll-lomake .gform_wrapper.gravity-theme .ginput_container_consent {
	display: flex;
	align-items: flex-start;
	gap: 10px;
}

/*
 * Gravity Forms renderöi suostumuskentän kuvauksen vieritettävään laatikkoon
 * (tarkoitettu pitkille käyttöehdoille). Yhden lauseen tietosuojahuomiolle se
 * näyttää rikkinäiseltä syötekentältä, joten se palautetaan tavalliseksi
 * tekstiksi.
 */
.ll-lomake .gform_wrapper.gravity-theme .gfield_consent_description,
.ll-lomake .gform_wrapper.gravity-theme .field_description_below .gfield_consent_description {
	max-height: none;
	overflow-y: visible;
	border: 0;
	padding: 0;
	margin-top: 8px;
	background: none;
	font-size: var( --wp--preset--font-size--pieni );
	color: var( --wp--preset--color--teksti-haalea );
}

.ll-lomake .gform_wrapper.gravity-theme .ginput_container_consent input[type='checkbox'] {
	flex: none;
	width: 20px;
	height: 20px;
	margin-top: 1px;
	accent-color: var( --wp--preset--color--korostus-tumma );
}

.ll-lomake .gform_wrapper.gravity-theme .gform_footer {
	margin-top: var( --wp--preset--spacing--50 );
	padding: 0;
}

.ll-lomake .gform_wrapper.gravity-theme .gform_button,
.ll-lomake .gform_wrapper.gravity-theme .gform_footer input[type='submit'] {
	width: 100%;
	padding: 15px 24px;
	border: 0;
	border-radius: var( --wp--custom--kaari--pilleri );
	background: var( --wp--preset--color--korostus-tumma );
	color: var( --wp--preset--color--valkoinen );
	font-family: var( --wp--preset--font-family--leipa );
	font-size: var( --wp--preset--font-size--perus );
	font-weight: 700;
	cursor: pointer;
	box-shadow: var( --wp--preset--shadow--kevyt );
	transition: background-color 0.15s ease;
}

.ll-lomake .gform_wrapper.gravity-theme .gform_button:hover,
.ll-lomake .gform_wrapper.gravity-theme .gform_footer input[type='submit']:hover {
	background: var( --wp--preset--color--korostus-syva );
}

/*
 * Virheilmoitukset. Gravity Formsin oletus on punainen laatikko harmaalla
 * reunuksella; se korvataan teeman persikkasävyllä ja terrakottatekstillä,
 * jotta virhe erottuu mutta ei riitele muun sivun kanssa.
 */
.ll-lomake .gform_wrapper.gravity-theme .gform_validation_errors {
	border: 0;
	border-radius: var( --wp--custom--kaari--keski );
	background: var( --wp--preset--color--korostus-vaalea );
	box-shadow: none;
	padding: 14px 18px;
	margin-bottom: var( --wp--preset--spacing--40 );
}

.ll-lomake .gform_wrapper.gravity-theme .gform_validation_errors > h2 {
	font-family: var( --wp--preset--font-family--leipa );
	font-size: var( --wp--preset--font-size--pieni );
	font-weight: 700;
	color: var( --wp--preset--color--korostus-syva );
	margin: 0;
	padding: 0;
}

/* Virhekoosteen luettelo: Gravity Formsin oma punainen vaihdetaan teeman sävyyn. */
.ll-lomake .gform_wrapper.gravity-theme .gform_validation_errors ol,
.ll-lomake .gform_wrapper.gravity-theme .gform_validation_errors li,
.ll-lomake .gform_wrapper.gravity-theme .gform_validation_errors a {
	color: var( --wp--preset--color--korostus-syva );
	font-size: var( --wp--preset--font-size--pieni );
}

.ll-lomake .gform_wrapper.gravity-theme .gfield_validation_message,
.ll-lomake .gform_wrapper.gravity-theme .validation_message {
	border: 0;
	border-radius: var( --wp--custom--kaari--keski );
	background: var( --wp--preset--color--korostus-vaalea );
	color: var( --wp--preset--color--korostus-syva );
	font-size: var( --wp--preset--font-size--pieni );
	font-weight: 600;
	padding: 9px 14px;
	margin-top: 8px;
}

/* Virheellisen kentän korostus: pelkkä punainen reunus jää huomaamatta. */
.ll-lomake .gform_wrapper.gravity-theme .gfield_error input,
.ll-lomake .gform_wrapper.gravity-theme .gfield_error textarea {
	border-color: var( --wp--preset--color--korostus-tumma );
}

.ll-lomake .gform_wrapper.gravity-theme .gfield_error .gfield_label {
	color: var( --wp--preset--color--korostus-syva );
}

/* Kiitosviesti lähetyksen jälkeen. */
.ll-lomake .gform_confirmation_message {
	padding: var( --wp--preset--spacing--50 );
	border-radius: var( --wp--custom--kaari--kortti );
	background: var( --wp--preset--color--salvia-vaalea );
	font-size: var( --wp--preset--font-size--keski );
}

.ll-lomake__luottamus {
	display: flex;
	align-items: center;
	gap: 9px;
	margin-top: 14px;
	font-size: var( --wp--preset--font-size--pieni );
	color: var( --wp--preset--color--teksti-haalea );
}

.ll-lomake__luottamus svg {
	flex: none;
	color: var( --wp--preset--color--salvia-syva );
}