/* =========================================================================
   ETUSIVU: YKSI POHJA, PANEELI PER AIHE (pysyvä, 9.11.2026)
   haara claude/oef-yhtenainen. Esikatseluversio B (f24c551) tehtiin
   pysyväksi: ?versio-parametri, vaihtaja ja versio A poistettu.
   -------------------------------------------------------------------------
   Kerros 1 (§1-§3): yksi pohja, otsikkojärjestelmä, yksi vasen linja.
   Kerros 2 (§B): vähemmän laatikoita, palvelut listariveinä.
   Kerros 3 (§P, Danin viisi muokkausta 9.11.2026): yksi paneeli per
   aihe samalla pohjalla, hillitty oranssi sisävalo, vaaleampi teksti,
   näkyvä avustusnosto ja pienempi h1. Perustelut ja mitat:
   test/todisteet/2026-11-09-yhtenainen-v2/makuportti.md.
   ========================================================================= */

/* ---------- 1. YKSI POHJA ---------------------------------------------- */
body.sivu--etusivu-h { background-color: var(--oef-bg); }
body.sivu--etusivu-h main > section:not(#hero),
body.sivu--etusivu-h main > div {
  background-color: transparent;
  background-image: none;
  border-block: 0;
}
body.sivu--etusivu-h main > section#cta > .absolute { display: none; }

/* ---------- 2. RYTMI: paneelien väli, ei osiorajaa ----------------------
   Hiusviivaraja osioiden välissä korvattiin paneeleilla (§P). Aiheen raja on
   nyt paneelin reuna ja 48 px pohjaa kahden paneelin välissä. */
body.sivu--etusivu-h main > div,
body.sivu--etusivu-h main > section:not(#hero) { border-top: 0; }
body.sivu--etusivu-h main > section:is(#services, #process, #cta),
body.sivu--etusivu-h main > div + section,
body.sivu--etusivu-h main > section#services + section,
body.sivu--etusivu-h main > section#palvelualue {
  padding-top: var(--v6);
  padding-bottom: var(--v6);
}
body.sivu--etusivu-h main > div + section { padding-top: var(--v12); }
/* Palvelut ja 2 min kartoitus ovat yksi paneeli kahdessa osiossa. */
body.sivu--etusivu-h main > section#services { padding-bottom: 0; }
body.sivu--etusivu-h main > section#services + section { padding-top: 0; }
body.sivu--etusivu-h main > section#cta + section { padding-top: var(--v8); padding-bottom: var(--v12); }

/* ---------- 3. OTSIKKOJÄRJESTELMÄ -------------------------------------- */
/* Osion otsikkolohko: neljällä osiolla ensimmäinen .text-center-lapsi, CTA:lla
   itse sisältölohko. Kaikki vasemmalle samaan linjaan. */
body.sivu--etusivu-h main > section:is(#services, #process) > div > .text-center:first-child,
body.sivu--etusivu-h main > section#cta > .text-center {
  text-align: left;
  margin-inline: auto;
  max-width: var(--h-mitta);
}
body.sivu--etusivu-h main > section:is(#services, #process) > div > .text-center:first-child {
  margin-bottom: var(--v12);
}
/* Nollakohta: oranssi 24 px viiva otsikon yläpuolella samassa vasemmassa linjassa. */
body.sivu--etusivu-h main > section:is(#services, #process, #cta) h2::before,
body.sivu--etusivu-h main > div + section h2::before {
  content: "";
  display: block;
  width: var(--v6);
  height: 2px;
  margin-bottom: var(--v5);
  background-color: var(--toiminta);
}
body.sivu--etusivu-h main > section h2 {
  font-family: var(--f-naytto);
  font-size: var(--t-4);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  max-width: 24ch;
  margin: 0 0 var(--v3);
  text-align: left;
}
body.sivu--etusivu-h main > section:is(#services, #process) > div > .text-center:first-child > p,
body.sivu--etusivu-h main > section#cta > .text-center > h2 + p {
  font-size: var(--t-3);
  line-height: 1.45;
  color: var(--teksti-3);
  max-width: 58ch;
  margin: 0;
  text-align: left;
}
body.sivu--etusivu-h main > section#cta > .text-center > h2 + p { margin-bottom: var(--v8); }
body.sivu--etusivu-h main > section#cta .flex.justify-center { justify-content: flex-start; }
body.sivu--etusivu-h main > section#cta > .text-center > p:last-child { text-align: left; }
/* Painikerivi ja palvelujen lopetusnappi samaan vasempaan linjaan. */
body.sivu--etusivu-h main > section:is(#services, #process) .text-center.mt-12,
body.sivu--etusivu-h main > section:is(#services, #process) .text-center.mt-10 { text-align: left; }

/* Kumppanirivi: ei raitaa, sama linja kuin muu sisältö. */
body.sivu--etusivu-h main > div > .max-w-7xl { text-align: left; }
body.sivu--etusivu-h main > div > .max-w-7xl > .flex-wrap.justify-center { justify-content: flex-start; }

/* ======================================================================
   §B  VÄHEMMÄN LAATIKOITA (oli esikatseluversio B)
   ----------------------------------------------------------------------
   Ympäröinti vain siellä missä läheisyys ei riitä (premium-ui-craft:
   Common Region). Päätökset:
   - Puolueettomuuslohko: kehys pois. Ei ollut Cleon listalla, mutta yksi
     iso kortti sivun ensimmäisenä osiona kumoaisi koko version idean.
   - Pääpalvelu: oranssi 2 px vasen reuna, ei kehystä eikä pintaa.
   - Kuusi palvelua: listarivit hiusviivoin, otsikko | kuvaus | linkki.
   - Prosessi: neljä vaihetta yhdellä linjalla, oranssi nollakohta per vaihe.
   - 2 min kartoitus ja palvelualue: ei kehystä, ei ikonitiiltä.
   - Hinnoittelu poistettu etusivulta 9.11.2026 (9104dc3), ei sääntöjä.
   ====================================================================== */
body.sivu--etusivu-h main .glass-card:where(:not(#cta .glass-card)) {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  padding: 0;
}
/* Ikonitiilet on jo romahdettu oef-etusivu-pohja.css:132, ei omaa sääntöä. */

/* -- Puolueettomuus ------------------------------------------------------ */
body.sivu--etusivu-h main > div + section > div > .glass-card > .relative { gap: 0; }

/* -- Pääpalvelu ---------------------------------------------------------- */
body.sivu--etusivu-h #services .mb-12.observe > .glass-card {
  border-left: 2px solid var(--toiminta);
  padding-left: var(--v8);
  padding-block: var(--v2);
}
body.sivu--etusivu-h #services .mb-12.observe { margin-bottom: var(--v12); }

/* -- Kuusi palvelua listariveiksi --------------------------------------- */
body.sivu--etusivu-h #services .grid.lg\:grid-cols-3 {
  display: block;
  border-bottom: 1px solid var(--oef-viiva);
}
body.sivu--etusivu-h #services .grid.lg\:grid-cols-3 > .glass-card {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 6fr) auto;
  grid-template-rows: auto 1fr;
  grid-template-areas: "otsikko kuvaus linkki" "merkki kuvaus linkki";
  align-items: start;
  column-gap: var(--v8);
  border-top: 1px solid var(--oef-viiva);
  padding: var(--v5) 0;
}
body.sivu--etusivu-h #services .grid.lg\:grid-cols-3 > .glass-card > h3 { grid-area: otsikko; margin: 0; font-size: var(--t-3); }
/* Suosittu-merkki: oma rivi otsikon alla, ikonitiili piilossa. */
body.sivu--etusivu-h #services .grid.lg\:grid-cols-3 > .glass-card > div.flex.items-center { grid-area: merkki; margin: var(--v1) 0 0; }
body.sivu--etusivu-h #services .grid.lg\:grid-cols-3 > .glass-card > div.flex.items-center > span { color: var(--toiminta-linkki); font-family: var(--f-kone); font-weight: 500; letter-spacing: .08em; }
body.sivu--etusivu-h #services .grid.lg\:grid-cols-3 > .glass-card > p { grid-area: kuvaus; margin: 0; padding-top: 2px; }
body.sivu--etusivu-h #services .grid.lg\:grid-cols-3 > .glass-card > a {
  grid-area: linkki;
  white-space: nowrap;
  min-height: 44px;
  margin-top: -10px;
}
@media (max-width: 820px) {
  body.sivu--etusivu-h #services .grid.lg\:grid-cols-3 > .glass-card {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto;
    grid-template-areas: "otsikko" "merkki" "kuvaus" "linkki";
    row-gap: var(--v2);
  }
  body.sivu--etusivu-h #services .grid.lg\:grid-cols-3 > .glass-card > a { justify-self: start; margin-top: 0; }
}

/* -- Prosessi: neljä vaihetta yhdellä linjalla --------------------------- */
body.sivu--etusivu-h #process .hidden.lg\:grid { display: none; }
body.sivu--etusivu-h #process .grid.lg\:grid-cols-4.gap-6 { gap: 0; border-top: 1px solid var(--oef-viiva); }
body.sivu--etusivu-h #process .grid.lg\:grid-cols-4.gap-6 > .glass-card {
  position: relative;
  padding: var(--v6) var(--v6) 0 0;
}
body.sivu--etusivu-h #process .grid.lg\:grid-cols-4.gap-6 > .glass-card > .absolute { display: none; }
body.sivu--etusivu-h #process .grid.lg\:grid-cols-4.gap-6 > .glass-card::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: var(--v6);
  height: 2px;
  background-color: var(--toiminta);
}
body.sivu--etusivu-h #process .grid.lg\:grid-cols-4.gap-6 > .glass-card > .pl-2 { padding-left: 0; }
body.sivu--etusivu-h #process .text-center.mt-10 { margin-top: var(--v12); }
@media (max-width: 1023px) {
  /* Kapealla linja kääntyy pystyyn: vasen hiusviiva, vaihe per rivi. */
  body.sivu--etusivu-h #process .grid.lg\:grid-cols-4.gap-6 {
    border-top: 0;
    border-left: 1px solid var(--oef-viiva);
  }
  body.sivu--etusivu-h #process .grid.lg\:grid-cols-4.gap-6 > .glass-card { padding: 0 0 var(--v8) var(--v6); }
  body.sivu--etusivu-h #process .grid.lg\:grid-cols-4.gap-6 > .glass-card:last-child { padding-bottom: 0; }
  body.sivu--etusivu-h #process .grid.lg\:grid-cols-4.gap-6 > .glass-card::before {
    top: 0; left: -1px; width: 2px; height: var(--v6);
  }
}

/* -- 2 min kartoitus: rivi, ei kehystä ----------------------------------- */
body.sivu--etusivu-h #services + section > div > a.glass-card {
  display: inline-flex;
  gap: var(--v4);
  padding-block: var(--v2);
  min-height: 44px;
}
body.sivu--etusivu-h #services + section > div > a.glass-card:hover { background: transparent; }

/* -- Palvelualue: ei kehystä, kaupungit tekstinä ------------------------- */
body.sivu--etusivu-h #palvelualue .flex-wrap.gap-2 > span {
  background: transparent;
  padding: 0;
  border-radius: 0;
  color: var(--teksti-2);
}
body.sivu--etusivu-h #palvelualue .flex-wrap.gap-2 { column-gap: var(--v4); }
body.sivu--etusivu-h #palvelualue .flex-wrap.gap-2 > span + span::before {
  content: "·";
  margin-right: var(--v4);
  color: var(--teksti-4);
}


/* ======================================================================
   §P  PANEELI PER AIHE, SISÄVALO JA VAALEAMPI SIVU (Danin muokkaukset 9.11.2026)
   ----------------------------------------------------------------------
   Viisi paneelia: puolueettomuus, palvelut (+ 2 min kartoitus), prosessi,
   palvelualue, CTA (hinnoittelu poistettu 9.11.2026). Kaikki samalla --oef-bg-pohjalla, 48 px
   pohjaa välissä. Paneeli on osion sisäsäiliö, joten kortteja ei tule
   lisää: palvelurivit, prosessilinja ja hintakortit ovat paneelin sisällä.

   EFEKTIBUDJETTI (makuportti mitta 6): pinta + reuna = 2. Sisävalo on
   saman taustan kerros (radial-gradient) eikä varjo, koska brandbookin
   §7.3 varaa varjon pääpainikkeelle. Valo tulee vasemmasta yläkulmasta,
   samasta kulmasta kuin heron kulmahehku (§3.2), ja yläreuna on
   oranssisävyinen hiusviiva. Ei neonia: suurin peitto 7 %.
   ====================================================================== */
body.sivu--etusivu-h {
  --paneeli-pinta: var(--oef-pinta-1);
  --paneeli-valo: rgba(255, 92, 0, 0.07);
  --paneeli-yla: rgba(255, 92, 0, 0.28);
  --paneeli-sisa: var(--v16);
}
@media (max-width: 820px) { body.sivu--etusivu-h { --paneeli-sisa: var(--v8); } }
@media (max-width: 480px) { body.sivu--etusivu-h { --paneeli-sisa: var(--v5); } }

body.sivu--etusivu-h main > div + section > div,
body.sivu--etusivu-h main > section:is(#services, #process, #cta) > div:not(.absolute),
body.sivu--etusivu-h main > section:is(#services + section, #palvelualue) > div {
  box-sizing: border-box;
  max-width: var(--h-mitta);
  margin-inline: auto;
  padding: var(--paneeli-sisa);
  background-color: var(--paneeli-pinta);
  background-image: radial-gradient(70% 60% at 0% 0%, var(--paneeli-valo), transparent 70%);
  border: 1px solid var(--oef-viiva-heikko);
  border-top-color: var(--paneeli-yla);
  border-radius: var(--r-kortti);
}
@media (max-width: 480px) {
  body.sivu--etusivu-h main > section:not(#hero) { padding-inline: var(--v4); }
}
/* Palvelut + kartoitus: yksi paneeli, sauma ilman reunaa. */
body.sivu--etusivu-h main > section#services > div {
  border-bottom: 0;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  padding-bottom: var(--v8);
}
body.sivu--etusivu-h main > section#services + section > div {
  border-top: 0;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  background-image: none;
  padding-top: 0;
  padding-bottom: var(--v8);
}
body.sivu--etusivu-h main > section#services + section > div > a.glass-card {
  display: flex;
  border-top: 1px solid var(--oef-viiva);
  padding-top: var(--v6);
}
/* Palvelualue on tukipaneeli: matalampi pehmuste, ei omaa valoa. */
body.sivu--etusivu-h main > section#palvelualue > div {
  padding-block: var(--v8);
  background-image: none;
  border-top-color: var(--oef-viiva-heikko);
}
/* Paneelin sisällä ei toista vasenta linjaa: otsikkolohko täyttää paneelin. */
body.sivu--etusivu-h main > section:is(#services, #process) > div > .text-center:first-child,
body.sivu--etusivu-h main > section#cta > .text-center { max-width: none; }
body.sivu--etusivu-h main > section#cta > div.text-center { max-width: var(--h-mitta); }
/* Sisäpehmuste vie mitan, joten sisäsäiliöt eivät kavenna toista kertaa. */
/* oef-etusivu-a §A4 antoi kortille oranssin vasemman reunan (0,3,3). Paneelin
   oranssi yläreuna korvaa sen: kaksi oranssia reunaa samassa aiheessa kilpailisi. */
body.sivu--etusivu-h main > section:nth-of-type(2) .glass-card { padding: 0; border-left: 0; }


/* -- Vaaleampi sivu (muokkaus 5): ingressit ja selitykset porras ylöspäin -- */
body.sivu--etusivu-h main > section:is(#services, #process) > div > .text-center:first-child > p,
body.sivu--etusivu-h main > section#cta > .text-center > h2 + p { color: var(--teksti-2); }
body.sivu--etusivu-h main > section:not(#hero) .text-slate-400 { color: var(--teksti-2); }
body.sivu--etusivu-h main .text-slate-500 { color: var(--teksti-3); }
body.sivu--etusivu-h #hero .text-slate-300 { color: var(--teksti-2); }

/* -- Kumppanirivi: yksi tiivis rivi, ei tyhjää kaistaa ---------------- */
body.sivu--etusivu-h main > div { padding-block: var(--v6); }
body.sivu--etusivu-h main > div > .max-w-7xl {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: var(--v8);
  row-gap: var(--v3);
}
body.sivu--etusivu-h main > div > .max-w-7xl > p { margin: 0; color: var(--teksti-3); }
body.sivu--etusivu-h main > div > .max-w-7xl > .flex-wrap { opacity: 1; }

/* ======================================================================
   §N  AVUSTUSNOSTO (muokkaus 1): näkyvä, oranssi, ei kilpaile h1:n kanssa
   ----------------------------------------------------------------------
   Oranssi = toiminta ja määräaika (brandbook §2): tämä on sivun ainoa
   määräaikainen asia. Oranssi tekstinä, merkin reunana ja 3 px vasempana
   reunana, ei koskaan tekstin alla. Koko t-2 (16 px) ja teksti-1: selvästi
   suurempi kuin ennen (11 px mono), selvästi pienempi kuin h1.
   Efektit: pinta + reuna = 2, nuolen siirtymä on vain hoverissa.
   ====================================================================== */
body.sivu--etusivu-h #hero > .relative.z-10 > .flex.justify-end {
  padding-bottom: 0;
  border-bottom: 0;
  margin-bottom: var(--v12);
}
body.sivu--etusivu-h #hero > .relative.z-10 > .flex.justify-end > a {
  flex: 0 1 auto;
  min-height: 48px;
  padding: var(--v3) var(--v5) var(--v3) var(--v4);
  gap: var(--v4);
  font-family: var(--f-leipa);
  font-size: var(--t-2);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--teksti-1);
  background-color: var(--oef-pinta-1);
  border: 1px solid var(--oef-viiva);
  border-left: 3px solid var(--toiminta);
  border-radius: var(--r-pieni);
}
body.sivu--etusivu-h #hero > .relative.z-10 > .flex.justify-end > a:hover { color: var(--teksti-1); border-color: var(--oef-viiva) var(--oef-viiva) var(--oef-viiva) var(--toiminta); }
body.sivu--etusivu-h #hero > .relative.z-10 > .flex.justify-end > a > span:first-child {
  font-family: var(--f-kone);
  font-size: var(--t-0);
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--toiminta-linkki);
  border: 1px solid currentColor;
  border-radius: var(--r-pieni);
  padding: 2px var(--v2);
  text-transform: uppercase;
}
body.sivu--etusivu-h #hero > .relative.z-10 > .flex.justify-end > a > span.w-px { display: none; }
/* -a:n 16 px viiva rivin edessä pois: 3 px reuna on jo sama merkki. */
body.sivu--etusivu-h #hero > .relative.z-10 > .flex.justify-end > a::before { content: none; }
body.sivu--etusivu-h #hero > .relative.z-10 > .flex.justify-end > a::after { margin-left: var(--v2); color: var(--toiminta-linkki); }
@media (max-width: 480px) {
  body.sivu--etusivu-h #hero > .relative.z-10 > .flex.justify-end > a { gap: var(--v3); }
}

/* ======================================================================
   §H  H1 (muokkaus 2): sama teksti, pienempi, yksi hillitty sävy
   ----------------------------------------------------------------------
   Valittu vaihtoehto A (makuportti.md): Satoshi 700, brandbookin oma
   --t-h1 (enintään 56 px), väri --h1-savy. Kahden sävyn otsikko on
   brandbookin §5.4.1 mukaan kielletty, joten sävy on yksi.
   ====================================================================== */
body.sivu--etusivu-h {
  --h1-savy: #E2E8F0; /* kylmä luonnonvalkoinen, 15,9:1 pohjalla */
}
body.sivu--etusivu-h #hero h1 {
  font-family: var(--f-naytto);
  font-size: var(--t-h1);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.025em;
  max-width: 17ch;
  color: var(--h1-savy);
}
body.sivu--etusivu-h #hero h1 .otsikko-rivi { color: inherit; -webkit-text-fill-color: currentColor; }

/* Hintakortit rinnakkain paneelin sisällä (oef-etusivu-h §3 latoi ne allekkain
   1160 px:n levyisinä). Paneelissa allekkain jäi kummankin kortin oikea puolisko
   tyhjäksi, ja vertailu luetaan kahtena rinnakkaisena kokonaisuutena. */

/* ======================================================================
   §K  PUOLUEETTOMUUDEN KOLME KOHTAA PIENINÄ KORTTEINA (Dani 9.11.2026)
   ----------------------------------------------------------------------
   Rivissä 640 px:stä ylöspäin (sm:grid-cols-3), pinossa sen alla.
   Hillitty: paneelia vaaleampi pinta ja hiusviiva, yläreuna saman
   oranssisävyn heikompi versio kuin paneelilla. Ei varjoa eikä blurria,
   joten efektibudjetti on pinta + reuna = 2 eikä kortti kortissa raskaudu.
   ====================================================================== */
/* Rivissä sama väli kuin sivun muissa ruudukoissa (--h-vali), pinossa
   tiiviimpi, jotta kolme kohtaa luetaan yhdeksi ryhmäksi. */
@media (max-width: 639.98px) {
  body.sivu--etusivu-h main .oef-puolueeton-kohdat { gap: var(--v3); }
}
body.sivu--etusivu-h .oef-puolueeton-kortti {
  position: relative;
  align-items: center;
  gap: var(--v2, 8px);
  min-height: 48px;
  box-sizing: border-box;
  padding: 12px 16px;
  background-color: var(--oef-pinta-1);
  /* Läpinäkyvä 1 px reuna pitää geometrian ennallaan, näkyvä reuna on hehkun
     sisäinen rengas: tausta + varjo = 2 efektiä. */
  border: 1px solid transparent;
  border-radius: var(--r-pieni);
  box-shadow: var(--hehku-lepo);
}
body.sivu--etusivu-h .oef-puolueeton-kortti > .material-icons-round { margin-top: 0; }
body.sivu--etusivu-h .oef-puolueeton-kortti > span:last-child { color: var(--teksti-1); font-weight: 500; }

/* =========================================================================
   §H  ORANSSI HEHKU: SYVYYS KORTTEIHIN (Danin pyyntö 3, 9.11.2026)
   -------------------------------------------------------------------------
   "Tuo ulottuvuutta kortteihin, esim pelkällä oranssilla glowilla."
   Hehku MERKITSEE, ei koristele. Lämpökameran logiikka: lämmin kohta on se
   jossa arvo on. Siksi hehkuu levossa vain kaksi asiaa:
     1. puolueettomuuden kolme kohtaa (OEF:n ydinlupaus),
     2. pääpalvelu (sivun ainoa nostettu palvelu, oranssi 2 px reuna + hehku).
   Kuusi muuta palvelua ovat listarivejä ilman hehkua levossa. Osoitin tai
   näppäimistöfokus rivillä tuo vasemmasta reunasta nousevan lämmön, jolloin
   hehku kertoo mihin riviin "Lue lisää" kuuluu.

   Brandbook §7.3 sanoo "kortit erottuvat hiusviivalla, eivät varjolla".
   Danin 9.11. pyyntö on uudempi ja nimenomainen, joten tämä on kirjattu
   poikkeus, ja se pidetään §7.4:n efektibudjetissa (≤ 2 per elementti):
   puolueettomuuskortti = tausta + varjo (reuna on varjon 1 px rengas),
   pääpalvelu = reuna + varjo, palvelurivi = reuna + ::before-kerros.
   Liike: vain opacity (compositor), 150 ms, ei transformia.
   prefers-reduced-motion: siirtymät pois, tilat vaihtuvat heti.
   ========================================================================= */
:root {
  --hehku-lepo:
    inset 0 0 0 1px rgba(255, 92, 0, 0.22),
    0 10px 28px -14px rgba(255, 92, 0, 0.45);
  --hehku-nosto:
    inset 0 0 0 1px rgba(255, 92, 0, 0.45),
    0 14px 36px -12px rgba(255, 92, 0, 0.60);
  --hehku-dur: 150ms;
  --hehku-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* -- Puolueettomuuskortit: levossa hillitty, hoverissa nousee ----------- */
body.sivu--etusivu-h .oef-puolueeton-kortti::after {
  content: "";
  position: absolute;
  inset: -1px; /* reunan päälle, ei padding-laatikkoon */
  border-radius: inherit;
  box-shadow: var(--hehku-nosto);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--hehku-dur) var(--hehku-ease);
}
@media (hover: hover) {
  body.sivu--etusivu-h .oef-puolueeton-kortti:hover::after { opacity: 1; }
}

/* -- Pääpalvelu: oranssi reuna saa lämmön ympärilleen ------------------- */
body.sivu--etusivu-h #services .mb-12.observe > .glass-card {
  box-shadow: -18px 0 36px -26px rgba(255, 92, 0, 0.75);
}

/* -- Kuusi palveluriviä: lämpö vasemmasta reunasta hoverissa/fokuksessa -- */
body.sivu--etusivu-h #services .grid.lg\:grid-cols-3 > .glass-card {
  position: relative;
  isolation: isolate;
}
body.sivu--etusivu-h #services .grid.lg\:grid-cols-3 > .glass-card::before {
  content: "";
  position: absolute;
  inset: -1px 0 0;
  z-index: -1;
  pointer-events: none;
  border-top: 1px solid rgba(255, 92, 0, 0.55);
  background:
    radial-gradient(120% 140% at 0% 50%, rgba(255, 92, 0, 0.13) 0%, rgba(255, 92, 0, 0.04) 45%, transparent 75%);
  opacity: 0;
  transition: opacity var(--hehku-dur) var(--hehku-ease);
}
@media (hover: hover) {
  body.sivu--etusivu-h #services .grid.lg\:grid-cols-3 > .glass-card:hover::before { opacity: 1; }
}
body.sivu--etusivu-h #services .grid.lg\:grid-cols-3 > .glass-card:focus-within::before { opacity: 1; }
/* styles.css .feature-card:hover nostaa korttia transformilla; listarivillä se
   siirtäisi hiusviivoja, joten rivi pysyy paikallaan. */
body.sivu--etusivu-h #services .grid.lg\:grid-cols-3 > .glass-card:hover { transform: none; }

@media (prefers-reduced-motion: reduce) {
  body.sivu--etusivu-h .oef-puolueeton-kortti::after,
  body.sivu--etusivu-h #services .grid.lg\:grid-cols-3 > .glass-card::before { transition: none; }
}

/* Puolueettomuuslohkon pieni referenssilinkki (10.11.2026, claude/oef-referenssit).
   Oranssi = linkki, alleviivaus kertoo sen ilman väriä. Ei uutta osiota. */
body.sivu--etusivu-h main > section a.oef-ref-linkki {
  display: inline-flex;
  border: 0;
  background: none;
  align-items: center;
  min-height: 44px;
  color: var(--toiminta-linkki);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
  transition: color var(--dur-fast, 150ms) ease-out;
}
body.sivu--etusivu-h main > section a.oef-ref-linkki:hover { color: var(--teksti-1); }
body.sivu--etusivu-h main > section a.oef-ref-linkki:focus-visible { outline: 2px solid var(--toiminta-linkki); outline-offset: 4px; border-radius: 2px; }