/* IBM Plex, isannoity itse. Ei ulkopuolisia pyyntoja. OFL-1.1. */
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:400;
  font-display:swap;src:url("/fontit/ibm-plex-sans-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:600;
  font-display:swap;src:url("/fontit/ibm-plex-sans-latin-600-normal.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:700;
  font-display:swap;src:url("/fontit/ibm-plex-sans-latin-700-normal.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;
  font-display:swap;src:url("/fontit/ibm-plex-mono-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;
  font-display:swap;src:url("/fontit/ibm-plex-mono-latin-500-normal.woff2") format("woff2")}

/* Fixcom Oy, yksi tyylitiedosto. Ei kehystä. */

:root{
  --mus:#0f1519; --harmaa:#55626c; --vaalea:#eef3f5; --raja:#d7e0e5;
  /* Korosto on tummennettu 7.10.2026 saavutettavuuden takia: aiempi
     #0086a8 jai linkkitekstina ja nappien taustana alle WCAG AA -rajan
     (4,0-4,2:1). #007796 antaa sivun pohjaa vasten 4,9:1, harmaata
     korttia vasten 4,6:1 ja valkoiselle tekstille 5,2:1. */
  --korosto:#007796; --korosto-tumma:#00647e; --valkoinen:#fff;
  /* Pohja ei ole puhdas valkoinen. Se antaa korteille ja lomakkeelle
     tilaa nousta esiin ilman etta jokaiseen pitaa lisata reunaviiva. */
  --pohja:#f7fafb;
  /* Korostuskyna otsikon sanan taakse */
  --tussi:#9fdff0; --korosto-vaalea:#5ec8e4;
  --varjo:0 1px 2px rgba(15,21,25,.05), 0 8px 24px -12px rgba(15,21,25,.16);
  --varjo-nosto:0 2px 4px rgba(15,21,25,.06), 0 18px 40px -16px rgba(0,134,168,.28);
  --varoitus:#8a5600; --varoitus-pohja:#fdf3e0;
  /* Lomakekentan reuna vaaleaa lohkotaustaa vasten: --raja antoi 1,19:1,
     WCAG 1.4.11 vaatii kayttoliittymaelementilta 3:1. */
  --kentanraja:#7e8894;
  --leveys:1400px; --palkki:82px; --mitta:66ch;
  --sans:"IBM Plex Sans",ui-sans-serif,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}

*{box-sizing:border-box}
/* scroll-padding-top: ankkurilinkki (#yhteydenotto) vierittaisi kohteen
   kiinnitetyn ylapalkin alle. Arvo vastaa palkin korkeutta. */
html{scroll-behavior:smooth;scroll-padding-top:80px}
/* Liikkeen vahennys paalla: ei animoitua vieritysta. Yli 2000 pikselin
   animaatio on vestibulaarihairiolle konkreettinen haitta. */
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--pohja);color:var(--mus);
     font:17px/1.65 var(--sans);-webkit-font-smoothing:antialiased}

.rajaus{max-width:var(--leveys);margin:0 auto;padding:0 32px}
@media (max-width:760px){.rajaus{padding:0 20px}}

h1{font-size:clamp(31px,5vw,46px);line-height:1.08;letter-spacing:-.03em;margin:0 0 16px;text-wrap:balance}
h2{font-size:clamp(22px,3vw,29px);line-height:1.18;letter-spacing:-.02em;margin:44px 0 14px;text-wrap:balance}
h3{font-size:19px;margin:28px 0 8px}
p,ul,ol{max-width:var(--mitta)}
a{color:var(--korosto)}
a:hover{color:var(--korosto-tumma)}

address{font-style:normal;line-height:1.7;max-width:var(--mitta)}

.ohita{position:absolute;left:-9999px}
.ohita:focus{left:8px;top:8px;z-index:99;background:var(--mus);color:#fff;padding:10px 16px}

/* YKSI korttimuoto koko sivustolla.
   Sivulla oli aiemmin neljä eri korttityylia ja kolme eri taustavaria:
   gradienttikortteja, varjollisia laatikoita, savytettyja kaistoja ja
   pystyviivoilla erotettuja palstoja. Nyt kaikki laatikot ovat samaa
   muotoa, ja ero tehdaan vain silla onko kortti klikattava:
   klikattavassa on ylareunan varinauha ja nuolilinkki, faktakortissa
   ei kumpaakaan. */
.widget{background:var(--valkoinen);border:1px solid var(--raja);
  border-radius:6px;box-shadow:var(--varjo);padding:24px 26px 24px}

/* Miksi Fixcom. Oma taysleveä osio omalla taustavarillaan, jotta se
   erottuu ymparoivista vaaleista lohkoista ilman erotinviivoja.
   Sama sininen kuin karjessa, ei uutta savya: sivulla on jo tarpeeksi
   erilaisia taustoja takana. */
.etu-miksi{width:100vw;margin:64px calc(50% - 50vw) 0;
  background:#00596f;color:#fff;padding:66px 0 60px}
.miksi-sisalto{max-width:var(--leveys);margin:0 auto;padding:0 32px}
.miksi-ylaosa{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:56px;align-items:center}
.miksi-teksti{min-width:0}
.miksi-teksti h2{margin:0 0 18px;color:#fff}
.miksi-teksti p{max-width:52ch;margin:0 0 15px;font-size:17px;line-height:1.65;
  color:#cfe6ee}
.miksi-teksti p:last-child{margin-bottom:0}
.miksi-kuva{min-width:0}
.miksi-kuva img{width:100%;height:auto;display:block;border-radius:6px;
  aspect-ratio:4/3;object-fit:cover;
  box-shadow:0 2px 8px rgba(0,0,0,.2), 0 30px 60px -28px rgba(0,0,0,.55)}

.lupaukset{list-style:none;margin:58px 0 0;padding:0;max-width:none;
  display:grid;grid-template-columns:repeat(3,1fr);gap:40px;
  border-top:1px solid rgba(255,255,255,.18);padding-top:48px}
.lupaukset li{max-width:none;display:flex;flex-direction:column;
  align-items:center;text-align:center;gap:8px}
.lupaukset li::before{display:none}
.lupaus-ikoni{width:62px;height:62px;margin-bottom:10px;border-radius:50%;
  background:rgba(255,255,255,.12);display:grid;place-items:center}
.lupaus-ikoni::before{content:"";width:30px;height:30px;background:#fff;
  -webkit-mask:var(--i) center/contain no-repeat;mask:var(--i) center/contain no-repeat}
.lupaukset strong{font-size:18.5px;line-height:1.3;
  letter-spacing:-.018em;color:#fff;max-width:20ch}
.lupaus-teksti{font-size:15px;line-height:1.6;color:#cfe6ee;max-width:34ch}
@media (max-width:900px){
  .etu-miksi{margin-top:44px;padding:44px 0 44px}
  .miksi-sisalto{padding:0 20px}
  .miksi-ylaosa{grid-template-columns:1fr;gap:28px}
  .miksi-kuva{order:-1}
  .miksi-kuva img{aspect-ratio:16/9}
  .lupaukset{grid-template-columns:1fr;gap:30px;margin-top:40px;padding-top:36px}
}

/* Tekniikkanauha. Ei omaa taustaa eika kehysta: se on rivi logoja,
   ei osio. Nimilappu on pienena nauhan ALLA, ei otsikkona sen ylla. */
.tekniikat{margin:66px 0 0}
.nauha{display:flex;overflow:hidden;
  width:100vw;margin-left:calc(50% - 50vw);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.nauha-rata{display:flex;flex:0 0 auto;align-items:center;gap:60px;
  margin:0;padding:0 30px 0 0;list-style:none;max-width:none;
  animation:nauhavieri 46s linear infinite}
.nauha-rata li{max-width:none;display:flex;align-items:center;gap:11px;
  white-space:nowrap;font-size:16px;font-weight:650;color:var(--harmaa);
  letter-spacing:-.01em}
.logo-merkki{flex:0 0 auto;width:22px;height:22px;background:var(--harmaa);
  -webkit-mask:var(--l) center/contain no-repeat;mask:var(--l) center/contain no-repeat}
.tekniikat-otsikko{margin:14px 0 0;max-width:none;text-align:center;
  font-size:13px;color:var(--harmaa)}
@keyframes nauhavieri{to{transform:translateX(-100%)}}
@media (prefers-reduced-motion:reduce){.nauha-rata{animation:none}}
@media (max-width:760px){
  .nauha-rata{gap:42px}
  .nauha-rata li{font-size:15px}
}

/* Ylapalkki */
/* Ylapalkki EI ole oletuksena kiinnitetty. Kapealla naytolla navigaatio
   kaareytyy kolmelle riville, jolloin palkki on 251px korkea. Kiinnitettyna
   se peittaisi 320x256 nakymassa (WCAG 1.4.10, 1280x1024 nelinkertaisella
   suurennuksella) 98 prosenttia ruudusta, eika sisaltoon paasisi lainkaan
   millaan vierityksella. Kiinnitys otetaan kayttoon vasta kun palkki on
   matala ja ruudussa on pystysuuntaa. */
.ylapalkki{background:var(--valkoinen);border-radius:14px;
  box-shadow:var(--varjo);margin:14px auto 0;max-width:calc(var(--leveys) - 8px);
  /* Positio ja z-indeksi, jotta ylos nostettu karki ei peita palkkia.
     Sticky-saanto alempana korvaa taman leveilla naytoilla. */
  position:relative;z-index:20}

.ylapalkki .rajaus{padding-left:26px;padding-right:20px}
@media (max-width:760px){
  .ylapalkki{border-radius:0;margin:0;box-shadow:none;
    border-bottom:1px solid var(--raja)}
  .ylapalkki .rajaus{padding-left:24px;padding-right:24px}
}
@media (min-width:761px) and (min-height:500px){
  .ylapalkki{position:sticky;top:0;z-index:20}
}
@media (max-width:760px),(max-height:499px){
  html{scroll-padding-top:12px}
}
.ylapalkki .rajaus{display:flex;align-items:center;gap:20px;min-height:68px;flex-wrap:wrap}
.logo{display:block;line-height:0;flex:none}
.logo img{display:block;width:150px;height:auto}
@media (max-width:760px){.logo img{width:124px}}
.ylapalkki nav{flex:1}
.ylapalkki ul{list-style:none;display:flex;flex-wrap:wrap;gap:4px 13px;margin:0;padding:0;max-width:none}
.ylapalkki a{text-decoration:none;font-size:15px;color:var(--harmaa)}
/* Vari yksin ei riita: harmaan ja korostevarin luminanssiero on 1,01:1,
   joten harmaasavyna tai varisokealle valikosta ei nakisi missa ollaan. */
.ylapalkki a:hover,.ylapalkki a[aria-current]{color:var(--korosto);
  text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:2px}
.ylapalkki a[aria-current]{font-weight:700}
/* Kaksi pilleria ylapalkissa. Etatuki on taytetty, soitto on avoin:
   sama muoto, eri paino, jotta kumpikin nayttaa napilta mutta soitto ei
   kilpaile etatuen kanssa. Tayton vari on --korosto-tumma eika
   --korosto, koska valkoinen 15 pikselin teksti jaa vaaleammalla
   savylla suhteeseen 4,26:1 ja vaatimus on 4,5:1. */
.ylapalkki .soita{font-weight:700;text-decoration:none;white-space:nowrap;
  border:1.5px solid var(--korosto);padding:8px 18px;border-radius:999px;
  color:var(--korosto)}
.ylapalkki .soita:hover{border-color:var(--korosto-tumma);
  color:var(--korosto-tumma);text-decoration:none}
.ylaoikea{display:flex;align-items:center;gap:14px;white-space:nowrap}
/* Valitsimessa on oltava .ylapalkki mukana. Pelkka .etatuki on
   valjempi kuin ylempana oleva .ylapalkki a, jolloin harmaa varjasi
   valkoisen ja teksti katosi siniseen pilleriin. */
.ylapalkki .etatuki{font-size:15px;font-weight:650;white-space:nowrap;
  text-decoration:none;background:var(--korosto-tumma);color:#fff;
  padding:8px 18px;border-radius:999px;transition:background .18s ease}
.ylapalkki .etatuki:hover,
.ylapalkki .etatuki[aria-current]{background:#00485c;color:#fff;
  text-decoration:none}
@media (prefers-reduced-motion:reduce){.etatuki{transition:none}}

/* Kesken-banneri, ei nay tuotannossa */
.kesken-banneri{max-width:none;background:var(--varoitus-pohja);border:1px solid var(--varoitus);
  color:var(--varoitus);padding:12px 15px;margin:18px 0 0;font-size:14px;border-radius:4px}
.kesken-banneri p{margin:0;max-width:none;font-weight:600}
.kesken-banneri ul{margin:8px 0 0;padding-left:20px}
.kesken-banneri li{margin:4px 0;font-weight:400}

main{padding:44px 0 72px}

/* Palvelusivu */
.karki{border-bottom:1px solid var(--raja);padding-bottom:26px;margin-bottom:8px}
/* Palvelusivun karki on sama sininen kaista kuin etusivulla, jotta
   palvelusivu ei nayta eri sivustolta. Kaista nousee ylapalkin alle
   samalla tavalla kuin etusivulla. */
.palvelukarki,.tekstikarki{width:100vw;
  margin:calc(-1 * (var(--palkki) + 44px)) calc(50% - 50vw) 44px;
  background:#00596f;color:#fff;
  padding:calc(var(--palkki) + 56px) 0 56px}
.tekstikarki-sisalto{max-width:var(--leveys);margin:0 auto;padding:0 32px}
.tekstikarki h1{margin:0;color:#fff;max-width:20ch}
.karki-tiivistelma{font-size:19px;line-height:1.55;color:#cfe6ee;
  max-width:56ch;margin:16px 0 0}
.tekstikarki .murupolku{margin:0 0 16px}
.tekstikarki .murupolku ol{color:#a8c9d4}
.tekstikarki .murupolku a{color:#cfe6ee}
.tekstikarki .murupolku li+li::before{color:#5d8b9b}
.palvelukarki-sisalto{max-width:var(--leveys);margin:0 auto;padding:0 32px;
  display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
  gap:48px;align-items:center}
.palvelukarki .karki-teksti{min-width:0}
.palvelukarki h1{margin:0 0 16px;color:#fff}
.palvelukarki .murupolku{margin:0 0 16px}
.palvelukarki .murupolku ol{color:#a8c9d4}
.palvelukarki .murupolku a{color:#cfe6ee}
.palvelukarki .murupolku li+li::before{color:#5d8b9b}
/* Nappi sinisella pohjalla: valkoinen laatikko erottuu, korostevari ei. */
.palvelukarki .nappi{background:var(--valkoinen);color:var(--korosto-tumma);
  box-shadow:0 2px 6px rgba(0,0,0,.18), 0 16px 34px -18px rgba(0,0,0,.5)}
.palvelukarki .nappi::after{background:rgba(0,100,126,.14);color:var(--korosto-tumma)}
.palvelukarki .nappi:hover{background:var(--valkoinen);color:#00485c}
/* Ilman kuvaa kaksi palstaa jattaisi puolet karjesta tyhjaksi. */
.palvelukarki-yksin .palvelukarki-sisalto{grid-template-columns:1fr;max-width:900px}
@media (max-width:900px){
  .palvelukarki,.tekstikarki{margin:0 calc(50% - 50vw) 30px;padding:26px 0 32px}
  .tekstikarki-sisalto{padding:0 20px}
  .palvelukarki-sisalto{grid-template-columns:1fr;gap:24px;padding:0 20px}
  .palvelukarki .palvelukuva{order:-1}
}

.lupaus{font-size:19px;line-height:1.55;color:#cfe6ee;max-width:46ch;margin:0 0 26px}
/* Nappi on pilleri ja siina on nuoliympyra. Nuoli kertoo etta tasta
   paasee eteenpain, ja se liikkuu kun hiiri on paalla. */
.nappi{display:inline-flex;align-items:center;gap:12px;
  background:var(--korosto);color:#fff;text-decoration:none;
  font-weight:650;padding:12px 12px 12px 24px;border-radius:999px;font-size:16px;
  box-shadow:0 1px 2px rgba(15,21,25,.08), 0 10px 24px -12px rgba(0,134,168,.5);
  transition:transform .18s cubic-bezier(.2,.8,.2,1), box-shadow .18s ease,
             background .18s ease}
.nappi::after{content:"\203A";display:grid;place-items:center;
  width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,.22);
  font-size:19px;line-height:1;padding-bottom:3px;
  transition:transform .18s cubic-bezier(.2,.8,.2,1)}
.nappi:hover{background:var(--korosto-tumma);color:#fff;transform:translateY(-2px);
  box-shadow:0 2px 4px rgba(15,21,25,.1), 0 16px 32px -14px rgba(0,134,168,.6)}
.nappi:hover::after{transform:translateX(3px)}
.nappi.toissijainen{background:var(--valkoinen);color:var(--korosto);
  border:1.5px solid var(--korosto);
  box-shadow:0 1px 2px rgba(15,21,25,.05)}
.nappi.toissijainen::after{background:rgba(0,134,168,.12)}
.nappi.toissijainen:hover{background:var(--valkoinen);color:var(--korosto-tumma);
  border-color:var(--korosto-tumma)}
@media (prefers-reduced-motion:reduce){
  .nappi,.nappi::after{transition:none}
  .nappi:hover{transform:none}
  .nappi:hover::after{transform:none}
}

/* Leipateksti ja yhteydenottokortti rinnakkain. Kortti jaa nakyviin
   kun tekstia vieritetaan, koska puhelinnumero on se mita talta sivulta
   useimmiten haetaan. */
.palvelurunko{display:grid;grid-template-columns:minmax(0,var(--mitta)) minmax(0,1fr);
  gap:56px;align-items:start;margin-top:30px}
.palveluteksti{min-width:0}
.palveluteksti>*:first-child{margin-top:0}
.palvelurail{min-width:0;position:sticky;top:96px}
.railkortti{background:var(--valkoinen);border:1px solid var(--raja);
  border-radius:6px;box-shadow:var(--varjo);padding:24px 26px 26px}
.railotsikko{margin:0 0 10px;font-weight:650;font-size:15px;color:var(--harmaa);
  letter-spacing:.02em;text-transform:uppercase;max-width:none}
.railnumero{margin:0;font:700 27px/1.2 var(--sans);letter-spacing:-.02em;max-width:none}
.railnumero a{text-decoration:none;color:var(--mus)}
.railnumero a:hover{color:var(--korosto)}
.railaika{margin:4px 0 14px;font-size:14.5px;color:var(--harmaa);max-width:none}
.railteksti{margin:0 0 18px;font-size:15px;line-height:1.6;color:var(--harmaa);max-width:none}
.railnappi{margin:0;max-width:none}
.railnappi .nappi{width:100%;justify-content:space-between;font-size:15.5px;
  padding:11px 11px 11px 20px}
@media (max-width:1000px){
  .palvelurunko{grid-template-columns:1fr;gap:34px}
  .palvelurail{position:static}
  .railkortti{max-width:420px}
}

.prosessi ol{list-style:none;margin:0;padding:0;max-width:none;counter-reset:askel;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px}
.prosessi li{counter-increment:askel;max-width:none;margin:0;
  background:var(--valkoinen);border:1px solid var(--raja);border-radius:6px;
  padding:22px 24px 24px;box-shadow:var(--varjo);font-size:15.5px;line-height:1.6;color:var(--harmaa)}
.prosessi li::before{content:counter(askel);display:grid;place-items:center;
  width:30px;height:30px;border-radius:50%;background:var(--vaalea);
  color:var(--korosto);font:700 15px/1 var(--mono);margin-bottom:14px}
.prosessi li strong{display:block;color:var(--mus);font-size:17px;
  line-height:1.35;margin-bottom:7px;letter-spacing:-.01em}
.konkretia,.poissulku{list-style:none;padding:0;max-width:none;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(310px,1fr));gap:2px 36px}
.konkretia li,.poissulku li{padding-left:26px;position:relative;margin-bottom:8px;
  max-width:none;line-height:1.6}
.konkretia li::before{content:"";position:absolute;left:2px;top:8px;width:11px;height:6px;
  border-left:2px solid var(--korosto);border-bottom:2px solid var(--korosto);transform:rotate(-45deg)}
.poissulku li::before{content:"\2022";position:absolute;left:4px;color:var(--harmaa);font-weight:700}

/* Poissulkulista on eri asia kuin sisaltyy-lista, ja se pitaa erottua
   siita myos silmalla. Vaalea paneeli tekee sen ilman uutta ikonia. */
.rajaus-lohko{background:var(--valkoinen);border:1px solid var(--raja);
  border-radius:6px;padding:6px 28px 26px;margin:48px 0 0;box-shadow:var(--varjo)}
.rajaus-lohko h2{margin-top:30px}
.rajaus-lohko p{max-width:none;color:var(--harmaa)}

/* Yhteydenottokehote on sama sininen kaista kuin karki, ei vaaleata
   laatikkoa omalla reunavarillaan: sivulla saa olla vain yksi
   laatikkotyyli ja yksi korostuskaista. */
.yhteyspalkki{width:100vw;margin:52px calc(50% - 50vw);
  background:#00596f;color:#fff;padding:44px 0 46px;
  border-radius:0;border-left:0}
.yhteyspalkki-sisalto{max-width:var(--leveys);margin:0 auto;padding:0 32px}
.yhteyspalkki p{max-width:none;margin:0 0 20px;font-size:19px;line-height:1.5}
.yhteyspalkki strong{display:block;font-size:23px;letter-spacing:-.02em;
  margin-bottom:6px}
.yhteyspalkki .nappi{background:var(--valkoinen);color:var(--korosto-tumma);
  box-shadow:0 2px 6px rgba(0,0,0,.18)}
.yhteyspalkki .nappi::after{background:rgba(0,100,126,.14);color:var(--korosto-tumma)}
.yhteyspalkki .nappi.toissijainen{background:transparent;color:#fff;
  border-color:rgba(255,255,255,.6);box-shadow:none}
.yhteyspalkki .nappi.toissijainen::after{background:rgba(255,255,255,.2);color:#fff}
.yhteyspalkki .nappi.toissijainen:hover{background:rgba(255,255,255,.14);
  color:#fff;border-color:#fff}
@media (max-width:760px){
  .yhteyspalkki{padding:32px 0 34px;margin-top:40px;margin-bottom:40px}
  .yhteyspalkki-sisalto{padding:0 20px}
}
.numerot{display:flex;gap:10px;flex-wrap:wrap}

.referenssi blockquote{margin:0;background:var(--vaalea);padding:24px 28px;border-radius:6px}
.referenssi p{font-size:19px;line-height:1.55;margin:0 0 12px}
.referenssi footer{color:var(--harmaa);font-size:15px}

/* Mikko puhelussa 20.9.2026: usein kysytyt eivat saa olla hallitseva
   banneri vaan pienempi ja alempana, avattavina. Siksi kevyempi kortti
   ilman varjoa ja pienempi otsikko kuin muilla osioilla. */
.ukk details{background:var(--valkoinen);border:1px solid var(--raja);
  border-radius:6px;box-shadow:none;
  padding:14px 20px;max-width:var(--mitta);margin-bottom:6px;
  transition:border-color .18s ease}
.ukk details[open]{border-color:var(--korosto-vaalea)}
/* Oma nuoli kolmion tilalle. Kaantyy kun kohta avataan, jolloin tila
   nakyy myos silloin kun kysymys on pitka ja vastaus jaa ruudun alle. */
.ukk summary{cursor:pointer;font-weight:650;font-size:16px;line-height:1.4;
  list-style:none;display:flex;align-items:center;justify-content:space-between;
  gap:18px}
.ukk summary::-webkit-details-marker{display:none}
.ukk summary::after{content:"";flex:none;width:10px;height:10px;
  border-right:2.5px solid var(--korosto);border-bottom:2.5px solid var(--korosto);
  transform:rotate(45deg) translateY(-3px);
  transition:transform .2s cubic-bezier(.2,.8,.2,1)}
.ukk details[open] summary::after{transform:rotate(225deg) translateY(-2px)}
.ukk summary:hover{color:var(--korosto)}
@media (prefers-reduced-motion:reduce){
  .ukk details,.ukk summary::after{transition:none}
}
.ukk>h2{font-size:22px;letter-spacing:-.018em;margin-top:52px}
@media (min-width:1000px){
  .ukk{display:grid;grid-template-columns:1fr 1fr;gap:10px 18px;align-items:start}
  .ukk h2{grid-column:1 / -1;margin-bottom:4px}
  .ukk details{max-width:none;margin:0}
}
.ukk details>div{margin-top:15px;padding-top:14px;color:var(--harmaa);
  font-size:15.5px;line-height:1.62;border-top:1px solid var(--raja)}


.latausnappi{margin:22px 0 26px}
.latausnappi .nappi{font-size:17px;padding:13px 24px}

/* Etusivun esittelyteksti. Sama otsikkotyyli kuin muillakin osioilla,
   ei omaa tunnistetta eika erotinviivaa: sivulla oli liikaa erilaisia
   osiotyyleja. */
.etu-esittely{margin:46px 0 0}
.etu-esittely h2{margin-top:0}
.esittelyteksti{min-width:0;display:grid;grid-template-columns:1fr 1fr;gap:44px}
.esittelyteksti p{max-width:none;margin:0}
.esittelyteksti p+p{color:var(--harmaa)}
@media (max-width:900px){
  .etu-esittely{margin-top:34px}
  .esittelyteksti{grid-template-columns:1fr;gap:16px}
}

/* Palvelusivun kuva */
.palvelukuva{margin:0;min-width:0}
.palvelukuva img{width:100%;height:auto;display:block;border-radius:20px;
  box-shadow:0 2px 6px rgba(15,21,25,.08), 0 30px 60px -28px rgba(15,21,25,.45);
  aspect-ratio:4/3;object-fit:cover}
@media (max-width:900px){.palvelukuva img{aspect-ratio:16/9}}

/* Murupolku */
.murupolku{margin:0 0 20px}
.murupolku ol{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;
  font-size:14px;color:var(--harmaa);max-width:none}
.murupolku li+li::before{content:"/";margin-right:8px;color:var(--raja)}
.murupolku a{color:var(--harmaa)}

/* Opas */
.opas .tiivistelma{font-size:19px;line-height:1.55;color:var(--mus);
  border-left:3px solid var(--korosto);padding-left:18px;margin:0 0 34px}
.opas h3{font-size:19px;margin:28px 0 8px}
.opaslista{list-style:none;margin:34px 0 0;padding:0;max-width:none}
.opaslista li{max-width:none;border-top:1px solid var(--raja);padding:18px 0}
.opaslista a{display:block;font-weight:650;font-size:18px;text-decoration:none;margin-bottom:5px}
.opaslista a:hover{text-decoration:underline}
.opaslista span{display:block;font-size:15px;line-height:1.55;color:var(--harmaa)}

.ehja{white-space:nowrap}

/* Muut palvelut, sisainen linkitys palvelusivujen valilla */
.muut-palvelut{margin-top:52px}
.muut-palvelut ul{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:16px;max-width:none}
.muut-palvelut li{max-width:none;background:var(--valkoinen);border:1px solid var(--raja);
  border-radius:6px;box-shadow:var(--varjo);padding:22px 24px}
.muut-palvelut a{display:block;font-weight:650;font-size:16.5px;text-decoration:none;margin-bottom:5px}
.muut-palvelut a:hover{text-decoration:underline}
.muut-palvelut span{display:block;font-size:14.5px;line-height:1.5;color:var(--harmaa)}

/* Lomake */
.lomakelohko{background:var(--valkoinen);padding:32px;border-radius:14px;
  box-shadow:var(--varjo);margin-top:52px}
.lomakelohko h2{margin-top:0}
.lomakeilmoitus{max-width:none;background:var(--varoitus-pohja);border:1px solid var(--varoitus);
  color:var(--varoitus);padding:12px 15px;margin:0 0 20px;border-radius:4px;font-weight:600}
.lomakeilmoitus p{margin:0;max-width:none}
.lomakeilmoitus a{color:inherit}
.hunaja{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.kentat{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:0 20px}
.lomake p{max-width:none;margin:0 0 15px}
.lomake label{display:block;font-size:14.5px;font-weight:600;margin-bottom:5px}
.lomake input,.lomake select,.lomake textarea{
  width:100%;font:16px var(--sans);padding:10px 12px;
  border:1.5px solid var(--kentanraja);border-radius:4px;background:#fff;color:var(--mus)}
.lomake input:focus,.lomake select:focus,.lomake textarea:focus{
  outline:2px solid var(--korosto);outline-offset:1px;border-color:var(--korosto)}
.lomake textarea{resize:vertical}
.lomake button{background:var(--korosto);color:#fff;border:0;font:650 16px var(--sans);
  padding:13px 30px;border-radius:4px;cursor:pointer}
.lomake button:hover{background:var(--korosto-tumma)}
.tietosuojahuomio{font-size:14px;color:var(--harmaa)}

/* Alapalkki */
/* Tumma alatunniste. Paattaa sivun ja erottaa yhteystiedot sisallosta. */
.alapalkki{background:var(--mus);color:#dfe7ec;padding:52px 0 30px;margin-top:80px}
/* Kelluva yhteydenottonappi on vasemmassa alakulmassa. Kun sivu on
   vieritetty loppuun, alatunnisteen viimeinen rivi jaisi sen alle. */
.alapalkki{padding-bottom:104px}
/* Alaosan sarakeotsikko on lohko, joten sen perassa oleva br tekisi
   ylimaaraisen tyhjan rivin. */
.alaosat strong + br{display:none}
.alapalkki .kehotus{display:grid;grid-template-columns:1.1fr 1fr;gap:18px;
  margin-bottom:48px}
.alapalkki .kehotus > div{background:rgba(255,255,255,.06);border-radius:16px;
  padding:28px 30px}
.alapalkki .kehotus h2{margin:0 0 8px;font-size:23px;color:#fff;letter-spacing:-.02em}
.alapalkki .kehotus p{margin:0 0 18px;color:#adbcc6;font-size:15px;max-width:38ch}
.alapalkki .kehotus .numero{display:inline-flex;align-items:baseline;gap:10px;
  font:500 24px/1 var(--mono);color:#fff;text-decoration:none;
  font-variant-numeric:tabular-nums}
.alapalkki .kehotus .numero span{font:400 13px/1 var(--sans);color:#adbcc6}
.alaosat{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:34px;font-size:15px}
.alaosat strong{display:block;color:var(--korosto-vaalea);font-size:13px;
  letter-spacing:.07em;text-transform:uppercase;margin-bottom:12px;font-weight:700}
.alaosat a{color:#dfe7ec;text-decoration:none}
.alaosat a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
.alaosat > div{line-height:2}
.pikkuprintti{border-top:1px solid rgba(255,255,255,.14);margin:38px 0 0;
  padding-top:18px;font-size:13.5px;color:#8fa3af;max-width:none}
@media (max-width:760px){
  .alapalkki{padding-top:36px;margin-top:52px;padding-bottom:96px}
  .alapalkki .kehotus{grid-template-columns:1fr}
  .alaosat{gap:26px}
}

:where(a,button,input,select,textarea,summary):focus-visible{outline:2px solid var(--korosto);outline-offset:2px}
/* Sinisilla kaistoilla korostevarinen kehys ei erotu taustasta (1,9:1),
   joten siella kehys on valkoinen. */
:is(.palvelukarki,.tekstikarki,.karkikuva,.yhteyspalkki,.etu-miksi) :focus-visible{outline-color:#fff}

@media (max-width:760px){
  .ylapalkki .rajaus{padding-top:12px;padding-bottom:12px}
  .ylapalkki nav{flex-basis:100%;order:3}
  main{padding:28px 0 48px}
  .lomakelohko{padding:22px 18px;margin-left:-24px;margin-right:-24px;border-radius:0}
}


/* Korostuskyna. Nostaa yhden asian otsikosta ilman etta vari huutaa. */
/* Korostus on tekstin TAKANA, ei paalla. Kaksi kerrosta: leveä pehmea
   hehku ja sen paalla tiiviimpi ydin. Molemmat sumennettu niin paljon
   ettei suorakulmion reunoja nay lainkaan, ja muoto on ellipsi eika
   laatikko. Teksti pysyy taysin terävana koska mitaan ei ole sen paalla. */

/* Korostus tulee sanan TAAKSE. Se tehdaan sadekehagradienteilla eika
   blur-suotimella: suodin jatti reunan joka nakyi laatikkona, gradientti
   haipyy lapinakyvaksi ilman reunaa. */
.tussi::before,.tussi::after{content:"";position:absolute;z-index:-1;
  pointer-events:none}
.tussi::before{left:-26%;right:-26%;top:-42%;bottom:-46%;
  background:radial-gradient(52% 50% at 50% 52%,
    rgba(94,200,228,.5) 0%, rgba(94,200,228,.3) 38%,
    rgba(94,200,228,.12) 60%, rgba(94,200,228,0) 78%)}
.tussi::after{left:-12%;right:-12%;top:2%;bottom:-6%;
  background:radial-gradient(48% 52% at 50% 54%,
    rgba(120,222,246,.42) 0%, rgba(120,222,246,.18) 46%,
    rgba(120,222,246,0) 74%)}


.tussi::before,.tussi::after{content:"";position:absolute;z-index:-1;
  pointer-events:none;background:var(--tussi)}
/* Leveä hehku, hyvin sumea */
.tussi::before{left:-.34em;right:-.34em;top:.06em;bottom:-.14em;
  border-radius:50% / 55%;filter:blur(26px);opacity:.85}
/* Tiiviimpi ydin, silti reunaton */
.tussi::after{left:-.1em;right:-.1em;top:.3em;bottom:.02em;
  border-radius:44% / 58%;filter:blur(13px);opacity:.9}
@media (prefers-reduced-motion:no-preference){
  .tussi::before{animation:tussiin .75s cubic-bezier(.2,.8,.2,1) .2s both}
  .tussi::after{animation:tussiin .75s cubic-bezier(.2,.8,.2,1) .28s both}
}
@keyframes tussiin{from{clip-path:inset(0 100% 0 0);opacity:0}
                   to{clip-path:inset(0 -40% 0 0)}}

/* ---- Etusivun karki ---- */
/* Karki kahtia: vasen puoli umpinaista Fixcomin sinista, oikea puoli
   kuvaa. Teksti on aina varin paalla, joten sen kontrasti ei riipu
   kuvasta. Kuvan vasen reuna haipyy samaan variin, jotta puoliskojen
   valiin ei jaa suoraa saumaa. */
/* Karki nousee ylapalkin ja mainin ylapehmusteen alle, jolloin valkoinen
   palkki kelluu sinisen paalla. Palkki maalataan kuvan paalle
   z-indeksilla, ks. .ylapalkki. */
.karkikuva{position:relative;overflow:hidden;
  width:100vw;margin:calc(-1 * (var(--palkki) + 44px)) calc(50% - 50vw) 44px;
  background:#00596f;
  display:flex;align-items:center;
  min-height:clamp(560px,72vh,730px);
  padding:calc(var(--palkki) + 92px) 0 78px}
.karki-kuvapuoli{position:absolute;top:0;bottom:0;right:0;left:46%}
.karki-kuvapuoli img{width:100%;height:100%;object-fit:cover;display:block;
  object-position:50% 45%}
/* Haivytys kayttaa TASMALLEEN samaa varia kuin osion tausta. Aiemmin
   tausta oli vino gradientti ja haivytys pystysuora, jolloin varit eivat
   osuneet yhteen ja kuvan vasempaan reunaan jai nakyva viiva. */
.karki-liuku{position:absolute;inset:0;display:block;background:
  linear-gradient(90deg,
    #00596f 0%,
    #00596f 6%,
    rgba(0,89,111,.86) 16%,
    rgba(0,89,111,.45) 30%,
    rgba(0,89,111,0) 50%)}
.karki-sisalto{position:relative;z-index:1;width:100%;
  max-width:var(--leveys);margin:0 auto;padding:0 32px}
.karki-teksti{max-width:min(640px,48%)}
.karki-sisalto h1{color:#fff}
@media (max-width:900px){
  .karkikuva{flex-direction:column;min-height:0;padding:0 0 34px;
    margin:0 calc(50% - 50vw) 30px}
  .karki-kuvapuoli{position:relative;inset:auto;width:100%;aspect-ratio:16/9}
  .karki-liuku{background:linear-gradient(180deg,
    rgba(0,89,111,0) 55%, rgba(0,89,111,.85) 88%, #00596f 100%)}
  .karki-sisalto{padding:26px 20px 0}
  .karki-teksti{max-width:none}
}

.mittarit{display:grid;grid-template-columns:repeat(3,auto);gap:0 30px;
  margin:30px 0 0;justify-content:start}
.mittarit div{max-width:none}
.mittarit dt{font:700 clamp(24px,2.6vw,32px)/1 var(--sans);letter-spacing:-.03em;
  color:#fff;font-variant-numeric:tabular-nums;margin-bottom:6px}
/* #c3dde6 jai gradientin vaaleimmalla kohdalla suhteeseen 4,35:1,
   ja 13,5 pikselin teksti vaatii 4,5:1. */
.mittarit dd{margin:0;font-size:13.5px;line-height:1.45;color:#d6e9f0;max-width:17ch}
@media (max-width:900px){
  .mittarit{gap:0 24px}
}
@media (max-width:560px){
  .mittarit{grid-template-columns:1fr 1fr;gap:20px 22px}
  .mittarit div:last-child{grid-column:1 / -1}
}

.etu-reitit-lohko{margin-top:14px}
@media (max-width:900px){
  .etu-karki{grid-template-columns:1fr;gap:30px;padding-top:24px}
  .karki-kuva{order:-1}
  .karki-kuva img{aspect-ratio:16/9}
}
.karki-sisalto h1{font-size:clamp(32px,3.7vw,50px);line-height:1.06;letter-spacing:-.032em;
  font-weight:700;margin:0 0 18px;max-width:18ch;text-wrap:balance}
.etu-ala{font-size:19px;line-height:1.55;color:#cfe6ee;margin:0 0 30px;max-width:40ch}

/* Kaksi kehotetta vierekkain: soitto ja lomake. Sama korkeus ja sama
   rakenne, jotta kumpikaan ei nayta toissijaiselta. */
.etu-kehotteet{display:grid;grid-template-columns:auto 1fr;gap:14px;
  align-items:stretch;max-width:var(--mitta)}
.etu-soitto,.etu-lomake{display:flex;flex-direction:column;justify-content:center;
  gap:3px;border-radius:12px;padding:16px 24px;text-decoration:none;
  background:var(--valkoinen);box-shadow:var(--varjo);
  transition:transform .18s cubic-bezier(.2,.8,.2,1), box-shadow .18s ease}
.etu-soitto{border:2px solid var(--valkoinen);color:var(--mus);
  box-shadow:0 2px 6px rgba(0,0,0,.14), 0 16px 34px -18px rgba(0,0,0,.5)}
.etu-soitto b{font-family:var(--mono);font-size:25px;font-weight:500;
  letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1.15}
/* Kumpikin kehote on umpinainen laatikko. Lapinakyva lasi nayttaa
   hyvalta tyhjaa taustaa vasten, mutta taman kuvan paalla teksti
   katosi siihen. */
/* Sinisella pohjalla umpinainen valkoinen laatikko on ensisijainen ja
   avoin valkoreunainen toissijainen. Vari yksin ei riittaisi
   erotteluun sinisen paalla. */
.etu-lomake{border:2px solid rgba(255,255,255,.62);color:#fff;
  background:rgba(255,255,255,.08);position:relative;padding-right:52px;
  box-shadow:none}
.etu-lomake::after{background:rgba(255,255,255,.2);color:#fff}
.etu-lomake:hover{background:rgba(255,255,255,.18);border-color:#fff}
.etu-lomake b{font-size:18.5px;font-weight:700;letter-spacing:-.018em;line-height:1.2}
/* Nuoli oikeaan reunaan, sama merkki kuin napeissa */
.etu-lomake::after{content:"\203A";position:absolute;right:20px;top:50%;
  transform:translateY(-50%);display:grid;place-items:center;
  width:28px;height:28px;border-radius:50%;background:rgba(0,134,168,.12);
  font-size:19px;line-height:1;padding-bottom:3px;color:var(--korosto);
  transition:transform .18s cubic-bezier(.2,.8,.2,1)}
.etu-soitto em,.etu-lomake em{font-style:normal;font-size:13.5px;
  line-height:1.35}
.etu-soitto em{color:var(--harmaa)}
/* Tama tulee jaetun saannon JALKEEN, muuten harmaa voittaisi ja teksti
   jaisi lukukelvottomaksi tummansinisen napin paalla. */
.etu-lomake em{color:#d5eaf2}
.etu-soitto:hover,.etu-lomake:hover{transform:translateY(-2px);
  box-shadow:var(--varjo-nosto)}
.etu-lomake:hover::after{transform:translateY(-50%) translateX(3px)}
@media (prefers-reduced-motion:reduce){
  .etu-soitto,.etu-lomake,.etu-lomake::after{transition:none}
  .etu-soitto:hover,.etu-lomake:hover{transform:none}
  .etu-lomake:hover::after{transform:translateY(-50%)}
}
@media (max-width:640px){
  .etu-kehotteet{grid-template-columns:1fr;gap:10px}
  .etu-lomake{padding-right:52px}
}

/* Kolme reittia. Sivun tarkein valinta, joten ne ovat kortteja eivat
   rivejaria. Gradientti tuo brandin varin ilman etta se huutaa. */
/* Reittilaatikoita on kaksi sen jalkeen kun kilpailutus poistui, joten
   palstoja ei saa lukita kolmeen. */
.etu-reitit{display:grid;
  grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:16px;
  max-width:none}
.etu-reitit a{display:grid;grid-template-rows:auto auto 1fr;gap:6px;
  padding:24px 26px 22px;text-decoration:none;color:var(--mus);
  background:var(--valkoinen);border:1px solid var(--raja);border-radius:6px;
  box-shadow:var(--varjo);position:relative;overflow:hidden;
  transition:transform .2s cubic-bezier(.2,.8,.2,1), box-shadow .2s ease}
/* Varinauha ylareunassa on affordanssi, ei koriste: se erottaa
   klikattavan kortin faktakortista. */
.etu-reitit a::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;
  background:var(--korosto)}
.etu-reitit a:hover{transform:translateY(-3px);box-shadow:var(--varjo-nosto)}
.etu-reitit .q{font-size:20px;font-weight:700;letter-spacing:-.018em;
  padding-top:6px}
.etu-reitit .d{font-size:14.5px;color:var(--harmaa);line-height:1.5}
.etu-reitit .arw{font-size:15px;font-weight:650;color:var(--korosto);
  align-self:end;justify-self:start;margin-top:16px;
  transition:transform .2s cubic-bezier(.2,.8,.2,1)}
.etu-reitit .arw::before{content:"Katso "}
.etu-reitit a:hover .arw{transform:translateX(6px)}
@media (prefers-reduced-motion:reduce){
  .etu-reitit a,.etu-reitit .arw{transition:none}
  .etu-reitit a:hover{transform:none}
  .etu-reitit a:hover .arw{transform:none}
}
@media (max-width:860px){
  .etu-reitit{grid-template-columns:1fr;gap:12px}
  .etu-reitit a{grid-template-rows:auto auto auto}
  .etu-reitit .arw{margin-top:8px}
}

/* ---- Etusivun alaosa ---- */
.etu-palvelut{margin-top:56px}
.etu-palvelut h2,.etu-ihmiset h2{margin-bottom:20px}
/* Palveluvalilehdet. Ikonirivi ja sen alla yksi paneeli kerrallaan. */
.valilehdet{margin-top:6px}
/* Palvelujen maara voi muuttua, joten palkki ei saa olla lukittu
   seitsemaan palstaan. Napit keskitetaan ja ne jakavat tilan tasan. */
.valilehti-napit{display:flex;justify-content:center;flex-wrap:wrap;
  border-bottom:1px solid var(--raja)}
.valilehti-nappi{flex:1 1 0;min-width:130px}
.valilehti-nappi{appearance:none;background:none;border:0;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;gap:12px;
  padding:20px 8px 16px;margin-bottom:-1px;
  border-bottom:3px solid transparent;color:var(--harmaa);
  font:650 14.5px/1.3 var(--sans);letter-spacing:-.01em;text-align:center;
  transition:color .18s ease, border-color .18s ease}
.vl-ikoni{width:30px;height:30px;background:currentColor;
  -webkit-mask:var(--i) center/contain no-repeat;mask:var(--i) center/contain no-repeat}
.valilehti-nappi:hover{color:var(--korosto)}
.valilehti-nappi[aria-selected="true"]{color:var(--mus);
  border-bottom-color:var(--korosto)}
.valilehti-nappi:focus-visible{outline:2px solid var(--korosto);outline-offset:-4px}

.valilehti-paneeli{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:56px;align-items:center;padding:44px 0 8px}
.valilehti-paneeli[hidden]{display:none}
.vp-teksti{min-width:0}
.vp-teksti h3{font-size:clamp(25px,2.8vw,34px);line-height:1.14;
  letter-spacing:-.028em;margin:0 0 16px;max-width:18ch;text-wrap:balance}
.vp-teksti p{font-size:17px;line-height:1.62;color:var(--harmaa);
  max-width:46ch;margin:0}
.vp-linkki{margin-top:26px !important}
.vp-kuva{min-width:0}
.vp-kuva img{width:100%;height:auto;display:block;border-radius:6px;
  aspect-ratio:4/3;object-fit:cover;border:1px solid var(--raja)}
@media (prefers-reduced-motion:reduce){.valilehti-nappi{transition:none}}
@media (max-width:1000px){
  .valilehti-napit{grid-template-columns:repeat(4,1fr)}
  .valilehti-paneeli{grid-template-columns:1fr;gap:26px;padding-top:32px}
  .vp-kuva{order:-1}
  .vp-kuva img{aspect-ratio:16/9}
}
@media (max-width:620px){
  .valilehti-napit{grid-template-columns:repeat(2,1fr)}
  .valilehti-nappi{font-size:13.5px;padding:16px 6px 13px;gap:9px}
  .vl-ikoni{width:26px;height:26px}
}

/* Kelluva yhteydenottonappi vasemmassa alakulmassa. Siita aukeaa lyhyt
   lomake suoraan. Ilman JavaScriptia nappi on tavallinen linkki sivun
   omaan lomakkeeseen. */
.pika{position:fixed;left:20px;bottom:20px;z-index:45}
.pika-nappi{display:grid;place-items:center;width:58px;height:58px;
  border-radius:50%;background:var(--korosto);color:#fff;text-decoration:none;
  box-shadow:0 4px 10px rgba(15,21,25,.16), 0 18px 36px -14px rgba(0,134,168,.6);
  transition:transform .18s cubic-bezier(.2,.8,.2,1), background .18s ease}
.pika-nappi:hover{background:var(--korosto-tumma);color:#fff;transform:translateY(-2px)}
.vain-lukijalle{position:absolute;width:1px;height:1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap}
.pika-paneeli{position:absolute;left:0;bottom:72px;
  width:min(344px,calc(100vw - 40px));
  background:var(--valkoinen);border:1px solid var(--raja);border-radius:10px;
  box-shadow:0 8px 20px rgba(15,21,25,.14), 0 30px 60px -24px rgba(15,21,25,.5);
  padding:16px 20px 20px;
  /* Matalassa ikkunassa paneeli valuisi ruudun ylapuolelle. */
  max-height:calc(100vh - 110px);overflow-y:auto}
.pika-paneeli[hidden]{display:none}
.pika-ylaosa{display:flex;align-items:center;justify-content:space-between;
  gap:12px;margin-bottom:12px}
#pika-otsikko{margin:0;max-width:none;font-weight:700;font-size:17px;
  letter-spacing:-.016em}
.pika-sulje{appearance:none;background:none;border:0;cursor:pointer;
  width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
  color:var(--harmaa)}
.pika-sulje:hover{background:var(--vaalea);color:var(--mus)}
.pika-sulje span{position:relative;width:14px;height:14px;display:block}
.pika-sulje span::before,.pika-sulje span::after{content:"";position:absolute;
  left:0;top:6px;width:14px;height:2px;border-radius:1px;background:currentColor}
.pika-sulje span::before{transform:rotate(45deg)}
.pika-sulje span::after{transform:rotate(-45deg)}
.pikalomake p{max-width:none;margin:0 0 11px}
.pikalomake label{display:block;font-size:13.5px;font-weight:650;margin-bottom:4px}
.pikalomake input,.pikalomake textarea{width:100%;font:inherit;font-size:15px;
  padding:9px 11px;border:1px solid var(--kentanraja);border-radius:5px;
  background:var(--valkoinen);color:var(--mus)}
.pikalomake textarea{resize:vertical;min-height:82px}
.pikalomake input:focus-visible,.pikalomake textarea:focus-visible{
  outline:2px solid var(--korosto);outline-offset:1px}
.pika-laheta{margin:14px 0 0}
.pika-laheta .nappi{width:100%;justify-content:center;gap:8px}
.pika-soita{margin:14px 0 0;max-width:none;font-size:13.5px;color:var(--harmaa)}
.pikalomake .pika-tietosuoja{font-size:13px;line-height:1.5;color:var(--harmaa);margin:2px 0 12px}
.pikailmoitus{background:var(--varoitus-pohja);border:1px solid var(--varoitus);
  color:var(--varoitus);border-radius:5px;padding:10px 12px;margin-bottom:12px;
  font-size:14px}
.pikailmoitus p{margin:0;max-width:none}
@media (prefers-reduced-motion:reduce){
  .pika-nappi{transition:none}
  .pika-nappi:hover{transform:none}
}
@media (max-width:560px){
  .pika{left:12px;bottom:12px}
  .pika-paneeli{width:calc(100vw - 24px)}
}

/* Kelluva soittonappi. Ilmestyy kun karki on vieritetty ohi, jottei se
   peita mitaan heti sivun alussa. */
.kelluva{position:fixed;right:20px;bottom:20px;z-index:40;
  opacity:0;visibility:hidden;transform:translateY(14px);
  transition:opacity .25s ease, transform .25s cubic-bezier(.2,.8,.2,1), visibility .25s}
.kelluva.nakyy{opacity:1;visibility:visible;transform:none}
.kelluva .nappi{box-shadow:0 4px 10px rgba(15,21,25,.14), 0 20px 40px -14px rgba(0,134,168,.55)}
@media (max-width:560px){
  /* Ei koko leveydelle: vasemmassa alakulmassa on yhteydenottonappi. */
  .kelluva{right:12px;bottom:12px}
  .kelluva .nappi{font-size:15px;padding:11px 11px 11px 18px}
}
@media (prefers-reduced-motion:reduce){.kelluva{transition:opacity .01s}}

/* Osioiden erottelu kaarella. Fixcomin merkki on punos, ei pilvi, joten
   muoto on pehmea kaari eika kilpailijan pilvireuna. */
.kaari{display:block;width:100%;height:auto;margin-bottom:-1px}
.tumma-lohko{background:var(--mus);color:#e6edf1;padding:6px 0 54px}
.tumma-lohko h2{color:#fff}

/* Asiakastarina isona. Tama on sivuston ainoa ulkopuolinen todiste,
   joten se ansaitsee oman tilansa eika harmaata laatikkoa. */
.etu-referenssi{margin-top:60px}
/* Sama pilleri kuin muualla toissijaisissa kehotteissa, keskella
   korttien alla, jotta se lukeutuu koko osion jatkoksi. */
.referenssit-linkki{margin:26px 0 0;max-width:none;text-align:center}
.referenssit-lisaa{margin:20px 0 0;max-width:none;text-align:center}
/* Luokka lisataan skriptilla, joten ilman JavaScriptia kaikki kortit
   nakyvat eika mitaan jaa piiloon. */
.referenssit-rajattu .refkortti-piilossa{display:none}
.referenssit-linkki .nappi{padding:11px 11px 11px 22px}
.referenssisivu{margin:30px 0 34px}
/* Referenssikortit. Logo ylhaalla, sitaatti keskella, yritys alhaalla.
   Kortit ovat yhta korkeita ja yrityksen nimi on aina samalla
   korkeudella, vaikka sitaatit ovat eri mittaisia. */
/* Nelja saraketta, kapeammilla naytoilla kaksi. Rron halusi 22.9.2026
   nelja riviin ja puhelimeen kaksi vierekkain, jolloin ensimmaiset
   nelja nakyvat 2 x 2 -ruudukkona ennen Nayta lisaa -nappia. */
.referenssit{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:16px;max-width:none}
@media (max-width:1100px){.referenssit{grid-template-columns:repeat(2,minmax(0,1fr))}}
.referenssit-linkki[hidden]{display:none}
.refkortti{margin:0;position:relative;overflow:hidden;
  display:flex;flex-direction:column;
  background:var(--valkoinen);border:1px solid var(--raja);border-radius:6px;
  box-shadow:var(--varjo);padding:30px 32px 28px}
/* Lainausmerkki kertoo etta tama on joku muu kuin me. Koriste, joten
   se on taustalla eika tekstissa. */
.refkortti::before{content:"\201D";position:absolute;top:-34px;right:18px;
  font:700 150px/1 var(--sans);color:rgba(0,134,168,.09);pointer-events:none}
.ref-logo{height:58px;display:flex;align-items:center;margin-bottom:24px;
  padding-bottom:22px;border-bottom:1px solid var(--raja);box-sizing:content-box}
.ref-logo img{height:44px;width:auto;max-width:100%;object-fit:contain;
  object-position:left center;display:block}
/* Simeonin ja Vanhustyon keskusliiton logoissa on paljon tyhjaa tai
   pienta tekstia, joten sama korkeus nayttaa pienemmalta kuin muut. */
.ref-logo-iso img{height:56px}
.refkortti blockquote{margin:0 0 24px;flex:1;position:relative}
.refkortti blockquote p{margin:0;max-width:none;
  font-size:17px;line-height:1.5;
  letter-spacing:-.012em;font-weight:600;color:var(--mus)}
/* Varataan tila kahdelle riville, jotta yrityksen nimi on kaikissa
   korteissa samalla korkeudella, oli rooli mukana tai ei. */
.refkortti figcaption{display:flex;flex-direction:column;gap:2px;
  padding-left:40px;position:relative;font-size:15px;line-height:1.4;
  min-height:2.9em}
.refkortti figcaption::before{content:"";position:absolute;left:0;top:10px;
  width:28px;height:2px;border-radius:2px;background:var(--korosto)}
.refkortti figcaption strong{font-weight:700;color:var(--mus)}
.refkortti figcaption span{color:var(--harmaa);font-size:14px}
.refkortti{padding:26px 24px 24px}
@media (max-width:640px){
  /* Kaksi korttia vierekkain puhelimessa: kaikki mitat pienemmiksi,
     muuten lainaus mahtuisi vain muutaman sanan riveihin. */
  .referenssit{gap:10px}
  .refkortti{padding:16px 13px 15px}
  .refkortti::before{font-size:90px;top:-20px;right:8px}
  .ref-logo{height:38px;margin-bottom:12px;padding-bottom:12px}
  .ref-logo img{height:28px}
  .ref-logo-iso img{height:36px}
  .refkortti blockquote{margin-bottom:14px}
  .refkortti blockquote p{font-size:14.5px;line-height:1.45;letter-spacing:0}
  .refkortti figcaption{padding-left:0;font-size:13.5px;min-height:0}
  .refkortti figcaption::before{display:none}
  .refkortti figcaption span{font-size:12.5px}
}

.etu-ihmiset{margin-top:60px}
.ihmiset{display:grid;grid-template-columns:repeat(auto-fit,minmax(265px,1fr));
  gap:16px}
/* Piirretyt hahmot valokuvien sijaan. Fixcomilla ei ole halua laittaa
   omia kasvoja verkkoon, joten nama ovat tarkoituksella tyyliteltyja
   eivatka esita ketaan tiettya ihmista. */
.hlo{background:var(--valkoinen);border:1px solid var(--raja);
  border-radius:6px;box-shadow:var(--varjo);padding:36px 28px 32px;
  display:flex;flex-direction:column;align-items:center;text-align:center;
  gap:3px}
.h-hahmo{width:108px;height:108px;display:block;border-radius:50%;
  margin-bottom:16px;box-shadow:0 0 0 7px rgba(0,134,168,.06)}
.h-nimi{font-weight:700;font-size:18px;letter-spacing:-.016em}
.h-tit{font-size:14px;color:var(--harmaa);margin-bottom:14px}
.h-num{font-family:var(--mono);font-size:18px;font-variant-numeric:tabular-nums;
  text-decoration:none;color:var(--korosto);margin-bottom:4px}
.h-eml{font-size:14px;color:var(--harmaa);text-decoration:none;word-break:break-all}
.etu-eijono{margin-top:14px;font-size:14.5px;color:var(--harmaa)}

@media (max-width:760px){
  .etu-karki h1{margin-bottom:14px}
  .etu-soitto{margin-bottom:34px;width:100%;justify-content:space-between}
  .ylaoikea{width:100%;justify-content:space-between;order:2}
}

/* ---------------------------------------------------------------------
   Oma kartta. Piirretty OpenStreetMapin datasta SVG:ksi tyokalulla
   tyokalut/tee-kartta.py. Kartta on osa sivun HTML:aa, joten se kayttaa
   sivun omaa kirjasinta eika lataa mitaan ulkopuolelta. Yksikaan pyynto
   ei lahde vierailijan selaimesta kolmannelle osapuolelle, mika on
   tietosuojaselosteen lupaus.
   --------------------------------------------------------------------- */
.kartta{margin:16px 0 0;max-width:none}
.kartta-kuva{
  aspect-ratio:600/480;border:1px solid var(--raja);border-radius:10px;
  overflow:hidden;background:#e9eff2;
}
.kartta-kuva svg{display:block;width:100%;height:100%}
.kartta figcaption{
  margin:10px 0 0;font-size:14px;color:var(--harmaa);max-width:var(--mitta);
}
/* Kapealla naytolla kuva rajataan keskelta pystympaan muotoon sen sijaan
   etta koko kartta kutistuisi. Nain kadunnimet pysyvat luettavina.
   preserveAspectRatio="xMidYMid slice" hoitaa rajauksen. */
@media (max-width:620px){.kartta-kuva{aspect-ratio:1/1}}

.k-pohja{fill:#e9eff2}
.k-puisto{fill:#dce8dd}
.k-ruoho{fill:#e2ebe0}
.k-metsa{fill:#d3e2d5}
.k-kentta{fill:#dbe7da}
.k-vesi{fill:#cfe0eb}

/* Tiet: leveampi harmaa reunus ensin, kapeampi valkoinen pinta paalle. */
.k-reunus polyline,.k-pinta polyline{fill:none;stroke-linecap:round;stroke-linejoin:round}
.k-reunus polyline{stroke:#c7d3da}
.k-pinta polyline{stroke:#fff}
.k-reunus .k-t1{stroke-width:11}   .k-pinta .k-t1{stroke-width:8}
.k-reunus .k-t2{stroke-width:10}   .k-pinta .k-t2{stroke-width:7}
.k-reunus .k-t3{stroke-width:8.5}  .k-pinta .k-t3{stroke-width:6}
.k-reunus .k-t4{stroke-width:7}    .k-pinta .k-t4{stroke-width:5}
.k-reunus .k-t5{stroke-width:4}    .k-pinta .k-t5{stroke-width:2.6}
.k-pinta .k-t6{stroke:#f7f9fa;stroke-width:1.4}
/* Paakadut lammin keltainen, kuten yleisissa karttasovelluksissa. Niista
   kavija tunnistaa Kapylantien ja Koskelantien heti. */
.k-reunus .k-t1,.k-reunus .k-t2{stroke:#dcc68a}
.k-pinta .k-t1,.k-pinta .k-t2{stroke:#fbf0c9}
.k-parkit polygon{fill:#dfe6eb}
.k-parkit .k-oma-parkki{fill:#cddbe5}
.k-radat polyline{fill:none;stroke-linecap:round}
.k-ratikkarata{stroke:#4f9e7c;stroke-width:1.6}
.k-junarata{stroke:#9aa6ae;stroke-width:2.4;stroke-dasharray:8 5}

.k-talot polygon{fill:#dae2e6}
/* Karjala-talo korostettuna. Kontrasti karttapohjaa vasten 3,6:1, eli
   WCAG 1.4.11 taytyy graafiselle elementille. */
.k-oma{fill:var(--korosto)}

/* Kadunnimet. Taustan varinen paksu ulkoviiva pitaa nimen luettavana myos
   valkoisen tien paalla: kontrasti pohjaan 6,5:1. */
.k-nimet path{fill:none}
.k-nimet text{
  font-family:var(--sans);font-size:18px;fill:#4a555f;
  stroke:#fff;stroke-width:4;paint-order:stroke;stroke-linejoin:round;
}
/* Pysakkien nimet ovat tummempia kuin kadunnimet, koska ne kertovat
   miten paikalle paasee. */
.k-pysakkinimet text{
  font-family:var(--sans);font-size:18px;font-weight:600;fill:#26323b;
  stroke:#fff;stroke-width:4;paint-order:stroke;stroke-linejoin:round;
}
.k-talonimi{
  font-family:var(--sans);font-size:23px;font-weight:700;
  fill:var(--korosto-tumma);stroke:#fff;stroke-width:5;
  paint-order:stroke;stroke-linejoin:round;
}
.k-p rect{fill:#1d5fa6;stroke:#fff;stroke-width:1.5}
.k-p text{
  font-family:var(--sans);font-size:13px;font-weight:700;fill:#fff;
  text-anchor:middle;
}
.k-mittakaava line{stroke:#7b8690;stroke-width:1.5}
.k-mittakaava text{
  font-family:var(--mono);font-size:13px;fill:#4a555f;text-anchor:middle;
  stroke:#e9eff2;stroke-width:3;paint-order:stroke;
}
.k-nuppi{fill:var(--korosto-tumma);stroke:#fff;stroke-width:2}
.k-reika{fill:#fff}
.kartta-selite{
  list-style:none;margin:10px 0 0;padding:0;display:flex;flex-wrap:wrap;
  gap:6px 16px;font-size:13px;color:var(--harmaa);
}
.kartta-selite li{display:flex;align-items:center;gap:6px;margin:0}
.kartta-selite svg{flex:none}
.kartta-p{
  display:inline-grid;place-items:center;width:15px;height:15px;
  border-radius:3px;background:#1d5fa6;color:#fff;font-size:11px;font-weight:700;
}


/* ---------------------------------------------------------------------
   Yhteystietosivu. Sivuston ainoa kaksipalstainen sivu.

   Muilla sivuilla teksti on rajattu 66 merkkiin ja oikea puoli jaa
   tyhjaksi. Se on oikein: pitkaa tekstia luetaan kapeasta palstasta.
   Yhteystietosivulle ei kuitenkaan tulla lukemaan vaan tekemaan jotain,
   ja silloin tyhja oikea puoli nayttaa silta etta jotain puuttuu.
   Oikealle tulee paneeli, josta paasee eteenpain kahdella klikkauksella.
   --------------------------------------------------------------------- */
.yhteysruudukko{
  display:grid;grid-template-columns:minmax(0,1fr) 420px;
  gap:48px;align-items:start;
}
.yhteysteksti{min-width:0}
/* Ensimmainen otsikko ei tarvitse ylamarginaalia palstan alussa */
.yhteysteksti > h2:first-child{margin-top:0}

.yhteyspaneeli{display:flex;flex-direction:column;gap:20px;min-width:0}
.ypkortti{
  background:var(--valkoinen);border:1px solid var(--raja);border-radius:14px;
  padding:22px;box-shadow:var(--varjo);
}
.ypkortti h2{font-size:19px;margin:0 0 14px;letter-spacing:-.01em}

/* Toimintakortti erottuu vareilla: se on se josta kuuluu klikata. */
.ypkortti-toiminta{background:var(--vaalea);border-color:#c6d7de}
.yprivi{
  display:flex;flex-direction:column;gap:1px;padding:11px 14px;
  background:var(--valkoinen);border:1px solid var(--raja);border-radius:10px;
  text-decoration:none;color:var(--mus);margin:0 0 8px;
}
.yprivi:hover{border-color:var(--korosto);color:var(--mus)}
.yprivi-otsikko{font-size:13px;color:var(--harmaa);letter-spacing:.02em}
.yprivi-arvo{font-size:17px;font-weight:600;color:var(--korosto-tumma);
  overflow-wrap:anywhere}
.ypaika{margin:12px 0 0;font-size:14px;color:var(--harmaa);max-width:none}

.yptalo{margin:0 0 16px}
.yptalo img{
  display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;
  border-radius:10px;
}
.yptalo figcaption{margin:8px 0 0;font-size:13px;color:var(--harmaa)}
.ypkortti address{font-size:16px;line-height:1.6;max-width:none}
.ypreitti{display:flex;flex-direction:column;gap:8px;margin:16px 0 0;
  max-width:none}
.ypreitti .nappi{text-align:center}
.yppysakointi{margin:16px 0 0;font-size:14px;color:var(--harmaa);
  max-width:none}

@media (max-width:1040px){
  .yhteysruudukko{grid-template-columns:minmax(0,1fr) 360px;gap:36px}
}
/* Puhelimessa paneeli ensin. Yhteystietosivulle tullaan hakemaan numero
   ja osoite, ei lukemaan kolmea kappaletta ennen niita. */
@media (max-width:900px){
  .yhteysruudukko{grid-template-columns:1fr;gap:34px}
  .yhteyspaneeli{order:-1}
}