/* =============================================================================
   OEF typokerros  ·  brandbook v2.0 §5 (typografia) ja §6 (pystyrytmi)
   Luotu 14.9.2026, ilmepäivityksen LOHKO B.

   Lohko A julisti tokenit `--t-*` ja `--v*` mutta EI soveltanut niitä yhteenkään
   valitsimeen, jotta kontrastitodiste ei sekoittuisi layout-muutokseen. Tämä
   tiedosto soveltaa ne. Tässä lohkossa sivut SAAVAT muuttua ulkonäöltään.

   KOLME MEKANISMIA, JA NE OVAT ERI SYISTÄ ERI MUOTOISIA:

   1. ELEMENTTISÄÄNNÖT (h1, h2, p, ...) antavat roolikohtaisen portaan sinne
      missä sivu ei sano muuta.
   2. TAILWIND-KORVAUKSET `html .text-sm` -muodossa = (0,1,1). Tailwind CDN
      kääntää luokkansa selaimessa ja lisää oman <style>-lohkonsa headiin AJON
      AIKANA, eli sen (0,1,0) -sääntö voi päätyä tämän tiedoston jälkeen.
      Pelkkä `.text-sm` häviäisi silloin järjestyksellä. `html`-etuliite voittaa
      tarkkuudella, joten latausjärjestys lakkaa merkitsemästä.
   3. SIVUKOHTAISET <style>-LOHKOT kirjoitettiin uusiksi LÄHTEESSÄ, ei täältä
      käsin. Kuudella VARKE-sivulla on 414 kovakoodattua `font-size`-julistusta
      valitsimilla kuten `.katto-puoli .k-arvo` = (0,2,0). Mikään kohtuullinen
      globaali sääntö ei voita niitä ilman `!important`-tulvaa, joka jäisi
      lohkojen C-F tielle. Kilpailija poistettiin sen sijaan että sitä olisi
      yritetty huutaa yli.

   PORTAAT (§5.2). Naapurisuhteet 16->21 = 1,31 · 21->28 = 1,33 · 28->44 = 1,57.
   t0 ja t1 ovat tarkoituksella alle 1,28x: ne eivät ole hierarkiaportaita vaan
   oma rekisterinsä (kone-etiketti ja metatieto), ja silmä erottaa ne muodosta.
   ========================================================================== */

/* =============================================================================
   §5.1 KAKSI PERHETTÄ, KAKSI REKISTERIÄ
   mono = koneen tuottama tai koneen lukema arvo (luku, päivämäärä, tunnus,
   painikkeen komento). sans = ihmisen kirjoittama kieli.
   Tämä on se yksi asia joka erottaa OEF:n geneerisestä tummasta B2B-sivusta.
   ========================================================================== */
html body {
  font-family: var(--f-leipa);
  font-size: var(--t-2);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

html h1, html h2,
html .kpi-arvo, html .luku .arvo, html .vp-vast, html .stat .num,
html .katto-puoli .k-arvo, html .portti .p-arvo {
  font-family: var(--f-naytto);
  letter-spacing: -0.02em;
}

/* Kone-rekisteri. Kolme lähdettä samalle roolille:
   a) sivuston omat luokat (.eyebrow, .kicker, VARKE-sivut),
   b) Tailwind-sivujen versaali + harvennettu etiketti, joka on tällä
      sivustolla aina `uppercase` + jokin `tracking-*`,
   c) koneen tuottamat arvot: aika, yksikkö, tunnus, painikkeen komento. */
html .eyebrow, html .kicker, html .k-nimi, html .vp-kys,
html .uppercase[class*="tracking-"],
html time, html .pvm, html .yks, html .tunnus, html .byline,
html .trust-badge {
  font-family: var(--f-kone);
}

/* PAINIKKEEN TEKSTI ON KONE-REKISTERIÄ, JA SE ON YKSI LOHKON NÄKYVIMMISTÄ
   MUUTOKSISTA. §5.1 lukee painikkeen tekstin nimenomaisesti monon puolelle
   ("painikkeiden teksti"), ja `/varke`-sivu tekee juuri tämän: sen jokainen
   CTA on JetBrains Mono 600, versaali, harvennettu, 12 px.

   KIERROS 2 LÖYSI TÄSTÄ VIAN JOKA EI OLLUT KOOSSA VAAN JOHDONMUKAISUUDESSA.
   Ensimmäinen versio antoi monon vain `.header-cta`-luokalle, jolloin
   "Ota yhteyttä asiantuntijaan" latoutui monolla 16 px gemenalla ja
   "Pyydä tarjous" Interillä. Kaksi eri rekisteriä kahdelle samanarvoiselle
   painikkeelle samalla sivulla on pahempi kuin ei rekisteriä lainkaan.

   Toinen mitattu perustelu on painoarvo. Sumennustesti (8 px) samasta
   ruudusta: ylätunnisteen CTA oli ruudun painavin yhtenäinen oranssi massa
   305 x 48 px ja se kilpaili h1:n kanssa hallitsevan elementin roolista.
   Versaali mono portaalla t0 kaventaa saman napin, jolloin h1 jää yksin.
   Tämä ei poista sitä että sivulla on kaksi rinnakkaista primary-CTA:ta;
   se on rakenteellinen vika ja kuuluu lohkoihin E ja F. */
/* KIERROS 3: EDELLINEN VALITSINLISTA OSUI VAIN PUOLEEN PAINIKKEISTA.
   Ylätunnisteen CTA muuttui monoksi mutta heron "Pyydä tarjous" ja
   "Lue lisää" eivät, koska Tailwind-sivujen painikkeilla EI OLE `.btn`-
   luokkaa lainkaan: ne ovat `<button class="inline-flex ... bg-primary
   text-white font-bold py-4 px-8 rounded-full">`. Lopputulos oli pahempi
   kuin lähtötilanne: kaksi samanarvoista painiketta samassa ruudussa,
   kahdessa eri kirjasinrekisterissä.

   Siksi lista on nyt kaksiosainen: nimetyt komponenttiluokat JA
   attribuuttivalitsin joka tunnistaa painikkeen sen muodosta. `bg-primary`
   rajataan `button`- ja `a`-elementteihin, koska paljas `.bg-primary` on
   sivustolla myös koristepalkki (`absolute left-0 w-1 h-full bg-primary`)
   eikä sillä ole tekstiä lainkaan. */
html .btn, html .btn-primary, html .btn-secondary, html .cta-button,
html .header-cta, html .yhteys-nappi, html .ankkuri-nappi,
html .floating-cta a, html .floating-cta-button,
html .content-section a.bg-primary,
html button[class*="bg-primary"], html a[class*="bg-primary"],
html a[class*="rounded-full"][class*="font-bold"],
html button[class*="rounded-full"][class*="font-bold"],
html button[type="submit"],
html .wizard-nappi, html .lead-magnet-btn {
  font-family: var(--f-kone);
  font-size: var(--t-0);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  line-height: 1.3;
}

/* §5.5 Kaikki luvut ovat tabular. Ilman tätä "4 000 €" lukeutuu yhtenä
   möykkynä eikä lukuna ja yksikkönä, ja taulukon sarake heiluu rivistä toiseen. */
html .tnum, html .kpi-arvo, html .pvm, html time,
html table td, html table th, html .hinta, html .num, html .arvo,
html .k-arvo, html .p-arvo, html .vp-vast, html .stat .num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

/* =============================================================================
   §5.2 TYPOSKAALA, ROOLIKOHTAINEN
   `h1[class*="text-"]` = (0,1,1) ja se on kirjoitettu Tailwind-korvausten
   JÄLKEEN, joten otsikko saa portaansa roolista eikä siitä mikä utility-luokka
   sattuu olemaan HTML:ssä. Muuten sama h2 olisi 28 px yhdellä sivulla ja 44 px
   toisella pelkän luokkavalinnan takia.
   ========================================================================== */
html h1, html h1[class*="text-"] {
  font-size: var(--t-h1);
  line-height: 1.05;
  font-weight: 900;
  letter-spacing: -0.02em;
  max-width: 17ch;
}
html h2, html h2[class*="text-"] {
  font-size: var(--t-4);
  line-height: 1.2;
  font-weight: 700;
  max-width: 24ch;
}
html h3, html h3[class*="text-"] {
  font-size: var(--t-3);
  line-height: 1.45;
  font-weight: 600;
  font-family: var(--f-leipa);
  letter-spacing: 0;
  max-width: 58ch;
}
html h4, html h5, html h6 {
  font-size: var(--t-2);
  line-height: 1.45;
  font-weight: 600;
  font-family: var(--f-leipa);
}

/* Keskitetty otsikko: `max-width` tekee laatikosta kapeamman, jolloin
   `text-align: center` keskittäisi vain tekstin laatikon sisällä ja laatikko
   itse jäisi vasempaan reunaan. Tämä on sama ansa kuin grid-itemin
   `margin: 0 auto`. Keskitys palautetaan marginaalilla. */
html .text-center h1, html .text-center h2, html .text-center h3,
html h1.text-center, html h2.text-center, html h3.text-center,
html .text-center p {
  margin-inline: auto;
}

/* §5.3 Rivin mitta on KOVA. Leipäteksti ei ylitä 72 merkkiä vaikka kehys
   olisi 1 200 px leveä. Luokan kantavat kappaleet (Tailwindin `max-w-*`)
   jätetään rauhaan, koska ne on jo mitoitettu sivun omassa ruudukossa. */
html p:not([class*="max-w"]) { max-width: 72ch; }
html li { max-width: 72ch; }
/* KIERROS 2: `ch` on nollan levyinen merkki, ja Interilla se on leveampi kuin
   keskimaarainen gemena. 72ch = 936 px 21 px:n kappaleelle, eli rivi kantaa
   noin 100 todellista merkkia. Mitattu energiaselvitys.html:sta.
   §5.3 antaa t3:lle oman mittansa 58ch juuri tasta syysta: 21 px kappale ei
   ole leipaa vaan nostoa. */
html p.text-lg, html p.text-xl, html p.sm\:text-lg { max-width: 58ch; }
html .hero-lead, html .lead, html .ingressi {
  font-size: var(--t-3);
  line-height: 1.45;
  font-weight: 400;
  max-width: 58ch;
}

/* =============================================================================
   TAILWIND-KOKOLUOKKIEN KARTTA
   Sivustolla on 33 uniikkia kirjasinkokoa. Nämä säännöt eivät piilota niitä
   vaan poistavat ne: jokainen utility-koko osoittaa johonkin kuudesta
   portaasta. Responsiiviset variantit (`lg:text-4xl`) kartoitetaan samaan
   portaaseen kuin pohjaluokkansa, jolloin responsiivinen porrastus säilyy
   mutta pysyy skaalan sisällä.

   HUOM: Tailwindin `text-*` asettaa MYÖS `line-height`in. Jos sitä ei
   ylikirjoita, koko vaihtuu mutta rivikorkeus jää vanhaan ja pystyrytmi
   hajoaa juuri siellä missä sen piti syntyä.
   ========================================================================== */
html .text-\[10px\], html .text-\[11px\] { font-size: var(--t-0); line-height: 1.3; }
html .text-xs, html .text-\[13px\]       { font-size: var(--t-1); line-height: 1.45; }
html .text-sm, html .sm\:text-base, html .md\:text-base,
html .text-base, html .text-\[15px\]     { font-size: var(--t-2); line-height: 1.6; }
html .text-lg, html .sm\:text-lg,
html .text-xl, html .lg\:text-xl         { font-size: var(--t-3); line-height: 1.45; }
html .text-2xl, html .sm\:text-2xl, html .md\:text-2xl,
html .text-3xl, html .sm\:text-3xl, html .md\:text-3xl, html .lg\:text-3xl,
html .md\:text-\[28px\]                  { font-size: var(--t-4); line-height: 1.2; }
html .text-4xl, html .sm\:text-4xl, html .md\:text-4xl, html .lg\:text-4xl,
html .text-5xl, html .sm\:text-5xl, html .md\:text-5xl, html .lg\:text-5xl
                                          { font-size: var(--t-5); line-height: 1.05; }
html .text-6xl, html .md\:text-6xl, html .lg\:text-6xl
                                          { font-size: var(--t-h1); line-height: 1.05; }

/* Rivikorkeusluokat takaisin voimaan (0,1,2), koska kokosäännöt yllä asettavat
   line-heightin ja veisivät muuten tarkoituksellisen tiiviin ladonnan. */
html body .leading-none    { line-height: 1.05; }
html body .leading-tight   { line-height: 1.2; }
html body .leading-relaxed { line-height: 1.6; }

/* Ikonikirjasin ei ole typoskaalan porras vaan glyfin mitta, mutta se on
   tekstisolmu ja päätyy siksi skaalamittariin. Kolme kokoa riittää ja ne
   ovat samoja lukuja kuin portaat, joten mittari ei näe uutta kokoa. */
html .material-icons-round, html .material-symbols-rounded { font-size: var(--t-3); }
html .text-sm  .material-icons-round, html .text-xs .material-icons-round { font-size: var(--t-2); }
html h1 .material-icons-round, html h2 .material-icons-round { font-size: var(--t-4); }

/* =============================================================================
   §6 PYSTYRYTMI
   ========================================================================== */

/* §6.3 Otsikko kuuluu sisältöönsä, ei tyhjään tilaan. Yläväli on aina
   vähintään kaksinkertainen alaväliin nähden. Tämä on se mekanismi joka tekee
   osiosta luettavan ilman että mikään laatikko piirretään sen ympärille. */
html h2 { margin-top: var(--v8); margin-bottom: var(--v3); }
html h3 { margin-top: var(--v6); margin-bottom: var(--v2); }
html p  { margin-bottom: var(--v4); }
html p:last-child { margin-bottom: 0; }
html h1 + p, html h2 + p, html h3 + p { margin-top: 0; }

/* §6.2 Osion pystybudjetti. LOHKON SUURIN YKSITTÄINEN KORKEUSSÄÄSTÖ, ja se on
   pehmustetta eikä sisältöä: yhtään riviä ei katoa.

   ENSIMMÄINEN KIERROS OSUI VÄÄRÄÄN LUOKKAAN. Kartoitus kertoi että 54 osiota
   ajaa `padding-block: 128px`, ja luku luettiin Tailwindin `py-32`:ksi koska
   8rem on tasan se. Se ei ollut py-32. Se on `css/styles.css`:n oma luokka
   `.section-padding`, joka porrastaa 4rem / 6rem / 8rem kolmessa media-
   kyselyssä. Sääntö `html .py-32` oli siis täysin oikein kirjoitettu ja osui
   nollaan elementtiin, eikä mikään mittari nähnyt sitä: sivut vain pitenivät.
   Tämä on se tapaus jossa mittari on vihreä ja silmä sanoo rikki.

   `html .section-padding` = (0,1,1) voittaa (0,1,0):n riippumatta siitä missä
   media-kyselyssä alkuperäinen asuu, joten jokainen kolmesta portaasta on
   kirjoitettava tänne omana kyselynään. Alkuperäistä sääntöä EI poisteta:
   poisto on lohko G. */
html .section-padding { padding-block: var(--v8); }
@media (min-width: 768px)  { html .section-padding { padding-block: var(--v12); } }
@media (min-width: 1024px) { html .section-padding { padding-block: var(--v12); } }


html .py-32, html .sm\:py-32, html .lg\:py-32 { padding-block: var(--v16); }
html .pt-32, html .sm\:pt-32, html .lg\:pt-32 { padding-top: var(--v16); }
html .pb-32, html .sm\:pb-32, html .lg\:pb-32 { padding-bottom: var(--v16); }
html .py-24, html .sm\:py-24, html .lg\:py-24, html .lg\:py-28 { padding-block: var(--v12); }
html .pt-24, html .sm\:pt-24, html .lg\:pt-24 { padding-top: var(--v12); }
html .pb-24, html .sm\:pb-24 { padding-bottom: var(--v12); }
html .py-20, html .lg\:py-20 { padding-block: var(--v12); }
html .py-16 { padding-block: var(--v12); }
html .pt-16 { padding-top: var(--v12); }
html .pb-16 { padding-bottom: var(--v12); }

/* KIERROS 1 LÖYSI TÄMÄN KUVASTA, EI MITTARISTA.
   `<main class="pt-32">` EI ole osiopehmustetta. Ylätunniste on
   `position: fixed`, eikä se varaa virrasta yhtään tilaa, joten mainin
   yläpehmuste on sen AINOA turva-alue. Kun se leikattiin 128 -> 64 px,
   murupolku "Etusivu / Palvelut / Energiaselvitys" nousi logon päälle:
   päällekkäisyysmittari antoi 169 px2 osuman [FINLAND] <-> [Etusivu]
   kaikilla kolmella työpöytäleveydellä, ja ennen-tilassa niitä oli nolla.

   Sama sääntö oli oikea kaikkialla muualla, joten sitä ei pureta vaan
   rajataan: `main` saa oman turva-alueensa. Se ei ole makuasia vaan mitta:
   ylätunniste on tällä sivustolla 95-103 px (se kasvoi kolme pikseliä kun
   navigaation teksti nousi 14 -> 16 px), joten turva-alue on 112 px.
   112 = --v24 + --v4, eli se pysyy 4 px asteikolla vaikka se ei ole yksi
   asteikon askel. Vakio, ei kovakoodattu luku: jos ylätunniste kasvaa,
   muutetaan yksi arvo eikä etsitä kymmentä valitsinta. */
html { --oef-ylatunniste: calc(var(--v24) + var(--v4)); }   /* 112px */
html main.pt-32, html main.pt-24, html main.pt-16,
html main.py-32, html main.py-24 { padding-top: var(--oef-ylatunniste); }


/* Tailwindin askeleet 10 (40 px) ja 20 (80 px) eivat ole asteikolla. Ne ovat
   sivuston toiseksi ja kolmanneksi yleisimmat tilarikkeet heti `.section-padding`in
   jalkeen, ja ne ovat isoja: 40 px ja 80 px marginaali siirtaa koko loppusivua. */
html .p-10, html .sm\:p-10, html .lg\:p-10 { padding: var(--v8); }
html .py-10, html .sm\:py-10, html .lg\:py-10 { padding-block: var(--v8); }
html .mt-10, html .lg\:mt-10 { margin-top: var(--v8); }
html .mb-10, html .lg\:mb-10 { margin-bottom: var(--v8); }
html .mb-20, html .lg\:mb-20 { margin-bottom: var(--v16); }
html .mt-20, html .lg\:mt-20 { margin-top: var(--v16); }
html .py-20, html .lg\:py-20 { padding-block: var(--v12); }

/* §6.1 Tilayksikkö on 4 px. Tailwindin puolikasaskeleet ovat ainoat
   utility-luokat jotka putoavat asteikolta. */
html .mt-0\.5 { margin-top: var(--v1); }
html .py-1\.5 { padding-block: var(--v1); }
html .py-2\.5 { padding-block: var(--v2); }
html .py-3\.5 { padding-block: var(--v3); }
html .gap-1\.5 { gap: var(--v1); }

@media (max-width: 820px) {
  html .py-32, html .sm\:py-32, html .lg\:py-32 { padding-block: var(--v12); }
  html .pt-32, html .sm\:pt-32 { padding-top: var(--v12); }
  html .pb-32, html .sm\:pb-32 { padding-bottom: var(--v12); }
  html .py-24, html .sm\:py-24, html .lg\:py-24, html .lg\:py-28,
  html .py-20, html .py-16 { padding-block: var(--v8); }
  html main.pt-32, html main.pt-24, html main.pt-16,
  html main.py-32, html main.py-24 { padding-top: var(--oef-ylatunniste); }
  html .pt-24, html .sm\:pt-24, html .pt-16 { padding-top: var(--v8); }
  html .pb-24, html .sm\:pb-24, html .pb-16 { padding-bottom: var(--v8); }
  html h1 { max-width: none; }
  html h2 { max-width: none; margin-top: var(--v6); }
}

/* =============================================================================
   §10 LIIKE. Lohko A jätti tämän tekemättä, koska globaali liikkeen nollaus
   olisi muuttanut sivun käyttäytymistä kesken kontrastimittauksen.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}