/* vanhapostitalo.fi – tyylit. Tavoite: sama näkö kuin nykyisellä Divi-sivustolla (Open Sans, viininpunainen #5f2d4e,
   kulta #b9952f, 1080 px sisältö, 50 px osioväli, reunalliset versaalinapit), ilman Divin JavaScriptiä. */
:root {
  --viini: #5f2d4e; --viini-tumma: #4a2340; --kulta: #b9952f; --tumma: #2a2e40; --teksti: #666; --otsikko: #333;
  --harmaa: #ededed; --vaalea: #f4f7f0; --beige: #f4ecda; --valk: #fff; --leveys: 1080px;
  --fontti: 'Open Sans', 'Open Sans Fallback', Helvetica, Arial, Lucida, sans-serif;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; font-family: var(--fontti); font-size: 14px; line-height: 1.7em; font-weight: 500; color: var(--teksti); background: var(--valk);
  -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--viini); text-decoration: none; }
a:hover { text-decoration: underline; }
/* Tekstin seassa oleva linkki erottuu muutenkin kuin värillä (Lighthouse link-in-text-block 25.10.2026); puhelin- ja sähköpostilinkit riittävän isoiksi kosketukselle */
.teksti p a:not(.nappi), .teksti li a:not(.nappi) { text-decoration: underline; text-decoration-color: rgba(95, 45, 78, .45); text-underline-offset: 2px; }
main a[href^="tel:"]:not(.nappi), main a[href^="mailto:"]:not(.nappi) { display: inline-block; padding: 3px 0; }
/* Sivun sisäinen tarjouspyyntölomake kapeammaksi (Janne 25.10.2026: koko sivun levyinen lomake oli sekava) */
.vkp .vkp-inline { max-width: 640px; margin: 0 auto; }   /* keskelle sivua (Janne 25.10.) */
/* Lomake piirtyy palkki.js:llä latauksen jälkeen → tila varataan (Lighthouse CLS 0,42 tarjouspyyntösivulla 25.10.2026; mitattu 1280 px 951, 700 px 1123, 412 px 1221) */
[data-vk-quote-form] { min-height: 951px; }
@media (max-width: 760px) { [data-vk-quote-form] { min-height: 1123px; } }
@media (max-width: 480px) { [data-vk-quote-form] { min-height: 1221px; } }
h1, h2, h3, h4, h5, h6 { font-family: var(--fontti); color: var(--otsikko); font-weight: 500; line-height: 1.3em; padding-bottom: 10px; margin: 0; }
h1 { font-size: 30px; } h2 { font-size: 26px; } h3 { font-size: 22px; } h4 { font-size: 18px; } h5 { font-size: 16px; } h6 { font-size: 14px; }
/* Otsikkotasot ilman hyppyjä (Lighthouse heading-order 25.10.2026): kokoaja laskee tagin (h4 → h3), luokka pitää ulkoasun */
.h3 { font-size: 22px; } .h4 { font-size: 18px; } .h5 { font-size: 16px; }
p { margin: 0; padding-bottom: 1em; }
p:last-child { padding-bottom: 0; }
ul, ol { padding: 0 0 23px 1em; margin: 0; line-height: 26px; }
ul { list-style: disc; }
li { margin: 0; }
blockquote { border-left: 5px solid var(--viini); margin: 20px 0 30px; padding-left: 20px; font-style: italic; }
hr { border: 0; border-top: 1px solid #e2e2e2; margin: 20px 0; }
strong, b { font-weight: 700; }
table { width: 100%; border-collapse: collapse; margin-bottom: 1em; }
td, th { padding: 6px 10px; border-bottom: 1px solid #e8e8e8; text-align: left; vertical-align: top; }
iframe { max-width: 100%; border: 0; }
.vaalea, .vaalea h1, .vaalea h2, .vaalea h3, .vaalea h4, .vaalea p { color: var(--valk); }

/* ---- rakenne ---- */
.osio { position: relative; padding: 50px 0; background: var(--valk); background-size: cover; background-position: 50%; }
.osio.tumma { color: #fff; background-color: var(--viini); background-image: radial-gradient(circle at top right, rgb(42 46 64 / .1) 0%, rgb(42 46 64 / .62) 90%), var(--tausta); }
/* hero: pienempi taustakuva kapeille näytöille (LCP mobiilissa, PageSpeed 25.10.2026) */
@media (max-width: 600px) { .osio.tumma.hero { background-image: radial-gradient(circle at top right, rgb(42 46 64 / .1) 0%, rgb(42 46 64 / .62) 90%), var(--tausta-s, var(--tausta)); } }
@media (min-width: 601px) and (max-width: 1100px) { .osio.tumma.hero { background-image: radial-gradient(circle at top right, rgb(42 46 64 / .1) 0%, rgb(42 46 64 / .62) 90%), var(--tausta-m, var(--tausta)); } }
.osio.tumma h1, .osio.tumma h2, .osio.tumma h3, .osio.tumma h4, .osio.tumma p { color: #fff; }
.osio.tumma a:not(.nappi) { color: #fff; text-decoration: underline; }
:root { --savy: #f6f1e7; }   /* lämmin vaalea beige, joka toinen osio (Janne 25.10.: koko sivu oli samaa taustaa) */
.osio:nth-of-type(even):not(.tumma) { background: var(--savy); }
.osio:nth-of-type(even):not(.tumma) .vpe-ic, .osio:nth-of-type(even):not(.tumma) .uutinen, .osio:nth-of-type(even):not(.tumma) details.ukk { background: #fff; }
.rivi { width: 80%; max-width: var(--leveys); margin: 0 auto; padding: 2% 0; display: flex; flex-wrap: wrap; gap: 0 5.5%; align-items: flex-start; }
.rivi + .rivi { padding-top: 0; }
.sarake { flex: 1 1 100%; min-width: 0; }
.sarake > * + * { margin-top: 30px; }
.sarake > .nappi-rivi + .nappi-rivi { margin-top: 12px; }
.sarake > .teksti + .nappi-rivi { margin-top: 24px; }
@media (min-width: 981px) {
  .sarake.s-1_2 { flex-basis: 47.25%; } .sarake.s-1_3 { flex-basis: 29.6667%; } .sarake.s-2_3 { flex-basis: 64.833%; }
  .sarake.s-1_4 { flex-basis: 20.875%; } .sarake.s-3_4 { flex-basis: 73.625%; } .sarake.s-1_5 { flex-basis: 15.6%; }
  .sarake.s-2_5 { flex-basis: 36.7%; } .sarake.s-3_5 { flex-basis: 57.8%; } .sarake.s-1_6 { flex-basis: 12.08%; } .sarake.s-4_4 { flex-basis: 100%; }
}
@media (max-width: 980px) {
  .rivi { width: 90%; padding: 4% 0; gap: 0; }
  .sarake + .sarake { margin-top: 30px; }
  .osio { padding: 40px 0; }
  .sarake.s-1_4, .sarake.s-1_3, .sarake.s-1_5, .sarake.s-1_6 { flex-basis: 100%; }
}
@media (min-width: 768px) and (max-width: 980px) {
  .rivi.kortit { gap: 0 4%; } .rivi.kortit .sarake.s-1_4 { flex-basis: 48%; margin-top: 0; }
}
.teksti.keskitetty, .teksti.keskitetty h1, .teksti.keskitetty h2, .teksti.keskitetty h3, .teksti.keskitetty h4 { text-align: center; }
.teksti.oikealle { text-align: right; }
.teksti h1 + h2, .teksti h2 + h3 { padding-top: 6px; }
.teksti > :last-child { padding-bottom: 0; }

/* ---- napit (Divi et_pb_button) ---- */
/* ---- napit (Janne 25.10.2026: WordPress-aikaiset isot versaalinapit uusiksi) ----
   Yksi mitoitus kaikille: 48 px korkeus, 8 px pyöristys, 15 px lihavoitu. Ensisijainen (.soita) täytetty viininpunainen,
   toissijainen reunallinen, WhatsApp omalla värillä ja ikonilla. Ei hover-hyppyä (ennen padding kasvoi), vain väri ja pieni nosto. */
.nappi-rivi { display: flex; flex-wrap: wrap; gap: 12px; padding: 0; align-items: center; }
/* Janne 25.10.: napit keskelle joka sivulla – WordPressin left/right-tasaukset ohitetaan; vain vasemmalle tasatun tekstin sisällä nappi pysyy tekstin linjassa */
.nappi-rivi, .nappi-rivi.center, .nappi-rivi.left, .nappi-rivi.right { justify-content: center; }
.teksti:not(.keskitetty) > .nappi-rivi { justify-content: flex-start; }
.nappi { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 48px; padding: 0 22px; font-size: 15px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; line-height: 1.2;
  border: 2px solid var(--viini); border-radius: 8px; color: var(--viini); background: #fff; text-decoration: none; white-space: nowrap; transition: background .15s, color .15s, border-color .15s, transform .15s, box-shadow .15s; }
.nappi:hover { background: var(--viini); color: #fff; text-decoration: none; transform: translateY(-1px); box-shadow: 0 6px 16px rgba(95, 45, 78, .18); }
.nappi.soita { background: var(--viini); color: #fff; }
.nappi.soita:hover { background: var(--viini-tumma); border-color: var(--viini-tumma); }
.nappi.whatsapp { color: #0b6e63; border-color: #0b6e63; }   /* 6:1 valkoisella (Lighthouse 25.10.2026) */
.nappi.whatsapp:hover { background: #0b6e63; color: #fff; box-shadow: 0 6px 16px rgba(11, 110, 99, .2); }
/* ikonit tekstin väristä (mask) – puhelin ja puhekupla */
.nappi.soita::before, .nappi.whatsapp::before { content: ''; width: 18px; height: 18px; flex: 0 0 18px; background: currentColor; -webkit-mask: var(--ikoni) center / contain no-repeat; mask: var(--ikoni) center / contain no-repeat; }
.nappi.soita { --ikoni: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.1.4 2.3.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1A17 17 0 0 1 3 4c0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.3.2 2.5.6 3.6.1.3 0 .7-.2 1z'/%3E%3C/svg%3E"); }
.nappi.whatsapp { --ikoni: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 0 0-8.6 15.1L2 22l5-1.3A10 10 0 1 0 12 2zm0 2a8 8 0 1 1-4.2 14.8l-.3-.2-2.6.7.7-2.5-.2-.3A8 8 0 0 1 12 4zm-3 4.5c-.2 0-.5.1-.7.3-.3.3-1 1-1 2.3s1 2.7 1.1 2.9c.2.2 2 3.1 4.9 4.2 2.4.9 2.9.8 3.4.7.5-.1 1.7-.7 1.9-1.4.2-.7.2-1.2.2-1.3-.1-.1-.3-.2-.6-.3l-2-1c-.3-.1-.5-.2-.7.2l-.9 1.1c-.2.2-.3.2-.6.1-.3-.2-1.3-.5-2.4-1.5-.9-.8-1.5-1.8-1.7-2.1-.2-.3 0-.5.1-.6l.5-.5.3-.5v-.5l-.9-2.2c-.2-.6-.5-.5-.7-.5h-.6z'/%3E%3C/svg%3E"); }
.osio.tumma .nappi { color: #fff; border-color: #fff; background: transparent; }
.osio.tumma .nappi:hover { background: #fff; color: var(--viini); box-shadow: 0 6px 16px rgba(0, 0, 0, .25); }
.osio.tumma .nappi.soita { background: var(--viini); border-color: var(--viini); color: #fff; }
.osio.tumma .nappi.soita:hover { background: #fff; color: var(--viini); border-color: #fff; }
.osio.tumma .nappi.whatsapp { color: #fff; border-color: #fff; }
.osio.tumma .nappi.whatsapp:hover { background: #fff; color: #0b6e63; }
.hero .sarake { text-align: center; }
.hero .sarake > .nappi-rivi, .hero .sarake > .nappi-rivi + .nappi-rivi { display: inline-flex; margin: 0 6px 10px; padding: 0; vertical-align: top; }   /* etusivun kaksi nappiriviä samalle tasolle, keskitettynä */
@media (max-width: 480px) { .nappi-rivi { flex-direction: column; align-items: stretch; } .nappi { width: 100%; white-space: normal; } .hero .sarake > .nappi-rivi, .hero .sarake > .nappi-rivi + .nappi-rivi { display: flex; margin: 0 0 10px; } }

/* ---- hero ---- */
.hero { padding: 70px 0 60px; }
.hero h1 { font-size: 36px; font-weight: 700; text-shadow: 0 1px 3px rgb(0 0 0 / .35); }
.hero h2, .hero .ingressi { font-size: 20px; font-weight: 400; text-shadow: 0 1px 3px rgb(0 0 0 / .35); }
.hero .ingressi { margin: 10px auto 0; max-width: 820px; line-height: 1.5; }
.hero .teksti { margin-bottom: 20px; }
@media (max-width: 767px) { .hero { padding: 40px 0 30px; } .hero h1 { font-size: 26px; } .hero h2 { font-size: 17px; } }

/* ---- blurb (Divi et_pb_blurb) ---- */
.blurb { max-width: 550px; margin: 0 auto; word-wrap: break-word; }
.blurb.vasen { display: flex; gap: 14px; align-items: flex-start; max-width: none; margin: 0; }
.blurb.vasen .blurb-kuva { flex: 0 0 64px; }
.blurb.vasen .blurb-kuva img { width: 64px; }
.blurb.ylos { text-align: left; }
.blurb.ylos.keskitetty { text-align: center; }
.blurb-kuva { margin-bottom: 20px; }
.blurb.vasen .blurb-kuva { margin-bottom: 0; }
.blurb-kuva img { margin: 0 auto; border-radius: 4px; }
.blurb h4, .blurb .h4 { padding-bottom: 10px; }
.blurb h4 a, .blurb .h4 a { color: var(--otsikko); }
.blurb .blurb-teksti > p:last-child { padding-bottom: 0; }
.blurb .ikoni { display: inline-block; width: 48px; height: 48px; color: var(--viini); }
.blurb .ikoni svg { width: 48px; height: 48px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.blurb.keskitetty .blurb-kuva { text-align: center; }
/* huonekortit (etusivu/aluesivut): kuva, otsikko, lista, Katso lisää */
.sarake.s-1_4 .blurb.ylos { text-align: left; }
.sarake.s-1_4 .blurb h4, .sarake.s-1_4 .blurb .h4 { padding: 0 18px 6px; font-weight: 700; }
.sarake.s-1_4 .blurb ul { padding-bottom: 10px; }
/* varustelu-ikonirivit (huonesivut): monta blurbia pienissä sarakkeissa */
.rivi.ikonirivi .sarake { flex: 1 1 140px; max-width: 220px; text-align: center; margin-top: 0; }
.rivi.ikonirivi .blurb h4, .rivi.ikonirivi .blurb .h4 { font-size: 15px; font-weight: 600; }
.rivi.ikonirivi .blurb-kuva { margin-bottom: 8px; }

/* ---- kuvat ja galleria ---- */
figure.kuva { margin: 0; }
figure.kuva.keskitetty { text-align: center; }
figure.kuva.keskitetty img { margin: 0 auto; }
figure.kuva img { border-radius: 4px; }
.galleria { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.galleria img { width: 100%; height: 160px; object-fit: cover; border-radius: 4px; }
.kartta iframe, .ajanvaraus iframe { width: 100%; height: 400px; border-radius: 4px; }
video { width: 100%; border-radius: 4px; }
iframe[src*="youtube"], iframe[src*="vimeo"] { width: 100%; aspect-ratio: 16 / 9; height: auto; }

/* ---- UKK (toggle) ---- */
details.ukk { border: 1px solid #e2e2e2; border-radius: 4px; margin-bottom: 10px; background: #fff; }
details.ukk summary { cursor: pointer; padding: 14px 18px; font-weight: 700; color: var(--otsikko); list-style: none; display: flex; justify-content: space-between; }
details.ukk summary::-webkit-details-marker { display: none; }
details.ukk summary::after { content: '+'; color: var(--viini); font-size: 20px; line-height: 1; }
details.ukk[open] summary::after { content: '–'; }
details.ukk > div { padding: 0 18px 14px; }

/* ---- tiimi ---- */
.tiimi { text-align: center; }
.tiimi img { margin: 0 auto 14px; border-radius: 4px; }
.tiimi h4, .tiimi .h4 { padding-bottom: 2px; }
.tiimi .rooli { color: var(--viini); font-weight: 600; font-size: 13px; }

/* ---- uutiset (blog) ---- */
.uutiset { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 30px; }
.uutinen { background: #fff; border: 1px solid #e8e8e8; border-radius: 4px; overflow: hidden; display: flex; flex-direction: column; }
.uutinen img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.uutinen .sisus { padding: 18px 20px 20px; }
.uutinen h3, .uutinen .h3 { font-size: 18px; font-weight: 700; padding-bottom: 6px; }
.uutinen h3 a, .uutinen .h3 a { color: var(--otsikko); }
.uutinen .pvm { font-size: 12px; color: #6a6a6a; padding-bottom: 8px; }
.uutinen .lue { font-weight: 700; }
.artikkeli-otsake { padding-bottom: 20px; }
.artikkeli-otsake .pvm { color: #6a6a6a; font-size: 13px; }
.artikkeli-kuva img { border-radius: 4px; margin-bottom: 20px; }

/* ---- hinta alkaen (huonesivu) ---- */
.hinta-alkaen { display: inline-block; background: var(--beige); color: var(--tumma); border-radius: 4px; padding: 8px 14px; font-size: 15px; margin: 6px 0 12px; }
.hinta-alkaen b { color: var(--viini); font-size: 18px; }
.hinta-alkaen a { font-weight: 700; margin-left: 10px; }

/* ---- vk-haku (hero-palkki) ---- */
.vk-haku { min-height: 88px; margin-top: 18px; }   /* haku.js:n lomakkeen korkeus leveyden mukaan – ilman varausta sisältö hyppäsi 154 px (PSI CLS 0,38, 25.10.2026) */
@media (max-width: 640px) { .vk-haku { min-height: 136px; } }
@media (max-width: 560px) { .vk-haku { min-height: 226px; } }

/* ---- ylätunniste ---- */
.yla { background: var(--harmaa); border-bottom: 1px solid #ddd; }
.yla-rivi { max-width: var(--leveys); width: 90%; margin: 0 auto; display: flex; align-items: center; gap: 20px; padding: 10px 0; }
.logo { flex: 0 0 auto; }
.logo img { height: 54px; width: 305px; object-fit: contain; }   /* Janne 25.10.: Divin 95 px oli liian iso; mitat kiinteät (480×85) → ei tasonsiirtymää */
.yla .puh { margin-left: auto; font-weight: 700; color: var(--viini); font-size: 16px; white-space: nowrap; }
.paavalikko { position: sticky; top: 0; z-index: 90; background: #fff; box-shadow: 0 1px 0 rgb(0 0 0 / .1); }   /* alavalikko sivun lohkojen (z≤60) yli, 2.11.2026 */
.paavalikko > .yla-rivi { padding: 0; }
.paavalikko ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; }
.paavalikko li { position: relative; }
.paavalikko li > a { display: block; padding: 16px 11px; font-weight: 700; font-size: 15px; color: #3f3f3f; letter-spacing: 1px; line-height: 1.2em; text-transform: none; }
.paavalikko li > a:hover, .paavalikko li.nyt > a { color: var(--viini); text-decoration: none; }
.paavalikko li ul { position: absolute; left: 0; top: 100%; min-width: 260px; background: #fff; border-top: 3px solid var(--viini); box-shadow: 0 2px 5px rgb(0 0 0 / .1);
  display: none; flex-direction: column; z-index: 60; padding: 6px 0; }
.paavalikko li:hover > ul, .paavalikko li:focus-within > ul { display: flex; }
.paavalikko li ul li > a { padding: 8px 20px; font-size: 14px; font-weight: 600; letter-spacing: 0; }
.paavalikko .kieli > a { color: var(--viini); }
.valikko-nappi { display: none; }
@media (max-width: 980px) {
  .yla-rivi { padding: 10px 0; }
  .logo img { height: 42px; width: 237px; }
  .yla .puh { font-size: 14px; }
  .valikko-nappi { display: block; margin-left: auto; background: var(--viini); color: #fff; border: 0; border-radius: 3px; padding: 8px 12px; font: inherit; font-weight: 700; cursor: pointer; }
  .paavalikko > .yla-rivi { display: block; }
  .paavalikko ul.taso1 { display: none; flex-direction: column; padding: 6px 0 10px; }
  .paavalikko.auki ul.taso1 { display: flex; }
  .paavalikko li > a { padding: 10px 6px; border-bottom: 1px solid #eee; }
  .paavalikko li ul { position: static; display: flex; border: 0; box-shadow: none; padding: 0 0 0 16px; min-width: 0; }
  .paavalikko li ul li > a { border: 0; padding: 6px; }
}

/* ---- alatunniste ---- */
.ala { background: var(--harmaa); color: #000; padding: 50px 0 30px; font-size: 14px; }
.ala-rivi { max-width: var(--leveys); width: 90%; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 30px; }
.ala h2, .ala h4 { color: var(--viini); font-weight: 600; text-transform: uppercase; font-size: 16px; line-height: 1.5em; }
.ala a { color: #000; text-decoration: underline; }
.ala a:hover { color: var(--viini); }
.ala p { padding-bottom: 6px; }
.ala ul { list-style: none; padding: 0; line-height: 1.9em; }
.ala .lahialueet { grid-column: 1 / -1; border-top: 1px solid #ddd; padding-top: 18px; font-size: 13px; }
.ala .lahialueet h2, .ala .lahialueet h4 { font-size: 13px; display: inline; margin-right: 8px; }
.ala .lahialueet p { display: inline; line-height: 2em; }
.ala .lahialueet a { white-space: nowrap; }
.ala .logo img { height: 48px; width: 271px; margin-bottom: 10px; }
@media (max-width: 420px) { .logo img { height: 36px; width: 203px; } }
.ala-pohja { background: var(--viini); color: #fff; text-align: center; font-size: 13px; padding: 14px 20px; }
.ala-pohja a { color: #fff; }

/* ---- mobiilin soittonappi ---- */
.soita-kelluva { display: none; }
@media (max-width: 767px) {
  .soita-kelluva { display: flex; position: fixed; right: 14px; bottom: 88px; z-index: 40; width: 58px; height: 58px; border-radius: 50%; background: var(--viini); color: #fff;
    align-items: center; justify-content: center; box-shadow: 0 3px 12px rgb(0 0 0 / .35); }
  .soita-kelluva svg { width: 28px; height: 28px; fill: #fff; }
  body { padding-bottom: 0; }
  /* Kiinnittyvä haku (haku.js dock) näkyvissä: alareunan pilleri + oma soittonappi korvaavat kelluvan
     soittonapin ja chat-kuplan (Janne 31.10.2026: kaksi kelluvaa riittää). */
  html.vk-dock-on .soita-kelluva, html.vk-dock-on .vkfb { display: none !important; }
}

/* ---- evästeilmoitus (sama kuin Cookie Notice) ---- */
.evaste { position: fixed; left: 0; right: 0; bottom: 0; z-index: 100; background: rgba(100, 51, 83, .92); color: #fff; padding: 10px 16px; font-size: 13px; line-height: 1.4; display: none; }
.evaste.nakyy { display: block; }
.evaste .sisus { max-width: var(--leveys); margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; }
.evaste .sisus > span:first-child { flex: 1 1 260px; }
.evaste button { background: #00806f; color: #fff; border: 0; border-radius: 3px; padding: 7px 14px; font: inherit; font-weight: 700; cursor: pointer; }

/* ---- muut ---- */
.leipa { max-width: var(--leveys); width: 90%; margin: 0 auto; font-size: 12px; color: #999; padding: 10px 0 0; }
.leipa a { color: #999; }
.vpe .vpe-row { gap: 28px 38px; }
.ei-sisaltoa { padding: 80px 0; text-align: center; }
.sr { position: absolute; left: -9999px; }

/* ---- "Miksi varata suoraan meiltä" -etulista (sivun oma koodilohko WordPressissä, sama CSS) ---- */
#vpe{padding:6px 0}
#vpe .vpe-eb{text-align:center;font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--viini);font-weight:700;margin:0 0 20px}
#vpe .vpe-row{display:flex;flex-wrap:wrap;justify-content:center;gap:28px 38px}
#vpe .vpe-i{flex:1 1 150px;max-width:185px;min-width:0;text-align:center}
#vpe .vpe-ic{width:54px;height:54px;border-radius:50%;background:#f4ecda;display:flex;align-items:center;justify-content:center;margin:0 auto 13px}
#vpe .vpe-ic svg{width:27px;height:27px;fill:none;stroke:#b9952f;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
#vpe .vpe-t{font-weight:700;font-size:15px;color:#2a2e40;line-height:1.25;margin:0 0 5px;overflow-wrap:break-word;word-break:break-word}
#vpe .vpe-s{font-size:12.5px;color:#4f5566;line-height:1.45;margin:0}
#vpe .vpe-row{gap:24px}
#vpe .vpe-i{flex:1 1 100%;max-width:300px}
@media(max-width:600px){#vpe .vpe-row{gap:24px}#vpe .vpe-i{flex:1 1 100%;max-width:300px}}

/* ---- etulista tiiviinä (Janne 25.10.2026: vei liikaa tilaa) ---- */
.osio.edut { padding: 26px 0 10px; }
.osio.edut .rivi { padding: 0; }
.osio.edut #vpe { padding: 0; }
.osio.edut #vpe .vpe-eb { margin-bottom: 14px; }
.osio.edut #vpe .vpe-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px 18px; justify-content: stretch; }
.osio.edut #vpe .vpe-i { max-width: none; flex: none; }
.osio.edut #vpe .vpe-ic { width: 46px; height: 46px; margin-bottom: 8px; }
.osio.edut #vpe .vpe-ic svg { width: 23px; height: 23px; }
.osio.edut #vpe .vpe-t { font-size: 14px; margin-bottom: 3px; }
.osio.edut #vpe .vpe-s { font-size: 12px; line-height: 1.4; }
.osio.edut + .osio { padding-top: 30px; }
@media (max-width: 980px) { .osio.edut #vpe .vpe-row { grid-template-columns: repeat(2, 1fr); } .osio.edut #vpe .vpe-i:last-child { grid-column: 1 / -1; } }

/* ---- uutisnosto etusivulla: kolme pientä korttia vierekkäin (Janne 25.10.) ---- */
.uutiset.tiivis { grid-template-columns: repeat(3, 1fr); gap: 18px; }
.uutiset.tiivis .uutinen img { height: 150px; aspect-ratio: auto; }
.uutiset.tiivis .sisus { padding: 12px 14px 14px; }
.uutiset.tiivis h3, .uutiset.tiivis .h3 { font-size: 15px; line-height: 1.35; padding-bottom: 4px; }
.uutiset.tiivis .pvm { padding-bottom: 4px; }
.uutiset.tiivis .lue { font-size: 13px; }
.uutiset-kaikki { text-align: center; margin-top: 16px; font-weight: 700; }
@media (max-width: 980px) { .uutiset.tiivis { grid-template-columns: 1fr; } .uutiset.tiivis .uutinen { flex-direction: row; align-items: center; } .uutiset.tiivis .uutinen > a { flex: 0 0 110px; } .uutiset.tiivis .uutinen img { width: 110px; height: 80px; } }

/* ---- etusivun huonekortit portaalista (asunnot.js): kolme pääkorttia, muut pienempinä, iso asunto -kortti ---- */
.huonekortit { --acc: var(--viini); }
.huonekortit .muut-otsikko { text-align: center; margin-top: 34px; padding-bottom: 4px; font-size: 20px; color: var(--otsikko); }
.huonekortit .muut-ingressi { text-align: center; color: #555c6e; padding-bottom: 14px; }
.kapasiteetti { margin-top: 26px; background: var(--viini); color: #fff; border-radius: 6px; padding: 28px 32px; display: flex; flex-wrap: wrap; gap: 18px 36px; align-items: center; justify-content: space-between; }
.kapasiteetti h3, .kapasiteetti .h3 { color: #fff; font-weight: 700; font-size: 22px; padding-bottom: 8px; }
.kapasiteetti p { color: #f3e9ef; padding-bottom: 0; max-width: 62ch; }
.kap-teksti { flex: 1 1 460px; }
.kap-napit { display: flex; flex-direction: column; gap: 10px; align-items: stretch; min-width: 240px; }
.kap-napit .nappi { color: #fff; border-color: #fff; background: transparent; }
.kap-napit .nappi.soita { background: #fff; color: var(--viini); }
.kap-napit .nappi:hover { background: #fff; color: var(--viini); }
.kap-linkki { color: #fff; text-align: center; font-weight: 700; text-decoration: underline; font-size: 14px; }
.huonekortit .iso-kortti { margin-top: 18px; background: #fff; border: 1px solid #e8e8e8; border-radius: 6px; padding: 20px 24px; display: flex; flex-wrap: wrap; gap: 16px 30px; align-items: center; justify-content: space-between; }
.huonekortit .iso-kortti > div { flex: 1 1 420px; }
.huonekortit .iso-kortti h4, .huonekortit .iso-kortti .h4 { font-weight: 700; padding-bottom: 6px; }
.huonekortit .iso-kortti p { padding-bottom: 0; }
.huonekortit .iso-kortti .nappi-rivi { margin: 0; }

/* ---- Yrityksille: vaiheet + yhteyshenkilö (25.10.2026) ---- */
.vaiheet .vaihe { text-align: left; padding: 6px 4px; }
.vaiheet .num { display: inline-flex; width: 44px; height: 44px; border-radius: 50%; background: var(--viini); color: #fff; font-weight: 700; font-size: 20px; align-items: center; justify-content: center; margin-bottom: 10px; }
.vaiheet h3, .vaiheet .h3 { font-size: 17px; font-weight: 700; padding-bottom: 6px; }
.vaiheet p { font-size: 14px; line-height: 1.6em; padding-bottom: 0; }
.henkilo { text-align: center; background: var(--savy); border-radius: 6px; padding: 20px; }
.henkilo img { width: 100%; max-width: 360px; height: auto; border-radius: 6px; margin-bottom: 12px; }
.henkilo .henkilo-tiedot { line-height: 1.7em; padding-bottom: 10px; }
.nappi.pieni { min-height: 36px; margin: 8px 0; padding: 0 14px; font-size: 13px; }

/* ---- hinnasto (elävät hinnat: yksi hinta alv 0 %, alv 13,5 % lisätään – Janne 25.10.2026) ---- */
.hinnasto td b { font-size: 16px; color: var(--viini); }
.osio.valkoinen:not(.tumma) { background: #fff; }   /* hinnaston osio valkoisena beigen vuorottelusta huolimatta (Janne 25.10.) */
.hinnasto { overflow-x: auto; margin: 10px 0 18px; }
.hinnasto table { width: 100%; border-collapse: collapse; font-size: 14px; }
.hinnasto th, .hinnasto td { padding: 8px 10px; border-bottom: 1px solid #e3dbd0; text-align: right; white-space: nowrap; }
.hinnasto th:first-child, .hinnasto td:first-child { text-align: left; white-space: normal; }
.hinnasto thead th { background: var(--savy); color: var(--viini); font-weight: 700; text-align: center; }
.hinnasto thead tr:first-child th:first-child { text-align: left; }
.hinnasto-lisa { font-weight: 700; color: var(--viini); margin: 10px 0 4px; }   /* Janne 25.10.: yhden yön majoitukset +20 € */
.hinnasto-huom { font-size: 13px; color: #555; }

/* ---- Etusivun ostopolku (STR-katselmus 31.10.2026): kaksi taloa kuvilla → asunnot kohteittain → isäntä ---- */
.talot { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 8px; }
.talo { background: #fff; border: 1px solid rgba(0, 0, 0, .08); border-radius: 14px; overflow: hidden; box-shadow: 0 8px 24px rgba(0, 0, 0, .06); display: flex; flex-direction: column; min-width: 0; }
.talo figure.kuva { margin: 0; }
.talo figure.kuva img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 0; }
.talo-sisus { padding: 20px 22px 22px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.talo-sisus h3 { margin: 0; font-size: 21px; line-height: 1.25; }
.talo-sisus p { margin: 0; padding: 0; }
.talo-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13.5px; color: #555; }
.talo-meta span::before { content: '•'; margin-right: 8px; color: var(--kulta); }
.talo-meta span:first-child::before { content: none; }
.talo-napit { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; margin-top: auto; padding-top: 8px; }
.talo-napit a:not(.nappi) { font-weight: 600; }
.ryhma { display: flex; align-items: baseline; gap: 10px 14px; flex-wrap: wrap; margin: 36px 0 2px; scroll-margin-top: 120px; }
.ryhma h3 { margin: 0; font-size: 22px; }
.ryhma span { font-size: 14px; color: #666; }
.ryhma a { font-size: 14px; margin-left: auto; font-weight: 600; }
.isanta { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 44px; align-items: center; }
.isanta figure.kuva { margin: 0; }
.isanta figure.kuva img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 18px; box-shadow: 0 14px 40px rgba(0, 0, 0, .14); }
.isanta h2 { margin: 0 0 12px; }
.isanta .lead { font-size: 18px; font-weight: 600; color: var(--otsikko, #1d1d1f); }
.isanta .napit { display: flex; flex-wrap: wrap; gap: 12px 18px; align-items: center; margin-top: 18px; }
.isanta .napit a:not(.nappi) { font-weight: 600; }
.osio.arvostelut { background-image: linear-gradient(180deg, rgb(5 15 30 / .72), rgb(5 15 30 / .78)), var(--tausta); }
.osio.arvostelut .teksti p { opacity: .9; }
@media (max-width: 860px) {
  .talot { grid-template-columns: 1fr; }
  .isanta { grid-template-columns: 1fr; gap: 22px; }
  .ryhma a { margin-left: 0; }
}
/* Yksi sijaintiosio: kuva + "kaksi taloa" (Janne 31.10.2026: yksi kuva ja kaksi taloa, sitten kaikki asunnot saatavuuden mukaan) */
.sijainti { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 40px; align-items: center; }
.sijainti figure.kuva { margin: 0; }
.sijainti figure.kuva img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 16px; box-shadow: 0 12px 36px rgba(0, 0, 0, .12); }
.sijainti h2 { margin: 0 0 10px; }
.talolista { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 12px; }
.talolista li { padding: 12px 14px; border-left: 3px solid var(--kulta); background: rgba(0, 0, 0, .03); border-radius: 0 10px 10px 0; font-size: 15px; line-height: 1.55; }
.talolista li b { display: block; color: var(--otsikko, #1d1d1f); font-size: 16px; margin-bottom: 2px; }
.talolista li a { font-weight: 600; white-space: nowrap; }
@media (max-width: 860px) { .sijainti { grid-template-columns: 1fr; gap: 20px; } }
/* Luottamusrivi Kenelle-korttien alla (korvaa tumman "Varaa suoraan" -laatikon, Janne 31.10.2026) */
.edut4 { list-style: none; padding: 0; margin: 30px 0 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px 22px; }
.edut4 li { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; line-height: 1.5; color: #555; min-width: 0; }
.edut4 svg { flex: 0 0 28px; width: 28px; height: 28px; color: var(--kulta); margin-top: 2px; }
.edut4 b { display: block; font-size: 15px; color: var(--otsikko, #1d1d1f); margin-bottom: 2px; }
#asunnot { scroll-margin-top: 110px; }
@media (max-width: 860px) { .edut4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .edut4 { grid-template-columns: 1fr; } }
/* Osioiden taustarytmi käsin, kun vuorottelu ei riitä erottamaan osioita (Rahulihomes etusivu 31.10.2026) */
.osio.osio.harmaa:not(.tumma) { background: var(--savy); }
.osio.osio.beige:not(.tumma) { background: var(--beige); }
.osio.harmaa .kapasiteetti, .osio.beige .kapasiteetti { background: #fff; }
.lisarivi { margin-top: 28px; font-size: 15px; color: #555; }
.lisarivi a { font-weight: 600; }
.varauspyynto { margin-top: 44px; }
.varauspyynto h3 { font-size: 24px; margin: 0 0 6px; }
#form { scroll-margin-top: 110px; }

/* Kohdesivun piirreruudukko (Rahulihomes Lutakko 1.11.2026): kuva + otsikko + rivi. Työpöydällä 4 saraketta (.sarake.s-1_4),
   tabletilla 2 (.rivi.kortit), puhelimella 2 ruudukkona, jotta kahdeksan ruutua ei veny kahdeksaksi ruudulliseksi. */
.rivi.kortit.piirteet .sarake > * + * { margin-top: 10px; }
.piirteet figure.kuva { margin: 0; }
.piirteet figure.kuva img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 10px; }
.piirteet h3 { font-size: 17px; margin: 0 0 4px; padding: 0; }
.piirteet .teksti p { font-size: 14px; line-height: 1.55; color: #555; padding: 0; }
.piirteet .teksti a { font-weight: 600; }
@media (max-width: 767px) {
  .rivi.kortit.piirteet { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 14px; }
  .rivi.kortit.piirteet .sarake { margin-top: 0; }
  .piirteet h3 { font-size: 15px; }
  .piirteet .teksti p { font-size: 13px; }
}
.talolista li a { white-space: normal; }
/* Sijaintiosio pitkällä tekstillä (Lutakko 1.11.2026): kuva ja otsikko samalle tasolle, kuva 4:3 jotta se täyttää palstan paremmin. */
.sijainti.ylos { align-items: start; }
.sijainti.ylos figure.kuva img { aspect-ratio: 4 / 3; }
@media (max-width: 980px) { .sijainti.ylos figure.kuva img { aspect-ratio: 3 / 2; } }
/* Tapahtumasivun pikanapit valmiilla päiväväleillä (Suomipop, ralli 1.11.2026) */
.nappi-rivi.tapahtuma-napit { flex-wrap: wrap; gap: 10px; }
.nappi-rivi.tapahtuma-napit .nappi { text-transform: none; letter-spacing: 0; }

/* Maksutavat alatunnisteessa (1.11.2026) */
.ala .maksutavat { font-size: 13px; color: #9a9a9a; margin-top: 18px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.12); }
/* Yhteystiedot: kartta pyöristetyssä kehyksessä (1.11.2026) */
.kartta { margin-top: 24px; border-radius: 12px; overflow: hidden; box-shadow: 0 8px 24px rgb(0 0 0 / .12); }
.kartta iframe { display: block; width: 100%; height: 420px; border: 0; }

/* Artikkelit (1.11.2026): kapeampi lukupalsta, kuvat omina kuvioina, loppukehotus täysleveä */
body.artikkeli .osio:not(.beige) .rivi { max-width: 820px; }
body.artikkeli .osio:not(.beige) .teksti, body.artikkeli .osio:not(.beige) .sarake > p, body.artikkeli .osio:not(.beige) .sarake > ul, body.artikkeli .osio:not(.beige) .sarake > h2, body.artikkeli .osio:not(.beige) .sarake > h3 { font-size: 17px; line-height: 1.7; }
body.artikkeli figure.kuva { margin: 26px 0; }
body.artikkeli figure.kuva img { width: 100%; height: auto; border-radius: 10px; }
body.artikkeli figure.kuva figcaption { font-size: 13px; color: #6a6a6a; margin-top: 6px; text-align: center; }
body.artikkeli .artikkeli-kuva img { border-radius: 10px; }
body.artikkeli h2 { margin-top: 34px; }
/* Huonesivujen linkkirivi korttien alla (hakukone + käyttäjä, 1.11.2026) */
.asuntolinkit { font-size: 13px; color: #777; margin: 10px 0 0; line-height: 1.8; }
.asuntolinkit a { color: #555; font-weight: 600; }

/* Tapahtumasivut: suora varaus ensin -huomio ja odotuslista (2.11.2026) */
.huomio-suora { max-width: 760px; margin: 14px auto 0; padding: 10px 16px; border-left: 4px solid var(--kulta, #d08e02); background: #fbf7ee; font-size: 15px; line-height: 1.5; text-align: left; }
.odotuslista { max-width: 760px; margin: 28px auto 8px; padding: 22px 24px; background: #f6f3ea; border-radius: 10px; }
.odotuslista h3 { margin: 0 0 6px; font-size: 20px; }
.odotuslista .ol-p { margin: 0 0 14px; color: #555; font-size: 14.5px; }
.odotuslista form { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; position: relative; }
.odotuslista label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 600; color: #333; }
.odotuslista input:not([type=radio]) { width: 100%; padding: 10px 12px; border: 1px solid #d6d2c6; border-radius: 6px; font: inherit; font-size: 15px; background: #fff; }
.odotuslista .levea { grid-column: 1 / -1; }
.odotuslista fieldset { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px 18px; }
.odotuslista legend { font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.odotuslista label.radio { flex-direction: row; align-items: center; gap: 6px; font-weight: 500; font-size: 14px; }
.odotuslista .ol-send { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.odotuslista .ol-msg { font-size: 13.5px; color: #8a3b12; }
.odotuslista .ol-ok { margin: 0; font-weight: 600; color: #1f5c2e; }
@media (max-width: 640px) { .odotuslista form { grid-template-columns: 1fr; } .odotuslista { padding: 18px 16px; } }

/* Asiakastarina lainauskortteina (vakuutussivu, 2.11.2026) */
.tarina .lainaukset { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin: 26px 0 0; }
.tarina .lainaukset blockquote { margin: 0; padding: 22px 22px 18px; background: #fff; border: 0; border-top: 4px solid var(--kulta, #d08e02); border-radius: 10px; font-style: normal; box-shadow: 0 8px 24px rgba(0, 0, 0, .06); display: flex; flex-direction: column; }
.tarina .lainaukset blockquote p { margin: 0 0 12px; font-size: 15.5px; line-height: 1.6; color: #2b2b2b; flex: 1; }
.tarina .lainaukset blockquote footer { font-size: 12px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; color: #8a6a12; }
.tarina .lainaus-lahde { text-align: center; margin: 22px auto 0; max-width: 760px; color: #555; font-size: 14.5px; }
@media (max-width: 900px) { .tarina .lainaukset { grid-template-columns: 1fr; } }
/* Tapahtumakalenteri (koontisivu 2.11.2026) */
.tapahtumalista li { padding: 10px 0; border-bottom: 1px solid #e8e4da; }
.tapahtumalista li b { display: inline-block; min-width: 260px; }
.tapahtumalista li a { white-space: nowrap; font-weight: 600; }

:root{--viini:#0f2f4a;--viini-tumma:#0a2236;--kulta:#d08e02;--harmaa:#f2f2f2;--savy:#f1f3f6;--beige:#fbf3e3;--fontti:'Montserrat', 'Montserrat Fallback', Helvetica, Arial, sans-serif}

/* rahulihomes.com – brändin omat tyylit (lisätään tools/vp/tyyli.css:n perään; muuttujat :root-lohkosta brandit/rahulihomes.json).
   Tavoite: sama näkö kuin Divi-sivustolla 26.10.2026: Montserrat, valkoinen yksirivinen ylätunniste (logo | valikko | kultainen VARAA | harmaa puhelin),
   tummennettu hero, kulta #d08e02 korostuksena, tumma alatunniste. */
body { font-weight: 400; font-size: 15px; line-height: 1.65em; color: #444; }
h1, h2, h3, h4, h5, h6 { font-weight: 700; color: #1d1d1f; }
h1 { font-size: 34px; } h2 { font-size: 28px; } h3 { font-size: 20px; } h4 { font-size: 17px; }
.teksti p a:not(.nappi), .teksti li a:not(.nappi) { text-decoration-color: rgba(208, 142, 2, .6); }
a { color: #0f2f4a; }
/* ---- ylätunniste yhdellä rivillä ---- */
.yla { background: #fff; border-bottom: 1px solid #e6e6e6; position: sticky; top: 0; z-index: 90; }   /* yli sivun lohkojen (palkki.js .vkp z=50 peitti alavalikon tarjouspyyntösivulla, Janne 2.11.2026) */
.yla > .yla-rivi { width: 100%; max-width: none; padding: 0; gap: 0; align-items: stretch; }
.yla .logo { display: flex; align-items: center; padding: 10px 18px 10px 28px; }
.yla .logo img { height: 64px; width: 175px; }
.yla .paavalikko { position: static; flex: 1 1 auto; box-shadow: none; background: transparent; display: flex; align-items: center; justify-content: flex-end; }
.yla .paavalikko > .yla-rivi { width: auto; max-width: none; padding: 0; gap: 0; }
.yla .paavalikko li > a { padding: 12px 8px; font-size: 11.5px; font-weight: 600; letter-spacing: .8px; text-transform: uppercase; color: #3d3d3d; }
.yla .paavalikko li > a:hover, .yla .paavalikko li.nyt > a { color: var(--kulta); }
.yla .paavalikko li ul { border-top-color: var(--kulta); min-width: 280px; }
.yla .paavalikko li ul li > a { text-transform: none; letter-spacing: 0; font-size: 13px; font-weight: 600; }
.yla .paavalikko .kieli > a { color: #8a8a8a; font-size: 11px; padding-left: 7px; padding-right: 7px; }
.yla .paavalikko .kieli + .kieli > a { padding-left: 0; }
/* kielivalikko: nappi lipulla + pudotuslista kaikista kielistä */
.lippu { width: 18px; height: 12px; border-radius: 2px; box-shadow: 0 0 0 1px rgb(0 0 0 / .14); vertical-align: -2px; margin-right: 7px; flex: 0 0 auto; }
.yla .paavalikko .kielivalikko > .kieli-nappi { display: flex; align-items: center; gap: 0; margin: 0 4px 0 6px; padding: 12px 8px; background: none; border: 0; font: inherit; font-size: 11px; font-weight: 600; letter-spacing: .8px; color: #6a6a6a; cursor: pointer; line-height: 1.2em; }
.yla .paavalikko .kielivalikko > .kieli-nappi:hover, .yla .paavalikko .kielivalikko.auki > .kieli-nappi { color: var(--kulta); }
.yla .paavalikko .kielivalikko .kieli-nuoli { font-size: 9px; margin-left: 4px; opacity: .7; }
.yla .paavalikko .kielivalikko > ul { left: auto; right: 0; min-width: 170px; }
.yla .paavalikko .kielivalikko.auki > ul { display: flex; }
.yla .paavalikko .kielivalikko > ul li > a { display: flex; align-items: center; padding: 9px 16px; }
.yla .paavalikko .kielivalikko > ul li.nyt > a { color: #1d1d1f; background: #f6f3ea; }
.kieli-lyh { display: none; }
@media (max-width: 980px) {
  /* Puhelin: yksi rivi lippuja ja lyhenteitä, ei erillisiä nappeja (Janne 2.11.2026) */
  .yla .paavalikko .kielivalikko { margin-top: 6px; padding-top: 8px; border-top: 1px solid #eee; }
  .yla .paavalikko .kielivalikko > .kieli-nappi { display: none; }
  .yla .paavalikko .kielivalikko > ul { display: flex !important; flex-direction: row; flex-wrap: nowrap; gap: 0; padding: 0; align-items: center; }
  .yla .paavalikko .kielivalikko > ul li > a { padding: 8px 10px 8px 0; border: 0; font-size: 13px; font-weight: 600; color: #6a6a6a; letter-spacing: .4px; display: flex; align-items: center; }
  .yla .paavalikko .kielivalikko > ul li + li > a { padding-left: 14px; border-left: 1px solid #e6e6e6; }
  .yla .paavalikko .kielivalikko > ul li.nyt > a { color: #1d1d1f; background: none; }
  .yla .paavalikko .kielivalikko > ul li.nyt > a .kieli-lyh { border-bottom: 2px solid var(--kulta); }
  .yla .paavalikko .kielivalikko .kieli-nimi { display: none; }
  .yla .paavalikko .kielivalikko .kieli-lyh { display: inline; }
  .yla .paavalikko .kielivalikko .lippu { margin-right: 6px; }
}
.yla .yla-varaa, .yla .puh { display: flex; align-items: center; justify-content: center; margin: 0; padding: 0 24px; font-size: 13px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; white-space: nowrap; text-align: center; }
.yla .yla-varaa { background: var(--kulta); color: #fff; min-width: 150px; margin-left: 10px; }
.yla .yla-varaa:hover { background: #b97d00; text-decoration: none; }
.yla .puh { background: #e5e5e5; color: #424242; min-width: 180px; font-size: 13px; }
.yla .puh:hover { background: #d9d9d9; text-decoration: none; }
@media (max-width: 1360px) { .yla .paavalikko li > a { padding: 12px 6px; font-size: 11px; letter-spacing: .4px; } .yla .yla-varaa, .yla .puh { min-width: 0; padding: 0 14px; } .yla .logo { padding-left: 16px; } }
@media (max-width: 1180px) { .yla .paavalikko li > a { font-size: 10.5px; letter-spacing: .2px; padding: 12px 5px; } }
@media (max-width: 980px) {
  .yla { position: static; }
  .yla > .yla-rivi { flex-wrap: wrap; }
  .yla .logo { flex: 1 1 auto; padding: 8px 14px; }
  .yla .logo img { height: 48px; width: 131px; }
  .yla .paavalikko { order: 1; flex: 0 0 auto; display: block; }
  .yla .paavalikko > .yla-rivi { display: block; }
  .yla .valikko-nappi { margin: 10px 14px 10px 0; background: var(--kulta); border-radius: 3px; }
  .yla .paavalikko ul.taso1 { position: absolute; left: 0; right: 0; top: 100%; background: #fff; border-top: 1px solid #e6e6e6; box-shadow: 0 10px 24px rgb(0 0 0 / .12); z-index: 70; padding: 6px 16px 12px; }
  .yla .paavalikko li > a { padding: 11px 6px; }
  .yla .paavalikko li ul { position: static; display: flex; border: 0; box-shadow: none; padding: 0 0 0 14px; min-width: 0; }
  .yla .yla-varaa, .yla .puh { order: 2; flex: 1 1 50%; min-width: 0; padding: 14px 8px; margin: 0; font-size: 12px; }
  .yla > .yla-rivi { position: relative; }
}
/* ---- hero ja tummat osiot ---- */
.osio.tumma { background-color: #0c2340; background-image: linear-gradient(180deg, rgb(0 0 0 / .42), rgb(0 0 0 / .42)), var(--tausta); }
@media (max-width: 600px) { .osio.tumma.hero { background-image: linear-gradient(180deg, rgb(0 0 0 / .42), rgb(0 0 0 / .42)), var(--tausta-s, var(--tausta)); } }
@media (min-width: 601px) and (max-width: 1100px) { .osio.tumma.hero { background-image: linear-gradient(180deg, rgb(0 0 0 / .42), rgb(0 0 0 / .42)), var(--tausta-m, var(--tausta)); } }
.osio.tumma .teksti * { color: #fff !important; }   /* Divin vaaleat tekstit, myös span style="color:#000" hero-otsikoissa */
.hero { padding: 90px 0 70px; }
.hero h1 { font-size: 40px; font-weight: 700; line-height: 1.2em; text-shadow: 0 2px 6px rgb(0 0 0 / .35); }
.hero h2, .hero .ingressi { font-size: 18px; font-weight: 400; }
.hero .sarake > .teksti:first-child > p:first-child { font-size: 12px; letter-spacing: 3px; text-transform: uppercase; font-weight: 600; opacity: .85; padding-bottom: 6px; }
@media (max-width: 767px) { .hero { padding: 50px 0 36px; } .hero h1 { font-size: 26px; } .hero h2, .hero .ingressi { font-size: 16px; } }
.osio:nth-of-type(even):not(.tumma) { background: var(--savy); }
/* ---- napit ---- */
.nappi { border-radius: 4px; font-size: 13px; letter-spacing: 1px; padding: 0 24px; border-color: #0f2f4a; color: #0f2f4a; }
.nappi:hover { background: #0f2f4a; box-shadow: 0 6px 16px rgb(15 47 74 / .2); }
.nappi.soita { background: var(--kulta); border-color: var(--kulta); color: #fff; }
.nappi.toissijainen { border-color: #bfc6cf; color: #4a5560; }
.nappi.toissijainen:hover { background: #4a5560; border-color: #4a5560; color: #fff; box-shadow: none; }
.nappi.soita:hover { background: #b97d00; border-color: #b97d00; }
.osio.tumma .nappi.soita { background: var(--kulta); border-color: var(--kulta); }
.osio.tumma .nappi.soita:hover { background: #fff; color: var(--kulta); border-color: #fff; }
.kapasiteetti { background: #0c2340; }
.kap-napit .nappi.soita { background: var(--kulta); color: #fff; border-color: var(--kulta); }
.vaiheet .num { background: var(--kulta); }
details.ukk summary::after { color: var(--kulta); }
blockquote { border-left-color: var(--kulta); }
.hinnasto thead th { background: #0c2340; color: #fff; }
.hinnasto td b { color: #0f2f4a; }
/* sivun omat koodilohkot (Divi-ajan HTML tyyleineen) – leveys ja fontti periytyvät */
.koodi.oma { font-family: var(--fontti); }
.koodi.oma img { display: inline-block; }
/* ---- alatunniste tummana kuten Divissä ---- */
.ala { background: #0a0a0a; color: #d6d6d6; }
.ala h2, .ala h4 { color: var(--kulta); font-weight: 700; letter-spacing: 1px; font-size: 14px; }
.ala a { color: #fff; }
.ala a:hover { color: var(--kulta); }
.ala p { color: #d6d6d6; }
.ala .logo img { height: auto; width: 200px; filter: brightness(0) invert(1); }
.ala-pohja { background: #000; color: #9a9a9a; border-top: 1px solid #222; }
.ala-pohja a { color: #d6d6d6; }
.soita-kelluva { background: var(--kulta); }
/* ---- evästeilmoitus (Cookie Notice: tumma palkki, vihreä nappi) ---- */
/* Evästeilmoitus samannäköiseksi kuin portaalin sivuilla (pixel.js:n kortti): yksi ulkoasu koko sivustolla (STR-katselmus 31.10.2026). */
.evaste { left: 12px; right: 12px; bottom: 12px; max-width: 560px; margin: 0 auto; background: #fff; color: #021532; border: 1px solid rgba(2, 21, 50, .14); border-radius: 14px; box-shadow: 0 8px 28px rgba(2, 21, 50, .18); padding: 12px 14px; font-size: 14px; }
.evaste .sisus { gap: 10px 14px; }
.evaste .sisus > span:last-child { display: flex; gap: 8px; margin-left: auto; }
.evaste button { border-radius: 10px; padding: 9px 16px; font-weight: 600; background: var(--viini); color: #fff; }
.evaste button[data-v="no"] { background: #fff; color: var(--viini); border: 1px solid rgba(15, 47, 74, .35); }
.evaste button[data-v="yes"] { order: 2; }
/* ---- uutiskortit ja huonekortit ---- */
.uutinen h3 a, .uutinen .h3 a { color: #1d1d1f; }
.huonekortit { --acc: #0f2f4a; }

/* Heron todisterivi hakupalkin alla (STR-katselmus 31.10.2026): yksi aloitus = haku, soitto pienenä linkkinä. */
.osio.tumma .todiste { text-align: center; color: #fff; font-size: 14px; letter-spacing: .02em; margin: 14px auto 0; max-width: 720px; text-shadow: 0 1px 2px rgb(0 0 0 / .4); }
.osio.tumma .todiste a { color: #fff; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
/* Varaa suoraan -laatikon linkit (Airbnb-ohje) olivat tummansinisiä tummalla pohjalla → kultaiset (31.10.2026) */
.rh-why a { color: #e3b93f; text-decoration: underline; text-underline-offset: 3px; }
.rh-why a:hover { color: #fff; }
/* Heron tunnusrivi puhelimessa yhdelle riville */
@media (max-width: 480px) { .hero .sarake > .teksti:first-child > p:first-child { letter-spacing: 1.5px; font-size: 11px; } }
/* Kapasiteettilohko korttien alla vaaleana kaistana, napit rinnakkain (Janne 31.10.: tumma laatikko näytti tökeröltä) */
.kapasiteetti { background: var(--beige); color: #1d1d1f; border: 1px solid rgba(15, 47, 74, .12); border-left: 4px solid var(--kulta); border-radius: 12px; padding: 22px 26px; gap: 14px 32px; }
.kapasiteetti h3, .kapasiteetti .h3 { color: #0f2f4a; font-size: 20px; padding-bottom: 4px; }
.kapasiteetti p { color: #444; }
.kap-teksti { flex: 1 1 420px; }
.kap-napit { flex-direction: row; flex-wrap: wrap; align-items: center; min-width: 0; gap: 10px 12px; }
.kap-napit .nappi { color: #0f2f4a; border-color: #0f2f4a; background: transparent; }
.kap-napit .nappi:hover { background: #0f2f4a; color: #fff; }
.kap-napit .nappi.soita { background: var(--kulta); border-color: var(--kulta); color: #fff; }
.kap-napit .nappi.soita:hover { background: #b97d00; border-color: #b97d00; }
.kap-linkki { flex-basis: 100%; color: #0f2f4a; text-align: left; font-size: 14px; }

/* vakuutussivun elävä saatavuusrivi herossa (2.11.2026) */
.hero .vapaat-nyt:empty { display: none; }
.hero .vapaat-nyt { margin-top: 6px; font-weight: 700; color: #fff; }