/* EilaSylvia – nykyisen sivuston ulkoasu (mitattu 26.10.2026, ks. asiakkaat/20261025-eilasylvia/siirto/kuvamitat.md) */
@font-face { font-family: Montserrat; font-style: normal; font-weight: 400; font-display: swap; src: url(/fontit/montserrat-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: Montserrat; font-style: italic; font-weight: 400; font-display: swap; src: url(/fontit/montserrat-latin-400-italic.woff2) format('woff2'); }
@font-face { font-family: Montserrat; font-style: normal; font-weight: 500; font-display: swap; src: url(/fontit/montserrat-latin-500-normal.woff2) format('woff2'); }
@font-face { font-family: Montserrat; font-style: italic; font-weight: 500; font-display: swap; src: url(/fontit/montserrat-latin-500-italic.woff2) format('woff2'); }
@font-face { font-family: Roboto; font-style: normal; font-weight: 600; font-display: swap; src: url(/fontit/roboto-latin-600-normal.woff2) format('woff2'); }
@font-face { font-family: Roboto; font-style: normal; font-weight: 500; font-display: swap; src: url(/fontit/roboto-latin-500-normal.woff2) format('woff2'); }
@font-face { font-family: Montserrat; font-style: normal; font-weight: 600; font-display: swap; src: url(/fontit/montserrat-latin-600-normal.woff2) format('woff2'); }
@font-face { font-family: Montserrat; font-style: italic; font-weight: 600; font-display: swap; src: url(/fontit/montserrat-latin-600-italic.woff2) format('woff2'); }

:root {
  --sininen: #000b78;
  --teksti: #000;
  --perus: #4a4a4a;
  --varjo: 0 0 10px 0 rgba(0, 0, 0, .5);
  --kaarivarjo: 0 0 10px 0 rgba(47, 47, 47, .64);
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: #fff; color: var(--perus); font: 400 14px/1.8 var(--tekstifontti, Montserrat, sans-serif); }
img { max-width: 100%; height: auto; display: block; border: 0; }
a { color: var(--perus); }
h1, h2, h3 { margin: 0 0 20px; font-family: var(--otsikkofontti, Montserrat, sans-serif); font-weight: 600; line-height: 1; color: var(--teksti); }
p { margin: 0 0 20px; font-size: 16px; font-weight: 500; line-height: 28.8px; color: var(--teksti); overflow-wrap: break-word; }
p a { color: var(--perus); }
.sisalto { width: 100%; max-width: 1140px; margin: 0 auto; }

/* Luonnosilmoitus (vain luonnoksessa) */
.luonnos { position: fixed; left: 0; right: 0; top: 0; z-index: 200; height: 34px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; background: #fff3c4; color: #5a4400; font: 600 13px/22px Montserrat, sans-serif; text-align: center; padding: 6px 12px; border-bottom: 1px solid #e3d08a; box-sizing: border-box; }
.luonnos a { color: #3d2e00; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; margin-left: 6px; }
.luonnos ~ .ylapalkki { top: 34px; }
.luonnos ~ main { margin-top: 34px; }
@media (max-width: 600px) { .luonnos .pitka { display: none; } }
.paikkamerkki { background: #fff3c4; color: #5a4400; padding: 10px 14px; border-radius: 4px; font-size: 14px; }

/* Yläpalkki: kiinteä, valkoinen, 75 px */
.ylapalkki { position: fixed; top: 0; left: 0; right: 0; z-index: 100; height: 74.8px; background: #fff; border-bottom: .8px solid #f1f1f1; }
/* Yläpalkin ja alatunnisteen leveys kuten nykyisellä sivulla: 1200 px, enintään 90 % ikkunasta */
.ylapalkki .sisalto { display: flex; align-items: center; justify-content: space-between; height: 100%; padding: 0; width: 1200px; max-width: 90%; }
.logo { display: block; }
.logo img { width: 171px; height: 55.6px; transition: opacity .3s; }
.logo img.oma-logo { width: auto; max-width: 240px; object-fit: contain; } /* muokkaimella vaihdettu logo */
.logo:hover img { opacity: .6; }
.paavalikko { margin-right: -15px; } /* kuten nykyisen sivun teema: viimeisen sanan teksti tasan reunan kanssa */
.paavalikko > ul { display: flex; margin: 0; padding: 0; list-style: none; }
.paavalikko li { position: relative; }
.paavalikko > ul > li > a { display: block; padding: 0 15px; font: 600 15px/74px Montserrat, sans-serif; letter-spacing: .6px; color: #555; text-decoration: none; transition: color .3s; }
.paavalikko > ul > li > a:hover { color: var(--sininen); }
/* Alleviivaus liukuu vasemmalta oikealle (OceanWP effect-one) */
.paavalikko > ul > li > a > .vt { position: relative; }
.paavalikko > ul > li > a > .vt::after { content: ''; display: block; position: absolute; left: 0; bottom: -30%; width: 100%; height: 2px; background: var(--sininen); visibility: hidden; transform: scaleX(0); transform-origin: left bottom; transition: .25s ease-out; }
.paavalikko > ul > li > a:hover > .vt::after, .paavalikko > ul > li:hover > a > .vt::after, .paavalikko > ul > li:focus-within > a > .vt::after { visibility: visible; transform: scaleX(1); }
/* Nuoli: Font Awesome Free "angle-down" (CC BY 4.0, fontawesome.com), 15 px kuten nykyisellä sivulla */
.nuoli { display: inline-block; width: 13.1px; height: 15px; margin-left: 11.6px; vertical-align: -2px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M201.4 374.6c12.5 12.5 32.8 12.5 45.3 0l160-160c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L224 306.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l160 160z'/%3E%3C/svg%3E") no-repeat center / contain; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M201.4 374.6c12.5 12.5 32.8 12.5 45.3 0l160-160c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L224 306.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l160 160z'/%3E%3C/svg%3E") no-repeat center / contain; }
.paavalikko li ul { position: absolute; top: 100%; left: 0; min-width: 180px; margin: 0; padding: 0; list-style: none; background: #fff; border-top: 3px solid var(--sininen); box-shadow: 0 2px 6px rgba(0, 0, 0, .1); opacity: 0; visibility: hidden; transition: opacity .2s; }
.paavalikko li:hover > ul, .paavalikko li:focus-within > ul { opacity: 1; visibility: visible; }
.paavalikko li ul a { display: block; padding: 12px 15px; font-size: 12px; font-weight: 400; line-height: 1.2; color: #333; text-decoration: none; white-space: nowrap; border-bottom: 1px solid #f1f1f1; }
.paavalikko li ul a:hover { background: #f8f8f8; }
.valikkonappi { display: none; }

/* Mobiilivalikko: koko näyttö */
.mobiilivalikko { position: fixed; inset: 0; z-index: 300; background: rgba(0, 0, 0, .9); overflow-y: auto; display: flex; align-items: center; justify-content: center; }
.mobiilivalikko[hidden] { display: none; }
.mobiilivalikko ul { list-style: none; margin: 0; padding: 0; text-align: center; }
.mobiilivalikko a { display: block; padding: 10px 20px; color: #fff; font: 600 20px/1.4 Montserrat, sans-serif; text-decoration: none; }
.mobiilivalikko li ul a { font-size: 15px; font-weight: 400; opacity: .85; padding: 6px 20px; }
.mobiilivalikko .nuoli { display: none; }
.sulje { position: absolute; top: 20px; right: 20px; width: 40px; height: 40px; background: none; border: 0; cursor: pointer; }
.sulje::before, .sulje::after { content: ''; position: absolute; top: 19px; left: 6px; width: 28px; height: 2px; background: #fff; transform: rotate(45deg); }
.sulje::after { transform: rotate(-45deg); }

/* Napit: #000b78, pyöreät päät */
.nappi { display: inline-block; padding: 12px 24px; border-radius: 50px; background: var(--sininen); color: #fff; font: 500 15px/1 Roboto, sans-serif; text-decoration: none; transition: opacity .3s; }
.nappi:hover { opacity: .85; color: #fff; }
.nappi.iso { font-family: Montserrat, sans-serif; font-size: 16px; font-weight: 600; }
.nappi.jattinappi { font-family: Montserrat, sans-serif; font-size: 20px; font-weight: 600; }
.keskelle { text-align: center; }

/* Etusivun banneri: 651 px, cover 50% 50%, tummennus 21 %, aalto alareunassa */
.hero { position: relative; height: 651px; overflow: hidden; background: #ccc url(/kuvat/banneri-etusivu.jpg) 50% 50% / cover no-repeat; }
.hero .tummennus { position: absolute; inset: 0; background: #000; opacity: .21; }
/* Aalto kuten Elementorissa: kehys käännetty 180°, svg 128 % (puhelimella 183 %) leveä ja keskitetty */
.aalto-kehys { position: absolute; left: 0; bottom: -1px; width: 100%; overflow: hidden; line-height: 0; transform: rotate(180deg); }
.aalto { display: block; position: relative; left: 50%; width: calc(128% + 1.3px); height: 111px; transform: translateX(-50%); }
.aalto path { fill: #fff; }
.aalto .a1 { opacity: .33; }
.aalto .a2 { opacity: .66; }

.etu { padding: 0 0 40px; }
.etu .sisalto { padding: 10px; }
.iso-logo { text-align: center; margin-bottom: 20px; }
.iso-logo img { display: block; margin: 0 auto; width: 448px; height: 145.6px; opacity: .92; }
.iso-logo img.oma-logo { width: auto; max-width: 90%; object-fit: contain; }
.etu .keskelle { margin-bottom: 60px; line-height: 1; }
.esittely { display: grid; grid-template-columns: 35.45% 1fr; align-items: center; margin-bottom: 0; }
.esittely > div { padding: 20px; }
.esittely-kuva { text-align: center; }
.kaari { border-radius: 200px; box-shadow: var(--kaarivarjo); }
.esittely-kuva img { display: block; margin: 0 auto; width: 299.8px; }
.esittely-teksti h2 { font-size: 25px; }
.palvelut-otsikko { font-size: 35px; line-height: 35px; text-align: center; padding: 40px 0 0; margin: 0 0 20px; scroll-margin-top: 80px; }
.palvelut { display: grid; grid-template-columns: repeat(5, 1fr); margin-bottom: 40px; }
.kortti { padding: 10px; text-align: center; }
.kortti img { width: 204px; height: 204px; margin: 0 auto 20px; box-shadow: var(--varjo); }
.kortti h3 { font-size: 18px; line-height: 1; }
.kortti p { margin: 0; }
.rivi { display: grid; grid-template-columns: 1fr 1fr; align-items: center; margin-bottom: 40px; }
.rivi > div { padding: 10px; }
.rivi-teksti { padding: 10px 20px; }
.rivi-teksti h2 { font-size: 25px; }
.esittely-teksti p:not(:last-child), .rivi-teksti p:not(:last-child) { margin-bottom: 40px; }
.esittely-teksti p:last-child, .rivi-teksti p:last-child, .kortti p { line-height: 1; }
.rivi-teksti p:last-child { margin-bottom: 0; }
.rivi:last-child { margin-bottom: 0; }
.rivi-kuva img { box-shadow: var(--varjo); }
.rivi.levea .rivi-kuva img { width: 540px; height: 243.3px; object-fit: fill; }
.rivi.nelio .rivi-kuva img { width: 450px; height: 450px; margin: 0 auto; }
.rivi.kuva-oikea .rivi-kuva { order: 2; }

/* Alasivut: 61 px väli, banneri 460 px, cover, tummennus 35 %, otsikko 40 px valkoinen hehkulla */
.valitila { height: 61px; }
.banneri { position: relative; height: 460px; padding: 250px 0 150px; background: #ccc 50% 50% / cover no-repeat; }
.banneri-kuva { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } /* muokkaimella vaihdettu bannerikuva */
.oma-banneri { background-image: none !important; }
.banneri .tummennus { position: absolute; inset: 0; background: #000; opacity: .35; }
.banneri h1 { position: relative; margin: 10px 0 0; padding: 0 10px; font-size: 40px; line-height: 40px; color: #fff; text-align: center; text-shadow: 0 0 10px rgba(0, 0, 0, .98); }
.banneri-psykoterapia { background-image: url(/kuvat/banneri-psykoterapia.jpg); }
.banneri-seksuaaliterapia { background-image: url(/kuvat/banneri-seksuaaliterapia.jpg); background-position: 0 -83px; }
.banneri-seksuaaliterapia .tummennus { opacity: .32; }
.banneri-emdr-terapia { background-image: url(/kuvat/banneri-emdr.jpg); }
.banneri-pariterapia { background-image: url(/kuvat/banneri-pariterapia.jpg); }
.banneri-luennot-ja-videoyhteys { background-image: url(/kuvat/banneri-luennot.jpg); }
.banneri-hinnat { background-image: url(/kuvat/hinnat.jpg); }
.banneri-ajankohtaista { background-image: url(/kuvat/ajankohtaista.jpg); }
.banneri-yhteystiedot { background-image: url(/kuvat/banneri-yhteystiedot.jpg); }

.sisaltoalue .sisalto { padding: 40px; }
.sisaltoalue h2 { font-size: 25px; }
.nappirivi { margin: 40px 0 0; }
.sisaltoalue h2:not(:first-child), .minusta .sisalto > h2 { margin-top: 40px; }
.minusta .m-rivi + h2 { margin-top: 20px; }
/* Ajankohtaista: uutiskortit kuten nykyisen sivun ruudukko (3 / 2 / 1 palstaa) */
.uutisruudukko { display: flex; flex-wrap: wrap; margin: 0 -10px; }
.uutinen { width: 33.3333%; padding: 10px; }
.uutinen-laatikko { height: 100%; background: #fff; border: 1px solid rgba(0,0,0,.1); padding: 15px; }
.uutinen h2 { font: 600 16.8px/23.52px Roboto, sans-serif; color: #333; margin: 10px 0 5px; }
.uutinen h2 a { color: #303133; text-decoration: none; }
.uutinen h2 a:hover, .uutinen h2:hover { color: #23527c; }
.uutinen p { font: 400 14px/25.2px Roboto, sans-serif; color: #4a4a4a; margin: 0; }
.lue-lisaa { display: block; font: 500 14px/25.2px Montserrat, sans-serif; color: #000b78; text-decoration: none; transition: all .3s ease-in-out; }

/* Uutisen oma sivu (OceanWP:n blogisivu): keskitetty otsikko, ohut viiva, kello + päiväys */
.uutissivu { padding: 50px 0; }
.uutissivu article { max-width: 700px; margin: 21px auto 0; padding: 0 20px; }
.uutissivu h1 { font: 600 34px/47.6px Montserrat, sans-serif; letter-spacing: .6px; color: #333; text-align: center; padding: 0 0 20px; margin: 0 0 15px; border-bottom: 1px solid #f1f1f1; }
.julkaistu { display: flex; justify-content: center; list-style: none; margin: 20px -20px; padding: 0 0 10px; border-bottom: 1px solid #f1f1f1; font-size: 14px; line-height: 18.2px; color: #4a4a4a; }
.julkaistu li { padding: 0 0 5px; line-height: 19.6px; letter-spacing: .6px; }
.kello { display: inline-block; width: 17px; height: 17px; margin-right: 9.6px; vertical-align: -1px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 34' fill='none' stroke='%23000' stroke-width='2.2'%3E%3Ccircle cx='17' cy='17' r='15.4'/%3E%3Cpath d='M17 7.5V17h7.5' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 34' fill='none' stroke='%23000' stroke-width='2.2'%3E%3Ccircle cx='17' cy='17' r='15.4'/%3E%3Cpath d='M17 7.5V17h7.5' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat; }
.julkaistu time { font-size: 12px; line-height: 16.8px; }
.nakymaton { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.uutinen-teksti { font-size: 14px; line-height: 25.2px; color: #4a4a4a; margin: 0 0 20px; }

/* Minusta: vaalea violetti tausta, teksti + kuva oikealla */
.minusta { background: #f2eff4; padding: 100px 0 0; }
.minusta .sisalto { padding: 60px 40px 40px; }
.minusta h2 { font-size: 25px; }
.m-rivi { display: grid; grid-template-columns: 1fr 224.7px; column-gap: 20px; margin-bottom: 20px; }
.m-rivi.keski { align-items: center; }
.m-rivi.yla { align-items: start; }
.m-kuva { padding-right: 20px; }
.m-kuva img { width: 204.7px; margin-bottom: 20px; }

/* Yhteystiedot */
.yhteys-tiedot .sisalto { padding: 40px 0; }
.kolme { display: grid; grid-template-columns: repeat(3, 1fr); }
.yhteys-tiedot .kolme > div { padding: 20px; text-align: center; }
.yhteys-tiedot h2 { font-size: 25px; }
.yhteys-tiedot p { margin: 0 0 20px; }
.lomake-alue { background: var(--sininen); padding: 40px 0; }
.lomake-laatikko { background: #fff; padding: 40px; }
.lomake-laatikko h2 { font-size: 25px; }
.lomake label { display: block; margin-bottom: 20px; font-size: 14px; line-height: 25.2px; color: var(--perus); }
.lomake input[type=text], .lomake input[type=email], .lomake textarea { display: block; width: 100%; margin-top: 0; min-height: 40px; padding: 6px 12px; border: .8px solid #ddd; border-radius: 3px; background: transparent; font: inherit; color: #333; }
.lomake textarea { height: 224px; resize: vertical; }
.lomake input[type=submit] { width: 99px; height: 42px; padding: 0; border: .8px solid #fff; border-radius: 0; background: var(--sininen); color: #fff; font: 600 12px/1 Montserrat, sans-serif; letter-spacing: .1em; text-transform: uppercase; cursor: pointer; }
.lomake-huom { font-size: 14px; color: var(--perus); }

/* Alapalkki */
.ala-widgetit { background: #222; padding: 30px 0; }
.ala-widgetit .kolme > div { padding: 0 15px; text-align: center; }
.ala-widgetit .kolme { width: 1200px; max-width: 90%; }
.ala-widgetit h3 { font-size: 18px; line-height: 25.2px; color: #fff; margin-bottom: 20px; }
.ala-widgetit p { font-size: 14px; font-weight: 400; line-height: 25.2px; color: #fff; margin: 0 0 20px; }
.ala-widgetit a { color: #fff; text-decoration: none; }
.ala-palkki { background: #1b1b1b; padding: 15px 0; color: #e8e8e8; font-size: 12px; line-height: 1; text-align: center; }
footer { padding-bottom: 30px; }

/* Ylös-nappi oikeassa alakulmassa (kuten nykyisellä sivulla): näkyy vierittäessä */
.ylos { display: none; opacity: 0; position: fixed; right: 20px; bottom: 20px; z-index: 100; width: 40px; height: 40px; border-radius: 2px; background: rgba(0, 0, 0, .4); cursor: pointer; transition: .3s; }
.ylos.nakyy { display: block; }
.ylos.esiin { opacity: 1; }
.ylos:hover { background: rgba(0, 0, 0, .8); }
.ylos::before { content: ''; position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; border-left: 2px solid #fff; border-top: 2px solid #fff; transform: translate(-50%, -25%) rotate(45deg); }

/* Tabletti ja puhelin (OceanWP vaihtaa valikon alle 960 px) */
@media (max-width: 1024px) {
  .uutinen { width: 50%; }
  .etu .sisalto { padding-left: 20px; padding-right: 20px; }
}
@media (max-width: 959px) {
  .julkaistu { margin-bottom: 40px; }
  .paavalikko { display: none; }
  .valikkonappi { display: inline-flex; align-items: center; gap: 8px; background: none; border: 0; padding: 0; font: 600 13px/1 Montserrat, sans-serif; color: #555; letter-spacing: .6px; cursor: pointer; }
  .palkit { position: relative; width: 16px; height: 2px; background: currentColor; }
  .palkit::before, .palkit::after { content: ''; position: absolute; left: 0; width: 16px; height: 2px; background: currentColor; }
  .palkit::before { top: -5px; } .palkit::after { top: 5px; }
}
@media (max-width: 767px) {
  .uutinen { width: 100%; }
  .etu .sisalto { padding: 10px; }
  .iso-logo img { width: 355.2px; height: 115.4px; }
  .esittely, .rivi, .m-rivi, .kolme { grid-template-columns: 1fr; }
  .esittely-kuva img { width: 208px; }
  .palvelut { grid-template-columns: 1fr; }
  .kortti img { width: 100%; height: auto; }
  .rivi.kuva-oikea .rivi-kuva { order: 0; }
  .rivi.levea .rivi-kuva img { width: 100%; height: auto; }
  .rivi.nelio .rivi-kuva img { width: 100%; height: auto; }
  .rivi-teksti { padding: 20px !important; }
  .aalto { width: calc(183% + 1.3px); }
  .banneri { height: 450px; }
  .banneri h1 { font-size: 30px; line-height: 30px; }
  .banneri-seksuaaliterapia { background-position: 0 0; }
  .sisaltoalue .sisalto { padding: 20px; }
  .sisaltoalue h2, .minusta h2 { font-size: 20px; }
  .minusta .sisalto { padding: 20px 20px 20px; }
  .m-kuva { padding: 0 0 20px; order: -1; }
  .m-rivi:first-child .m-kuva { padding: 20px 0 20px 20px; }
  .m-rivi:first-child .m-kuva img { width: 191.9px; }
  .m-rivi.yla .m-kuva img { width: 124px; margin: 0 auto 20px; }
  .lomake-laatikko { padding: 20px; }
}
@media (max-width: 480px) {
  .uutissivu h1 { font-size: 26px; line-height: 36.4px; }
  .logo img { width: 160px; height: 52px; }
  .ylos { right: 10px; bottom: 10px; width: 26px; height: 26px; }
  .ylos::before { width: 6px; height: 6px; }
}
/* Some-kuvakkeet alaosassa */
.ala-widgetit .some { list-style: none; display: flex; justify-content: center; flex-wrap: wrap; gap: 18px; margin: 10px auto 0; padding: 0; }
.ala-widgetit .some a { display: inline-flex; width: 44px; height: 44px; align-items: center; justify-content: center; border-radius: 50%; color: #fff; }
.ala-widgetit .some a:hover, .ala-widgetit .some a:focus-visible { background: rgba(255,255,255,.12); }
.ala-widgetit .some svg { fill: currentColor; }