/* =========================================================================
   SUUNTA A  ·  "LUPAUS"                                    lohko F, 14.9.2026
   =========================================================================
   HALLITSEVA IDEA (makuportti §1 testi 5, yksi lause):
   Ainoa syy valita OEF on se etta se EI myy urakoita, joten sivun ensimmainen
   ruutu on se lupaus latoituna kuin sopimuslauseke, ei kuva eika kortisto.

   Miten jokainen valinta palvelee ideaa:
     - hero on yksi lause ja sen alla kone-rekisterissa oleva takuurivi
     - taustakuva pois: lupaus ei tarvitse kuvitusta, ja kuva vesittaa sen
     - nelja ratkaisukorttia -> yksi hiusviivaliuska: ne ovat todiste, eivat
       vaite, joten ne latoutuvat alaviitteen painolla
     - hallitseva elementti on h1, tasan yksi, ja se on sivun ainoa t-h1
     - vasen akseli: lupaus luetaan, ei ihailla

   VAIHTOTESTI: vaihda tekstit leipomon teksteiksi ja layout hajoaa, koska
   koko ensimmaisen ruudun rakenne on "yksi vaite + sen takuu". Leipomolla ei
   ole vaitetta jota pitaisi puolustaa. Rakenne EI ole vaihdettavissa.

   TAUSTAMEKANISMI: brandbook §3.2 vaihtoehto A (staattinen kulmahehku).
   EI auroraa. Perustelu on idean sisainen: aurora on tunnelmaa, ja tama
   suunta vaittaa etta tunnelma on juuri se mika vie uskottavuuden
   puolueettomuusvaitteelta. Yksi taustamekanismi, ei kahta (§11.4).
   ========================================================================= */

body.sivu--etusivu-a main { padding-top: var(--oef-ylatunniste); }

/* =========================================================================
   §A1  VASEN AKSELI
   -------------------------------------------------------------------------
   Lahtotilassa etusivulla oli kaksi akselia sekaisin: hero, "Palvelumme",
   prosessi, hinnoittelu ja CTA keskitettyja, muut vasemmalla. Makuportti §2
   mitta 4 sallii NELJA alkulinjaa; keskitys tuottaa uuden linjan jokaiselle
   eri levyiselle elementille, joten keskitetty sivu ei voi koskaan pitaa
   neljan rajaa.

   Kumoaminen vaatii tarkkuuden (0,3,1), koska oef-typo.css keskittaa kapean
   otsikkolaatikon saannolla `html .text-center h2 { margin-inline: auto }`
   = (0,2,1). Sama ansa jonka oef-typo.css itse dokumentoi. */
body.sivu--etusivu-a main .text-center,
body.sivu--etusivu-a main .lg\:text-center { text-align: left; }
/* KORJAUS 16.9.2026, LOHKO I.  TASSA OLI:
     `body.sivu--etusivu-a main .justify-center { justify-content: flex-start }`
   = (0,3,1), joka voitti Tailwindin `.justify-center`in (0,1,0) ja kumosi
   keskityksen MAINin JOKAISELTA elementilta. Mitattu vahinko: 25/25 rikki
   neljalla leveydella. Nakyvat uhrit olivat prosessin vaihenumerot 1-4
   (numero liimautui 56 px laatan vasempaan reunaan), "FI"-merkki (teksti
   vuoti 32 px ympyran yli), palvelukorttien ikonilaatat ja hinnoittelun
   kaksi tayslevytta nappia (1094 px nappi, tarra vasemmassa reunassa).

   JUURISYY EI OLE TARKKUUS VAAN VAARA KOHDE. `.justify-center` ei ole sivun
   akseli vaan KOMPONENTIN OMA sisasuuntaus: se kertoo miten laatan sisalto
   istuu laatan sisalla. Suunta A:n vasen akseli paattaa mihin LOHKOT sivulla
   asettuvat, ei sita mihin ikoni asettuu oman 64 px laattansa sisalla.
   Siksi `.text-center` ja `.mx-auto` (lohkotason sijoitus) saavat jaada
   kumotuiksi, mutta `.justify-center` ja `.items-center` (sisasuuntaus)
   eivat. Se on koko ero, ja portti test/keskitysapuluokat.test.js lukitsee
   sen: sisasuuntausapuluokkaa ei saa kumota valitsimella jonka viimeinen
   kompoundi on pelkka apuluokka itse.

   Vasen akseli tehdaan nyt NIMETYILLE riveille. Niita on tasan kaksi ja ne
   ovat molemmat sivun omia sisaltorivaja, eivat komponentteja:
     1. kumppanilogorivi (main > div.border-y)
     2. CTA:n painikerivi (#cta)
   Molemmat naytettiin kuvassa ennen ja jalkeen. */
body.sivu--etusivu-a main > div.border-y > div > .flex.flex-wrap,
body.sivu--etusivu-a main #cta .flex.flex-col.gap-4 { justify-content: flex-start; }
/* KIERROS 2 KORJASI TASSA VIAN JOKA NAKYI VAIN KUVASTA.
   Ensimmainen versio nollasi `.mx-auto`n koko mainista ja palautti palstan
   keskityksen erillisella saannolla. Se ei toiminut, ja syy on tarkkuus:
     `body.sivu--etusivu-a main .mx-auto`        = (0,2,2)
     `body.sivu--etusivu-a main > section > div` = (0,1,3)
   Luokka painaa enemman kuin elementti, joten nollaus voitti riippumatta
   jarjestyksesta. Lopputulos kuvassa: palsta liimautui vasempaan reunaan
   (sisalto x 24, oikea reuna x 1185) ja oikeaan laitaan jai 235 px levea
   marginaali kun vasemmalla oli 24 px. Yksikaan mittari ei nayttanut sita,
   koska leveys, ylivuoto ja paallekkaisyys olivat kaikki kunnossa.

   Korjaus ei ole tarkkuuskilpailu vaan kohteen rajaus: nollataan vain ne
   `.mx-auto`t jotka ovat palstakaareen SISALLA. Kaare itse ei ole oman
   itsensa jalkelainen, joten se jaa koskematta. */
body.sivu--etusivu-a main > section > div .mx-auto,
body.sivu--etusivu-a main > div > div .mx-auto { margin-left: 0; margin-right: 0; }
body.sivu--etusivu-a main .text-center h1,
body.sivu--etusivu-a main .text-center h2,
body.sivu--etusivu-a main .text-center h3,
body.sivu--etusivu-a main .text-center p,
body.sivu--etusivu-a main h2.text-center,
body.sivu--etusivu-a main h3.text-center { margin-inline: 0; }

/* LOHKO I 16.9.2026, TOINEN LOYDOS SAMASTA JUURISYYSTA.
   `.text-center`in kumous on tarkoituksellinen (se ON vasen akseli), mutta se
   ulottui myos PAINIKKEIDEN sisaan. Kaksi hinnoittelun tayslevytta painiketta
   (1094 px) ovat Tailwindin `.block`-luokan takia lohkoelementteja eivat
   flexia, joten niihin kirjoitettu `justify-center` ei tee mitaan ja tarran
   paikan ratkaisee `text-align`. Mitattu: "Varaa ilmainen kartoitus"
   text-align left, "Pyyda tarkka tarjous" start, molemmat 1094 px levealla
   napilla. Kuvassa ne lukeutuivat listariviksi eivat napiksi, ja saman sivun
   muut painikkeet (465 px, display flex) keskittivat tarransa. Sama
   komponenttiperhe oli siis kahdessa eri tilassa.

   Painikkeen tarra on komponentin SISASUUNTAUSTA tasan samalla perusteella
   kuin ikoni laattansa sisalla, joten vasen akseli ei ulotu sinne.
   (0,3,2) > (0,3,1), ei !importantia. */
body.sivu--etusivu-a main a.btn-primary,
body.sivu--etusivu-a main a.btn-secondary,
body.sivu--etusivu-a main button.btn-primary,
body.sivu--etusivu-a main button.btn-secondary { text-align: center; }

/* =========================================================================
   §A2  HERO: YKSI LAUSE
   ========================================================================= */
body.sivu--etusivu-a #hero {
  position: relative;
  padding-block: var(--v24) var(--v16);
  border-bottom: 1px solid var(--oef-viiva-heikko);
}

/* Brandbook §3.2 vaihtoehto A. Yksi taustamekanismi, kaksi radiaalia yhdessa
   maalauskerroksessa = yksi efekti tallä elementilla. */
body.sivu--etusivu-a #hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(62% 58% at 86% -6%, rgba(255,92,0,0.20), transparent 62%),
    radial-gradient(50% 48% at 4% 4%,  rgba(0,229,255,0.10), transparent 60%);
}

/* "Uusi | Energia-avustus 2026 taloyhtioille" oli heron oikeassa ylakulmassa
   omana kelluvana rivinaan. Se on koneen kirjoittama etiketti (= uutuus,
   vuosiluku), eli tasmalleen sama rooli kuin palvelusivujen murupolulla, ja
   se saa saman ladonnan: vasen, mono, versaali, oranssi 16 px viiva edessa.
   Nain etusivu ja 13 muuta sivua puhuvat samaa kielta ilman uutta tekstia. */
body.sivu--etusivu-a #hero .flex.justify-end {
  justify-content: flex-start;
  margin-bottom: var(--v8);
}
body.sivu--etusivu-a #hero .flex.justify-end > a {
  font-family: var(--f-kone);
  font-size: var(--t-0);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--teksti-3);
  gap: var(--v2);
}
body.sivu--etusivu-a #hero .flex.justify-end > a::before {
  content: ""; width: 16px; height: 2px; background: var(--toiminta); flex-shrink: 0;
}
body.sivu--etusivu-a #hero .flex.justify-end > a:hover { color: var(--teksti-1); }
/* Erotinviiva ja "Uusi"-merkki ovat nyt saman mono-rivin osia, eivat
   erillisia merkkeja. Poistotesti (§1 testi 3): pystyviiva `h-3 w-px`
   poistettiin ja rivi luki edelleen tasan yhta hyvin, joten se oli taytetta. */
body.sivu--etusivu-a #hero .flex.justify-end .h-3.w-px { display: none; }
body.sivu--etusivu-a #hero .flex.justify-end .text-primary { color: var(--toiminta); }

body.sivu--etusivu-a #hero > .relative.z-10 > .max-w-3xl {
  max-width: none;
  margin-bottom: var(--v16);
}

/* H1 ON SIVUN AINOA HALLITSEVA ELEMENTTI (makuportti §2 mitta 2).
   §5.4.1 (14.9.2026): varijako purettu. Otsikko oli valkoinen vastaus +
   vaimea tarkennus, eli tasan se kuvio jonka Dani hylkasi. Hallitsevuus ei
   ollut koskaan varissa vaan KOOSSA ja TILASSA: 15ch:n mitta pakottaa kolme
   rivia ja jattaa oikealle puolelle tyhjaa, ja se osa sailyy sellaisenaan.
   Koko otsikko on nyt --teksti-1, ja rivijako hoituu `.otsikko-rivi`-luokalla
   (css/oef-tokens.css §5.4.1). */
body.sivu--etusivu-a #hero h1 {
  color: var(--teksti-1);
  max-width: 15ch;
  margin-bottom: var(--v6);
}

body.sivu--etusivu-a #hero h1 + p {
  font-size: var(--t-3);
  line-height: 1.45;
  color: var(--teksti-2);
  max-width: 52ch;
  margin-bottom: var(--v6);
}

/* TAKUURIVI. "Yli 1000 toteutettua projektia viimeisen 6 vuoden aikana koko
   Suomessa" on koneen luettava tosiasia (lukumaara + vuosiluku + alue), ei
   markkinointilause. Se saa kone-rekisterin ja oman hiusviivansa, jolloin se
   lukeutuu lupauksen allekirjoitukseksi eika kolmanneksi kappaleeksi. */
body.sivu--etusivu-a #hero h1 ~ p + p {
  font-family: var(--f-kone);
  font-size: var(--t-1);
  letter-spacing: 0.02em;
  color: var(--teksti-3);
  max-width: none;
  padding-top: var(--v4);
  border-top: 1px solid var(--oef-viiva);
  /* KIERROS 3: `inline-block` teki viivasta TEKSTIN levyisen (x 140-712),
     kun heron muut vaakaviivat ulottuvat palstan reunaan (x 140-1300).
     Kolme eri pituista hiusviivaa samassa ruudussa lukeutuu huolimattomaksi
     vaikka jokainen niista on yksinaan oikein. Nyt pituuksia on kaksi ja
     molemmat alkavat samasta x:sta: vasen palsta ja koko palsta. */
  display: block;
  font-variant-numeric: tabular-nums;
}

/* =========================================================================
   §A2b  HERO ON KAKSIPALSTAINEN, JA SE ON KIERROS 2:N KORJAUS
   -------------------------------------------------------------------------
   KIERROS 1 KAATUI TAHAN. Yksipalstainen lupaus jatti oikeaan laitaan
   kuolleen alueen x 600-1420, y 190-590 eli noin 820 x 400 px. Mittari
   sanoi saman luvun omalla tavallaan: suurin yhtenainen tyhja 28,1 %
   (raja 18 %) kaikilla kolmella tyopoytaleveydella. Tyhjaa oli siis
   enemman kuin rajan verran JA se oli yhdessa mohkaleessa keskella
   ruutua, mika lukeutuu keskeneraisyydeksi eika levoksi.

   Tama on TASMALLEEN sama vika jonka lohko C korjasi taloyhtiosivulla ja
   lohko E palvelusivuilla: vasen akseli ilman oikeaa palstaa jattaa aukon.
   Ratkaisu on sama kuin siella, ja se on myos sisallollisesti oikea: kolme
   tunnuslukua (100 % puolueeton, 0 EUR piilokustannukset, 1000+ projektia)
   ovat lupauksen TODISTE, joten ne kuuluvat lupauksen viereen eivatka
   kolmen ruudullisen paahan. Ne nousevat samalla ensimmaiseen ruutuun.

   Tunnusluvut siirtyvat ruudukon avulla, EI `order`-arvolla: ruudukon
   sijoittelu sailyttaa DOM-jarjestyksen ja visuaalisen jarjestyksen
   samana, joten WCAG 1.3.2 ei ole edes kysymys. */
@media (min-width: 1024px) {
  body.sivu--etusivu-a #hero > .relative.z-10 {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 20rem;
    column-gap: var(--v16);
    align-items: start;
  }
  /* Kicker ja korttiliuska ylittavat molemmat palstat. */
  body.sivu--etusivu-a #hero > .relative.z-10 > .flex.justify-end,
  body.sivu--etusivu-a #hero .grid.lg\:grid-cols-4 { grid-column: 1 / 3; }
  body.sivu--etusivu-a #hero > .relative.z-10 > .max-w-3xl { grid-column: 1; }

  /* Tunnusluvut: oikea palsta, pystysuunnassa, hiusviivat valiin. */
  body.sivu--etusivu-a #hero .grid.lg\:grid-cols-3 {
    grid-column: 2; grid-row: 2;
    display: block;
    border-top: 1px solid var(--oef-viiva);
    border-bottom: 0;
    margin-top: var(--v2);
  }
  body.sivu--etusivu-a #hero .grid.lg\:grid-cols-3 > * {
    display: block;
    padding: var(--v5) 0;
    border-left: 0;
    border-bottom: 1px solid var(--oef-viiva-heikko);
  }
  body.sivu--etusivu-a #hero .grid.lg\:grid-cols-3 > * + * { border-left: 0; padding-left: 0; }
  body.sivu--etusivu-a #hero .grid.lg\:grid-cols-3 > *:last-child { border-bottom: 0; }
}

/* =========================================================================
   §A3  NELJA RATKAISUA -> HIUSVIIVALIUSKA
   -------------------------------------------------------------------------
   Lahtotilassa nama olivat nelja SAMANLEVYISTA lasikorttia ilman painotusta,
   eli makuportin §6 nimenomaisesti kielletty kuvio. Tassa suunnassa ne eivat
   ole sivun pointti vaan lupauksen todiste, joten ne saavat alaviitteen
   painon: ei korttia, ei tayttoa, vain pystyhiusviiva erottimena.

   `.line-row`-sanasto on lainattu /varke-sivulta, joka on se sivu josta Dani
   sanoi pitavansa. Se kestaa nelja tai neljatoista riviä ilman etta sivu
   paisuu, ja se on mitattuna tiiviimpi kuin kortti.
   ========================================================================= */
body.sivu--etusivu-a #hero .grid.lg\:grid-cols-4 {
  gap: 0;
  margin-bottom: var(--v12);
  border-top: 1px solid var(--oef-viiva);
  border-bottom: 1px solid var(--oef-viiva);
  max-width: none;
}
body.sivu--etusivu-a #hero .grid.lg\:grid-cols-4 > .group { padding: var(--v6) 0; }
body.sivu--etusivu-a #hero .grid.lg\:grid-cols-4 > .group + .group {
  border-left: 1px solid var(--oef-viiva-heikko);
  padding-left: var(--v6);
}
body.sivu--etusivu-a #hero .grid.lg\:grid-cols-4 > .group:not(:last-child) { padding-right: var(--v6); }
body.sivu--etusivu-a #hero .grid.lg\:grid-cols-4 .glass-card {
  background: none; border: 0; padding: 0; border-radius: 0;
}
/* Nimi on ihmiskielta (sans), luku on koneen arvo (mono). Rekisterisaanto
   §2 mitta 11: sekaannuksia nolla. */
body.sivu--etusivu-a #hero .grid.lg\:grid-cols-4 h3 {
  font-size: var(--t-2); font-weight: 600; color: var(--teksti-2);
  margin: 0 0 var(--v2); max-width: none;
}
body.sivu--etusivu-a #hero .grid.lg\:grid-cols-4 .text-3xl {
  font-family: var(--f-kone);
  font-size: var(--t-3);
  font-weight: 600;
  color: var(--teksti-1);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
body.sivu--etusivu-a #hero .grid.lg\:grid-cols-4 .text-3xl + .text-sm {
  font-family: var(--f-kone); font-size: var(--t-0); color: var(--teksti-4);
  text-transform: uppercase; letter-spacing: 0.08em;
}
body.sivu--etusivu-a #hero .grid.lg\:grid-cols-4 > .group p {
  font-size: var(--t-1); color: var(--teksti-4); max-width: 34ch; margin: 0;
}
body.sivu--etusivu-a #hero .grid.lg\:grid-cols-4 .mb-3 { margin-bottom: var(--v3); }

/* Kolme tunnuslukua: sama liuska, ei kortteja. */
body.sivu--etusivu-a #hero .grid.lg\:grid-cols-3 {
  max-width: none; gap: 0; border-bottom: 1px solid var(--oef-viiva);
}
body.sivu--etusivu-a #hero .grid.lg\:grid-cols-3 > * {
  background: none; border: 0; border-radius: 0;
  padding: 0 var(--v6) var(--v6) 0;
}
body.sivu--etusivu-a #hero .grid.lg\:grid-cols-3 > * + * {
  border-left: 1px solid var(--oef-viiva-heikko); padding-left: var(--v6);
}
body.sivu--etusivu-a #hero .grid.lg\:grid-cols-3 .text-4xl {
  font-family: var(--f-kone); font-size: var(--t-4); font-weight: 600;
  color: var(--teksti-1); font-variant-numeric: tabular-nums;
}
body.sivu--etusivu-a #hero .grid.lg\:grid-cols-3 .text-\[11px\] { color: var(--teksti-4); }

/* =========================================================================
   §A4  LUPAUS TOISTUU: PUOLUEETTOMUUSOSIO ON SIVUN TOISEKSI PAINAVIN
   -------------------------------------------------------------------------
   "Ainoa intressimme on sinun etusi" on sivun ainoa osio joka kertoo mita
   yritys EI tee. Tassa suunnassa se ei ole kortti muiden joukossa vaan
   lupauksen jatko, joten se saa oranssin vasemman reunan ja pudottaa
   korttikehyksensa kokonaan. Yksi efekti (reuna), ei kahta.
   ========================================================================= */
body.sivu--etusivu-a main > section:nth-of-type(2) .glass-card {
  background: none;
  border: 0;
  border-left: 2px solid var(--toiminta);
  border-radius: 0;
  padding: var(--v2) 0 var(--v2) var(--v8);
}
body.sivu--etusivu-a main > section:nth-of-type(2) .glass-card > .absolute { display: none; }
body.sivu--etusivu-a main > section:nth-of-type(2) .text-accent { color: var(--toiminta); }
body.sivu--etusivu-a main > section:nth-of-type(2) a {
  background: none; border: 1px solid var(--oef-viiva); color: var(--teksti-1);
}

/* =========================================================================
   §A5  LEPOTILA
   -------------------------------------------------------------------------
   Mitattu lahtotila: muste 95,7 %, lepotila 4,3 %, raja >= 22 %. Suurin
   yksittainen syy oli hero-taustakuva (pohja §5). Toinen on osioiden
   pystybudjetti: `.section-padding` on jo lohko B:ssa 48 px, mutta osioiden
   VALISSA ei ole mitaan, joten sivu on yhtenainen musteputki.

   Lepo kuuluu reunoille eika keskelle (makuportti §2 mitta 8: suurin
   yhtenainen tyhja <= 18 %). Siksi rytmi tehdaan osiovalin hiusviivalla ja
   ylapehmusteella, ei yhdella isolla aukolla. */
body.sivu--etusivu-a main > section + section,
body.sivu--etusivu-a main > section + div,
body.sivu--etusivu-a main > div + section { margin-top: var(--v12); }

/* =========================================================================
   §A6  OSIOIDEN PAINOLUOKAT
   -------------------------------------------------------------------------
   Lahtotilassa osioita oli 9 ja uniikkeja tyyleja 8, eli suhde 0,89. Se
   kuulostaa hyvalta mutta on sivun toinen aariviivaa: JOKAINEN osio nayttaa
   erilaiselta, jolloin mikaan ei ole tarkeampi. Painoluokkia on kolme, ei
   yhdeksan: nosto (paapalvelu, hinnoittelu), oletus, tiivis (kumppanirivi,
   palvelualue, lahde). */
body.sivu--etusivu-a main > section { background-image: none; background-color: transparent; }
body.sivu--etusivu-a main > section#process { background: var(--oef-bg-syva); border-block: 1px solid var(--oef-viiva-heikko); }
body.sivu--etusivu-a main > section#hinnoittelu { border-block: 0; border-top: 1px solid var(--oef-viiva); }
body.sivu--etusivu-a main > section#hinnoittelu > .absolute { display: none; }
body.sivu--etusivu-a main #cta > .absolute { display: none; }

/* Osio-otsikot saavat mono-etiketin sijaan hiusviivan: tasan yksi mekanismi
   koko sivulle, ja se on sama kuin heron kickerissa. */
body.sivu--etusivu-a main > section > div > .text-center:first-child,
body.sivu--etusivu-a main > section > div > .observe:first-child { margin-bottom: var(--v8); }

/* =========================================================================
   §A7  MOBIILI
   ========================================================================= */
@media (max-width: 820px) {
  body.sivu--etusivu-a #hero { padding-block: var(--v12) var(--v8); }
  body.sivu--etusivu-a #hero .grid.lg\:grid-cols-4 > .group + .group {
    border-left: 0; border-top: 1px solid var(--oef-viiva-heikko);
    padding-left: 0; padding-top: var(--v5);
  }
  body.sivu--etusivu-a #hero .grid.lg\:grid-cols-4 > .group:not(:last-child) { padding-right: 0; }
  body.sivu--etusivu-a #hero .grid.lg\:grid-cols-3 > * + * {
    border-left: 0; padding-left: 0;
  }
  body.sivu--etusivu-a #hero h1 { max-width: none; }
  body.sivu--etusivu-a main > section + section { margin-top: var(--v8); }
}