/*
 * Uudistettujen palvelusivujen yhteiset rakennuspalikat.
 *
 * Tähän tiedostoon kuuluvat vain useilla sivuilla uudelleen käytettävät
 * määritykset. Yksittäisen sivun kuvitukset ja muut poikkeukset määritellään
 * kyseisen sivun omassa style-lohkossa.
 */

body.palvelusivu {
	--palvelu-oranssi: #f36316;
	--palvelu-oranssi-tumma: #d94d02;
	--palvelu-oranssi-vaalea: #fff1e8;
	--palvelu-sininen: #086e9d;
	--palvelu-sininen-tumma: #174f6c;
	--palvelu-sininen-vaalea: #edf8fc;
	--palvelu-teksti: #263946;
	--palvelu-himmea: #617784;
	--palvelu-raja: #dbe7ec;
	--palvelu-vihrea: #23845d;
	--palvelu-varjo: 0 14px 34px rgba(37, 70, 87, .09);
	color: var(--palvelu-teksti);
}

body.palvelusivu #sisalto { background: #fff; }
body.palvelusivu #sisalto p,
body.palvelusivu #sisalto li { line-height: 1.62; }
body.palvelusivu #sisalto h1,
body.palvelusivu #sisalto h2,
body.palvelusivu #sisalto h3 { color: var(--palvelu-teksti); }
body.palvelusivu #sisalto h1,
body.palvelusivu #sisalto h2 { letter-spacing: -.025em; }

.palvelu-sisus { width: min(1040px, calc(100% - 76px)); margin-inline: auto; }
.palvelu-osio { padding-block: 70px; }
.palvelu-osio--tiivis-alku { padding-top: 32px; }
.palvelu-osio--vaalea { background: #f5fafc; }
.palvelu-osio--sininen { background: var(--palvelu-sininen-vaalea); }
.palvelu-esikappale { margin: 0 0 10px; color: var(--palvelu-oranssi); font-size: 13px; font-weight: bold; letter-spacing: .075em; text-transform: uppercase; }
body.palvelusivu #sisalto .palvelu-otsikko { margin: 0 0 14px; font-size: clamp(31px, 4vw, 47px); line-height: 1.15; }
.palvelu-ingressi { max-width: 760px; margin: 0; color: var(--palvelu-himmea); font-size: 18px; }
.palvelu-osio-alku { max-width: 800px; margin-bottom: 34px; }
.palvelu-osio-alku--keskella { margin-inline: auto; text-align: center; }

.palvelu-hero {
	position: relative;
	overflow: hidden;
	background:
		radial-gradient(circle at 88% 10%, rgba(123, 211, 255, .48), transparent 35%),
		linear-gradient(180deg, #fff 0%, #f6fbfe 100%);
}
.palvelu-hero::after { position: absolute; right: -90px; bottom: -210px; width: 450px; height: 450px; border-radius: 50%; background: rgba(243, 99, 22, .07); content: ''; }
.palvelu-hero__ruudukko { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(300px, .85fr); gap: 58px; align-items: center; padding-block: 72px 66px; }
body.palvelusivu #sisalto .palvelu-hero h1 { max-width: 650px; margin: 0; font-size: clamp(42px, 5.5vw, 67px); line-height: 1.03; }
.palvelu-hero__ingressi { max-width: 610px; margin: 22px 0 25px; color: var(--palvelu-himmea); font-size: 19px; }
.palvelu-hero--tiivis .palvelu-hero__ruudukko { grid-template-columns: minmax(0, 1.35fr) 270px; padding-block: 52px 55px; }
body.palvelusivu #sisalto .palvelu-hero--tiivis h1 { font-size: clamp(39px, 5vw, 58px); }
.palvelu-hero--tiivis .palvelu-hero__ingressi { margin-bottom: 18px; }
.palvelu-murupolku { margin: 0 0 27px; color: var(--palvelu-himmea); font-size: 13px; }
.palvelu-murupolku a { color: var(--palvelu-sininen-tumma); }
.palvelu-murupolku span { margin-inline: 7px; color: #9aabb4; }
.palvelu-hero__teksti { position: relative; padding-top: 10px; }
.palvelu-hero__teksti > .palvelu-murupolku { position: absolute; bottom: calc(100% + 18px); left: 0; margin: 0; }
.palvelu-toiminnot { display: flex; flex-wrap: wrap; gap: 11px; }
.palvelu-painike { display: inline-flex; align-items: center; justify-content: center; min-height: 47px; padding: 11px 20px; border: 2px solid var(--palvelu-oranssi); border-radius: 10px; background: var(--palvelu-oranssi); color: #fff; font: inherit; font-size: 15px; font-weight: bold; line-height: 1.25; text-align: center; text-decoration: none; cursor: pointer; transition: background .15s ease, transform .15s ease; }
.palvelu-painike:hover { border-color: var(--palvelu-oranssi-tumma); background: var(--palvelu-oranssi-tumma); transform: translateY(-1px); }
.palvelu-painike--toissijainen { border-color: var(--palvelu-raja); background: transparent; color: var(--palvelu-sininen-tumma); }
.palvelu-painike--toissijainen:hover { border-color: var(--palvelu-sininen); background: var(--palvelu-sininen-vaalea); }
.palvelu-lupaukset { display: flex; flex-wrap: wrap; gap: 7px 18px; margin-top: 22px; color: var(--palvelu-himmea); font-size: 13px; }
.palvelu-lupaukset span::before { margin-right: 6px; color: var(--palvelu-vihrea); content: '✓'; font-weight: bold; }

.palvelu-sivunavigaatio { position: sticky; top: 0; z-index: 4; border-block: 1px solid var(--palvelu-raja); background: rgba(255, 255, 255, .96); box-shadow: 0 3px 12px rgba(38, 66, 80, .04); }
.palvelu-sivunavigaatio__sisus { display: flex; align-items: center; justify-content: center; gap: 7px 25px; min-height: 52px; overflow-x: auto; }
.palvelu-sivunavigaatio a { flex: 0 0 auto; padding: 14px 0; color: var(--palvelu-sininen-tumma); font-size: 13px; font-weight: bold; text-decoration: none; }
.palvelu-sivunavigaatio a:hover { color: var(--palvelu-oranssi); }

.palvelu-korttirivi { display: grid; grid-template-columns: repeat(3, 1fr); gap: 17px; }
.palvelu-kortti { padding: 23px; border: 1px solid var(--palvelu-raja); border-radius: 14px; background: #fff; box-shadow: var(--palvelu-varjo); }
.palvelu-kortti__numero { display: grid; place-items: center; width: 34px; height: 34px; margin-bottom: 14px; border-radius: 9px; background: var(--palvelu-oranssi-vaalea); color: var(--palvelu-oranssi); font-weight: bold; }
body.palvelusivu #sisalto .palvelu-kortti h3 { margin: 0 0 7px; font-size: 20px; }
.palvelu-kortti p { margin: 0; color: var(--palvelu-himmea); font-size: 14px; }
.palvelu-hyodyt { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; margin-top: 20px; background: var(--palvelu-raja); }
.palvelu-hyoty { padding: 16px; border-left: 3px solid var(--palvelu-oranssi); background: var(--palvelu-oranssi-vaalea); }
.palvelu-hyoty strong { display: block; margin-bottom: 2px; font-size: 15px; }
.palvelu-hyoty span { color: var(--palvelu-himmea); font-size: 12px; }

.palvelu-kaksipalsta { display: grid; grid-template-columns: minmax(300px, .85fr) minmax(0, 1.15fr); gap: 54px; align-items: center; }
.palvelu-kuva img { display: block; width: min(100%, 480px); height: auto; margin-inline: auto; filter: drop-shadow(0 14px 20px rgba(34, 66, 81, .11)); }
.palvelu-korttiruudukko { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 23px; }
.palvelu-tietokortti { padding: 17px; border: 1px solid var(--palvelu-raja); border-radius: 12px; background: #fff; }
body.palvelusivu #sisalto .palvelu-tietokortti h3 { display: flex; align-items: center; margin: 0 0 7px; font-size: 17px; }
.palvelu-tietokortti h3::before { display: inline-grid; flex: 0 0 23px; place-items: center; width: 23px; height: 23px; margin-right: 7px; border-radius: 6px; background: var(--palvelu-oranssi-vaalea); color: var(--palvelu-oranssi); content: '✓'; font-size: 13px; }
.palvelu-tietokortti p { margin: 0; color: var(--palvelu-himmea); font-size: 13px; }
.palvelu-lisanosto { margin-top: 12px; padding: 15px 17px; border-left: 4px solid var(--palvelu-vihrea); background: var(--palvelu-sininen-vaalea); font-size: 14px; }

.palvelu-esittely { display: grid; grid-template-columns: 270px minmax(0, 1fr); gap: 54px; align-items: center; }
.palvelu-henkilo { padding: 24px; border: 1px solid var(--palvelu-raja); border-radius: 15px; background: #fff; box-shadow: var(--palvelu-varjo); text-align: center; }
.palvelu-henkilo img { display: block; width: 132px; height: 132px; margin: 0 auto 15px; border-radius: 50%; object-fit: cover; }
.palvelu-henkilo strong { display: block; font-size: 18px; }
.palvelu-henkilo span { color: var(--palvelu-himmea); font-size: 13px; }
.palvelu-esittely__teksti > p { color: var(--palvelu-himmea); font-size: 15px; }
.palvelu-listanosto { margin: 20px 0; padding: 17px 19px; border-radius: 11px; background: #fff; color: var(--palvelu-himmea); font-size: 13px; line-height: 1.75; }
.palvelu-huomio { padding: 17px 19px; border-left: 4px solid var(--palvelu-oranssi); background: var(--palvelu-oranssi-vaalea); font-size: 14px; line-height: 1.55; }

.palvelu-hinnat { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; max-width: 800px; margin-inline: auto; }
.palvelu-hintakortti { position: relative; padding: 29px; border: 1px solid var(--palvelu-raja); border-radius: 15px; background: #fff; box-shadow: var(--palvelu-varjo); }
.palvelu-hintakortti--korostettu { border: 2px solid var(--palvelu-oranssi); }
.palvelu-hintakortti__merkki { position: absolute; top: 0; right: 22px; padding: 5px 10px; border-radius: 0 0 7px 7px; background: var(--palvelu-oranssi); color: #fff; font-size: 11px; font-weight: bold; }
.palvelu-hintakortti__nimi { color: var(--palvelu-himmea); font-size: 13px; }
.palvelu-hintakortti__hinta { margin: 8px 0 1px; font-size: 50px; font-weight: bold; letter-spacing: -.04em; }
.palvelu-hintakortti small { color: var(--palvelu-himmea); }
.palvelu-hintakortti ul { margin: 20px 0 0; padding: 0; list-style: none; }
.palvelu-hintakortti li { display: flex; gap: 8px; margin: 8px 0; color: var(--palvelu-himmea); font-size: 14px; }
.palvelu-hintakortti li::before { color: var(--palvelu-vihrea); content: '✓'; font-weight: bold; }
.palvelu-hintahuomio { max-width: 800px; margin: 23px auto 0; color: var(--palvelu-himmea); font-size: 14px; }
.palvelu-periaate { position: relative; max-width: 800px; margin: 0 auto 28px; padding: 21px 24px 21px 66px; border: 1px solid var(--palvelu-raja); border-left: 4px solid var(--palvelu-oranssi); border-radius: 12px; background: #fff; box-shadow: 0 10px 25px rgba(37, 70, 87, .06); color: var(--palvelu-himmea); font-size: 15px; }
.palvelu-periaate::before { position: absolute; top: 22px; left: 22px; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--palvelu-oranssi-vaalea); color: var(--palvelu-oranssi); content: '✓'; font-weight: bold; }
.palvelu-periaate p { margin: 0; }
.palvelu-periaate strong { color: var(--palvelu-teksti); }

.palvelu-vaiheet { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; counter-reset: palvelu-vaihe; }
.palvelu-vaihe { position: relative; padding: 48px 20px 20px; border-top: 1px solid var(--palvelu-raja); }
.palvelu-vaihe::before { position: absolute; top: 9px; left: 20px; counter-increment: palvelu-vaihe; content: counter(palvelu-vaihe); color: var(--palvelu-oranssi); font-size: 24px; font-weight: bold; }
body.palvelusivu #sisalto .palvelu-vaihe h3 { margin: 0 0 7px; font-size: 19px; }
.palvelu-vaihe p { margin: 0; color: var(--palvelu-himmea); font-size: 14px; }
.palvelu-yhteenveto { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 16px; align-items: center; margin-top: 26px; padding: 20px 23px; border-radius: 13px; background: var(--palvelu-sininen-vaalea); color: var(--palvelu-sininen-tumma); }
.palvelu-yhteenveto__merkki { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: #fff; color: var(--palvelu-vihrea); font-size: 21px; font-weight: bold; box-shadow: 0 6px 16px rgba(37, 70, 87, .08); }
.palvelu-yhteenveto p { margin: 0; color: var(--palvelu-sininen-tumma); font-size: 15px; font-weight: bold; }

.palvelu-yhteydenotto { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(290px, .95fr); gap: 50px; align-items: start; }
.palvelu-yhteydenotto__lista { margin: 0; padding: 0; list-style: none; }
.palvelu-yhteydenotto__lista li { position: relative; margin: 0; padding: 11px 0 11px 29px; border-bottom: 1px solid var(--palvelu-raja); font-size: 14px; }
.palvelu-yhteydenotto__lista li::before { position: absolute; left: 0; color: var(--palvelu-oranssi); content: '→'; font-weight: bold; }
.palvelu-yhteydenotto__kortti { padding: 28px; border-radius: 15px; background: var(--palvelu-sininen-tumma); color: #fff; box-shadow: var(--palvelu-varjo); }
body.palvelusivu #sisalto .palvelu-yhteydenotto__kortti h3 { margin: 0 0 10px; color: #fff !important; font-size: 23px; }
.palvelu-yhteydenotto__kortti p { margin: 0 0 20px; color: rgba(255, 255, 255, .83); font-size: 14px; }

/* Palvelusivujen yhteiset lomakerakenteet. */
.palvelu-lomakeasettelu { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 34px; align-items: start; }
.palvelu-lomake { padding: 32px; border: 1px solid var(--palvelu-raja); border-radius: 16px; background: #fff; box-shadow: var(--palvelu-varjo); }
.palvelu-lomake fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.palvelu-lomake fieldset + fieldset { margin-top: 32px; padding-top: 0; border-top: 1px solid var(--palvelu-raja); }
.palvelu-lomake legend { width: 100%; margin: 0 0 7px; padding: 0; color: var(--palvelu-teksti); font-family: 'Fjalla One', sans-serif; font-size: 27px; line-height: 1.25; }
.palvelu-lomake fieldset + fieldset legend { box-sizing: border-box; padding-top: 30px; }
.palvelu-lomake__johdanto { margin: 0 0 22px; color: var(--palvelu-himmea); font-size: 14px; }
.palvelu-lomake__kentta { margin-top: 20px; }
.palvelu-lomake__rivi { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.palvelu-lomake label { display: block; margin-bottom: 7px; color: var(--palvelu-teksti); font-size: 14px; font-weight: bold; line-height: 1.45; }
.palvelu-lomake__valinnainen { color: var(--palvelu-himmea); font-size: 12px; font-weight: normal; }
.palvelu-lomake__ohje { display: block; margin: -1px 0 8px; color: var(--palvelu-himmea); font-size: 12px; line-height: 1.5; }
.palvelu-lomake input[type='text'],
.palvelu-lomake input[type='email'],
.palvelu-lomake input[type='url'],
.palvelu-lomake input[type='tel'],
.palvelu-lomake textarea,
.palvelu-lomake select { box-sizing: border-box; width: 100%; min-height: 48px; padding: 12px 14px; border: 1px solid #b9ccd5; border-radius: 10px; outline: 0; background: #fff; color: var(--palvelu-teksti); font: inherit; font-size: 15px; line-height: 1.5; transition: border-color .15s ease, box-shadow .15s ease; }
.palvelu-lomake textarea { min-height: 130px; resize: vertical; }
.palvelu-lomake input:focus,
.palvelu-lomake textarea:focus,
.palvelu-lomake select:focus { border-color: var(--palvelu-sininen); box-shadow: 0 0 0 3px rgba(8, 110, 157, .13); }
.palvelu-lomake input::placeholder,
.palvelu-lomake textarea::placeholder { color: #8b9ca5; opacity: 1; }
.palvelu-lomake__toiminnot { display: flex; flex-wrap: wrap; gap: 14px 20px; align-items: center; margin-top: 32px; padding-top: 26px; border-top: 1px solid var(--palvelu-raja); }
.palvelu-lomake__turva { flex: 1 1 260px; margin: 0; color: var(--palvelu-himmea); font-size: 12px; }
.palvelu-lomake__turva::before { margin-right: 6px; color: var(--palvelu-vihrea); content: '\2713'; font-weight: bold; }
.palvelu-lomake__ansa { position: absolute !important; left: -10000px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; }
.palvelu-lomaketuki { position: sticky; top: 24px; display: grid; gap: 18px; }
.palvelu-tukikortti { padding: 25px; border: 1px solid var(--palvelu-raja); border-radius: 15px; background: #fff; box-shadow: 0 10px 25px rgba(37, 70, 87, .06); }
body.palvelusivu #sisalto .palvelu-tukikortti h2,
body.palvelusivu #sisalto .palvelu-tukikortti h3 { margin: 0 0 13px; font-size: 23px; }
.palvelu-tukikortti p { margin: 0; color: var(--palvelu-himmea); font-size: 13px; }
.palvelu-tukikortti ol { margin: 0; padding: 0; list-style: none; counter-reset: palvelu-tukivaihe; }
.palvelu-tukikortti li { position: relative; min-height: 31px; margin: 0; padding: 2px 0 15px 42px; color: var(--palvelu-himmea); font-size: 13px; }
.palvelu-tukikortti li:last-child { padding-bottom: 0; }
.palvelu-tukikortti li::before { position: absolute; top: 0; left: 0; display: grid; place-items: center; width: 29px; height: 29px; border-radius: 8px; background: var(--palvelu-oranssi-vaalea); color: var(--palvelu-oranssi); counter-increment: palvelu-tukivaihe; content: counter(palvelu-tukivaihe); font-weight: bold; }
.palvelu-tukikortti--tumma { border-color: transparent; background: var(--palvelu-sininen-tumma); color: #fff; }
body.palvelusivu #sisalto .palvelu-tukikortti--tumma h2,
body.palvelusivu #sisalto .palvelu-tukikortti--tumma h3 { color: #fff; }
.palvelu-tukikortti--tumma p { color: rgba(255, 255, 255, .82); }
.palvelu-paluulinkki { display: inline-flex; align-items: center; gap: 7px; color: var(--palvelu-sininen-tumma); font-size: 13px; font-weight: bold; text-decoration: none; }
.palvelu-paluulinkki::before { content: '\2190'; }
.palvelu-paluulinkki:hover { color: var(--palvelu-oranssi); }

/* Palveluiden lomake- ja yhteydenottokuittaukset. */
.palvelu-kuittaus { position: relative; overflow: hidden; min-height: 560px; padding-block: 54px 72px; background: radial-gradient(circle at 86% 8%, rgba(123, 211, 255, .42), transparent 34%), linear-gradient(180deg, #fff 0%, #f5fafc 100%); }
.palvelu-kuittaus::after { position: absolute; right: -100px; bottom: -245px; width: 470px; height: 470px; border-radius: 50%; background: rgba(243, 99, 22, .07); content: ''; }
.palvelu-kuittaus__sisus { position: relative; z-index: 1; }
.palvelu-kuittaus__kortti { max-width: 720px; margin-inline: auto; padding: 34px 0; text-align: center; }
.palvelu-kuittaus__merkki { display: grid; place-items: center; width: 68px; height: 68px; margin: 0 auto 22px; border-radius: 20px; background: var(--palvelu-oranssi-vaalea); color: var(--palvelu-oranssi); font-size: 34px; font-weight: bold; box-shadow: 0 9px 20px rgba(243, 99, 22, .12); }
body.palvelusivu #sisalto .palvelu-kuittaus h1 { margin: 0 0 15px; font-size: clamp(39px, 5vw, 57px); line-height: 1.08; }
.palvelu-kuittaus__ingressi { max-width: 570px; margin: 0 auto; color: var(--palvelu-himmea); font-size: 18px; }
.palvelu-kuittaus__seuraava { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 15px; align-items: start; max-width: 580px; margin: 30px auto 0; padding: 20px 22px; border-radius: 13px; background: var(--palvelu-sininen-vaalea); text-align: left; }
.palvelu-kuittaus__seuraava-merkki { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; background: #fff; color: var(--palvelu-vihrea); font-weight: bold; box-shadow: 0 5px 14px rgba(37, 70, 87, .08); }
body.palvelusivu #sisalto .palvelu-kuittaus__seuraava h2 { margin: 0 0 4px; font-size: 21px; }
.palvelu-kuittaus__seuraava p { margin: 0; color: var(--palvelu-himmea); font-size: 14px; }
.palvelu-kuittaus__toiminnot { display: flex; flex-wrap: wrap; justify-content: center; gap: 11px; margin-top: 28px; }

.palvelu-ukk { max-width: 840px; margin-inline: auto; }
.palvelu-ukk details { border-bottom: 1px solid var(--palvelu-raja); }
.palvelu-ukk summary { display: flex; align-items: center; justify-content: space-between; gap: 17px; padding: 19px 0; color: var(--palvelu-teksti); font-size: 17px; font-weight: bold; cursor: pointer; list-style: none; }
.palvelu-ukk summary::-webkit-details-marker { display: none; }
.palvelu-ukk summary::after { display: grid; flex: 0 0 28px; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--palvelu-sininen-vaalea); color: var(--palvelu-sininen); content: '+'; }
.palvelu-ukk details[open] summary::after { content: '−'; }
.palvelu-ukk__vastaus { padding: 0 44px 20px 0; color: var(--palvelu-himmea); font-size: 14px; }
.palvelu-ukk__vastaus p:first-child { margin-top: 0; }
.palvelu-ukk__vastaus li { margin-bottom: 6px; }

.palvelu-loppunosto { padding-block: 66px; background: var(--palvelu-sininen-tumma); color: #fff; text-align: center; }
body.palvelusivu #sisalto .palvelu-loppunosto h2 { max-width: 720px; margin: 0 auto 12px; color: #fff !important; font-size: clamp(31px, 4vw, 45px); }
.palvelu-loppunosto p { max-width: 680px; margin: 0 auto 24px; color: rgba(255, 255, 255, .83); font-size: 16px; }
.palvelu-footer { padding: 35px 38px; }

@media (prefers-reduced-motion: reduce) {
	.palvelu-painike { transition: none; }
}

@media (max-width: 900px) {
	.palvelu-hero__ruudukko,
	.palvelu-kaksipalsta,
	.palvelu-esittely,
	.palvelu-yhteydenotto,
	.palvelu-lomakeasettelu { grid-template-columns: 1fr; }
	.palvelu-hero__ruudukko { gap: 36px; }
	.palvelu-hero--tiivis .palvelu-hero__ruudukko { grid-template-columns: 1fr; }
	.palvelu-korttirivi,
	.palvelu-vaiheet { grid-template-columns: 1fr; gap: 13px; }
	.palvelu-hyodyt { grid-template-columns: 1fr 1fr; }
	.palvelu-henkilo { width: min(300px, 100%); }
	.palvelu-lomaketuki { position: static; grid-template-columns: 1fr 1fr; }
	.palvelu-vaihe { padding: 18px 18px 18px 58px; }
	.palvelu-vaihe::before { top: 17px; left: 17px; }
}

@media (max-width: 600px) {
	.palvelu-sisus { width: min(100% - 36px, 1040px); }
	.palvelu-osio { padding-block: 52px; }
	.palvelu-osio--tiivis-alku { padding-top: 42px; }
	.palvelu-hero__ruudukko { padding-block: 52px 55px; }
	body.palvelusivu #sisalto .palvelu-hero h1 { font-size: clamp(38px, 12vw, 52px); }
	.palvelu-toiminnot .palvelu-painike { width: 100%; }
	.palvelu-lupaukset { display: grid; }
	.palvelu-sivunavigaatio__sisus { justify-content: flex-start; }
	.palvelu-korttiruudukko,
	.palvelu-hinnat,
	.palvelu-hyodyt { grid-template-columns: 1fr; }
	.palvelu-kortti,
	.palvelu-hintakortti,
	.palvelu-yhteydenotto__kortti { padding: 21px; }
	.palvelu-ukk__vastaus { padding-right: 0; }
	.palvelu-footer { padding-inline: 22px; }
	.palvelu-periaate { padding: 58px 20px 20px; }
	.palvelu-periaate::before { top: 17px; left: 20px; }
	.palvelu-yhteenveto { grid-template-columns: 1fr; padding: 20px; }
	.palvelu-lomake { padding: 22px; }
	.palvelu-lomake__rivi,
	.palvelu-lomaketuki { grid-template-columns: 1fr; }
	.palvelu-lomake__toiminnot .palvelu-painike { width: 100%; }
	.palvelu-kuittaus { min-height: 0; padding-block: 38px 48px; }
	.palvelu-kuittaus__kortti { padding: 28px 0; }
	.palvelu-kuittaus__seuraava { grid-template-columns: 1fr; padding: 19px; }
	.palvelu-kuittaus__toiminnot .palvelu-painike { width: 100%; }
}

/* Hintahaun kolmisarakkeisen taulukon ulkoasupilotti. */
.hakusanataulukko-kehys {
	margin: 30px 0 40px;
	overflow-x: auto;
	border: 1px solid #dfe5e8;
	border-radius: 12px;
	background: #fff;
	box-shadow: 0 2px 8px rgba(37, 70, 87, .12);
	-webkit-overflow-scrolling: touch;
}

table.hakusanoja--vertailu {
	width: 100%;
	min-width: 680px;
	margin: 0;
	border-collapse: separate;
	border-spacing: 0;
	box-shadow: none;
}

table.hakusanoja--vertailu col.hakusanoja--vertailu__hakusana {
	width: 31%;
}

table.hakusanoja--vertailu col.hakusanoja--vertailu__maara {
	width: 34.5%;
}

/* Nelisarakkeinen hintahakutaulukko, jossa hakutermi ilman hintaviittausta
   on omassa sarakkeessaan. Saannot eivat muuta vanhoja taulukoita. */
table.hakusanoja--vertailu.hakusanoja--vertailu--neljasarakkeinen {
	min-width: 860px;
}

table.hakusanoja--vertailu.hakusanoja--vertailu--neljasarakkeinen col.hakusanoja--vertailu__hakusana {
	width: 28%;
}

table.hakusanoja--vertailu.hakusanoja--vertailu--neljasarakkeinen col.hakusanoja--vertailu__maara {
	width: 22%;
}

/* Uuden sarakkeen voi piilottaa lisaaamalla taulukolle luokan
   "piilota-ilmanhintaa". Hakutermit jaavat silti HTML-lahdekoodiin. */
table.hakusanoja--vertailu.piilota-ilmanhintaa .ilmanhintaa {
	display: none;
}

table.hakusanoja--vertailu thead th {
	padding: 13px 15px;
	border-right: 1px solid rgba(255, 255, 255, .52);
	border-bottom: 1px solid rgba(255, 255, 255, .42);
	background: linear-gradient(135deg, #fa4f22 0%, #ff6a3d 100%);
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.35;
	text-align: center;
	vertical-align: middle;
}

table.hakusanoja--vertailu thead tr:first-child th:first-child {
	border-top-left-radius: 11px;
	text-align: left;
}

table.hakusanoja--vertailu thead tr:first-child th:last-child {
	border-top-right-radius: 11px;
}

table.hakusanoja--vertailu thead tr:nth-child(2) th {
	padding-block: 7px;
	background: linear-gradient(135deg, #ff8d6e 0%, #ff9c81 100%);
	font-size: 13px;
}

table.hakusanoja--vertailu .hakusanoja--vertailu__esimerkki {
	display: block;
	margin-top: 3px;
	font-size: 11px;
	font-weight: 400;
	line-height: 1.35;
	opacity: .92;
}

table.hakusanoja--vertailu tbody tr.hakusanoja--vertailu__selite td {
	padding-block: 11px;
	color: #5b666b;
	font-size: 13px;
	line-height: 1.45;
	vertical-align: top;
}

table.hakusanoja--vertailu tbody tr.hakusanoja--vertailu__selite td:nth-child(n + 2) {
	text-align: center;
}

table.hakusanoja--vertailu .hakusanoja--vertailu__selitesisalto {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	text-align: center;
}

table.hakusanoja--vertailu .hakusanoja--vertailu__info {
	display: inline-block;
	width: 17px;
	height: 17px;
	margin: 0;
	border: 1px solid #f06a45;
	border-radius: 50%;
	color: #e95c37;
	font-family: Arial, sans-serif;
	font-size: 11px;
	font-weight: 700;
	font-style: normal;
	line-height: 16px;
	text-align: center;
}

table.hakusanoja--vertailu thead th:last-child,
table.hakusanoja--vertailu tbody td:last-child {
	border-right: 0;
}

table.hakusanoja--vertailu tbody tr {
	background: #fff;
}

table.hakusanoja--vertailu tbody tr:nth-child(odd) {
	background: #f8f9fa;
}

table.hakusanoja--vertailu tbody tr:hover {
	background: #fffaf6;
}

table.hakusanoja--vertailu tbody td {
	padding: 8px 15px;
	border-right: 1px solid #e3e7e9;
	border-bottom: 1px solid #e3e7e9;
	color: #222;
	font-size: 14px;
	line-height: 1.4;
}

table.hakusanoja--vertailu tbody td:nth-child(n + 2) {
	font-variant-numeric: tabular-nums;
	text-align: center;
}

table.hakusanoja--vertailu tbody tr.valiotsikko3 {
	background: linear-gradient(90deg, #22a85d 0%, #2dbb69 100%);
}

table.hakusanoja--vertailu tbody tr.valiotsikko3:hover {
	background: linear-gradient(90deg, #22a85d 0%, #2dbb69 100%);
}

table.hakusanoja--vertailu tbody tr.valiotsikko3 td {
	padding: 10px 15px;
	border-right: 0;
	border-bottom-color: #239854;
}

body.artikkeli table.hakusanoja--vertailu tbody tr.valiotsikko3 h3 {
	margin: 0;
	color: #fff;
	font-family: 'Noto Sans', sans-serif;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.35;
}

table.hakusanoja--vertailu tbody tr:last-child td {
	border-bottom: 0;
}

@media (max-width: 600px) {
	table.hakusanoja--vertailu {
		min-width: 640px;
	}

	table.hakusanoja--vertailu thead th,
		table.hakusanoja--vertailu tbody td {
		padding-inline: 12px;
	}
}

/* Valmiiden hakusanatutkimusten hakemistosivu */
.valmiit-hakemisto__ingressi {
	max-width: 850px;
	font-size: 20px;
	line-height: 1.55;
}

.valmiit-tutkimukset {
	margin-top: 36px;
}

.valmiit-tutkimukset > h2 {
	margin-bottom: 18px;
}

.valmiit-tutkimukset__ruudukko {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px;
}

.valmiit-tutkimuskortti {
	display: flex;
	flex-direction: column;
	min-width: 0;
	padding: 24px;
	border: 1px solid #dce5e9;
	border-top: 5px solid #27aa62;
	border-radius: 12px;
	background: #fff;
	box-shadow: 0 5px 18px rgba(37, 70, 87, .1);
}

.valmiit-tutkimuskortti--hintahaut {
	border-top-color: #f36a3f;
}

.valmiit-tutkimuskortti__ylatunniste {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 6px 12px;
	margin-bottom: 12px;
	color: #617078;
	font-family: 'Noto Sans', sans-serif;
	font-size: 11px;
	line-height: 1.35;
}

.valmiit-tutkimuskortti__ylatunniste > span {
	font-weight: 700;
	letter-spacing: .045em;
	text-transform: uppercase;
}

.valmiit-tutkimuskortti__ylatunniste strong {
	color: #3f4c52;
	font-weight: 600;
}

body.artikkeli .valmiit-tutkimuskortti h3 {
	margin: 0 0 12px;
	font-family: 'Noto Sans', sans-serif;
	font-size: 21px;
	line-height: 1.3;
}

.valmiit-tutkimuskortti h3 a {
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

.valmiit-tutkimuskortti p {
	margin: 0 0 18px;
	color: #435158;
	font-size: 14px;
	line-height: 1.6;
}

.valmiit-tutkimuskortti__aiheet {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
	margin: 0 0 22px;
	padding: 0;
	list-style: none;
}

.valmiit-tutkimuskortti__aiheet li {
	margin: 0;
	padding: 5px 10px;
	border-radius: 999px;
	background: #eff8f3;
	color: #287047;
	font-family: 'Noto Sans', sans-serif;
	font-size: 11px;
	font-weight: 600;
}

.valmiit-tutkimuskortti--hintahaut .valmiit-tutkimuskortti__aiheet li {
	background: #fff2ed;
	color: #a74428;
}

.valmiit-tutkimuskortti__linkki {
	align-self: flex-start;
	margin-top: auto;
	padding: 9px 14px;
	border-radius: 7px;
	background: #167cb3;
	color: #fff !important;
	font-family: 'Noto Sans', sans-serif;
	font-size: 13px;
	font-weight: 700;
	text-decoration: none !important;
}

.valmiit-tutkimuskortti__linkki:hover,
.valmiit-tutkimuskortti__linkki:focus-visible {
	background: #0e6796;
}

.valmiit-tutkimuskortti__linkki:focus-visible {
	outline: 3px solid rgba(22, 124, 179, .3);
	outline-offset: 3px;
}

@media (max-width: 720px) {
	.valmiit-tutkimukset__ruudukko {
		grid-template-columns: 1fr;
	}

	.valmiit-hakemisto__ingressi {
		font-size: 18px;
	}
}