/* ==========================================================================
   AUTOJOPPARI-OSION TYYLIT
   ==========================================================================
   Ladataan styles.css:n jälkeen index.html:ssä. Tokenit ja yhteiset
   komponentit (napit, kortit, lomakkeet) tulevat styles.css:stä; täällä on
   vain se mikä on osion omaa. Paletti vaihtuu `body[data-osio]`-arvosta,
   joten markkinapaikan sivut eivät näe näitä värejä. */

/* AutoJoppari-osio on vihreä, markkinapaikka oranssi. Samat roolit (luettava
   sävy, hover, pinta, täyte) – vain arvot vaihtuvat, joten jokainen nappi,
   linkki ja merkintä seuraa osiota ilman omia sääntöjä. `data-osio` tulee
   sovellus.js:stä. Kontrastit: #1b7f4c vaalealla 4,81:1, #4ade80 tummalla
   10,9:1, CTA:n valkoinen teksti 4,02:1 (oranssilla 3,07:1). */
/* AutoJopparilla on oma kirjasinpari: otsikoissa Bricolage Grotesque (leveä,
   luonteikas groteski, optinen koko -akseli) ja leipätekstissä Plus Jakarta
   Sans (pehmeä geometrinen). Molemmat muuttuvia fontteja, paikallisesti
   `ydin/fontit/`-kansiosta kuten ytimen kirjasimet. Lisenssit:
   `ydin/fontit/LAHTEET.md`. */
@font-face {
  font-family: "Bricolage Grotesque";
  src: url("../ydin/fontit/bricolage-grotesque-latin.woff2") format("woff2");
  font-weight: 200 800;
  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+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Bricolage Grotesque";
  src: url("../ydin/fontit/bricolage-grotesque-latin-ext.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("../ydin/fontit/plus-jakarta-sans-latin.woff2") format("woff2");
  font-weight: 200 800;
  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+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("../ydin/fontit/plus-jakarta-sans-latin-ext.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

body[data-osio="liikkeille"] {
  --fontti: "Plus Jakarta Sans", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fontti-otsikko: "Bricolage Grotesque", "Space Grotesk", var(--fontti);
  --paino-lihava: 750;
  --paino-musta: 800;

  --korostus:        light-dark(#1b7f4c, #4ade80);
  --korostus-toinen: light-dark(#146238, #86efac);
  --korostus-pinta:  light-dark(#ecf8f0, rgba(74, 222, 128, .16));
  --cta: #1e9150;
  --cta-hover: light-dark(#177a42, #2bb069);
  /* Fokusrengas seuraa osion korostusta; :root-arvo on Autokadun oranssi. */
  --fokus: var(--korostus);
  --fokus-halo: light-dark(#c9ebd6, rgba(74, 222, 128, .35));
}
/* Bricolage on leveä, joten isot otsikot saavat tiukemman kirjainvälin ja
   optisen koon kautta terävämmät muodot. Hinnat pysyvät tasalevyisinä. */
body[data-osio="liikkeille"] h1,
body[data-osio="liikkeille"] h2 { letter-spacing: -.025em; font-optical-sizing: auto; }
body[data-osio="liikkeille"] h3,
body[data-osio="liikkeille"] h4 { letter-spacing: -.015em; }
body[data-osio="liikkeille"] .lkhero__otsikko { letter-spacing: -.03em; font-weight: var(--paino-musta); }


/* ==========================================================================
   PYYNTÖKORTIT JA PYYNNÖN SIVU
   ==========================================================================
   Myyntipyyntö ei ole ilmoitus: kortti näyttää tarjouskilpailun tilanteen
   pyyntihinnan sijaan, ja pyynnön sivulla tarjouslaatikko korvaa
   myyjälaatikon. Kortit lainaavat autokortin luokat, jotta ruudukko näyttää
   samalta kuin hakutuloksissa. */

/* --- Merkinnät ---------------------------------------------------------- */
.merkkilappu--pyynto-avoin { background: var(--onnistui-pinta); color: var(--onnistui); }
.merkkilappu--pyynto-paattynyt { background: var(--varoitus-pinta); color: var(--varoitus); }
.merkkilappu--pyynto-hyvaksytty { background: var(--onnistui-pinta); color: var(--onnistui); }
.merkkilappu--pyynto-ei-tarjouksia,
.merkkilappu--pyynto-peruttu { background: var(--pinta-himmea); color: var(--teksti-himmea); }
.merkkilappu--voimassa { background: var(--onnistui-pinta); color: var(--onnistui); }
.merkkilappu--jatkoaika { background: var(--varoitus-pinta); color: var(--varoitus); }

/* --- Pyyntökortti ------------------------------------------------------- */
.pyyntokortti__tarjous { display: grid; gap: 1px; margin-top: var(--vali-2); }
.pyyntokortti__otsikko {
  font-size: var(--koko-xs);
  color: var(--teksti-himmea);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.pyyntokortti__maara { font-size: var(--koko-s); color: var(--teksti-himmea); }
.pyyntokortti .autokortti__alarivi .aikalaskuri { font-size: inherit; }
.pyyntotila {
  margin-top: var(--vali-2);
  font-size: var(--koko-s);
  font-weight: var(--paino-puolilihava);
  color: var(--teksti-pehmea);
}
.pyyntotila--johdat, .pyyntotila--voitto { color: var(--onnistui); }
.pyyntotila--ohitettu { color: var(--virhe); }
.pyyntotila--uusi { color: var(--korostus); }

/* --- Tarjouslaatikko ---------------------------------------------------- */
.tarjouslaatikko {
  padding: var(--vali-5);
  background: var(--pinta);
  border: 1px solid var(--korostus);
  border-radius: var(--r-l);
  box-shadow: var(--varjo-1);
}
.tarjouslaatikko__ylarivi {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--vali-3); flex-wrap: wrap;
  margin-bottom: var(--vali-3);
}
.tarjouslaatikko__otsikko { margin: 0; font-size: var(--koko-s); color: var(--teksti-himmea); }
.tarjouslaatikko__summa {
  margin: 0;
  font-family: var(--fontti-otsikko);
  font-size: var(--koko-hinta);
  font-weight: var(--paino-lihava);
  line-height: 1.1;
  color: var(--hinta);
}
.tarjouslaatikko__meta { margin: var(--vali-1) 0 0; font-size: var(--koko-s); color: var(--teksti-himmea); }
.tarjouslaatikko__oma {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--vali-2);
  margin: var(--vali-4) 0 0;
  padding: var(--vali-2) var(--vali-3);
  border-radius: var(--r-m);
  font-size: var(--koko-s);
  font-weight: var(--paino-puolilihava);
  background: var(--pinta-himmea);
  color: var(--teksti-pehmea);
}
.tarjouslaatikko__oma--johdat, .tarjouslaatikko__oma--voitto { background: var(--onnistui-pinta); color: var(--onnistui); }
.tarjouslaatikko__oma--ohitettu { background: var(--virhe-pinta); color: var(--virhe); }
.tarjouslaatikko__oma--uusi { background: var(--korostus-pinta); color: var(--korostus); }
.tarjouslaatikko__ohje { margin: var(--vali-4) 0 0; font-size: var(--koko-s); color: var(--teksti-himmea); }
.tarjouslaatikko__lomake { margin-top: var(--vali-4); }
.tarjouslaatikko__napit { display: flex; flex-wrap: wrap; gap: var(--vali-2); margin-top: var(--vali-3); }
.tarjouslaatikko__napit .nappi { flex: 1 1 140px; justify-content: center; }
.tarjouslaatikko .huomiolaatikko { margin: var(--vali-4) 0 0; }

/* --- Tarjousrivit myyjälle ---------------------------------------------- */
.tarjousrivit { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--vali-3); }
.tarjousrivi {
  padding: var(--vali-3);
  border: 1px solid var(--reuna);
  border-radius: var(--r-m);
  background: var(--pinta-himmea);
  font-size: var(--koko-s);
}
.tarjousrivi--uusi { border-color: var(--korostus); background: var(--korostus-pinta); }
.tarjousrivi--hyvaksytty { border-color: var(--onnistui); }
.tarjousrivi__ylarivi {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: var(--vali-2); flex-wrap: wrap;
}
.tarjousrivi__summa {
  font-weight: var(--paino-lihava);
  font-size: var(--koko-l);
  font-variant-numeric: tabular-nums;
  color: var(--hinta);
}
.tarjousrivi__meta { color: var(--teksti-himmea); font-size: var(--koko-xs); }
.tarjousrivi__viesti { margin: var(--vali-2) 0 0; white-space: pre-wrap; }
.tarjousrivi__vastatarjous {
  margin: var(--vali-2) 0 0;
  padding: var(--vali-2);
  border-radius: var(--r-s);
  background: var(--vastatarjous-pinta);
  color: var(--vastatarjous);
}
.tarjousrivi__napit { display: flex; flex-wrap: wrap; gap: var(--vali-2); margin-top: var(--vali-3); }

/* --- Yhteystiedot hyväksynnän jälkeen ----------------------------------- */
.yhteyskortti { display: grid; gap: 2px; margin-top: var(--vali-3); font-size: var(--koko-s); }
.yhteyskortti strong { font-size: var(--koko-m); }

/* --- Pyyntölomakkeen yhteenveto ----------------------------------------- */
.yhteenveto { margin-top: var(--vali-5); }
.yhteenveto h4 { margin: 0 0 var(--vali-2); font-size: var(--koko-m); }
.tietolista {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--vali-2) var(--vali-4);
  margin: 0;
}
.tietolista div { display: grid; gap: 1px; }
.tietolista dt { font-size: var(--koko-xs); color: var(--teksti-himmea); }
.tietolista dd { margin: 0; font-weight: var(--paino-puolilihava); }
.kuvaruudukko--pieni { display: flex; flex-wrap: wrap; gap: var(--vali-2); margin-top: var(--vali-3); }
.kuvaruudukko--pieni img { width: 120px; height: 80px; object-fit: cover; border-radius: var(--r-s); }
.hinta-arvio {
  margin-top: var(--vali-5);
  padding: var(--vali-4);
  border-radius: var(--r-m);
  background: var(--korostus-pinta);
}
.hinta-arvio h4 {
  margin: 0 0 var(--vali-1);
  font-size: var(--koko-xs);
  color: var(--korostus);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.hinta-arvio__luku {
  margin: 0;
  font-family: var(--fontti-otsikko);
  font-size: var(--koko-xl);
  font-weight: var(--paino-lihava);
}
.hinta-arvio p { margin: var(--vali-1) 0 0; }

/* --- Liikkeen selaussivun suodattimet ----------------------------------- */
.selaa-suodattimet {
  display: grid;
  grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr));
  gap: var(--vali-3);
  margin-bottom: var(--vali-5);
}
@media (max-width: 760px) {
  .selaa-suodattimet { grid-template-columns: 1fr 1fr; }
}

/* --- Näin se toimii -askelkortit ---------------------------------------- */
/* Kolme korttia: pyöreä numeromerkki, otsikko, teksti ja kuvitus kortin
   alaosassa. Kuva työntyy pohjaan, joten tekstien pituus ei siirrä kuvia eri
   korkeuksille. Hover nostaa korttia ja värjää reunan. */
.askelkortit {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--vali-5);
  margin-top: var(--vali-8);
  text-align: left;
}
.askelkortti {
  position: relative;
  display: flex; flex-direction: column;
  padding: var(--vali-6);
  background: var(--pinta);
  border: 1px solid var(--reuna);
  border-radius: 16px;
  box-shadow: var(--varjo-1);
  transition: transform var(--nopea), box-shadow var(--nopea), border-color var(--nopea);
}
.askelkortti:hover {
  transform: translateY(-4px);
  border-color: var(--korostus);
  box-shadow: var(--varjo-3);
}
.askelkortti__numero {
  display: inline-flex; align-items: center; justify-content: center;
  align-self: flex-start;
  width: 48px; height: 48px;
  margin-bottom: var(--vali-5);
  background: linear-gradient(135deg, #1e9150, #4ade80);
  color: #fff;
  font-family: var(--fontti-otsikko);
  font-size: var(--koko-l);
  font-weight: var(--paino-lihava);
  line-height: 1;
  border-radius: 50%;
  box-shadow: 0 6px 16px rgba(30, 145, 80, .35);
}
.askelkortti h3 { margin: 0 0 var(--vali-2); font-size: var(--koko-xl); }
.askelkortti p { margin: 0; color: var(--teksti-pehmea); }
.askelkortti__kuva {
  width: 100%;
  max-height: 300px;
  margin-top: auto;
  padding-top: var(--vali-6);
  object-fit: contain;
}
@media (max-width: 900px) {
  .askelkortit { grid-template-columns: 1fr; }
}

/* --- Keskitetty osio-otsikko -------------------------------------------- */
.etuosio--keskitetty { text-align: center; }
.etuosio--keskitetty > h2 { font-size: var(--koko-3xl); }
.etuosio--keskitetty > .etuosio__kuvaus { margin: 0 auto var(--vali-4); }

/* --- Edut ---------------------------------------------------------------- */
/* Neljä ruutua: vihreä kuvakelaatta, otsikko ja teksti. Kuvake vaihtaa
   täytön hoverissa, muuten ruutu on hiljainen. */
.edut {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--vali-4);
  margin-top: var(--vali-8);
  text-align: left;
}
.etu {
  padding: var(--vali-6);
  background: var(--pinta);
  border: 1px solid var(--reuna);
  border-radius: 16px;
  transition: transform var(--nopea), box-shadow var(--nopea), border-color var(--nopea);
}
.etu:hover { transform: translateY(-3px); border-color: var(--korostus); box-shadow: var(--varjo-2); }
.etu__ikoni {
  display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px;
  margin-bottom: var(--vali-4);
  border-radius: 14px;
  background: var(--korostus-pinta);
  color: var(--korostus);
  transition: background var(--nopea), color var(--nopea);
}
.etu:hover .etu__ikoni { background: var(--cta); color: #fff; }
.etu h3 { margin: 0 0 var(--vali-2); font-size: var(--koko-l); }
.etu p { margin: 0; font-size: var(--koko-s); color: var(--teksti-pehmea); }
@media (max-width: 1000px) { .edut { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .edut { grid-template-columns: 1fr; } }

/* --- AutoJoppari-aloitus ------------------------------------------- */
/* Koko leveyden vihreä aloitus kahdessa palstassa: vasemmalla silmäys,
   otsikko, pikalomake valkoisessa kortissa (rekisterinumero ja kilometrit
   vievät pyyntölomakkeelle) ja luottamuspillerit, oikealla kuvitus hehkun
   päällä. Tausta: liukuväri, valohehkut (::before) ja häivytetty
   pisteruudukko (::after). Sisältöalueen ylätäyte kumotaan negatiivisella
   marginaalilla ja leveys venytetään näkymän reunoihin. Värit ovat
   kiinteät, koska pinta on sama molemmissa teemoissa. */
.lkhero {
  position: relative;
  margin: calc(-1 * var(--vali-10)) calc(50% - 50vw) var(--vali-12);
  padding: var(--vali-12) var(--vali-6);
  background: linear-gradient(120deg, #0b3d22 0%, #14683a 45%, #1e9150 100%);
  color: #fff;
  overflow: hidden;
  isolation: isolate;
}
.lkhero::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(600px 400px at 88% 20%, rgba(74, 222, 128, .45), transparent 70%),
    radial-gradient(500px 500px at 0% 100%, rgba(11, 61, 34, .8), transparent 70%),
    radial-gradient(400px 300px at 60% 110%, rgba(134, 239, 172, .25), transparent 70%);
}
.lkhero::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background-image: radial-gradient(rgba(255, 255, 255, .16) 1px, transparent 1.6px);
  background-size: 24px 24px;
  -webkit-mask-image: linear-gradient(115deg, transparent 35%, #000 70%, transparent 100%);
  mask-image: linear-gradient(115deg, transparent 35%, #000 70%, transparent 100%);
}
.lkhero__sisalto {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 6fr);
  gap: var(--vali-10);
  align-items: center;
  /* Sama sisäleveys kuin .sisalto-alueella, jotta teksti ja muu sisältö
     alkavat samasta kohdasta. */
  max-width: calc(var(--leveys-max) - 2 * var(--vali-6));
  margin: 0 auto;
}
.lkhero__silma {
  display: inline-flex; align-items: center; gap: var(--vali-2);
  margin-bottom: var(--vali-4);
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .25);
  backdrop-filter: blur(6px);
  font-size: var(--koko-xs);
  font-weight: var(--paino-lihava);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #d1fae5;
}
.lkhero__silma::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 0 4px rgba(74, 222, 128, .3);
}
.lkhero__otsikko {
  margin: 0;
  max-width: 14ch;
  font-size: clamp(2.4rem, 1.6rem + 3.4vw, 4.25rem);
  line-height: 1.02;
  color: #fff;
}
.lkhero__korostus { color: #86efac; }
.lkhero__kuvaus {
  margin: var(--vali-4) 0 var(--vali-6);
  max-width: 44ch;
  font-size: var(--koko-l);
  line-height: 1.5;
  color: rgba(255, 255, 255, .82);
}
.lkhero__kortti {
  max-width: 460px;
  padding: var(--vali-4);
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 24px 48px rgba(0, 0, 0, .28), 0 0 0 1px rgba(255, 255, 255, .35);
  color: #1c1917;
}
.lkhero__lomake { display: grid; gap: var(--vali-3); }
.lkhero__kentta {
  display: flex; align-items: center;
  min-height: 56px;
  background: #f5f5f4;
  border: 1px solid #e7e5e4;
  border-radius: var(--r-m);
  overflow: hidden;
  color: #1c1917;
  transition: border-color var(--nopea), box-shadow var(--nopea);
}
.lkhero__kentta:focus-within { border-color: #1e9150; box-shadow: 0 0 0 3px rgba(30, 145, 80, .25); }
.lkhero__kentta input {
  flex: 1; min-width: 0; height: 54px;
  border: 0; background: transparent; box-shadow: none;
  text-align: center;
  font-size: var(--koko-m);
  font-weight: var(--paino-puolilihava);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #1c1917;
}
.lkhero__kentta input::placeholder { color: #a8a29e; text-transform: uppercase; }
.lkhero__kentta input:focus { outline: none; }
.lkhero__kilpi {
  align-self: stretch;
  display: flex; align-items: center; justify-content: center;
  width: 44px;
  background: #1e9150;
  color: #fff;
  font-size: var(--koko-xs);
  font-weight: var(--paino-lihava);
  letter-spacing: .04em;
}
/* Mittarikuvake samassa vihreässä laatassa kuin FIN-tunnus. */
.lkhero__ikoni {
  align-self: stretch;
  display: flex; align-items: center; justify-content: center;
  width: 44px;
  background: #1e9150;
  color: #fff;
}
.lkhero__yksikko { padding-right: var(--vali-4); font-weight: var(--paino-puolilihava); }
.lkhero__nappi {
  display: flex; align-items: center; justify-content: center; gap: var(--vali-2);
  min-height: 56px;
  padding: 0 var(--vali-5);
  border: 0;
  border-radius: var(--r-m);
  background: #1e9150;
  color: #fff;
  font: inherit;
  font-size: var(--koko-m);
  font-weight: var(--paino-lihava);
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(30, 145, 80, .35);
  transition: background var(--nopea), transform var(--nopea), box-shadow var(--nopea);
}
.lkhero__nappi:hover {
  background: #177a42; color: #fff; text-decoration: none;
  transform: translateY(-1px);
  box-shadow: 0 12px 24px rgba(30, 145, 80, .4);
}
.lkhero__nappi .ikoni { transition: transform var(--nopea); }
.lkhero__nappi:hover .ikoni { transform: translateX(3px); }
.lkhero__nappi--reunus { background: transparent; color: #1c1917; box-shadow: inset 0 0 0 2px #e7e5e4; }
.lkhero__nappi--reunus:hover { background: #f5f5f4; color: #1c1917; box-shadow: inset 0 0 0 2px #1e9150; transform: none; }
.lkhero__napit { display: grid; gap: var(--vali-3); }
.lkhero__luottamus {
  display: flex; flex-wrap: wrap; gap: var(--vali-2);
  margin: var(--vali-5) 0 0; padding: 0; list-style: none;
  font-size: var(--koko-s);
  font-weight: var(--paino-puolilihava);
  color: #fff;
}
.lkhero__luottamus li {
  display: flex; align-items: center; gap: var(--vali-2);
  padding: 6px 12px 6px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .18);
}
/* Vihreä täplä ja tumma väkänen (SVG data-URI, ei erillistä tiedostoa). */
.lkhero__luottamus li::before {
  content: "";
  width: 16px; height: 16px; border-radius: 50%;
  background: #4ade80 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b3d22' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E") center / 10px no-repeat;
}
.lkhero__kuvitus {
  position: relative;
  display: flex; justify-content: center; align-items: center;
}
.lkhero__kuvitus::before {
  content: "";
  position: absolute;
  width: min(80%, 460px); aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(134, 239, 172, .35) 0%, rgba(134, 239, 172, .08) 55%, transparent 72%);
}
.lkhero__kuvitus::after {
  content: "";
  position: absolute;
  width: min(92%, 540px); aspect-ratio: 1;
  border-radius: 50%;
  border: 1px dashed rgba(255, 255, 255, .25);
}
.lkhero__kuva {
  position: relative; z-index: 1;
  width: 100%; max-height: 440px;
  object-fit: contain;
  filter: drop-shadow(0 24px 32px rgba(0, 0, 0, .3));
}
@media (max-width: 900px) {
  .lkhero { padding-top: var(--vali-10); }
  .lkhero__sisalto { grid-template-columns: 1fr; gap: var(--vali-6); text-align: center; }
  .lkhero__otsikko, .lkhero__kuvaus, .lkhero__kortti { margin-inline: auto; }
  .lkhero__luottamus { justify-content: center; }
  .lkhero__kuvitus { order: -1; }
  .lkhero__kuva { max-height: 240px; }
}

/* Osion kehotenauha samalla vihreällä liukuvärillä ja hehkuilla kuin aloitus. */
.etunauha--liikkeille {
  position: relative;
  padding: var(--vali-10) var(--vali-8);
  background: linear-gradient(120deg, #0b3d22 0%, #14683a 45%, #1e9150 100%);
  border-color: transparent;
  border-radius: 16px;
  color: #fff;
  overflow: hidden;
  isolation: isolate;
}
.etunauha--liikkeille::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(400px 260px at 90% 0%, rgba(74, 222, 128, .45), transparent 70%),
    radial-gradient(300px 300px at 5% 100%, rgba(11, 61, 34, .9), transparent 70%);
}
.etunauha--liikkeille h2 { color: #fff; font-size: var(--koko-3xl); }
.etunauha--liikkeille p { color: rgba(255, 255, 255, .85); font-size: var(--koko-l); max-width: 56ch; }
.etunauha--liikkeille .etunauha__silma { color: #86efac; }
.etunauha--liikkeille .lkhero__nappi { display: inline-flex; flex: none; background: #4ade80; color: #0b3d22; box-shadow: none; }
.etunauha--liikkeille .lkhero__nappi:hover { background: #86efac; color: #0b3d22; }