/* Viimeisenpäälle – kotisivut. Editoriaalinen rakenne: isot otsikot, valokuvat, ohuet viivat, vähän kortteja. */
:root {
  --yo: #16253D; --yo-2: #22375A; --yo-syva: #0F1B2E;
  --silaus: #E3A83A; --silaus-v: #F7E3B8;
  --pellava: #F5F0E6; --paperi: #FBF8F2; --terva: #3A2B22; --punamulta: #9B3A28; --jakala: #8A9A86;
  --viiva: #DDD4C3; --viiva-tumma: rgba(255,255,255,.14); --hiljainen: #6B6258; --vaalea-teksti: #C4CCD8;
  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --leveys: 1200px; --r: 4px; --r2: 6px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--pellava); color: var(--terva); font: 17px/1.6 var(--sans); }
img { max-width: 100%; display: block; }
a { color: var(--yo); text-underline-offset: 3px; }
h1, h2, h3 { font-family: var(--serif); color: var(--yo); line-height: 1.08; font-weight: 600; letter-spacing: -.015em; margin: 0; }
h2 { font-size: clamp(2rem, 4.2vw, 3.2rem); }
h3 { font-size: 1.35rem; line-height: 1.2; }
p { margin: 0 0 1em; }
.kehys { max-width: var(--leveys); margin: 0 auto; padding: 0 24px; }
.hiljainen { color: var(--hiljainen); }
.ohita { position: absolute; left: -9999px; }
.ohita:focus { left: 16px; top: 16px; background: #fff; padding: 8px 12px; z-index: 99; }

/* Osion tunniste: "01 — Toteutukset" */
.tunniste { display: flex; align-items: center; gap: 12px; font: 600 .78rem var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--hiljainen); margin-bottom: 20px; }
.tunniste b { color: var(--yo); font-variant-numeric: tabular-nums; }
.tunniste::after { content: ""; height: 1px; flex: 0 0 48px; background: currentColor; opacity: .5; }
.tumma .tunniste, .hero .tunniste { color: var(--vaalea-teksti); }
.tumma .tunniste b, .hero .tunniste b { color: var(--silaus); }

/* ---------- Ilmoituspalkki + navigaatio ---------- */
.ilmoitus { background: var(--yo-syva); color: var(--vaalea-teksti); font-size: .85rem; text-align: center; padding: 8px 16px; }
.ilmoitus a { color: #fff; font-weight: 600; text-decoration: none; margin-left: 6px; }
.ilmoitus a:hover { color: var(--silaus); }
.nav { background: var(--yo); color: #fff; position: sticky; top: 0; z-index: 50; border-bottom: 1px solid var(--viiva-tumma); }
.nav .kehys { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 68px; }
.logo { display: inline-flex; align-items: baseline; color: #fff; text-decoration: none; font: 400 1.4rem var(--serif); letter-spacing: -.015em; white-space: nowrap; }
.logo b { font-weight: 700; }
.piste { display: inline-block; width: .3em; height: .3em; border-radius: 50%; background: var(--silaus); margin-left: .1em; }
.nav ul { display: flex; gap: 28px; list-style: none; margin: 0; padding: 0; }
.nav ul a { color: #DFE5EE; text-decoration: none; font-weight: 500; font-size: .93rem; }
.nav ul a:hover, .nav ul a[aria-current] { color: #fff; }
.nav .nappi { height: 40px; padding: 0 16px; font-size: .9rem; }
@media (max-width: 960px) {
  .nav .kehys { flex-wrap: wrap; row-gap: 0; }
  .nav nav { order: 3; width: 100%; overflow-x: auto; scrollbar-width: none; }
  .nav ul { gap: 20px; padding: 4px 0 12px; white-space: nowrap; }
}

/* ---------- Painikkeet ---------- */
.nappi { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 52px; padding: 0 24px; border-radius: var(--r);
  background: var(--silaus); color: var(--yo); border: 1px solid var(--silaus); font: 600 1rem var(--sans); text-decoration: none; cursor: pointer; white-space: nowrap; transition: background .15s; }
.nappi:hover { background: #EDB94F; }
.nappi.toissijainen { background: transparent; color: #fff; border-color: rgba(255,255,255,.35); }
.nappi.toissijainen:hover { border-color: #fff; }
.nappi.tumma { background: var(--yo); border-color: var(--yo); color: #fff; }
.nappi.tumma:hover { background: var(--yo-2); }
.nappi.reunus { background: transparent; color: var(--yo); border-color: var(--yo); }
.nappi.reunus:hover { background: var(--yo); color: #fff; }
.linkki { font-weight: 600; text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 2px; }
.linkki::after { content: " →"; }

/* ---------- Kuva + paikkamerkki (näkyy, kunnes oikea kuva lisätään kotisivut/kuvat/) ---------- */
.kuva { position: relative; margin: 0; overflow: hidden; border-radius: var(--r); background: repeating-linear-gradient(135deg, #E8E0D0 0 14px, #EEE7DA 14px 28px); aspect-ratio: 4 / 3; }
.kuva img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
.kuva::after { content: "Kuva: " attr(data-paikka); position: absolute; left: 12px; bottom: 12px; font: 600 .72rem var(--sans); letter-spacing: .03em; color: var(--hiljainen); background: rgba(255,255,255,.85); padding: 4px 8px; border-radius: var(--r); }
.kuva.tumma-pohja { background: repeating-linear-gradient(135deg, #1D2E4A 0 14px, #22375A 14px 28px); }
.kuva.tumma-pohja::after { color: var(--vaalea-teksti); background: rgba(15,27,46,.8); }
.kuva figcaption { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; color: #fff; font-size: .82rem; padding: 28px 14px 10px; background: linear-gradient(transparent, rgba(0,0,0,.55)); }

/* ---------- Hero ---------- */
.hero { background: var(--yo); color: #fff; }
.hero .kehys { display: grid; grid-template-columns: 1.05fr .95fr; gap: 64px; align-items: center; padding-top: 72px; padding-bottom: 88px; }
.hero h1 { color: #fff; font-size: clamp(2.8rem, 6.4vw, 5.2rem); line-height: 1.0; letter-spacing: -.025em; }
.hero .alaotsikko { font: 600 .9rem var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--silaus); margin-bottom: 20px; display: block; line-height: 1.4; }
.hero p.iso { font-size: 1.2rem; color: var(--vaalea-teksti); max-width: 30em; margin: 28px 0 0; }
.hero .napit { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 36px; }
.faktat { display: flex; flex-wrap: wrap; row-gap: 8px; margin: 48px 0 0; padding: 24px 0 0; border-top: 1px solid var(--viiva-tumma); list-style: none; }
.faktat li { font-size: .92rem; color: var(--vaalea-teksti); padding-right: 20px; margin-right: 20px; border-right: 1px solid var(--viiva-tumma); }
.faktat li:last-child { border-right: 0; }
.faktat b { color: #fff; font-weight: 600; }
.hero .kuva { aspect-ratio: 4 / 5; }
@media (max-width: 900px) { .hero .kehys { grid-template-columns: 1fr; gap: 40px; padding-top: 48px; } .hero .kuva { aspect-ratio: 4 / 3; } }

/* ---------- Osiot ---------- */
.osio { padding: 112px 0; }
.osio.paperi { background: var(--paperi); }
.osio.tumma { background: var(--yo); color: #E6EBF2; }
.osio.tumma h2, .osio.tumma h3 { color: #fff; }
.osio-otsikko { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: end; margin-bottom: 56px; }
.osio-otsikko p { font-size: 1.1rem; color: var(--hiljainen); margin: 0; max-width: 34em; }
.tumma .osio-otsikko p { color: var(--vaalea-teksti); }
@media (max-width: 860px) { .osio { padding: 80px 0; } .osio-otsikko { grid-template-columns: 1fr; gap: 16px; margin-bottom: 36px; } }

/* ---------- Toteutukset ---------- */
.toteutukset { display: grid; gap: 72px; }
.toteutus { display: grid; grid-template-columns: 300px 1fr; gap: 40px; padding-top: 28px; border-top: 1px solid var(--viiva); }
.toteutus .nro { font: 600 .8rem var(--sans); color: var(--hiljainen); letter-spacing: .1em; font-variant-numeric: tabular-nums; }
.toteutus h3 { font-size: 1.8rem; margin: 10px 0 6px; }
.toteutus .tyo { color: var(--terva); margin: 0 0 16px; }
.toteutus dl { margin: 0; font-size: .88rem; display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; color: var(--hiljainen); }
.toteutus dt { font-weight: 600; color: var(--yo); }
.toteutus dd { margin: 0; }
.galleria { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.galleria.kuvia-1 { grid-template-columns: 1fr; }
.galleria.kuvia-1 .kuva { aspect-ratio: 16 / 9; }
.galleria.kuvia-3 { grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; }
.galleria.kuvia-3 .kuva:first-child { grid-row: 1 / 3; aspect-ratio: auto; }
.paikkamerkki { display: inline-block; font: 700 .7rem var(--sans); letter-spacing: .08em; text-transform: uppercase; background: var(--punamulta); color: #fff; padding: 3px 8px; border-radius: var(--r); margin-bottom: 10px; }
@media (max-width: 860px) { .toteutus { grid-template-columns: 1fr; gap: 20px; } }

/* ---------- Asiantuntijuus ---------- */
.asiantuntijuus { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; }
.asiantuntijuus .kuva { aspect-ratio: 4 / 5; }
.asiantuntijuus h2 { margin-bottom: 32px; }
.luvut { list-style: none; margin: 0 0 32px; padding: 0; border-top: 1px solid var(--viiva-tumma); }
.luvut li { display: grid; grid-template-columns: 150px 1fr; gap: 16px; align-items: baseline; padding: 18px 0; border-bottom: 1px solid var(--viiva-tumma); }
.luvut b { font: 600 2rem/1 var(--serif); color: var(--silaus); }
.luvut span { color: #fff; font-weight: 500; }
.asiantuntijuus p { color: var(--vaalea-teksti); font-size: 1.05rem; }
.asiantuntijuus p b { color: #fff; }
@media (max-width: 900px) { .asiantuntijuus { grid-template-columns: 1fr; gap: 40px; } }

/* ---------- Palvelut ---------- */
.palvelut { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--viiva); }
.palvelu { padding: 32px 32px 8px 0; border-right: 1px solid var(--viiva); display: flex; flex-direction: column; }
.palvelu + .palvelu { padding-left: 32px; }
.palvelu:last-child { border-right: 0; }
.palvelu .nro { font: 600 .8rem var(--sans); letter-spacing: .1em; color: var(--hiljainen); }
.palvelu h3 { font-size: 1.7rem; margin: 12px 0 14px; }
.palvelu p { color: var(--hiljainen); }
.palvelu ul { list-style: none; padding: 0; margin: 0 0 24px; font-size: .92rem; }
.palvelu li { padding: 7px 0; border-bottom: 1px solid var(--viiva); }
.palvelu .linkki { align-self: flex-start; margin-top: auto; }
.palvelu .lisa { display: block; font-size: .85rem; margin-top: 16px; color: var(--hiljainen); }
@media (max-width: 900px) { .palvelut { grid-template-columns: 1fr; } .palvelu, .palvelu + .palvelu { padding: 28px 0; border-right: 0; border-bottom: 1px solid var(--viiva); } }

/* ---------- Tiedät mitä maksat ---------- */
.hinnoittelu { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; }
.hinnoittelu h2 { margin-bottom: 24px; }
.hinnoittelu p.iso { font-size: 1.2rem; }
.hinnoittelu ul { list-style: none; padding: 0; margin: 24px 0 32px; }
.hinnoittelu li { padding: 12px 0 12px 28px; border-bottom: 1px solid var(--viiva); position: relative; }
.hinnoittelu li::before { content: ""; position: absolute; left: 0; top: 23px; width: 12px; height: 1.5px; background: var(--silaus); }
@media (max-width: 900px) { .hinnoittelu { grid-template-columns: 1fr; gap: 40px; } }
.esimerkki { margin: 0; background: #fff; color: var(--terva); border: 1px solid var(--viiva); border-radius: var(--r2); padding: 24px 28px; box-shadow: 0 30px 60px -20px rgba(22,37,61,.25); font-variant-numeric: tabular-nums; }
.esimerkki figcaption { font-size: .75rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--hiljainen); margin-bottom: 8px; }
.e-rivi { display: flex; justify-content: space-between; gap: 16px; align-items: baseline; padding: 12px 0; border-bottom: 1px solid var(--viiva); }
.e-rivi b { display: block; font-weight: 600; color: var(--yo); font-size: .98rem; }
.e-rivi small { display: block; color: var(--hiljainen); font-size: .8rem; margin-top: 1px; }
.e-rivi > span { font-weight: 600; white-space: nowrap; }
.e-yht { display: flex; justify-content: space-between; align-items: baseline; padding: 16px 0 4px; }
.e-yht b { font: 700 1.6rem var(--serif); color: var(--yo); }
.e-huom { font-size: .78rem; color: var(--hiljainen); margin: 8px 0 0; }

/* ---------- Kolme syytä ---------- */
.syyt { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; }
.syy { border-top: 2px solid var(--yo); padding-top: 24px; }
.syy .nro { font: 600 2.4rem/1 var(--serif); color: var(--silaus); display: block; margin-bottom: 20px; }
.syy h3 { font-size: 1.6rem; margin-bottom: 12px; }
.syy p { color: var(--hiljainen); margin: 0; }
.faktarivi { display: flex; flex-wrap: wrap; gap: 8px 28px; margin: 56px 0 0; padding: 24px 0 0; border-top: 1px solid var(--viiva); font-size: .9rem; color: var(--hiljainen); list-style: none; }
.faktarivi li::before { content: "— "; color: var(--silaus); }
@media (max-width: 900px) { .syyt { grid-template-columns: 1fr; gap: 36px; } }

/* ---------- Työn eteneminen ---------- */
.vaiheet { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); counter-reset: v; }
.vaiheet li { counter-increment: v; padding: 28px 28px 0 0; border-top: 1px solid var(--viiva-tumma); position: relative; }
.vaiheet li::before { content: "0" counter(v); display: block; font: 600 .85rem var(--sans); letter-spacing: .1em; color: var(--silaus); margin-bottom: 20px; }
.vaiheet li::after { content: ""; position: absolute; top: -4px; left: 0; width: 7px; height: 7px; border-radius: 50%; background: var(--silaus); }
.vaiheet h3 { color: #fff; font-size: 1.35rem; margin-bottom: 10px; }
.vaiheet p { color: var(--vaalea-teksti); font-size: .95rem; margin: 0; }
@media (max-width: 900px) { .vaiheet { grid-template-columns: 1fr 1fr; row-gap: 36px; } }
@media (max-width: 560px) { .vaiheet { grid-template-columns: 1fr; } }

/* ---------- Huoltokirja ---------- */
.huoltokirja-osio { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; }
.huoltokirja-osio h2 { margin-bottom: 24px; }
.huoltokirja-osio ul { list-style: none; padding: 0; margin: 24px 0 32px; }
.huoltokirja-osio li { display: grid; grid-template-columns: 32px 1fr; padding: 10px 0; border-bottom: 1px solid var(--viiva); }
.huoltokirja-osio li b { font: 600 .8rem var(--sans); color: var(--hiljainen); font-variant-numeric: tabular-nums; padding-top: 3px; }
.dokumentti { position: relative; }
.dokumentti .sivu-taka { position: absolute; inset: 18px -14px -18px 14px; background: var(--yo); border-radius: var(--r); }
.dokumentti .sivu-etu { position: relative; background: #fff; border: 1px solid var(--viiva); border-radius: var(--r); padding: 36px 40px; box-shadow: 0 30px 60px -20px rgba(22,37,61,.3); font-variant-numeric: tabular-nums; }
.dok-yla { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 2px solid var(--yo); padding-bottom: 14px; margin-bottom: 20px; }
.dok-yla .logo { color: var(--yo); font-size: 1.05rem; }
.dok-yla small { font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--hiljainen); font-weight: 600; }
.sivu-etu h3 { font-size: 1.7rem; margin-bottom: 4px; }
.sivu-etu .kohde { color: var(--hiljainen); font-size: .9rem; margin-bottom: 20px; }
.dok-rivi { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; border-bottom: 1px dashed var(--viiva); font-size: .88rem; }
.dok-rivi span:first-child { color: var(--hiljainen); }
.dok-rivi span:last-child { font-weight: 600; color: var(--yo); text-align: right; }
.dok-aikajana { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 20px; }
.dok-aikajana div { background: var(--pellava); border-top: 2px solid var(--silaus); padding: 10px 12px; font-size: .75rem; color: var(--hiljainen); }
.dok-aikajana b { display: block; font: 600 1rem var(--serif); color: var(--yo); }
@media (max-width: 900px) { .huoltokirja-osio { grid-template-columns: 1fr; gap: 48px; } .dokumentti .sivu-etu { padding: 28px 24px; } }

/* ---------- UKK ---------- */
.ukk { display: grid; grid-template-columns: 1fr 1.6fr; gap: 72px; }
details { border-bottom: 1px solid var(--viiva); }
details:first-of-type { border-top: 1px solid var(--viiva); }
summary { cursor: pointer; font: 600 1.15rem var(--serif); color: var(--yo); padding: 22px 36px 22px 0; list-style: none; position: relative; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; position: absolute; right: 4px; top: 18px; font: 400 1.5rem var(--sans); color: var(--hiljainen); }
details[open] summary::after { content: "−"; }
details p { margin: 0 0 22px; color: var(--hiljainen); max-width: 44em; }
@media (max-width: 900px) { .ukk { grid-template-columns: 1fr; gap: 24px; } }

/* ---------- Yhteydenotto ---------- */
.yhteys { display: grid; grid-template-columns: 1fr 1.2fr; gap: 72px; }
.yhteys h2 { margin-bottom: 24px; }
.yhteys > div > p { color: var(--vaalea-teksti); font-size: 1.1rem; }
.tekijat { list-style: none; padding: 0; margin: 32px 0 0; border-top: 1px solid var(--viiva-tumma); }
.tekijat li { padding: 16px 0; border-bottom: 1px solid var(--viiva-tumma); color: var(--vaalea-teksti); font-size: .95rem; }
.tekijat b { display: block; color: #fff; font: 600 1.15rem var(--serif); }
.tekijat a { color: var(--silaus); }
@media (max-width: 900px) { .yhteys { grid-template-columns: 1fr; gap: 40px; } }

/* ---------- Lomakkeet ---------- */
.lomake { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.lomake .leve { grid-column: 1 / -1; }
@media (max-width: 640px) { .lomake { grid-template-columns: 1fr; } }
label { display: flex; flex-direction: column; gap: 6px; font-weight: 600; font-size: .85rem; color: var(--yo); }
.tumma label { color: #fff; }
input, select, textarea { font: 400 1rem var(--sans); padding: 0 14px; height: 48px; border-radius: var(--r); border: 1px solid var(--viiva); background: #fff; color: var(--terva); width: 100%; }
textarea { height: auto; padding: 12px 14px; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--silaus); box-shadow: 0 0 0 3px rgba(227,168,58,.35); }
.valinta { flex-direction: row; align-items: flex-start; gap: 10px; font-weight: 400; }
.valinta input { width: 18px; height: 18px; margin-top: 3px; flex: 0 0 auto; accent-color: var(--silaus); }
.tumma .valinta a { color: var(--silaus); }
.viesti { padding: 14px 16px; border-radius: var(--r); background: var(--silaus-v); color: var(--yo); display: none; }
.viesti.nakyy { display: block; }

/* ---------- Alasivut ---------- */
.sivuotsikko { background: var(--yo); color: #fff; padding: 72px 0 64px; }
.sivuotsikko h1 { color: #fff; font-size: clamp(2.4rem, 5vw, 4rem); max-width: 16em; }
.sivuotsikko p { color: var(--vaalea-teksti); font-size: 1.2rem; max-width: 38em; margin: 24px 0 0; }
.murupolku { font-size: .85rem; color: var(--vaalea-teksti); margin-bottom: 20px; letter-spacing: .02em; }
.murupolku a { color: var(--vaalea-teksti); }
.artikkeli { max-width: 780px; }
.artikkeli h2 { font-size: clamp(1.6rem, 3vw, 2.1rem); margin: 2em 0 .6em; }
.artikkeli h2:first-child { margin-top: 0; }
.artikkeli h3 { margin: 1.4em 0 .4em; }
.artikkeli p, .artikkeli li { font-size: 1.05rem; }
.artikkeli li { margin-bottom: .4em; }
.artikkeli .laatikko { background: #fff; border-left: 3px solid var(--silaus); border-radius: var(--r); padding: 18px 22px; margin: 28px 0; }
.artikkeli .laatikko.varoitus { border-color: var(--punamulta); }
.artikkeli table { border-collapse: collapse; width: 100%; background: #fff; font-size: .95rem; margin: 16px 0; }
.artikkeli th, .artikkeli td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--viiva); vertical-align: top; }
.artikkeli th { color: var(--yo); background: var(--paperi); font-size: .85rem; }
.cta-osio { text-align: center; }
.cta-osio h2 { margin-bottom: 20px; }
.cta-osio p { color: var(--vaalea-teksti); max-width: 38em; margin: 0 auto 32px; font-size: 1.1rem; }
.cta-osio .napit { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ---------- Hinta-arvio ---------- */
.laskuri { display: grid; grid-template-columns: 1.1fr .9fr; gap: 32px; align-items: start; }
@media (max-width: 860px) { .laskuri { grid-template-columns: 1fr; } }
.laskuri .syotteet { background: #fff; border: 1px solid var(--viiva); border-radius: var(--r2); padding: 28px; display: grid; gap: 18px; }
.tulos { background: var(--yo); color: #fff; border-radius: var(--r2); padding: 32px; position: sticky; top: 92px; }
.tulos .haarukka { font: 600 2.4rem var(--serif); color: var(--silaus); line-height: 1.1; margin: 6px 0 4px; }
.tulos .kv { border-top: 1px solid var(--viiva-tumma); border-bottom: 1px solid var(--viiva-tumma); padding: 16px 0; margin: 18px 0; }
.tulos .kv b { font: 600 1.6rem var(--serif); display: block; }
.tulos small { color: var(--vaalea-teksti); }
.segmentti { display: flex; flex-wrap: wrap; gap: 8px; }
.segmentti label { flex-direction: row; font-weight: 500; }
.segmentti input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.segmentti span { padding: 10px 14px; border-radius: var(--r); border: 1px solid var(--viiva); background: #fff; cursor: pointer; }
.segmentti input:checked + span { border-color: var(--yo); background: var(--yo); color: #fff; }
.segmentti input:focus-visible + span { box-shadow: 0 0 0 3px rgba(227,168,58,.4); }

/* ---------- Alatunniste ---------- */
.ala { background: var(--yo-syva); color: var(--vaalea-teksti); padding: 72px 0 32px; font-size: .92rem; }
.ala .kehys { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 40px; }
.ala a { color: #DFE5EE; text-decoration: none; }
.ala a:hover { color: #fff; text-decoration: underline; }
.ala h3 { color: #fff; font: 600 .78rem var(--sans); letter-spacing: .12em; text-transform: uppercase; margin-bottom: 16px; }
.ala ul { list-style: none; padding: 0; margin: 0; }
.ala li { margin-bottom: 8px; }
.ala .iskulause { font: 600 1.3rem var(--serif); color: #fff; margin: 20px 0 0; }
.ala .pohja { grid-column: 1 / -1; border-top: 1px solid var(--viiva-tumma); padding-top: 24px; margin-top: 16px; font-size: .82rem; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
@media (max-width: 860px) { .ala .kehys { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .ala .kehys { grid-template-columns: 1fr; } }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }

/* Tekoälyn havainnekuva: merkintä näkyy aina, jotta kuvaa ei sekoiteta oikeaan työhön */
.kuva.ai { background: #ddd; }
.ai-merkki { position: absolute; top: 10px; right: 10px; z-index: 2; font: 600 .68rem var(--sans); letter-spacing: .06em; text-transform: uppercase;
  color: #fff; background: rgba(15,27,46,.72); padding: 4px 8px; border-radius: var(--r); backdrop-filter: blur(4px); }
.ansa { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; overflow: hidden; }