/* viikko-osake.fi — arvokas ilme (9.10.2026): syvä metsänvihreä + messinki, norsunluu,
   otsikot DM Serif Display (itse isännöity, OFL), leipäteksti systeemifontit, mobile-first. */
@font-face {
  font-family: "DM Serif Display";
  src: url("/img/fontit/dm-serif-display-latin-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "DM Serif Display";
  src: url("/img/fontit/dm-serif-display-latin-ext-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
:root {
  --metsa: #0f3b38;
  --metsa-syva: #0a2b29;
  --vihrea: #17534f;
  --vihrea-keski: #2a6f69;
  --vihrea-vaalea: #e7efec;
  --norsunluu: #fbf8f2;
  --hiekka: #f4ede0;
  --hiekka-tumma: #e6d9bf;
  --messinki: #c4a052;
  --messinki-tumma: #9c7a32;
  --messinki-vaalea: #f6ecd4;
  --teksti: #1b2523;
  --himmea: #5a6563;
  --raja: #e1e4df;
  --raja-tumma: #c9cfca;
  --virhe: #a8261f;
  --ok: #1d6b33;
  --serif: "DM Serif Display", Georgia, "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --kulma: 10px;
  --kulma-iso: 18px;
  --varjo: 0 1px 2px rgba(15, 59, 56, .05), 0 8px 24px rgba(15, 59, 56, .07);
  --varjo-iso: 0 2px 6px rgba(15, 59, 56, .06), 0 24px 60px rgba(15, 59, 56, .14);
}
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; font-family: var(--sans); font-size: 1.0625rem; line-height: 1.7; color: var(--teksti); background: #fff; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--vihrea); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--metsa); }
h1, h2 { font-family: var(--serif); font-weight: 400; color: var(--metsa); line-height: 1.15; letter-spacing: -.005em; margin: 0 0 .5em; }
h1 { font-size: clamp(2.1rem, 6vw, 3.4rem); }
h2 { font-size: clamp(1.6rem, 4vw, 2.3rem); margin-top: 1.5em; }
h3 { font-family: var(--sans); font-size: 1.1rem; font-weight: 700; color: var(--metsa); line-height: 1.35; margin: 1.3em 0 .5em; }
p, ul, ol { margin: 0 0 1em; }
strong { color: var(--metsa); }
.kehys { width: 100%; max-width: 1160px; margin: 0 auto; padding: 0 16px; }
@media (min-width: 700px) { .kehys { padding: 0 28px; } }
.kapea { max-width: 780px; }
.nakymaton { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ohita { position: absolute; left: -9999px; top: 0; background: var(--metsa); color: #fff; padding: 8px 14px; z-index: 100; }
.ohita:focus { left: 8px; top: 8px; }
.esikatselu-palkki { background: var(--messinki); color: #241900; text-align: center; font-weight: 700; font-size: .8rem; letter-spacing: .08em; padding: 6px 12px; }

/* ---------- Yläpalkki ja logo ---------- */
.ylapalkki { position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, .94); backdrop-filter: saturate(1.4) blur(8px); border-bottom: 1px solid var(--raja); }
.palkki-sisus { display: flex; align-items: center; justify-content: space-between; min-height: 70px; gap: 12px; }
.logo { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; color: var(--metsa); }
.logo-merkki { width: 40px; height: 40px; flex-shrink: 0; }
.logo-teksti { display: flex; flex-direction: column; line-height: 1; }
.logo-sana { font-family: var(--serif); font-size: 1.5rem; color: var(--metsa); letter-spacing: -.01em; }
.logo-sana em { font-style: normal; color: var(--messinki-tumma); }
.logo-alateksti { display: none; font-size: .62rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--himmea); margin-top: 5px; }
@media (min-width: 420px) { .logo-alateksti { display: block; } }
.valikko-nappi { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid var(--raja); border-radius: 10px; background: #fff; cursor: pointer; }
.valikko-nappi-viivat, .valikko-nappi-viivat::before, .valikko-nappi-viivat::after { display: block; width: 20px; height: 2px; background: var(--metsa); border-radius: 2px; position: relative; content: ""; }
.valikko-nappi-viivat::before { position: absolute; top: -6px; }
.valikko-nappi-viivat::after { position: absolute; top: 6px; }
.valikko { display: none; position: absolute; left: 0; right: 0; top: 100%; background: #fff; border-bottom: 1px solid var(--raja); padding: 8px 16px 18px; flex-direction: column; gap: 2px; box-shadow: var(--varjo); }
.valikko.auki { display: flex; }
.valikko-linkki { display: block; padding: 11px 4px; text-decoration: none; color: var(--teksti); font-weight: 600; font-size: .98rem; border-bottom: 1px solid var(--vihrea-vaalea); }
.valikko-linkki.aktiivinen { color: var(--vihrea); }
.valikko .nappi { margin-top: 12px; text-align: center; }
@media (min-width: 1000px) {
  .valikko-nappi { display: none; }
  .valikko { display: flex; position: static; flex-direction: row; align-items: center; gap: 22px; padding: 0; border: 0; box-shadow: none; background: transparent; }
  .valikko-linkki { border: 0; padding: 6px 0; font-size: .95rem; }
  .valikko-linkki:hover { color: var(--vihrea); }
  .valikko-linkki.aktiivinen { box-shadow: inset 0 -2px 0 var(--messinki); }
  .valikko .nappi { margin-top: 0; }
}

/* ---------- Napit ---------- */
.nappi { display: inline-block; background: var(--metsa); color: #fff; text-decoration: none; font-weight: 600; padding: 14px 24px; border-radius: 8px; border: 1.5px solid var(--metsa); line-height: 1.2; cursor: pointer; font-size: 1rem; letter-spacing: .01em; transition: background .15s, border-color .15s, transform .15s; }
.nappi:hover { background: var(--vihrea); border-color: var(--vihrea); color: #fff; }
.nappi:active { transform: translateY(1px); }
.nappi-pieni { padding: 10px 18px; font-size: .92rem; }
.nappi-toissijainen { background: transparent; color: var(--metsa); border-color: var(--raja-tumma); }
.nappi-toissijainen:hover { background: var(--vihrea-vaalea); border-color: var(--vihrea-keski); color: var(--metsa); }
.nappi-kulta { background: var(--messinki); border-color: var(--messinki); color: #1e1500; }
.nappi-kulta:hover { background: #d3b064; border-color: #d3b064; color: #1e1500; }
.napit { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 1.6em; }

/* ---------- Osiot ---------- */
.osio { padding: 56px 0; }
@media (min-width: 900px) { .osio { padding: 80px 0; } }
.osio-hiekka { background: var(--norsunluu); }
.osio-teal { background: var(--vihrea-vaalea); }
.silmays { display: inline-flex; align-items: center; gap: 10px; text-transform: uppercase; letter-spacing: .16em; font-size: .72rem; font-weight: 700; color: var(--messinki-tumma); margin-bottom: 1em; }
.silmays::before { content: ""; width: 22px; height: 1px; background: currentColor; }
.johdanto { font-size: 1.15rem; color: var(--himmea); max-width: 44em; }
.huomio { font-size: .9rem; color: var(--himmea); }

/* ---------- Etusivun hero ---------- */
.hero { position: relative; overflow: hidden; background: radial-gradient(1200px 500px at 85% -10%, #e3ece8 0%, transparent 60%), linear-gradient(180deg, var(--norsunluu) 0%, #fff 100%); padding: 28px 0 48px; border-bottom: 1px solid var(--raja); }
@media (min-width: 900px) { .hero { padding: 36px 0 64px; } }
.hero h1 { max-width: 15em; }
.hero-sisus { display: grid; gap: 40px; grid-template-columns: 1fr; align-items: center; }
@media (min-width: 980px) { .hero-sisus { grid-template-columns: 1.15fr .85fr; gap: 56px; } }
.hero-kuva { position: relative; }
.hero-kuva img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 22px; box-shadow: var(--varjo-iso); }
@media (min-width: 980px) { .hero-kuva img { aspect-ratio: 1 / 1; } .hero-kuva { margin-bottom: 30px; } }
.kalenterikortti { display: none; position: absolute; left: -40px; bottom: -30px; width: 268px; background: #fff; border-radius: 16px; padding: 16px 16px 14px; box-shadow: 0 2px 6px rgba(15, 59, 56, .08), 0 24px 50px rgba(15, 59, 56, .22); }
@media (min-width: 980px) { .kalenterikortti { display: block; } }
.kk-otsikko { font-family: var(--serif); font-size: 1.15rem; color: var(--metsa); margin: 0 0 10px; }
.kk-ruudukko { display: grid; grid-template-columns: 22px repeat(7, 1fr); row-gap: 4px; font-size: .74rem; text-align: center; color: var(--teksti); }
.kk-ruudukko span { padding: 4px 0; line-height: 1.2; }
.kk-pv { color: var(--himmea); font-weight: 700; font-size: .66rem; text-transform: uppercase; letter-spacing: .04em; }
.kk-vk { color: #9aa5a2; font-size: .64rem; }
.kk-oma { background: linear-gradient(135deg, #8b5e34, #5e3b1c); color: #fff6e6; font-weight: 700; }
.kk-alku { border-radius: 99px 0 0 99px; }
.kk-loppu { border-radius: 0 99px 99px 0; }
.kk-oma-vk { color: #6e4520; font-weight: 800; }
.kk-merkki { margin: 10px 0 0; font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #6e4520; }
.kk-merkki span { display: block; font-weight: 600; letter-spacing: .04em; text-transform: none; color: var(--himmea); font-size: .74rem; margin-top: 2px; }

/* Kohdekuvat */
.kohdekuvat { display: grid; gap: 18px; grid-template-columns: 1fr; margin-top: 28px; }
@media (min-width: 760px) { .kohdekuvat { grid-template-columns: repeat(3, 1fr); } }
.kohdekuva { position: relative; margin: 0; border-radius: var(--kulma-iso); overflow: hidden; box-shadow: var(--varjo); }
.kohdekuva img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .6s ease; }
.kohdekuva:hover img { transform: scale(1.03); }
.kohdekuva figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 20px 16px; background: linear-gradient(180deg, transparent, rgba(6, 31, 29, .78)); color: #e6efec; font-size: .9rem; }
.kohdekuva figcaption strong { display: block; color: #fff; font-family: var(--serif); font-weight: 400; font-size: 1.35rem; }
.hero-kohdat { list-style: none; padding: 0; margin: 1.4em 0 0; display: grid; gap: 8px; }
.hero-kohdat li { display: flex; gap: 12px; align-items: baseline; }
.hero-kohdat li > span:first-child { color: var(--messinki-tumma); font-weight: 800; }
.hero-kauppa, .hero-villas { padding-bottom: 48px; }

/* ---------- Neljä polkua ---------- */
.polut { display: grid; gap: 18px; grid-template-columns: 1fr; margin-top: 28px; }
@media (min-width: 640px) { .polut { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1040px) { .polut { grid-template-columns: repeat(4, 1fr); } }
.polku { background: #fff; border: 1px solid var(--raja); border-radius: var(--kulma-iso); padding: 26px 24px; display: flex; flex-direction: column; transition: box-shadow .2s, transform .2s, border-color .2s; }
.polku:hover { box-shadow: var(--varjo); border-color: var(--raja-tumma); transform: translateY(-2px); }
.polku-ikoni { width: 46px; height: 46px; border-radius: 12px; background: var(--metsa); color: var(--messinki); display: grid; place-items: center; margin-bottom: 16px; }
.polku h3 { margin-top: 0; font-family: var(--serif); font-weight: 400; font-size: 1.45rem; }
.polku p { color: var(--himmea); font-size: .97rem; flex: 1; }
.linkki { font-weight: 600; text-decoration: none; }
.linkki:hover { text-decoration: underline; }
.polku .linkki + .linkki { margin-top: 6px; }

/* ---------- Nostot (myy/vaihda, Villas) ---------- */
.nostokaista { background: var(--metsa); color: #e6efec; padding: 26px 0; }
.nostokaista-sisus { display: grid; gap: 18px; grid-template-columns: auto 1fr; align-items: center; }
.nostokaista-sisus .nappi { grid-column: 1 / -1; justify-self: start; }
@media (min-width: 900px) { .nostokaista-sisus { grid-template-columns: auto 1fr auto; } .nostokaista-sisus .nappi { grid-column: auto; } }
.nostokaista p { margin: 0; color: #c8d9d5; }
.nostokaista .etu-otsikko { color: #fff; font-family: var(--serif); font-weight: 400; font-size: 1.45rem; margin-bottom: 4px; }
.etu-pallo { display: grid; place-items: center; text-align: center; width: 84px; height: 84px; border-radius: 50%; background: radial-gradient(circle at 30% 25%, #ecd59a, var(--messinki) 55%, var(--messinki-tumma)); color: #1e1500; font-weight: 800; font-size: .74rem; line-height: 1.15; text-transform: uppercase; letter-spacing: .08em; transform: rotate(-10deg); box-shadow: 0 6px 16px rgba(0, 0, 0, .18), inset 0 0 0 2px rgba(255, 255, 255, .35); flex-shrink: 0; }
.etu-otsikko { font-weight: 700; color: var(--metsa); margin-bottom: 4px; }
.etu-laatikko { display: flex; gap: 20px; align-items: center; background: #fff; border: 1px solid var(--messinki); border-radius: var(--kulma-iso); padding: 18px 22px; margin: 26px 0 0; max-width: 720px; box-shadow: var(--varjo); }
.etu-laatikko p { margin: 0; }
.etu-merkki { font-style: normal; font-size: .76rem; font-weight: 700; background: var(--messinki-vaalea); color: #6b4f12; padding: 2px 9px; border-radius: 99px; white-space: nowrap; }
.osio-villas { background: radial-gradient(900px 400px at 100% 0%, #1d5f5a 0%, transparent 60%), var(--metsa-syva); color: #e6efec; padding: 48px 0; }
.osio-villas h2 { color: #fff; margin-top: 0; }
.osio-villas .silmays { color: var(--messinki); }
.osio-villas p { color: #c8d9d5; margin-bottom: 0; }
.villas-nosto { display: grid; gap: 22px; grid-template-columns: 1fr; align-items: center; }
@media (min-width: 900px) { .villas-nosto { grid-template-columns: 1fr auto; } }
.villas-nosto .nappi { justify-self: start; }
.hero-villas { background: radial-gradient(900px 420px at 90% -10%, var(--messinki-vaalea) 0%, transparent 60%), linear-gradient(180deg, var(--norsunluu), #fff); }

/* ---------- Opaslistat ---------- */
.opaslista { list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 700px) { .opaslista { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1040px) { .opaslista { grid-template-columns: 1fr 1fr 1fr; } }
.opas-kortti { position: relative; border: 1px solid var(--raja); border-radius: var(--kulma); background: #fff; }
.opas-kortti a { display: block; padding: 20px 22px; text-decoration: none; color: inherit; height: 100%; border-radius: var(--kulma); transition: background .15s; }
.opas-kortti a:hover { background: var(--vihrea-vaalea); }
.opas-nimi { display: block; font-family: var(--serif); font-size: 1.25rem; color: var(--metsa); margin-bottom: 4px; line-height: 1.25; }
.opas-kortti a .opas-nimi::after { content: " →"; color: var(--messinki-tumma); font-family: var(--sans); font-size: 1rem; }
.opas-kuvaus { display: block; color: var(--himmea); font-size: .94rem; line-height: 1.55; }
.opas-tulossa { padding: 20px 22px; background: #fcfcfb; border-style: dashed; }
.opas-tulossa .opas-nimi { color: var(--himmea); }
.tulossa-merkki { position: absolute; top: 14px; right: 14px; font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; background: var(--hiekka); color: #6b5a33; padding: 2px 8px; border-radius: 99px; }

/* ---------- Artikkeli ---------- */
.murupolku { font-size: .86rem; color: var(--himmea); margin: 0 0 18px; }
.murupolku a { color: var(--himmea); }
.artikkeli-otsake { background: radial-gradient(900px 360px at 90% -20%, #e3ece8 0%, transparent 60%), var(--norsunluu); padding: 44px 0 28px; border-bottom: 1px solid var(--raja); }
.artikkeli-otsake .johdanto { margin-bottom: .6em; }
.paivitetty { font-size: .85rem; color: var(--himmea); margin: 0; }
.artikkeli { padding: 12px 0 56px; }
.artikkeli h2 { scroll-margin-top: 90px; }
.artikkeli ul, .artikkeli ol { padding-left: 1.3em; }
.artikkeli li { margin-bottom: .4em; }
.sisallys { background: #fff; border: 1px solid var(--raja); border-radius: var(--kulma); padding: 18px 22px; margin: 28px 0 8px; }
.sisallys p { font-weight: 700; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; margin-bottom: .6em; color: var(--messinki-tumma); }
.sisallys ol { margin: 0; padding-left: 1.2em; }
.sisallys li { margin-bottom: .25em; }
.faktalaatikko { border-left: 3px solid var(--messinki); background: var(--norsunluu); padding: 16px 20px; border-radius: 0 var(--kulma) var(--kulma) 0; margin: 1.4em 0; }
.faktalaatikko p:last-child { margin-bottom: 0; }
.esimerkki { border: 1px solid var(--hiekka-tumma); background: #fffcf5; border-radius: var(--kulma); padding: 16px 20px; margin: 1.4em 0; }
.esimerkki p:last-child { margin-bottom: 0; }
.taulukko-kaari { overflow-x: auto; margin: 1.4em 0; border: 1px solid var(--raja); border-radius: var(--kulma); }
table { border-collapse: collapse; width: 100%; font-size: .95rem; }
th, td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--raja); vertical-align: top; }
tr:last-child th, tr:last-child td { border-bottom: 0; }
thead th { background: var(--metsa); color: #fff; font-weight: 600; }
tbody th { background: var(--norsunluu); color: var(--metsa); }

/* ---------- CTA ---------- */
.cta-lohko { position: relative; overflow: hidden; background: radial-gradient(700px 300px at 100% 0%, #1d5f5a 0%, transparent 60%), var(--metsa); color: #e6efec; border-radius: var(--kulma-iso); padding: 34px 28px; margin: 2.4em 0 0; }
.cta-lohko h2 { color: #fff; margin-top: 0; }
.cta-lohko p { color: #c8d9d5; }
.cta-lohko .nappi-toissijainen { color: #fff; border-color: rgba(255, 255, 255, .35); }
.cta-lohko .nappi-toissijainen:hover { background: rgba(255, 255, 255, .08); color: #fff; }

/* ---------- Myy tai vaihda / Villas ---------- */
.kaksi-korttia { display: grid; gap: 20px; grid-template-columns: 1fr; margin-top: 24px; }
@media (min-width: 840px) { .kaksi-korttia { grid-template-columns: 1fr 1fr; } }
.kauppakortti { border: 1px solid var(--raja); border-radius: var(--kulma-iso); padding: 30px 26px; background: #fff; box-shadow: var(--varjo); display: flex; flex-direction: column; }
.kauppakortti h3 { margin-top: 0; font-family: var(--serif); font-weight: 400; font-size: 1.7rem; }
.kauppakortti .hero-kohdat { margin: 0 0 1.6em; flex: 1; }
.kauppakortti .nappi { align-self: flex-start; }
.kauppakortti-nosto { border: 1.5px solid var(--messinki); background: linear-gradient(180deg, #fffdf8, #fff); }
.kortti-merkki { display: inline-block; align-self: flex-start; background: var(--messinki-vaalea); color: #6b4f12; font-weight: 700; font-size: .8rem; padding: 4px 12px; border-radius: 99px; margin: -6px 0 14px; }
.vaiheet { padding-left: 1.3em; }
.vaiheet li { margin-bottom: .7em; }
.kolme-saraketta { display: grid; gap: 8px 32px; grid-template-columns: 1fr; }
@media (min-width: 900px) { .kolme-saraketta { grid-template-columns: repeat(3, 1fr); } }
.kolme-saraketta h2 { font-size: 1.5rem; margin-top: .6em; }
.villas-kohteet { display: grid; gap: 14px; grid-template-columns: 1fr; margin-top: 24px; }
@media (min-width: 640px) { .villas-kohteet { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1040px) { .villas-kohteet { grid-template-columns: repeat(3, 1fr); } }
.villas-alue { background: #fff; border: 1px solid var(--raja); border-radius: var(--kulma); padding: 18px 20px; }
.villas-alue h3 { margin: 0 0 .5em; font-family: var(--serif); font-weight: 400; font-size: 1.3rem; }
.villas-alue ul { margin: 0; padding-left: 1.1em; font-size: .92rem; color: var(--himmea); }

/* ---------- Kumppanit ---------- */
.kumppanit { display: grid; gap: 18px; grid-template-columns: 1fr; margin-top: 28px; }
@media (min-width: 680px) { .kumppanit { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1040px) { .kumppanit { grid-template-columns: repeat(3, 1fr); } }
.kumppani { background: #fff; border: 1px solid var(--raja); border-radius: var(--kulma-iso); padding: 26px 24px; display: flex; flex-direction: column; transition: box-shadow .2s, border-color .2s; }
.kumppani:hover { box-shadow: var(--varjo); border-color: var(--raja-tumma); }
.kumppani-logo { height: 64px; display: flex; align-items: center; margin-bottom: 18px; }
.kumppani-logo img { max-height: 56px; max-width: 230px; width: auto; object-fit: contain; }
.kumppani h3 { margin: 0 0 .4em; font-family: var(--serif); font-weight: 400; font-size: 1.35rem; }
.kumppani p { color: var(--himmea); font-size: .96rem; flex: 1; }
.kumppani-napit { display: flex; flex-wrap: wrap; gap: 10px; margin: 6px 0 0; padding-top: 18px; border-top: 1px solid var(--raja); }
.kumppani-napit .nappi { font-size: .88rem; padding: 9px 16px; }

/* ---------- Tehomyynti ---------- */
.tehomyynti-mainos { display: grid; gap: 28px; align-items: center; grid-template-columns: 1fr; margin-top: 12px; }
@media (min-width: 880px) { .tehomyynti-mainos { grid-template-columns: 380px 1fr; } }
.tehomyynti-mainos img { border-radius: var(--kulma-iso); box-shadow: var(--varjo-iso); }
.tehomyynti-hinta { font-size: 1.1rem; margin: 1.2em 0; }
.tehomyynti-hinta strong { font-family: var(--serif); font-weight: 400; font-size: 1.9rem; color: var(--metsa); }
.tehomyynti-hinta span { color: var(--himmea); font-size: .93rem; }
.tehomyynti-kehys { margin-top: 28px; background: #fff; border: 1px solid var(--raja); border-radius: var(--kulma-iso); overflow: hidden; }
.tehomyynti-kehys iframe { display: block; width: 100%; height: 1400px; border: 0; }
.tehomyynti-vara { font-size: .88rem; color: var(--himmea); padding: 12px 18px; margin: 0; border-top: 1px solid var(--raja); }

/* ---------- Lomake ---------- */
.lomake-kaari { display: grid; gap: 28px; grid-template-columns: 1fr; margin-top: 18px; }
@media (min-width: 940px) { .lomake-kaari { grid-template-columns: 1.45fr 1fr; } }
.lomake { background: #fff; border: 1px solid var(--raja); border-radius: var(--kulma-iso); padding: 26px 22px; box-shadow: var(--varjo-iso); }
@media (min-width: 600px) { .lomake { padding: 32px 30px; } }
.kentta { margin-bottom: 16px; }
.kentta label, .kentta legend { display: block; font-weight: 600; margin-bottom: 6px; font-size: .95rem; color: var(--metsa); }
.kentta .vihje { display: block; font-weight: 400; color: var(--himmea); font-size: .85rem; }
.kentta input[type="text"], .kentta input[type="email"], .kentta input[type="tel"], .kentta textarea, .kentta select {
  width: 100%; font: inherit; font-size: 1rem; padding: 12px 14px; border: 1px solid var(--raja-tumma); border-radius: 8px; background: #fff; color: var(--teksti); transition: border-color .15s, box-shadow .15s;
}
.kentta textarea { min-height: 110px; resize: vertical; }
.kentta input:focus, .kentta textarea:focus, .kentta select:focus { outline: none; border-color: var(--vihrea-keski); box-shadow: 0 0 0 4px rgba(42, 111, 105, .14); }
.kentat-rivi { display: grid; gap: 0 14px; grid-template-columns: 1fr; }
@media (min-width: 560px) { .kentat-rivi { grid-template-columns: 1fr 1fr; } }
fieldset.kentta { border: 0; padding: 0; margin: 0 0 16px; }
.valinta { display: flex; gap: 12px; align-items: flex-start; padding: 11px 14px; border: 1px solid var(--raja); border-radius: 10px; margin-bottom: 8px; cursor: pointer; font-weight: 400 !important; color: var(--teksti) !important; transition: border-color .15s, background .15s; }
.valinta:hover { border-color: var(--raja-tumma); }
.valinta:has(input:checked) { border-color: var(--vihrea-keski); background: var(--vihrea-vaalea); }
.valinta input { margin-top: 6px; accent-color: var(--vihrea); }
.valinta strong { color: var(--metsa); }
.tyyppivalinta { display: flex; flex-wrap: wrap; gap: 8px; }
.valinta-pieni { margin-bottom: 0; padding: 8px 14px; }
.lomake-valiotsikko { font-family: var(--serif); font-size: 1.2rem; color: var(--metsa); margin: 20px 0 12px; padding-top: 18px; border-top: 1px solid var(--raja); }
.suostumus { display: flex; gap: 10px; align-items: flex-start; font-size: .9rem; font-weight: 400 !important; color: var(--teksti) !important; }
.suostumus input { margin-top: 5px; accent-color: var(--vihrea); }
.hunaja { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.pakollinen { color: var(--virhe); }
.lomake .nappi { width: 100%; }
@media (min-width: 600px) { .lomake .nappi { width: auto; } }
.lomake-tila { margin: 14px 0 0; padding: 12px 14px; border-radius: 8px; display: none; }
.lomake-tila.ok { display: block; background: #e8f4ea; color: var(--ok); border: 1px solid #b7dcbf; }
.lomake-tila.virhe { display: block; background: #fbeceb; color: var(--virhe); border: 1px solid #efc2bf; }
.sivupalkki { background: var(--norsunluu); border: 1px solid var(--raja); border-radius: var(--kulma-iso); padding: 26px 24px; align-self: start; }
.sivupalkki h2 { margin-top: 0; font-size: 1.35rem; }
.sivupalkki p + h2, .sivupalkki ol + h2 { margin-top: 1.2em; }
.sivupalkki ol { padding-left: 1.2em; }

/* ---------- Lue myös + alapalkki ---------- */
.osio-lue-myos { background: var(--norsunluu); padding: 44px 0; border-top: 1px solid var(--raja); }
.osio-lue-myos h2 { margin-top: 0; font-size: 1.6rem; }
.lue-myos { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px 28px; grid-template-columns: 1fr; }
@media (min-width: 700px) { .lue-myos { grid-template-columns: 1fr 1fr 1fr; } }
.lue-myos a { font-weight: 600; text-decoration: none; }
.lue-myos a::after { content: " →"; color: var(--messinki-tumma); }
.alapalkki { background: var(--metsa-syva); color: #b9ccc8; padding: 52px 0 18px; font-size: .93rem; }
.alapalkki a { color: #fff; text-decoration: none; }
.alapalkki a:hover { text-decoration: underline; }
.alapalkki-sisus { display: grid; gap: 26px; grid-template-columns: 1fr; }
@media (min-width: 780px) { .alapalkki-sisus { grid-template-columns: 1.4fr 1fr 1fr; } }
.alapalkki p { margin: 0 0 .5em; }
.alapalkki-logo { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.alapalkki-logo svg { width: 34px; height: 34px; }
.alapalkki-nimi { font-family: var(--serif); color: #fff; font-size: 1.35rem; margin: 0 !important; }
.alapalkki-otsikko { font-size: .72rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--messinki) !important; margin-bottom: 1em !important; }
.kopio { border-top: 1px solid rgba(255, 255, 255, .1); margin-top: 32px; padding-top: 16px; font-size: .82rem; }

@media (max-width: 559px) {
  .etu-laatikko { flex-direction: column; align-items: flex-start; }
  .nostokaista-sisus { grid-template-columns: 1fr; }
}

/* Artikkelikuva */
.artikkelikuva { margin: 28px 0 0; border-radius: var(--kulma-iso); overflow: hidden; box-shadow: var(--varjo); }
.artikkelikuva img { width: 100%; aspect-ratio: 16 / 8; object-fit: cover; }

/* ---------- Yhteistyökumppanit-sivu ---------- */
.kumppanihero { position: relative; overflow: hidden; background: radial-gradient(900px 500px at 100% 0%, #1f6660 0%, transparent 60%), radial-gradient(700px 400px at 0% 100%, #123f3b 0%, transparent 60%), var(--metsa-syva); color: #d7e5e1; padding: 44px 0 56px; }
@media (min-width: 900px) { .kumppanihero { padding: 64px 0 80px; } }
.kumppanihero h1 { color: #fff; max-width: 14em; }
.kumppanihero .silmays { color: var(--messinki); }
.kumppanihero .johdanto { color: #c2d6d1; }
.murupolku-vaalea, .murupolku-vaalea a { color: #9fbab4; }
.logoseina { display: grid; gap: 12px; grid-template-columns: repeat(2, 1fr); margin-top: 32px; }
@media (min-width: 760px) { .logoseina { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1080px) { .logoseina { grid-template-columns: repeat(6, 1fr); } }
.logolaatta { display: grid; place-items: center; height: 92px; padding: 14px 18px; background: #fff; border-radius: 14px; box-shadow: 0 10px 30px rgba(0, 0, 0, .25); transition: transform .2s, box-shadow .2s; }
.logolaatta:hover { transform: translateY(-3px); box-shadow: 0 16px 40px rgba(0, 0, 0, .32); }
.logolaatta img { max-height: 54px; max-width: 100%; width: auto; object-fit: contain; }
.osio-polku { padding-bottom: 24px; }
.polkukaavio { list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 14px; grid-template-columns: 1fr; counter-reset: polku; }
@media (min-width: 760px) { .polkukaavio { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .polkukaavio { grid-template-columns: repeat(4, 1fr); } }
.polkukaavio li { position: relative; display: flex; flex-direction: column; gap: 6px; background: var(--norsunluu); border: 1px solid var(--raja); border-radius: var(--kulma-iso); padding: 22px 20px; }
@media (min-width: 1080px) { .polkukaavio li:not(:last-child)::after { content: "→"; position: absolute; right: -14px; top: 30px; color: var(--messinki-tumma); font-weight: 700; } }
.polkukaavio-nro { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--metsa); color: var(--messinki); font-family: var(--serif); font-size: 1.05rem; margin-bottom: 6px; }
.polkukaavio strong { font-family: var(--serif); font-weight: 400; font-size: 1.3rem; color: var(--metsa); }
.polkukaavio span:not(.polkukaavio-nro) { color: var(--himmea); font-size: .94rem; flex: 1; }
.polkukaavio a { font-weight: 600; text-decoration: none; font-size: .92rem; }
.polkukaavio a::after { content: " ↓"; color: var(--messinki-tumma); }
.kumppanirivit { padding: 24px 0 64px; }
.kumppanirivi { display: grid; gap: 28px; grid-template-columns: 1fr; align-items: center; padding: 40px 0; border-bottom: 1px solid var(--raja); scroll-margin-top: 90px; }
.kumppanirivi:last-child { border-bottom: 0; }
@media (min-width: 900px) { .kumppanirivi { grid-template-columns: 1fr 1fr; gap: 64px; padding: 56px 0; } .kumppanirivi-kaanteinen .kumppanirivi-kuva { order: 2; } }
.kumppanirivi-kuva { position: relative; border-radius: 22px; overflow: hidden; box-shadow: var(--varjo-iso); }
.kumppanirivi-kuva img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.kumppanirivi-kuva::after { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 70% at 0% 100%, rgba(6, 31, 29, .72) 0%, rgba(6, 31, 29, .35) 45%, transparent 75%); pointer-events: none; }
.kumppanirivi-logo { position: absolute; left: 26px; bottom: 24px; z-index: 1; display: flex; align-items: flex-end; height: 72px; max-width: calc(100% - 52px); }
/* logo valkoisena kuvan päällä: läpinäkyvä, ei laattaa; varjo erottaa vaaleasta taustasta */
.kumppanirivi-logo img { max-height: 64px; max-width: 240px; width: auto; aspect-ratio: auto; object-fit: contain; filter: brightness(0) invert(1) drop-shadow(0 2px 10px rgba(0, 0, 0, .45)); }
.kumppanirivi-teksti h2 { margin-top: .2em; }
.rooli { display: inline-flex; align-items: center; gap: 10px; font-size: .74rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--messinki-tumma); margin: 0; }
.rooli span { font-family: var(--serif); font-size: 1.1rem; letter-spacing: 0; color: var(--metsa); border-bottom: 1px solid var(--messinki); padding-bottom: 1px; }
.sopii-otsikko { font-weight: 700; color: var(--metsa); margin: 1.4em 0 .5em; font-size: .95rem; }
.sopii { list-style: none; padding: 0; margin: 0 0 1.6em; display: grid; gap: 8px; }
.sopii li { position: relative; padding-left: 28px; }
.sopii li::before { content: ""; position: absolute; left: 0; top: .5em; width: 16px; height: 9px; border-left: 2px solid var(--messinki-tumma); border-bottom: 2px solid var(--messinki-tumma); transform: rotate(-45deg); }
.kumppanirivi .kumppani-napit { border-top: 0; padding-top: 0; }
.kohdelista { columns: 2; column-gap: 28px; padding-left: 1.2em; }
@media (min-width: 640px) { .kohdelista { columns: 3; } }

/* ---------- Edut / etukoodi ---------- */
.valikko-edut { color: var(--messinki-tumma) !important; }
.hero-edut { background: radial-gradient(900px 420px at 90% -10%, var(--messinki-vaalea) 0%, transparent 60%), linear-gradient(180deg, var(--norsunluu), #fff); }
.edut { display: grid; gap: 18px; grid-template-columns: 1fr; margin-top: 24px; }
@media (min-width: 640px) { .edut { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1040px) { .edut { grid-template-columns: repeat(4, 1fr); } }
.etu { background: #fff; border: 1px solid var(--raja); border-radius: var(--kulma-iso); padding: 24px 22px; box-shadow: var(--varjo); display: flex; flex-direction: column; }
.etu-logo { height: 34px; width: auto; max-width: 170px; object-fit: contain; margin-bottom: 14px; }
.etu-iso { font-family: var(--serif); font-size: 2.2rem; line-height: 1; color: var(--messinki-tumma); margin: 0 0 8px; }
.etu h3 { margin: 0 0 .4em; }
.etu p:last-child { color: var(--himmea); font-size: .94rem; margin: 0; }
.edutkaista { background: linear-gradient(135deg, #fbf3df 0%, #f4e6c4 100%); border-top: 1px solid var(--hiekka-tumma); padding: 26px 0; }
.edutkaista-sisus { display: grid; gap: 18px; grid-template-columns: auto 1fr; align-items: center; }
.edutkaista-sisus .nappi { grid-column: 1 / -1; justify-self: start; }
@media (min-width: 900px) { .edutkaista-sisus { grid-template-columns: auto 1fr auto; } .edutkaista-sisus .nappi { grid-column: auto; } }
.edutkaista p { margin: 0; color: #5d4b22; }
.edutkaista .etu-otsikko { font-family: var(--serif); font-weight: 400; font-size: 1.4rem; color: var(--metsa); margin-bottom: 4px; }
.etukoodilomake { margin-top: 12px; }
.etukoodi-tulos { margin-top: 16px; background: #fff; border: 2px solid var(--messinki); border-radius: var(--kulma-iso); padding: 26px 24px; box-shadow: var(--varjo-iso); }
.etukoodi-otsikko { margin: 0; font-size: .74rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--messinki-tumma); }
.etukoodi-koodi { font-family: var(--serif); font-size: clamp(2rem, 7vw, 2.8rem); color: var(--metsa); letter-spacing: .06em; margin: 4px 0 8px; user-select: all; }
.etukoodi-ohjeet { padding-left: 1.1em; margin: 1em 0 0; }
.etukoodi-ohjeet li { margin-bottom: .9em; }
.etukoodi-ohjeet .nappi { margin-top: 8px; display: inline-block; }

/* ---------- Kohteet ja yhtiösivut ---------- */
.hero-kohteet { padding-bottom: 44px; }
.yhtiohaku { margin-top: 24px; max-width: 640px; }
.yhtiohaku input { width: 100%; font: inherit; font-size: 1.1rem; padding: 16px 18px 16px 48px; border: 1.5px solid var(--raja-tumma); border-radius: 12px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%239c7a32' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E") no-repeat 16px center; box-shadow: var(--varjo); }
.yhtiohaku input:focus { outline: none; border-color: var(--vihrea-keski); box-shadow: 0 0 0 4px rgba(42, 111, 105, .14); }
.yhtiohaku-tulos { margin: 10px 0 0; color: var(--himmea); font-size: .92rem; min-height: 1.4em; }
.hakulista { list-style: none; padding: 0; margin: 20px 0 0; columns: 1; column-gap: 32px; }
@media (min-width: 760px) { .hakulista { columns: 2; } }
@media (min-width: 1080px) { .hakulista { columns: 3; } }
.hakuryhma { break-inside: avoid; margin-bottom: 22px; }
.hakuryhma-nimi { font-family: var(--serif); font-size: 1.25rem; color: var(--metsa); margin: 0 0 6px; }
.hakuryhma ul { list-style: none; padding: 0; margin: 0; }
.hakuryhma li { display: flex; flex-direction: column; padding: 6px 0; border-bottom: 1px solid var(--raja); }
.hakuryhma li a { font-weight: 600; text-decoration: none; }
.hakuryhma li span { font-size: .82rem; color: var(--himmea); }
.perustiedot th { width: 38%; }
.asiakirjat, .sisaryhtiot { padding-left: 1.2em; }
.sisaryhtiot { columns: 2; column-gap: 28px; }
.viikkotaulukko td { font-size: .88rem; }
.yhtiotaulukko td:first-child a { font-weight: 600; }
.julkaisija-merkki { display: inline-block; vertical-align: middle; margin-left: 6px; font-family: var(--sans); font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; background: var(--vihrea-vaalea); color: var(--vihrea); padding: 2px 8px; border-radius: 99px; }
.yhtiohaku-osumat { list-style: none; margin: 6px 0 0; padding: 6px; background: #fff; border: 1px solid var(--raja); border-radius: 12px; box-shadow: var(--varjo-iso); max-height: 440px; overflow-y: auto; }
.yhtiohaku-osumat li a { display: block; padding: 10px 12px; border-radius: 8px; text-decoration: none; font-weight: 600; color: var(--metsa); }
.yhtiohaku-osumat li a:hover, .yhtiohaku-osumat li a:focus { background: var(--vihrea-vaalea); }
.yhtiohaku-osumat li a span { display: block; font-weight: 400; font-size: .82rem; color: var(--himmea); }
.vaihtopaivasaanto { padding-left: 1.2em; margin-bottom: 1em; }
.vaihtopaivasaanto li { margin-bottom: .4em; }