/* Elektrosol – sivuston yhteinen tyylitiedosto.
   Pohjana hyväksytyn design-kanvaasin elektrosol.css sellaisenaan.
   Leveydet ratkaistaan säiliökyselyillä: koko sivu on .kontti-säiliön sisällä
   (tabletti ≥ 600 px, työpöytä ≥ 1100 px, täysi valikko ≥ 1400 px). */

:root {
  --sininen: #275a85;      /* logon sininen */
  --syva: #0f2a44;         /* tumma pohja ja teksti */
  --koralli: #ec6c50;      /* logon aurinko */
  --koralli-tumma: #d9583c;
  --pohja: #ffffff;
  --pinta: #eef2f6;
  --teksti: #0f2a44;
  --vaimea: #50637a;
  --vaimea-tumma: #b7c6d6; /* vaimea teksti tummalla pohjalla */
  --viiva: #d2dbe4;
  --radius: 4px;
  --fontti: "Archivo", "Arial Narrow", Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: var(--pohja); }

.kontti {
  container-type: inline-size;
  width: 100%;
  font-family: var(--fontti);
  font-stretch: 100%;
  color: var(--teksti);
  background: var(--pohja);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
.kontti img { display: block; max-width: 100%; }
.kontti a { color: var(--sininen); text-underline-offset: 3px; }
.kontti a:hover { color: var(--syva); }
.kontti p { margin: 0; }
.kontti h1, .kontti h2, .kontti h3, .kontti h4 {
  margin: 0;
  font-stretch: 75%;
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.005em;
  color: var(--syva);
  text-wrap: balance;
}
.kontti h2, .kontti h3, .kontti h4, .kontti p, .kontti li { hyphens: auto; hyphenate-limit-chars: 12 5 5; overflow-wrap: break-word; }
.kontti .ingressi { hyphens: manual; }

.sisus { width: 100%; max-width: 1440px; margin: 0 auto; padding-inline: 20px; }

/* ---------- Typografia ---------- */
.h1 { font-size: 42px; }
.h2 { font-size: 32px; }
.h3 { font-size: 24px; }
.ingressi { font-size: 18px; line-height: 1.55; max-width: 36em; }
.leipa { font-size: 16px; line-height: 1.6; max-width: 38em; }
.leipa + .leipa { margin-top: 14px; }
.pieni { font-size: 14px; line-height: 1.5; color: var(--vaimea); }
.tumma .pieni { color: var(--vaimea-tumma); }

/* ---------- Napit: teksti vasemmalla, nuoli oikealla ---------- */
.nappi {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  min-height: 54px;
  padding: 1px 18px 0 20px;
  border-radius: var(--radius);
  border: 2px solid transparent;
  font-family: var(--fontti);
  font-size: 17px;
  font-weight: 600;
  font-stretch: 100%;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  white-space: normal;
  text-align: left;
  line-height: 1.2;
}
.nappi svg { flex: none; width: 20px; height: 20px; transition: transform 200ms ease; }
.nappi:hover svg.nuoli { transform: translateX(3px); }
.kontti .nappi--ensi { background: var(--koralli); color: var(--syva); }
.kontti .nappi--ensi:hover { background: var(--koralli-tumma); color: var(--syva); }
.kontti .nappi--toinen { background: transparent; color: var(--syva); border-color: var(--syva); }
.kontti .tumma .nappi--toinen, .kontti .karki--kuva .nappi--toinen { color: #fff; border-color: rgba(255,255,255,.85); }
.napit { display: grid; gap: 12px; }

.tekstilinkki { display: inline; font-weight: 600; font-size: 16px; justify-self: start; }
.tekstilinkki svg { display: inline-block; width: 18px; height: 18px; margin-left: 6px; vertical-align: -3px; }

/* ---------- Luettelo: johdin ja holkki ---------- */
.lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.lista li { position: relative; padding-left: 30px; font-size: 16px; line-height: 1.6; }
.lista li::before {
  content: ""; position: absolute; left: 0; top: calc(0.8em - 1px);
  width: 13px; height: 2px; background: var(--sininen);
}
.lista li::after {
  content: ""; position: absolute; left: 12px; top: calc(0.8em - 4px);
  width: 8px; height: 8px; background: var(--koralli);
}
.tumma .lista li::before { background: var(--vaimea-tumma); }
.lista strong { font-weight: 650; color: var(--syva); }
.tumma .lista strong { color: #fff; }

/* ---------- Ylätunniste ---------- */
.yla { background: #fff; border-bottom: 1px solid var(--viiva); position: relative; z-index: 5; }
.yla__rivi { display: flex; align-items: center; gap: 12px; min-height: 68px; }
.yla__logo { flex: none; display: block; margin-right: auto; }
.yla__logo img { height: 28px; width: auto; }
.paavalikko { display: none; }
.yla__soita {
  flex: none; display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 0 12px; border: 2px solid var(--syva); border-radius: var(--radius);
  font-weight: 600; font-size: 15px; color: var(--syva); text-decoration: none; white-space: nowrap;
}
.kontti .yla__soita { color: var(--syva); text-decoration: none; }
.yla__soita svg { width: 18px; height: 18px; flex: none; }
.yla__cta { display: none; }
.valikko { flex: none; }
.valikko > summary {
  list-style: none; width: 44px; height: 44px; display: grid; place-items: center;
  border-radius: var(--radius); cursor: pointer; color: var(--syva);
}
.valikko > summary::-webkit-details-marker { display: none; }
.valikko > summary svg { width: 26px; height: 26px; }
.valikko__paneeli { display: none; }
.valikko[open] .valikko__paneeli { display: block; }

.mobiilivalikko {
  position: absolute; left: 0; right: 0; top: 100%;
  background: #fff; border-top: 1px solid var(--viiva); border-bottom: 1px solid var(--viiva);
  padding: 8px 20px 24px;
  box-shadow: 0 24px 40px rgba(15, 42, 68, .28);
}
.mobiilivalikko ul { list-style: none; margin: 0; padding: 0; }
.mobiilivalikko li a {
  display: flex; align-items: center; justify-content: space-between; min-height: 56px;
  font-size: 20px; font-weight: 600; font-stretch: 100%; color: var(--syva); text-decoration: none;
  border-bottom: 1px solid var(--viiva);
}
.mobiilivalikko li a svg { width: 20px; height: 20px; color: var(--vaimea); }
.mobiilivalikko .nappi { margin-top: 20px; }
.mobiilivalikko__tiedot { margin-top: 18px; display: grid; gap: 4px; }

/* ---------- Kärki ---------- */
.karki { position: relative; }
.karki--kuva { display: flex; flex-direction: column; }
.karki--kuva .karki__sisus { flex: 1 0 auto; align-content: center; }
.karki--kuva { color: #fff; background: var(--syva); overflow: hidden; }
.karki__kuva { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.karki--kuva::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(15,42,68,.97) 0%, rgba(15,42,68,.9) 50%, rgba(15,42,68,.45) 100%);
}
.karki__sisus { position: relative; z-index: 1; padding-top: 140px; padding-bottom: 40px; display: grid; gap: 20px; }
.karki--kuva .h1 { color: #fff; }
.karki--kuva .ingressi { color: #e6edf4; }
.karki .napit { margin-top: 8px; }
.karki__faktat {
  position: relative; z-index: 1;
  border-top: 1px solid rgba(255,255,255,.22);
  background: rgba(15,42,68,.6);
}
.karki__faktat .lista { padding-block: 18px; gap: 6px; }
.karki__faktat .lista li { font-size: 15px; color: #e6edf4; }

.karki--vaalea { background: var(--pinta); }
.karki--vaalea .karki__sisus { padding-top: 48px; padding-bottom: 48px; }

/* palvelusivun kärki: oma kuva taustana mobiilissa, rinnalla leveämmällä */
.karki--jaettu { background: var(--syva); color: #fff; overflow: hidden; }
.karki--jaettu .karki__kuva { object-position: center 40%; }
.karki--jaettu::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(15,42,68,.97) 0%, rgba(15,42,68,.88) 55%, rgba(15,42,68,.35) 100%);
}
.karki--jaettu .h1 { color: #fff; }
.karki--jaettu .ingressi { color: #e6edf4; }
.karki--jaettu .nappi--toinen { color: #fff; border-color: rgba(255,255,255,.85); }
.karki--jaettu .karki__sisus { padding-top: 180px; padding-bottom: 48px; }

/* ---------- Osiot ---------- */
.osio { padding-block: 56px; }
.osio--pinta { background: var(--pinta); }
.osio__otsikko { margin-bottom: 28px; display: grid; gap: 12px; }
.kaksi { display: grid; gap: 28px; }

/* ---------- Luottamus ---------- */
.luottamus { display: grid; gap: 48px; }
.luottamus__lk { display: grid; gap: 16px; align-content: start; }
.lk-otsikko { display: flex; align-items: center; gap: 20px; }
.lk-otsikko .lk-kehys { width: 112px; height: 56px; flex: none; }
.lk-kehys {
  width: 168px; height: 84px; padding: 0; overflow: hidden;
  border-radius: var(--radius); border: 1px solid var(--viiva); background: #fff;
}
.lk-kehys img { width: 100%; height: 100%; object-fit: cover; }
.logot { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.logokehys {
  height: 84px; padding: 14px 18px; display: grid; place-items: center;
  border: 1px solid var(--viiva); border-radius: var(--radius); background: #fff;
}
.logokehys img { max-width: 100%; max-height: 54px; width: auto; height: auto; object-fit: contain; }
.logokehys--nimi { height: auto; padding: 0; border: 0; background: none; display: grid; gap: 8px; place-items: stretch; }
.logokehys--nimi .logokehys { height: 84px; }

/* ---------- Palvelukortit ---------- */
.kortit { display: grid; gap: 14px; }
.kortti {
  position: relative; display: grid; align-content: end; min-height: 240px;
  border-radius: var(--radius); overflow: hidden; text-decoration: none; background: var(--syva);
}
.kontti a.kortti { color: #fff; text-decoration: none; }
.kortti__kuva { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.kortti::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(15,42,68,.96) 0%, rgba(15,42,68,.82) 45%, rgba(15,42,68,.25) 100%); }
.kortti__teksti { position: relative; z-index: 1; padding: 20px; display: grid; gap: 8px; }
.kortti__otsikko { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.kontti .kortti .h3 { color: #fff; }
.kortti__otsikko svg { width: 22px; height: 22px; flex: none; color: var(--koralli); transition: transform 200ms ease; }
.kortti:hover .kortti__otsikko svg { transform: translateX(3px); }
.kortti p { font-size: 15px; line-height: 1.5; color: #e1e9f1; }

/* ---------- Vaiheet ---------- */
.vaiheet { list-style: none; margin: 0; padding: 0; display: grid; gap: 28px; counter-reset: v; }
.vaihe { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 4px 16px; align-items: start; }
.vaihe__nro {
  grid-row: span 2; font-size: 52px; line-height: .9; font-weight: 800; font-stretch: 62%;
  color: var(--koralli); font-variant-numeric: tabular-nums;
}
.vaihe h3 { font-size: 22px; }
.vaihe p { font-size: 16px; line-height: 1.6; color: var(--vaimea); }

/* ---------- Kuva ja teksti ---------- */
.kuvateksti { position: relative; overflow: hidden; background: var(--syva); color: #fff; }
.kuvateksti__kuva { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.kuvateksti::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(15,42,68,.96) 0%, rgba(15,42,68,.86) 60%, rgba(15,42,68,.4) 100%); }
.kuvateksti__teksti { position: relative; z-index: 1; padding-top: 200px; padding-bottom: 56px; display: grid; gap: 16px; }
.kontti .kuvateksti .h2 { color: #fff; }
.kuvateksti .leipa { color: #e6edf4; }
.kontti .kuvateksti a { color: #fff; }

/* ---------- Yhteydenotto (tumma) ---------- */
.tumma { background: var(--syva); color: #fff; }
.kontti .tumma .h2, .kontti .tumma .h3 { color: #fff; }
.kontti .tumma a { color: #fff; }
.yhteys { padding-block: 64px; }
.yhteys__sisus { display: grid; gap: 36px; }
.yhteys__alku { display: grid; gap: 12px; }
.yhteys__alku .leipa { color: #d5e0ea; }
.yhteys__toiminta { display: grid; gap: 18px; justify-items: start; }
.kontti a.yhteys__numero {
  display: block; color: var(--koralli); text-decoration: none;
  font-size: 58px; line-height: .92; font-weight: 800; font-stretch: 62%;
  letter-spacing: -0.01em; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.kontti a.yhteys__numero:hover { color: #ff8a70; }
.yhteys__henkilo { font-size: 15px; color: var(--vaimea-tumma); display: flex; flex-wrap: wrap; gap: 4px 16px; }
.kontti .yhteys__henkilo a { color: #fff; }
.yhteys .nappi { max-width: 100%; }
.yhteys__lisa { font-size: 14px; }

/* ---------- Alatunniste ---------- */
.ala { background: var(--pinta); border-top: 1px solid var(--viiva); font-size: 15px; }
.ala__ruudukko { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 24px; padding-top: 48px; padding-bottom: 36px; }
.ala__yritys { grid-column: 1 / -1; display: grid; gap: 14px; }
.ala__yritys img { height: 30px; width: auto; }
.ala__otsikko { font-size: 15px; font-weight: 700; font-stretch: 100%; margin-bottom: 10px; color: var(--syva); }
.kontti .ala h2.ala__otsikko { font-size: 15px; font-stretch: 100%; line-height: 1.3; }
.ala ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.kontti .ala a { color: var(--syva); text-decoration: none; }
.kontti .ala a:hover { text-decoration: underline; }
.ala__merkki { display: flex; align-items: center; gap: 16px; padding-block: 24px; border-top: 1px solid var(--viiva); }
.ala__merkki .lk-kehys { width: 96px; height: 48px; flex: none; }
.ala__merkki p { font-size: 14px; color: var(--vaimea); max-width: 46em; }
.ala__pohja { padding-block: 18px 28px; font-size: 14px; color: var(--vaimea); }

/* ---------- Hinnasto ---------- */
.hinnat { display: grid; gap: 12px; }
.hintakortti { background: #fff; border: 1px solid var(--viiva); border-radius: var(--radius); padding: 18px 20px; display: grid; gap: 10px; }
.hintakortti--paa { border: 2px solid var(--syva); }
.hintakortti__nimi { font-size: 20px; font-weight: 700; font-stretch: 75%; }
.hintakortti--paa .hintakortti__nimi { font-size: 24px; }
.hintakortti dl { margin: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 16px; align-items: baseline; }
.hintakortti dt { font-size: 14px; color: var(--vaimea); }
.hintakortti dd { margin: 0; text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.hintakortti--paa dd:first-of-type { font-size: 30px; font-weight: 800; font-stretch: 75%; color: var(--syva); }
.hintataulu { display: none; width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--viiva); }
.hintataulu th, .hintataulu td { padding: 18px 24px; text-align: left; border-bottom: 1px solid var(--viiva); font-variant-numeric: tabular-nums; }
.hintataulu thead th { font-size: 14px; font-weight: 600; color: var(--vaimea); background: var(--pinta); }
.hintataulu td.luku, .hintataulu th.luku { text-align: right; width: 220px; }
.hintataulu tbody th { font-weight: 600; font-size: 17px; }
.hintataulu tr.paa th { font-size: 22px; font-stretch: 75%; font-weight: 700; }
.hintataulu tr.paa td { font-size: 17px; font-weight: 600; }
.hintataulu tr.paa td:nth-child(2) { font-size: 32px; font-weight: 800; font-stretch: 75%; color: var(--syva); }
.hintataulu tr.paa { background: #f7f9fb; }

/* ---------- Linkkirivit ---------- */
.linkkirivit { list-style: none; margin: 0; padding: 0; display: grid; border-top: 1px solid var(--viiva); }
.linkkirivit a {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px;
  border-bottom: 1px solid var(--viiva); font-size: 20px; font-weight: 700; font-stretch: 75%; text-decoration: none;
}
.kontti .linkkirivit a { color: var(--syva); text-decoration: none; }
.linkkirivit a svg { width: 22px; height: 22px; color: var(--koralli); flex: none; }

/* ---------- Ilmoitus ---------- */
.ilmoitus {
  display: grid; gap: 4px; padding: 16px 18px; border-radius: var(--radius);
  background: #fff; border: 2px solid var(--koralli); font-size: 16px; max-width: 40em;
}
.ilmoitus strong { font-weight: 700; }
.kontti .ilmoitus a { color: var(--syva); font-weight: 700; }

/* ---------- Lomake ---------- */
.lomake { display: grid; gap: 20px; }
.lomakesivu { display: grid; gap: 48px; }
.kentta { display: grid; gap: 6px; }
.kentta label, .kentta legend { font-size: 15px; font-weight: 600; color: var(--syva); padding: 0; }
.kentta .ohje { font-size: 14px; color: var(--vaimea); }
.syote {
  width: 100%; min-height: 52px; padding: 12px 14px; border: 1.5px solid #9fb0c2; border-radius: var(--radius);
  font-family: var(--fontti); font-size: 16px; color: var(--teksti); background: #fff;
}
textarea.syote { min-height: 132px; resize: vertical; line-height: 1.5; }
.valinta { position: relative; }
.valinta select { appearance: none; -webkit-appearance: none; padding-right: 44px; }
.valinta svg { position: absolute; right: 14px; top: 50%; width: 18px; height: 18px; margin-top: -9px; pointer-events: none; color: var(--syva); }
fieldset.kentta { border: 0; margin: 0; padding: 0; }
.radiot { display: grid; gap: 8px; margin-top: 4px; }
.radio { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 8px 14px; line-height: 1.25; border: 1.5px solid #9fb0c2; border-radius: var(--radius); font-size: 16px; background: #fff; }
.radio input { width: 20px; height: 20px; margin: 0; flex: none; accent-color: var(--sininen); }
.tahti { color: var(--koralli-tumma); }
.yhteystiedot { display: grid; gap: 28px; align-content: start; }
.yhteystiedot__ryhma { display: grid; gap: 6px; }
.yhteystiedot__ryhma h3 { font-size: 20px; margin-bottom: 4px; }
.kontti a.isonumero { font-size: 40px; line-height: 1; font-weight: 800; font-stretch: 62%; color: var(--syva); text-decoration: none; font-variant-numeric: tabular-nums; }
.lomakelaatikko { background: #fff; border: 1px solid var(--viiva); border-radius: var(--radius); padding: 24px 20px; }

/* ---------- Tuote ---------- */
.tuote { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; }
.tuote__kuvat { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.tuotekehys.tuote__paakuva { grid-column: 1 / -1; height: 360px; }
.tuotekehys { background: #fff; border: 1px solid var(--viiva); border-radius: var(--radius); padding: 16px; display: flex; align-items: center; justify-content: center; height: 120px; overflow: hidden; }
.kontti .tuotekehys img { max-width: 100%; max-height: 100%; width: auto; height: auto; }
.tuote__tiedot { display: grid; gap: 20px; align-content: start; }
.hinta { font-size: 44px; line-height: 1; font-weight: 800; font-stretch: 75%; color: var(--syva); font-variant-numeric: tabular-nums; }
.tekniset { margin: 0; display: grid; border-top: 1px solid var(--viiva); }
.tekniset > div { display: grid; gap: 2px; padding: 12px 0; border-bottom: 1px solid var(--viiva); }
.tekniset dt { font-size: 14px; color: var(--vaimea); }
.tekniset dd { margin: 0; font-size: 16px; }

.kolme { display: grid; gap: 24px; }
.kolme__kohta { display: grid; gap: 8px; padding-top: 18px; border-top: 2px solid var(--syva); }
.kolme__kohta p { color: var(--vaimea); }

.hata { display: grid; gap: 4px; padding: 18px 20px; border-radius: var(--radius); background: var(--syva); color: #fff; }
.kontti .hata a { color: var(--koralli); font-weight: 800; }

.ostolaatikko { display: grid; gap: 14px; justify-items: start; padding: 22px 20px 24px; background: var(--pinta); border-radius: var(--radius); }
.ostolaatikko .leipa { margin-bottom: 6px; }
.kontti .kuvateksti a.tekstilinkki { color: #fff; }

.karki--paivystys .karki__sisus { padding-top: 64px; }
.kontti a.soittonappi {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%;
  min-height: 92px; padding: 14px 22px 12px 22px; margin-top: 8px; border-radius: var(--radius);
  background: var(--koralli); color: var(--syva); text-decoration: none;
}
.kontti a.soittonappi:hover { background: var(--koralli-tumma); color: var(--syva); }
.soittonappi__teksti { display: grid; gap: 4px; }
.soittonappi__otsikko { font-size: 16px; font-weight: 600; line-height: 1; }
.soittonappi__numero { font-size: 44px; line-height: .9; font-weight: 800; font-stretch: 62%; font-variant-numeric: tabular-nums; white-space: nowrap; }
.soittonappi svg { width: 30px; height: 30px; flex: none; }

.luvut { display: grid; gap: 28px; }
.tilasto { display: grid; align-content: start; gap: 6px; padding-top: 16px; border-top: 2px solid var(--syva); }
.tilasto__arvo { font-size: 56px; line-height: .95; font-weight: 800; font-stretch: 62%; color: var(--sininen); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tilasto__selite { font-size: 16px; color: var(--vaimea); max-width: 22em; }
.lista--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; }
.kuvateksti .lista li { color: #e6edf4; }
.kuvateksti .lista li::before { background: var(--vaimea-tumma); }

/* ================= Tabletti ≥ 600 px ================= */
@container (min-width: 600px) {
  .sisus { padding-inline: 40px; }
  .h1 { font-size: 60px; }
  .h2 { font-size: 40px; }
  .h3 { font-size: 26px; }
  .ingressi { font-size: 19px; }
  .leipa, .lista li { font-size: 17px; }
  .osio { padding-block: 80px; }
  .napit { grid-template-columns: repeat(2, 288px); justify-content: start; }
  .nappi { width: 288px; white-space: nowrap; line-height: 1; }
  .napit--leve { grid-template-columns: repeat(2, 340px); }
  .napit--leve .nappi, .nappi--leve { width: 360px; }
  .napit--leve .nappi { width: 340px; }
  .ostolaatikko { padding: 28px 28px 30px; }
  .yla__rivi { min-height: 76px; gap: 16px; }
  .yla__logo img { height: 32px; }
  .karki__sisus { padding-top: 200px; padding-bottom: 56px; }
  .karki--kuva::after { background: linear-gradient(90deg, rgba(15,42,68,.96) 0%, rgba(15,42,68,.88) 55%, rgba(15,42,68,.35) 100%); }
  .karki__faktat .lista { grid-template-columns: repeat(3, auto); justify-content: start; gap: 8px 36px; }
  .karki--vaalea .karki__sisus { padding-top: 72px; padding-bottom: 72px; }
  .karki--jaettu .karki__sisus { padding-top: 240px; padding-bottom: 64px; }
  .logot { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .kortit { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
  .kortti { display: flex; flex-direction: column; min-height: 0; background: #fff; border: 1px solid var(--viiva); }
  .kortti::after { display: none; }
  .kortti__kuva { position: static; aspect-ratio: 4 / 3; height: auto; }
  .kortti__teksti { padding: 22px 24px 26px; }
  .kontti a.kortti { color: var(--teksti); }
  .kontti .kortti .h3 { color: var(--syva); }
  .kortti p { color: var(--vaimea); font-size: 16px; }
  .vaiheet { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
  .vaihe { grid-template-columns: minmax(0, 1fr); gap: 12px; grid-row: span 3; grid-template-rows: subgrid; }
  .vaiheet { grid-auto-rows: auto; }
  .vaihe__nro { grid-row: auto; font-size: 64px; }
  .vaiheet--nelja { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 48px; }
  .karki--paivystys .karki__sisus { padding-top: 160px; }
  .kontti a.soittonappi { width: 420px; }
  .soittonappi__numero { font-size: 52px; }
  .kuvateksti__teksti { padding-top: 320px; padding-bottom: 72px; max-width: 760px; }
  .yhteys { padding-block: 88px; }
  .kontti a.yhteys__numero { font-size: 96px; }
  .ala__ruudukko { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hinnat { display: none; }
  .hintataulu { display: table; }
  .radiot { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lomakelaatikko { padding: 32px; }
  .kentat-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
  .tuotekehys.tuote__paakuva { height: 440px; }
  .tuotekehys { height: 160px; }
  .tekniset > div { grid-template-columns: 220px minmax(0, 1fr); gap: 16px; }
  .kolme { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .kaksi { gap: 40px; }
  .luvut { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
  .tilasto__arvo { font-size: 64px; }
  .kentta label, .kentta legend { font-size: 15px; }
}

/* ================= Työpöytä ≥ 1100 px ================= */
@container (min-width: 1100px) {
  .sisus { padding-inline: 80px; }
  .h1 { font-size: 80px; }
  .h2 { font-size: 50px; }
  .h3 { font-size: 27px; }
  .ingressi { font-size: 20px; }
  .osio { padding-block: 112px; }
  .osio__otsikko { margin-bottom: 44px; }
  .karki__sisus { padding-top: 136px; padding-bottom: 96px; max-width: 1440px; }
  .karki__sisus > * { max-width: 700px; }
  .karki--kuva { min-height: 700px; }
  .karki--kuva::after { background: linear-gradient(90deg, rgba(15,42,68,.97) 0%, rgba(15,42,68,.9) 42%, rgba(15,42,68,.25) 78%, rgba(15,42,68,.1) 100%); }
  .karki--vaalea .karki__sisus { padding-top: 96px; padding-bottom: 96px; }
  .karki--jaettu { background: var(--pinta); color: var(--teksti); }
  .karki--jaettu::after { display: none; }
  .karki--jaettu .karki__kehys { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); min-height: 700px; }
  .karki--jaettu .karki__kuva { position: relative; inset: auto; grid-column: 2; grid-row: 1; height: 100%; min-height: 700px; }
  .karki--jaettu .karki__sisus { grid-column: 1; grid-row: 1; padding: 120px 72px 96px max(80px, calc((100cqi - 1440px) / 2 + 80px)); margin: 0; max-width: none; align-content: center; }
  .karki--jaettu .h1 { color: var(--syva); }
  .karki--jaettu .ingressi { color: var(--teksti); }
  .karki--jaettu .nappi--toinen { color: var(--syva); border-color: var(--syva); }
  .kaksi { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 80px; align-items: start; }
  .kaksi--tasan { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .luottamus { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 96px; }
  .kortit { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
  .kortti__teksti { padding: 24px 24px 30px; }
  .kuvateksti { background: #fff; color: var(--teksti); }
  .kuvateksti::after { display: none; }
  .kuvateksti__ruudukko { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 80px; align-items: center; }
  .kuvateksti__kuva { position: static; height: 520px; border-radius: var(--radius); }
  .kuvateksti__teksti { padding: 0; max-width: none; }
  .kuvateksti--kaanto .kuvateksti__kuva { order: 2; }
  .kuvateksti.osio--pinta-d { background: var(--pinta); }
  .kuvateksti .lista li { color: var(--teksti); }
  .kuvateksti .lista li::before { background: var(--sininen); }
  .tilasto__arvo { font-size: 96px; }
  .luvut { gap: 48px; }
  .kontti .kuvateksti a.tekstilinkki { color: var(--sininen); }
  .kontti .kuvateksti .h2 { color: var(--syva); }
  .kuvateksti .leipa { color: var(--teksti); }
  .kontti .kuvateksti a { color: var(--sininen); }
  .kuvateksti { padding-block: 112px; }
  .yhteys { padding-block: 120px; }
  .yhteys__sisus { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 80px; align-items: end; }
  .kontti a.yhteys__numero { font-size: 148px; }
  .yhteys__toiminta { gap: 22px; }
  .ala__ruudukko { grid-template-columns: minmax(0, 4fr) repeat(4, minmax(0, 2fr)); padding-top: 72px; }
  .ala__yritys { grid-column: auto; }
  .lomakesivu { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 80px; align-items: start; }
  .lomakelaatikko { padding: 44px; }
  .tuote { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 80px; align-items: start; }
  .tuotekehys.tuote__paakuva { height: 560px; }
  .tuotekehys { height: 180px; }
  .kolme { gap: 40px; }
  .vaiheet--nelja { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .karki--paivystys .karki__sisus { padding-top: 136px; }
}

/* ================= Täysi valikko ≥ 1400 px ================= */
@container (min-width: 1400px) {
  .yla__rivi { min-height: 84px; gap: 20px; }
  .yla__logo img { height: 30px; }
  .valikko { display: none; }
  .paavalikko { display: flex; align-items: center; gap: 20px; margin-right: 4px; }
  .paavalikko a { font-size: 15px; font-weight: 500; text-decoration: none; white-space: nowrap; }
  .kontti .paavalikko a { color: var(--syva); text-decoration: none; }
  .kontti .paavalikko a:hover { color: var(--sininen); text-decoration: underline; }
  .kontti .paavalikko a[aria-current] { color: var(--sininen); box-shadow: inset 0 -2px 0 var(--koralli); }
  .paavalikko a { padding-block: 8px; }
  .yla__cta { display: inline-flex; width: auto; min-height: 48px; gap: 12px; padding: 1px 14px 0 18px; font-size: 15px; }
  .yla__soita { min-height: 48px; }
}

@container (max-width: 369px) {
  .yla__numero { display: none; }
  .yla__soita { width: 44px; padding: 0; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .nappi svg, .kortti__otsikko svg { transition: none; }
}

/* =====================================================================
   Toteutuksen lisäykset (vaihe 4): saavutettavuus, mobiilivalikon kuvake,
   piirtämättömien sivujen osat ja lomakkeen tilat. Kulmapyöristys vain
   muuttujasta --radius.
   ===================================================================== */
:root { --virhe: #a63a22; } /* lomakkeen virheteksti, kontrasti valkoisella 6,5:1 */
html { -webkit-text-size-adjust: 100%; }
body { font-family: var(--fontti); color: var(--teksti); }
.kontti { min-height: 100vh; display: flex; flex-direction: column; }
.kontti > main { flex: 1 0 auto; }

.piilo {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
.kontti a.ohitus {
  position: absolute; left: 12px; top: -120px; z-index: 30;
  padding: 12px 16px; border-radius: var(--radius);
  background: var(--syva); color: #fff; font-weight: 600; text-decoration: none;
}
.kontti a.ohitus:focus { top: 12px; }
.kontti :focus-visible { outline: 3px solid var(--sininen); outline-offset: 2px; }
.kontti .tumma :focus-visible,
.kontti .karki--kuva :focus-visible,
.kontti .kortti:focus-visible { outline-color: #fff; }

/* Mobiilivalikon kuvake vaihtuu ristiksi, kun valikko on auki (ilman skriptiä) */
.valikko .kuvake-kiinni { display: none; }
.valikko[open] .kuvake-auki { display: none; }
.valikko[open] .kuvake-kiinni { display: block; }
.mobiilivalikko li a[aria-current="page"] { color: var(--sininen); }

/* ---------- Yritys: iso Luotettava kumppani -merkki ---------- */
.lk-iso { display: grid; gap: 20px; align-content: start; justify-items: start; }
.lk-kehys.lk-kehys--iso { width: 200px; height: 100px; }
.lk-selitys { display: grid; gap: 20px; align-content: start; }
.lk-selitys .h3 { margin-top: 8px; }

/* Logot nimineen */
.logot--nimet { row-gap: 20px; }
.kontti a.logokehys--nimi, .logokehys--nimi { color: var(--syva); text-decoration: none; }
.logokehys__nimi { font-size: 14px; line-height: 1.4; color: var(--vaimea); min-height: 2.8em; } /* varaa kaksi riviä: logorivit yhtä korkeita */
.kontti a.logokehys--nimi .logokehys__nimi { color: var(--sininen); text-decoration: underline; text-underline-offset: 3px; }
.kontti a.logokehys--nimi:hover .logokehys__nimi { color: var(--syva); }

/* Linkkirivit, joissa lyhyt kuvaus datatasolla */
.linkkirivit--kuvaus a { min-height: 88px; padding-block: 14px; }
.linkkirivit__teksti { display: grid; gap: 4px; }
.linkkirivit__kuvaus {
  font-size: 14px; line-height: 1.4; font-weight: 400; font-stretch: 100%;
  color: var(--vaimea); hyphens: auto; hyphenate-limit-chars: 12 5 5;
}

/* Yritystiedot avain–arvo-listana (sama kuin tekniset tiedot) */
.tekniset dd a { overflow-wrap: anywhere; }

/* ---------- Tietosuojaseloste ---------- */
.seloste { display: grid; }
.seloste__kohta:first-child { padding-top: 0; }
.seloste__kohta { display: grid; gap: 14px; padding-block: 28px; border-bottom: 1px solid var(--viiva); }
.seloste__sisalto { display: grid; gap: 14px; align-content: start; }
.seloste__sisalto .leipa { max-width: 40em; }
.seloste__sisalto .lista { max-width: 40em; }
.seloste__sisalto .pieni { display: block; }
.paivitetty { font-size: 14px; color: var(--vaimea); }
.taydenna {
  padding: 1px 6px; border: 1px dashed var(--koralli-tumma); border-radius: var(--radius);
  background: #fdece7; color: var(--syva); font-size: .94em;
}

/* ---------- Lomakkeen tilat ---------- */
.virhe { font-size: 14px; line-height: 1.4; font-weight: 600; color: var(--virhe); }
.virhe[hidden] { display: none; }
.syote[aria-invalid="true"] { border-color: var(--virhe); border-width: 2px; }
.lomake__ansa { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.lomakelaatikko { position: relative; }
.kiitos { display: grid; gap: 16px; justify-items: start; }
.kiitos:focus { outline: none; }
.kiitos__esikatselu { padding: 16px 18px; border-radius: var(--radius); background: var(--pinta); max-width: 40em; }
.lahetysvirhe { padding: 14px 16px; border-radius: var(--radius); border: 2px solid var(--virhe); background: #fff; font-size: 15px; }
.lahetysvirhe[hidden] { display: none; }

@container (max-width: 599px) {
  /* kuvaus voi rivittyä kahdelle riville: varataan tila kaikille riveille */
  .linkkirivit__kuvaus { min-height: 2.8em; }
}
@container (min-width: 600px) {
  .lk-kehys.lk-kehys--iso { width: 240px; height: 120px; }
  .seloste__kohta { padding-block: 36px; }
}
@container (min-width: 1100px) {
  .logokehys__nimi { min-height: 0; }
  .seloste__kohta { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 80px; padding-block: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .kortti:hover .kortti__otsikko svg, .nappi:hover svg.nuoli { transform: none; }
}
.lomake[hidden], .kiitos[hidden] { display: none; }
/* Sähköpostiosoitteita ja puhelinnumeroita ei tavuteta */
.kontti a[href^="mailto:"], .kontti a[href^="tel:"] { hyphens: manual; }