:root{--tausta:#0f1724;--pinta:#172235;--teksti:#eef2f7;--himmea:#b5c0cf;--korostus:#f2c230;--korostus-teksti:#14181f;--reunus:#2a3850}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--tausta);color:var(--teksti);font:17px/1.65 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif}
h1,h2,h3{font-family:system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;line-height:1.25;margin:0 0 .6em}
h1{font-size:clamp(1.8rem,5vw,2.6rem)}
h2{font-size:1.45rem;margin-top:2.2em}
h3{font-size:1.1rem}
p{margin:0 0 1.1em}
a{color:var(--korostus)}
img{max-width:100%;height:auto;display:block}
.sisalto{max-width:960px;margin:0 auto;padding:0 20px}
header.ylapalkki{border-bottom:1px solid var(--reunus)}
header.ylapalkki .sisalto{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;padding-top:16px;padding-bottom:16px}
.nimi{font-family:system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;font-weight:700;font-size:1.15rem;color:var(--teksti);text-decoration:none}
.logo img{display:block;height:44px;width:auto;max-width:220px;object-fit:contain}
nav.valikko a{margin-left:18px;color:var(--teksti);text-decoration:none}
nav.valikko a:hover{color:var(--korostus)}
.hero{background:linear-gradient(135deg, #1b2a42 0%, #0f1724 70%);padding:56px 0}
.hero .sisalto{display:grid;gap:32px;align-items:center}
.hero p{color:var(--himmea);max-width:620px;margin-bottom:1.4em}
.hero img{border-radius:10px;width:100%}
@media (min-width:860px){.hero .sisalto{grid-template-columns:1.1fr 1fr}}
.nappi{display:inline-block;background:var(--korostus);color:var(--korostus-teksti);padding:12px 22px;border-radius:6px;text-decoration:none;font-weight:600;border:0;font-size:1rem;cursor:pointer}
.nappi[disabled]{opacity:.55;cursor:not-allowed}
.murupolku{font-size:.9rem;color:var(--himmea);padding-top:16px}
.murupolku ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.murupolku li+li:before{content:"›";margin-right:6px}
main.sisalto{padding-top:48px;padding-bottom:80px}
main>h1{margin-bottom:.8em}
.kortit{display:grid;gap:20px;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));padding:0;margin:20px 0 0;list-style:none}
.kortit li{background:var(--pinta);border:1px solid var(--reunus);border-radius:10px;padding:18px}
.kortit li img{border-radius:6px;margin:-4px 0 14px;aspect-ratio:3/2;object-fit:cover;width:100%}
.kortit a{font-weight:600;text-decoration:none;font-size:1.05rem}
.kortit p{margin:.5em 0 0;color:var(--himmea);font-size:.95rem}
.kuva{margin:28px 0}
.kuva img{border-radius:10px;width:100%}
.ukk{margin-top:8px}
.ukk details{border-bottom:1px solid var(--reunus);padding:14px 0}
.ukk summary{cursor:pointer;font-weight:600}
.ukk details p{margin:.7em 0 0}
.yhteys{background:var(--pinta);border:1px solid var(--reunus);border-radius:10px;padding:24px;margin-top:56px}
.yhteys h2{margin-top:0}
.lomake{display:grid;gap:14px;max-width:560px;margin-top:12px}
.lomake label{display:grid;gap:6px;font-weight:600;font-size:.95rem}
.lomake input,.lomake textarea{font:inherit;font-weight:400;padding:10px 12px;border:1px solid var(--reunus);border-radius:6px;background:var(--tausta);color:var(--teksti)}
.lomake .huom{color:var(--himmea);font-size:.9rem;margin:0}
.lomake button{justify-self:start}
.ansa{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
footer{border-top:1px solid var(--reunus);color:var(--himmea);font-size:.9rem;padding:32px 0}
footer a{color:var(--himmea)}
.esikatselu{position:sticky;top:0;z-index:10;background:#b42318;color:#fff;text-align:center;padding:8px;font:600 14px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif}
@media (max-width:600px){nav.valikko a{margin:0 14px 0 0}.hero{padding:36px 0}main.sisalto{padding-top:32px;padding-bottom:56px}}