/* ==========================================================================
   Haimoo.fi jaettu chrome-taulu
   ==========================================================================

   Mita tama tiedosto omistaa
   --------------------------
   1) Yhteinen ylapalkki ja alapalkki: header ja sen sisaiset elementit, logo,
      navigaatiolinkit, kielenvaihto, valikkonappi, mobiilivalikko, footer ja
      sen osat, headerin painikkeet ja reveal-animaatio.
   2) Vaiheesta 3 alkaen myos SIVUN RUNKO: typografia, sisaltoleveys, osiot,
      painikkeet, listat, kortit, kaistat ja haitarit. Runko-osa on kokonaan
      nimiavaruuden .hm alla (ks. "Runkosopimus" alempana).

   Mita tama tiedosto EI omista
   ----------------------------
   Yksittaisen sivun omat erikoisuudet (esim. etusivun kuvahero, tuotesivujen
   wireframe-mockupit). Ne pysyvat sivun omassa <style>-lohkossa.

   Scoping-saanto
   --------------
   Jokainen saanto on joko chrome-scopattu (header, footer, nav) tai
   nimiavaruudella .hm scopattu. Paljaita selektoreita ei ole. Kolme nimettya
   poikkeusta:

   1) :root-lohko. Se ei ole tyylisaanto vaan tokenien maarittely, ja kaikki
      nimet kantavat --hm-etuliitteen. Etuliite on pakollinen, koska sivujen
      omat lohkot maarittelevat samannimisia tokeneita eri arvoilla: --line on
      etusivulla rgba(39,45,45,.22) ja vanhoilla sivuilla #111111, ja chrome
      kayttaa sita. Ilman etuliitetta chrome perisi vaaran arvon.

   2) .reveal. Luokka on sisaltomarkupissa, mutta sen tilan (.in) asettaa
      jaetun footer-partiaalin IntersectionObserver. Animaatio on siis chromen
      omistama, vaikka selektori ei ala headerilla tai footerilla.

   3) html:has(> body.hm). scroll-behavior kuuluu vierittavalle elementille eli
      html:lle, jota .hm ei tavoita, koska .hm on bodyssa. :has()-muoto pitaa
      saannon silti migroitujen sivujen sisalla. Jos selain ei tue :has():ia,
      saanto hylataan ja ankkurilinkki hyppaa ilman pehmennysta: turvallinen
      degradaatio.

   Lataus
   ------
   Linkitetaan jokaisen sivun head.html:ssa SIVUN OMAN <style>-lohkon
   YLAPUOLELLE. Silloin sivun oma tyyli voittaa migraation aikana, eika
   osittain purettu sivu nayta puolivalmiilta.
   ========================================================================== */

:root{
  /* Paletti, omistajan vahvistama */
  --hm-ink:#272D2D;             /* Jet Black: paateksti, tumma tausta, footer */
  --hm-amethyst:#A846A0;        /* vahvat brandipinnat ja korostusosiot */
  --hm-mint:#F7FFF7;            /* paatausta */
  --hm-pink:#FF6B6B;            /* CTA-painikkeet */
  --hm-gold:#FFE66D;            /* huomioalueet */

  /* Chromen johdetut pinnat */
  --hm-line:rgba(39,45,45,.22);
  --hm-header-bg:rgba(247,255,247,.94);
  --hm-header-bg-solid:rgba(247,255,247,.97);
  --hm-on-dark:rgba(247,255,247,.84);
  --hm-on-dark-soft:rgba(247,255,247,.78);
  --hm-on-dark-line:rgba(247,255,247,.14);

  /* Mitat ja liike */
  --hm-header-min-h:78px;
  --hm-logo-h:22px;
  --hm-tap:44px;                /* kosketuskohteen minimi */
  --hm-ease:cubic-bezier(0.2,0,0,1);

  /* Typografia. Chrome kayttaa Interia myos niilla sivuilla joiden runko on
     yha monospacea, jotta ylapalkki ja alapalkki ovat samat koko sivustolla. */
  --hm-font:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;

  /* ---- Runkotokenit (vaihe 3) --------------------------------------
     Arvot on luettu etusivun (index-fi) hyvaksytysta lohkosta, jotta migroitu
     sivu ja etusivu ovat mitattavasti samaa asteikkoa. Runkosaannot kayttavat
     naita, eivat kovakoodattuja lukuja. */

  /* Mitat: sisaltoleveys, reunavalit, osion pystyvali */
  --hm-max:1380px;              /* etusivun .shell-katto */
  --hm-gutter:48px;             /* reunavali yhteensa, leveilla */
  --hm-gutter-sm:28px;          /* reunavali yhteensa, <=680px */
  --hm-section-y:88px;          /* osion pystypadding */
  --hm-section-y-sm:64px;       /* sama <=680px */
  --hm-gap:28px;                /* ruudukon perusvali */
  --hm-measure:64ch;            /* leipatekstin rivinpituus */

  /* Vaimennettu tekstivari. Mitattu kontrasti mint-taustaa vasten 7,7:1
     (WCAG AAA normaalille tekstille), joten se kelpaa myos leipatekstiin. */
  --hm-ink-soft:#4b5353;

  /* Typografinen asteikko. clamp() hoitaa portaattoman skaalauksen, joten
     otsikkokokoja ei tarvitse toistaa media queryissa. */
  --hm-fs-h1:clamp(44px,5.4vw,84px);
  --hm-fs-h2:clamp(34px,3.8vw,58px);
  --hm-fs-h3:clamp(21px,1.7vw,27px);
  --hm-fs-h4:18px;
  --hm-fs-lead:clamp(19px,1.7vw,25px);
  --hm-fs-body:17px;
  --hm-fs-small:15px;
  --hm-fs-eyebrow:12px;
  --hm-track-tight:-.055em;     /* isojen otsikoiden kirjainvali */
  --hm-track-eyebrow:.16em;

  /* Wordmarkin lapinakyva oikea reunamarginaali osuutena kuvan leveydesta.
     Mitattu alfakanavasta: musteen oikea reuna on kohdassa 1519,97 px kun
     kuvan leveys on 1560 px, eli marginaali on 40,03 px = 2,566 %. COMPANY-
     lukko kayttaa tata, jotta se tasautuu viimeisen kirjaimen reunaan eika
     kuvatiedoston reunaan. Lukon tyylit asuvat partiaaleissa. */
  --hm-wordmark-inset-right:2.566%;
}

/* ===== Ylapalkki =================================================== */

header{
  position:sticky;top:0;z-index:100;
  background:var(--hm-header-bg);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--hm-line);
  /* Oma typografinen perusta. Ilman line-heightia chrome perii sivun rungon
     rivivalin, ja mitattuna se teki ylapalkista 79,39 px 34 sivulla ja
     79,00 px kahdella. */
  font-family:var(--hm-font);line-height:1.45
}
header .bar{
  min-height:var(--hm-header-min-h);
  display:flex;align-items:center;justify-content:space-between;gap:28px
}

/* Logo. width:auto on pakollinen, koska img kantaa width/height-attribuutit
   (ne varaavat tilan ennen latausta). Attribuutti on esitysvihje, joka ilman
   tata lukitsisi leveydeksi 1560 px. */
header .logo{height:var(--hm-logo-h);width:auto;display:block}

/* ===== Navigaatio ================================================== */

header nav.links{display:flex;align-items:center;gap:28px}
header nav.links a{
  position:relative;padding:28px 0;
  font-size:14px;font-weight:700;letter-spacing:0;
  color:var(--hm-ink);text-decoration:none
}
header nav.links a::after{
  content:"";position:absolute;left:0;right:100%;bottom:20px;height:2px;
  background:var(--hm-amethyst);transition:right .2s
}
header nav.links a:hover::after,
header nav.links a:focus-visible::after{right:0}
/* Nappaimistofokus oli nakyva vain mobiilivalikossa. Chrome on yksi pinta,
   joten fokus nakyy samalla tavalla joka leveydella. */
header nav.links a:focus-visible{outline:2px solid var(--hm-ink);outline-offset:3px}

header nav.links a.lang-switch{
  padding:7px 10px;border:1px solid var(--hm-ink);border-radius:0;
  font-size:12.5px;font-weight:700;letter-spacing:.08em
}
header nav.links a.lang-switch::after{display:none}
header nav.links a.lang-switch:hover{background:var(--hm-ink);color:var(--hm-mint);text-decoration:none}

header .nav-right{display:flex;align-items:center;gap:16px}

@media(max-width:1120px){
  header nav.links{gap:18px}
  header nav.links a{font-size:13px}
}

/* ===== Headerin painike ============================================ */

header .btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:48px;height:auto;padding:0 20px;border-radius:0;
  border:1px solid var(--hm-ink);background:var(--hm-ink);color:var(--hm-mint);
  font-family:var(--hm-font);font-weight:800;font-size:15px;letter-spacing:0;
  cursor:pointer;
  transition:transform .18s ease,background .18s ease,color .18s ease
}
header .btn:hover{transform:translateY(-1px);background:var(--hm-ink);color:var(--hm-mint)}
header .btn:focus-visible{outline:2px solid var(--hm-ink);outline-offset:3px}

/* ===== Valikkonappi ================================================ */

/* 44x44 on kosketuskohteen minimi. Osalla sivuista se oli 40x40. */
header .burger{
  display:none;background:none;border:none;cursor:pointer;
  width:var(--hm-tap);height:var(--hm-tap);
  align-items:center;justify-content:center;position:relative;z-index:2
}
header .burger:focus-visible{outline:2px solid var(--hm-ink);outline-offset:3px}
header .burger span,
header .burger span::before,
header .burger span::after{
  content:"";display:block;width:20px;height:2px;background:var(--hm-ink);position:relative
}
header .burger span::before{position:absolute;top:-6px}
header .burger span::after{position:absolute;top:6px}

/* ===== Mobiilivalikko ============================================== */

@media(max-width:780px){
  /* backdrop-filter tekisi headerista containing blockin fixed-lapselle:
     valikko asemoituisi headerin eika viewportin mukaan, ja suljettu valikko
     kasvattaisi sivun scrollWidthin. Mobiilissa blur pois ja tausta lahes
     peittavaksi. */
  header{-webkit-backdrop-filter:none;backdrop-filter:none;background:var(--hm-header-bg-solid)}

  header nav.links{
    position:fixed;inset:0 0 0 auto;width:min(80vw,300px);
    background:var(--hm-mint);border-left:1px solid var(--hm-ink);
    flex-direction:column;align-items:flex-start;justify-content:center;
    gap:14px;padding:32px;
    transform:translateX(100%);transition:transform 240ms var(--hm-ease);
    /* Kerrostus ja vieritys: pitka valikko on saatava vieritettya, ja sen on
       jaatava valikkonapin alle. Osalta sivuista molemmat puuttuivat. */
    overflow-y:auto;z-index:1
  }
  header nav.links.open{transform:none}
  header nav.links a{
    font-size:16px;padding:10px 4px;min-height:var(--hm-tap);
    display:flex;align-items:center
  }
  header nav.links a::after{display:none}
  header nav.links a:focus-visible{outline:2px solid var(--hm-ink);outline-offset:2px}
  header .nav-right .btn{display:none}
  header .burger{display:flex}
}

/* ===== Alapalkki =================================================== */

footer{
  background:var(--hm-ink);color:var(--hm-mint);
  border-top:none;margin-top:0;padding:42px 0 26px;
  font-family:var(--hm-font);line-height:1.45
}
footer .ftop{display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap}
/* Logo-PNG on tumma, joten se kaannetaan valkoiseksi tummaa pintaa vasten. */
footer .logo{height:var(--hm-logo-h);width:auto;display:block;filter:brightness(0) invert(1)}
footer p.t{font-size:14px;line-height:1.45;color:var(--hm-on-dark-soft);max-width:40ch}
footer .fnav{display:flex;gap:24px;flex-wrap:wrap;align-items:center}
footer .fnav a{font-size:14px;color:var(--hm-on-dark);text-decoration:none}
footer .fnav a:hover{color:#fff;text-decoration:underline;text-underline-offset:4px}
footer .fnav a:focus-visible{outline:2px solid var(--hm-mint);outline-offset:3px}
footer .fnav a.lang-switch{
  border:1px solid rgba(247,255,247,.5);border-radius:0;
  padding:6px 10px;font-size:12.5px;letter-spacing:.08em
}
footer .fnav a.lang-switch:hover{background:var(--hm-mint);color:var(--hm-ink);text-decoration:none}
footer .fbot{
  margin-top:24px;padding-top:18px;border-top:1px solid var(--hm-on-dark-line);
  display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;
  font-size:12px;color:rgba(247,255,247,.72)
}

/* ===== Vanhojen sivujen heron ylatila ==============================

   Ylapalkki oli ennen kiintea (position:fixed) ja se otettiin pois virrasta.
   Siksi 34 vanhaa sivua varaa sille tilan itse: .hero{padding:150px 0 86px},
   ja 22 sivulla lisaksi inline style="padding-top:150px". Nyt palkki on
   sticky ja vie tilansa normaalisti, joten se sama varaus jai paalle:
   mitattuna tasan +79,00 px tyhjaa otsikon ylapuolella, ja 390 px:n
   leveydella se nayttaa virheelta.

   Arvo tulee tokenista: 150px miinus ylapalkin todellinen korkeus, joka on
   --hm-header-min-h (78px) + 1px alaviiva = 79px. Nain vanha visuaalinen
   valistys sailyy eika luku ole toinen kovakoodattu 150:n rinnalle.

   Kaksi nimettya poikkeusta tamaan tiedoston omiin saantoihin:

   1) !important. Taulu ladataan sivun oman <style>-lohkon ylapuolelle, eli
      sivun tyyli voittaa migraation aikana. Tassa se ei riita: 22 sivulla
      arvo on inline-tyylissa, jota mikaan selektori ei voita. Yksi saanto
      korjaa 34 sivua; vaihtoehto olisi 56 erillista muutosta jotka
      hajoaisivat eri tahtiin.

   2) :not(:has(> .hero-content)) rajaa etusivut ulos. index-fi ja index-eng
      kayttavat samaa .hero-luokkaa kuvaherona, jonka pystyasettelu ei saa
      muuttua; vain niilla .hero:n suora lapsi kantaa .hero-content-luokan.
      Jos selain ei tue :has():ia, koko saanto hylataan ja sivu palaa
      nykyiseen ulkoasuun, eli degradaatio on turvallinen suuntaan.

   Vaihe 3 lisasi eteen body:not(.hm). Kompensaatio on vanhan ulkoasun korjaus,
   ja migroitu sivu maarittelee oman ylatilansa itse (.hm .page-hero). Ilman
   tata !important veisi voiton migroidun sivun omalta padding-arvolta. */

body:not(.hm) main > section.hero:not(:has(> .hero-content)){
  padding-top:calc(150px - var(--hm-header-min-h) - 1px) !important
}

/* ==========================================================================
   RUNKOSOPIMUS (vaihe 3)
   ==========================================================================

   Miten migroitu sivu merkitaan
   -----------------------------
   <body class="hm">. Ilman sita mikaan alla olevista saannoista ei osu, joten
   migroimaton sivu lataa saman taulun mutta nakee siita vain chromen. Vuoto
   vanhoihin sivuihin on siis rakenteellisesti mahdoton, ei sopimuksen varassa.

   Kerrostumissaanto (noudata tata, muuten alat kilpailla !importantilla)
   ---------------------------------------------------------------------
     perustyyli   .hm main <elementti>          esim. .hm main p      (0,2,1)
     komponentti  .hm main .<komponentti> <el>  esim. .hm main .cta p (0,3,1)
   Komponentti voittaa perustyylin luokkamaaralla, ei jarjestyksella eika
   painotuksella. Uusi komponentti kirjoitetaan samaan muotoon.

   Miksi main on mukana: chrome ja runko jakavat kaksi luokkanimea, .btn ja
   .shell. .hm .btn (0,2,0) voittaisi chromen saannon header .btn (0,1,1) ja
   veisi ylapalkin napin ulkoasun. main rajaa sen pois, koska header ja footer
   ovat mainin sisaruksia.

   Yksi tietoinen poikkeus: .hm .shell on sivunlaajuinen (ei main-rajausta).
   Sisaltoleveys on nimenomaan se mitta jonka chromen pitaa jakaa sisallon
   kanssa, jotta logo ja otsikko ovat samassa linjassa.

   ==========================================================================
   NIMITORMAYKSET, ratkaistu vaiheessa 3
   ==========================================================================
   Sama luokkanimi tarkoitti eri asiaa etusivulla ja vanhoilla sivuilla. Talla
   taululla on aina ETUSIVUN merkitys. Migroitava sivu nimeaa oman elementtinsa
   uudelleen; se on migraation ensimmainen tyovaihe, ei jalkisiivous.

     .cta        etusivu: kultainen full-bleed-kaista sivun lopussa.
                 vanha:   .hero-lohkon sisalla oleva painikerivi (26 osumaa).
                 -> painikerivi on .hero-actions. .cta on varattu kaistalle.

     .hero       etusivu: koko ruudun kuvahero (.hero-photo + .hero-content).
                 vanha:   tekstihero sivun ylalaidassa (36 osumaa).
                 -> tekstihero on .page-hero. .hero on VARATTU kuvaherolle eika
                    sita maaritella tassa ennen kuin etusivu migroidaan.

     .hero-photo etusivu: absoluuttinen taustakuva heron sisalla.
                 vanha:   420 px korkea kuvabanneri kuvatekstilla (case-sivut).
                 -> banneri on .media-hero. .hero-photo jaa etusivulle.

     .btn-line   etusivu: tumma taytetty nappi (chrome kayttaa tata).
                 vanha:   aariviivanappi (28 osumaa).
                 -> sisaltoalueella: tumma = .btn.dark, aariviiva = paljas .btn.
                    .btn-line jaa chromen aliakseksi, ala kayta sisallossa.

     .list .row .num .arrow
                 etusivu: numeroitu klikattava rivilista.
                 vanha:   sama asia nimella .svc-row.svc-link.has-cta + .num.
                 -> maaritelty tassa ETUSIVUN merkityksella. Vanha .svc-link
                    nimetaan .row:ksi ja .svc-cta:sta tulee .row-cta.
                    Maarittelyrivi (200px otsikkosarake) on eri komponentti:
                    .def-row.

     .lbl .tick .eyebrow-v1
                 kolme nimea samalle pienelle versaalitunnisteelle.
                 -> .eyebrow. Ametistivarinen variantti on .eyebrow.accent
                    (vanha .eyebrow-v1).

     .sub        etusivu: heron ingressi. .lead: tuotelohkon ingressi.
                 -> runko kayttaa nimea .lead. .sub jaa etusivun aliakseksi.

   ==========================================================================
   MIGRAATIOKARTTA: vanha nimi -> jaettu nimi
   ==========================================================================
   Kaytettavissa olevat luokat on laskettu kaikkien 36 sivun content.html:sta,
   joten talla listalla ei ole kuollutta koodia. Sivun omasta <style>-lohkosta
   poistetaan kaikki minka vastine on tassa taulussa.

     .hero (teksti)      -> .page-hero            .cta (painikerivi) -> .hero-actions
     .tick .lbl          -> .eyebrow              .eyebrow-v1        -> .eyebrow accent
     .sub                -> .lead                 .head              -> .section-head
     .btn-solid          -> .btn dark             .btn-line          -> .btn
     .story-text         -> .article-body         .cards-2           -> .card-list
     .svc-row            -> .def-row              .svc-link          -> .row (.list sisalla)
     .svc-cta            -> .row-cta              .plink             -> .link-more
     .mail               -> .btn dark (kaistassa) .tag               -> .eyebrow
     .cta-band           -> .cta (section-tasolle, full-bleed)
     .case-band          -> .case-section         .case-grid-v1      -> .case-grid
     .case-photo         -> .case-image           .case-copy-v1      -> .case-copy
     .hero-photo (case)  -> .media-hero           .contact           -> .cta-kaistan sisalto
     .rule .rule-soft    -> .rule
     .breadcrumbs .article-body .article-meta .card-list .card .faq-item .link-more
                         -> sama nimi, maaritelty tassa

   EI SIIRRY jaettuun tauluun (jaa sivun omaan lohkoon):
     .prod .pv .mock* .kpi* .chart .phone*  tuotesivujen CSS-wireframet ja niiden
                                            hover-vaihto oikeaan kuvakaappaukseen.
                                            Yhden sivutyypin kuvitusta, ei runkoa.
     .cur                                   heron vilkkuva kursori (kaytossa 0
                                            sivulla tanaan, poistokandidaatti).

   KUOLLUTTA KOODIA vanhoissa lohkoissa (ei yhtaan osumaa markupissa; ala
   siirra, poista sivun lohkosta):
     .band .pts .statement-band .products-band .todo-note .phone-wrap .phone

   EI OLE OLEMASSA koko sivustolla (tarkistettu: 0 osumaa 36 sivulla):
     <table>, <form>, <input>, <select>, <textarea>. Taulukko- ja
     lomakekomponentteja ei siis kirjoiteta etukateen; kun ensimmainen
     lomake tulee, se suunnitellaan silloin.
   ========================================================================== */

/* ===== Runko: perusta ============================================== */

/* scroll-behavior kuuluu vierittavalle elementille. Ks. nimetty poikkeus 3
   tiedoston alussa. */
html:has(> body.hm){scroll-behavior:smooth}

.hm{
  background:var(--hm-mint);color:var(--hm-ink);
  font-family:var(--hm-font);font-size:var(--hm-fs-body);line-height:1.45;
  -webkit-font-smoothing:antialiased;
  /* Bodyn oma marginaali. Alla oleva nollaus .hm * osuu vain jalkelaisiin, ja
     .hm ON body, joten ilman tata selaimen 8 px:n oletusmarginaali jaa
     voimaan. Mitattuna se tyonsi ylapalkin kohtaan y=8 ja jatti kaistat
     (.cta, .statement) 8 px irti molemmista reunoista, eli kaista ei ollut
     reunasta reunaan niin kuin runkosopimus lupaa. */
  margin:0;
  /* Pitaa off-canvas-mobiilivalikon aiheuttaman ylivuodon poissa. HUOM: tama
     on myos syy siihen, ettei documentElement.scrollWidth kelpaa ylivuodon
     mittariksi talla sivustolla. Mittaa elementtitasolla. */
  overflow-x:hidden
}
.hm *{box-sizing:border-box;margin:0;padding:0}
.hm img{display:block;max-width:100%}

/* Linkkien nollaus on JAETTU KAHTIA, ja tama on kerrostumissaannon tarkein
   yksittainen todiste. Ensimmainen versio oli .hm a{color:inherit}, ja se
   TYHJENSI ylapalkin "Ota yhteytta" -napin: selektori on (0,1,1) eli tasan
   yhta vahva kuin chromen header .btn, ja koska runko-osa on tiedostossa
   myohemmin, tasapelin ratkaisi jarjestys ja nappi peri tumman taustansa
   varin tekstivariksi. Musta teksti mustalla. Vari nollataan siksi vain
   mainin sisalla; text-decoration voi jaada sivunlaajuiseksi, koska chrome
   asettaa alleviivauksensa aina korkeammalla tarkkuudella (esim.
   footer .fnav a:hover). */
.hm a{text-decoration:none}
.hm main a{color:inherit}

/* Sisaltoleveys. Sivunlaajuinen tietoinen poikkeus: myos chrome kayttaa. */
.hm .shell{width:min(var(--hm-max),calc(100% - var(--hm-gutter)));margin:0 auto}
@media(max-width:680px){
  .hm .shell{width:min(var(--hm-max),calc(100% - var(--hm-gutter-sm)))}
}

/* ===== Runko: typografia =========================================== */

.hm main h1,.hm main h2,.hm main h3,.hm main h4{
  font-weight:800;letter-spacing:var(--hm-track-tight);line-height:.95
}
.hm main h1{font-size:var(--hm-fs-h1);line-height:.92}
.hm main h2{font-size:var(--hm-fs-h2)}
.hm main h3{font-size:var(--hm-fs-h3);line-height:1.1;letter-spacing:-.03em}
.hm main h4{font-size:var(--hm-fs-h4);line-height:1.25;letter-spacing:-.01em}
.hm main p{font-size:var(--hm-fs-body);line-height:1.55}

/* Pitkat suomen ja englannin yhdyssanat eivat mahdu 390 px:n otsikkoriville.
   Tavutus on ensisijainen katkaisu, anywhere on takuu ettei sana leikkaudu.

   summary on mukana tarkoituksella. Vanhoilla sivuilla se oli tassa saannossa,
   etusivun lohkossa ei (etusivulla ei ole haitareita). Pelkka etusivun saannon
   kopiointi olisi pudottanut sen pois juuri niilta sivuilta joilla se kantaa
   pisimmat sanat: UKK-sivujen kysymysotsikot. */
.hm main h1,.hm main h2,.hm main h3,.hm main h4,.hm main summary{
  -webkit-hyphens:auto;hyphens:auto;overflow-wrap:anywhere
}

/* Pieni versaalitunniste otsikon ylapuolella. */
.hm main .eyebrow{
  font-size:var(--hm-fs-eyebrow);font-weight:900;
  letter-spacing:var(--hm-track-eyebrow);text-transform:uppercase
}
/* Ametistivariantti (vanha .eyebrow-v1). Mitattu kontrasti mint-taustaa
   vasten 5,1:1, eli riittaa myos taman pistekoon tekstille. */
.hm main .eyebrow.accent{color:var(--hm-amethyst)}

/* Ingressi. Kaytetaan heron alla ja lohkon avauksena. */
.hm main .lead{
  font-size:var(--hm-fs-lead);line-height:1.35;color:var(--hm-ink-soft);
  max-width:52ch
}

/* Hiusviiva osioiden valissa (vanhat .rule ja .rule-soft yhdistettyna). */
.hm main .rule{height:1px;background:var(--hm-line);border:none}

/* ===== Runko: murupolku ============================================ */

.hm main .breadcrumbs{
  font-size:13px;color:var(--hm-ink-soft);
  display:flex;flex-wrap:wrap;align-items:center;gap:6px
}
.hm main .breadcrumbs a:hover{
  color:var(--hm-ink);text-decoration:underline;text-underline-offset:3px
}
.hm main .breadcrumbs a:focus-visible{
  outline:2px solid var(--hm-ink);outline-offset:2px
}
.hm main .breadcrumbs [aria-hidden]{color:var(--hm-line)}
.hm main .breadcrumbs [aria-current]{color:var(--hm-ink);font-weight:700}

/* ===== Runko: osiot ================================================ */

.hm main > section{padding:var(--hm-section-y) 0;position:relative}
@media(max-width:680px){
  .hm main > section{padding:var(--hm-section-y-sm) 0}
}

/* Osion otsikkorivi: otsikko vasemmalla, valinnainen huomautus oikealla. */
.hm main .section-head{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:20px;flex-wrap:wrap;margin-top:14px;margin-bottom:40px;
  padding-bottom:18px;border-bottom:1px solid var(--hm-line)
}
.hm main .section-head .note{
  font-size:var(--hm-fs-small);color:var(--hm-ink-soft);max-width:38ch
}

/* ===== Runko: sivun tekstihero ===================================== */

/* Ei .hero. Ks. nimitormaystaulukko: .hero on varattu etusivun kuvaherolle. */
.hm main > section.page-hero{
  padding:96px 0 76px;border-bottom:1px solid var(--hm-line)
}
@media(max-width:680px){
  .hm main > section.page-hero{padding:56px 0 48px}
}
/* max-width on MITATTU, ei arvattu. Sivuston pisin yhdyssana
   "ohjelmistopalveluistamme" (UKK ja eng-faq) vaatii 18,7ch riippumatta
   pistekoosta, koska ch skaalautuu fontin mukana. 17ch pakotti sen
   katkeamaan kesken sanan viela 1280 px:lla; 20ch mahtuu ja jattaa varaa. */
.hm main .page-hero h1{margin-top:18px;max-width:20ch}
.hm main .page-hero .lead{margin-top:26px}

/* Painikerivi. Vanhoilla sivuilla tama oli .cta, mika tarkoittaa etusivulla
   kokonaan eri asiaa (kultainen kaista). */
.hm main .hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:32px}

/* ===== Runko: painikkeet ja tekstilinkit =========================== */

/* main-rajaus on pakollinen: ilman sita tama veisi ylapalkin napin. */
.hm main .btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:48px;padding:0 20px;border:1px solid currentColor;border-radius:0;
  font-family:var(--hm-font);font-weight:800;font-size:var(--hm-fs-small);
  letter-spacing:0;background:transparent;color:var(--hm-ink);cursor:pointer;
  transition:transform .18s ease,background .18s ease,color .18s ease
}
.hm main .btn:hover{transform:translateY(-1px)}
.hm main .btn:focus-visible{outline:2px solid currentColor;outline-offset:3px}
.hm main .btn.dark{
  background:var(--hm-ink);color:var(--hm-mint);border-color:var(--hm-ink)
}

/* Alleviivattu tekstilinkki (vanhat .link-more ja .plink). */
.hm main .link-more{
  display:inline-block;font-size:var(--hm-fs-small);font-weight:700;
  border-bottom:1.5px solid currentColor;padding-bottom:2px
}
.hm main .link-more:hover{color:var(--hm-amethyst)}
.hm main .link-more:focus-visible{outline:2px solid currentColor;outline-offset:3px}

/* ===== Runko: artikkeliteksti ====================================== */

.hm main .article-body{max-width:var(--hm-measure)}
.hm main .article-body p{margin-top:14px;color:var(--hm-ink-soft)}
.hm main .article-body p:first-child{margin-top:0}
.hm main .article-body h2{
  font-size:clamp(24px,2.6vw,34px);letter-spacing:-.03em;line-height:1.05;
  margin:44px 0 4px
}
.hm main .article-body h2:first-of-type{margin-top:8px}
.hm main .article-body h3{
  font-size:clamp(18px,2vw,22px);letter-spacing:-.02em;line-height:1.15;
  margin:26px 0 2px
}
.hm main .article-body ul,.hm main .article-body ol{
  margin-top:14px;padding-left:20px;color:var(--hm-ink-soft);
  font-size:var(--hm-fs-small)
}
.hm main .article-body li{margin-top:6px}
.hm main .article-meta{
  font-size:13px;color:var(--hm-ink-soft);margin-top:12px
}

/* ===== Runko: rivilista (numero, otsikko, kuvaus, toiminto) ======== */

/* Etusivun merkitys. Vanha .svc-row.svc-link.has-cta nimetaan tahan. */
.hm main .list{border-top:1px solid var(--hm-line)}
.hm main .row{
  display:grid;grid-template-columns:56px 1.15fr .75fr minmax(0,auto);
  gap:18px;align-items:center;padding:20px 0;
  border-bottom:1px solid var(--hm-line);transition:background .15s ease
}
.hm main .row:hover{background:rgba(255,230,109,.28)}
.hm main .row:focus-visible{outline:2px solid var(--hm-amethyst);outline-offset:-2px}
.hm main .row .num{font-size:14px;font-weight:900;color:var(--hm-ink-soft)}
.hm main .row h3{margin:0}
.hm main .row p{font-size:var(--hm-fs-small);line-height:1.35;color:var(--hm-ink-soft)}
.hm main .row .arrow{text-align:right;font-size:20px}
/* Rivin oma toimintoteksti nuolen sijaan. */
.hm main .row .row-cta{
  font-size:13px;font-weight:700;justify-self:end;text-align:right;
  border-bottom:1.5px solid currentColor;padding-bottom:2px
}
@media(max-width:680px){
  /* Kuvaus omalle rivilleen, jotta otsikko ei katkea kesken sanan. */
  .hm main .row{grid-template-columns:44px 1fr;gap:4px 14px}
  .hm main .row > p{grid-column:1 / -1}
  .hm main .row .arrow{display:none}
  .hm main .row .row-cta{grid-column:1 / -1;justify-self:start;text-align:left;margin-top:10px}
}

/* Maarittelyrivi: kiintea otsikkosarake vasemmalla, selitys oikealla.
   Eri komponentti kuin .row, koska tama ei ole klikattava eika numeroitu. */
.hm main .def-row{
  display:grid;grid-template-columns:200px 1fr;gap:24px;padding:26px 0;
  border-bottom:1px solid var(--hm-line);align-items:start
}
.hm main .def-row:last-child{border-bottom:none}
.hm main .def-row p{font-size:var(--hm-fs-small);color:var(--hm-ink-soft);max-width:60ch}
@media(max-width:640px){
  .hm main .def-row{grid-template-columns:1fr;gap:8px}
}

/* ===== Runko: korttilista ========================================== */

/* auto-fit + minmax: sarakemaara seuraa sisaltoa ja leveytta, joten kortteja
   voi lisata ilman uutta media queryä. 1280 px = 3 saraketta, 390 px = 1. */
.hm main .card-list{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));
  gap:var(--hm-gap);margin-top:32px
}
.hm main .card{
  border:1px solid var(--hm-line);border-radius:0;padding:26px;
  display:flex;flex-direction:column
}
.hm main .card p{
  margin-top:10px;font-size:var(--hm-fs-small);color:var(--hm-ink-soft);flex:1
}
.hm main .card .link-more,.hm main .card .btn{margin-top:16px;align-self:flex-start}

/* ===== Runko: haitari (details/summary) ============================ */

.hm main .faq{border-top:1px solid var(--hm-line)}
.hm main .faq-item{border-bottom:1px solid var(--hm-line)}

/* Oletusmarkkeri piilotetaan KOLMELLA saannolla, koska yksikaan ei riita
   kaikkialla:
     display:flex             poistaa kolmion Chromessa ja Edgessa (summary ei
                              ole enaa list-item)
     list-style:none          Firefox
     ::-webkit-details-marker vanhat WebKit-versiot (Safari)
   ::marker on mukana varmistuksena. Jos jokin naista puuttuu, sivulla nakyy
   kaksi merkkia: selaimen oletuskolmio ja oma plus-merkki. */
.hm main .faq-item summary{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:22px 0;cursor:pointer;list-style:none;
  font-size:clamp(17px,1.5vw,21px);font-weight:800;letter-spacing:-.02em;
  line-height:1.25;transition:background .15s ease
}
.hm main .faq-item summary::marker{content:""}
.hm main .faq-item summary::-webkit-details-marker{display:none}
.hm main .faq-item summary:hover{background:rgba(255,230,109,.28)}
.hm main .faq-item summary:focus-visible{outline:2px solid var(--hm-ink);outline-offset:-2px}
/* Tilamerkki. flex:0 0 auto pitaa merkin kokonaisena kun otsikko on pitka. */
.hm main .faq-item summary::after{
  content:"+";flex:0 0 auto;font-size:26px;font-weight:400;line-height:1;
  color:var(--hm-amethyst)
}
.hm main .faq-item[open] summary::after{content:"\2013"}
.hm main .faq-item > p{
  padding-bottom:22px;max-width:var(--hm-measure);color:var(--hm-ink-soft)
}

/* ===== Runko: kuvabanneri (case-sivun hero) ======================== */

/* Vanha nimi oli .hero-photo, joka tarkoittaa etusivulla eri asiaa.
   Kuva on <img>, ei CSS-taustakuva, jotta silla on oma alt-teksti. */
.hm main .media-hero{
  position:relative;min-height:420px;display:flex;align-items:flex-end;
  overflow:hidden;margin-top:22px
}
.hm main .media-hero > img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center;z-index:0
}
/* Tummennus tekstin alla. Kerrostuminen on nimetty: kuva 0, tummennus 1,
   kuvateksti 2. */
.hm main .media-hero::before{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(0deg,rgba(39,45,45,.88) 0%,rgba(39,45,45,.15) 60%)
}
.hm main .media-hero .cap{
  position:relative;z-index:2;color:#fff;padding:22px 26px;
  font-size:13px;max-width:60ch
}

/* ===== Runko: case-lohko (kuva ja teksti rinnakkain) =============== */

.hm main > section.case-section{padding:0}
.hm main .case-grid{display:grid;grid-template-columns:.92fr 1.08fr;align-items:stretch}
.hm main .case-image{position:relative;min-height:420px;background:var(--hm-gold)}
.hm main .case-image img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hm main .case-copy{
  display:flex;flex-direction:column;justify-content:center;padding:58px 54px;
  border-top:1px solid var(--hm-line);border-bottom:1px solid var(--hm-line)
}
.hm main .case-copy h2{margin:12px 0 18px;max-width:14ch}
.hm main .case-copy p{margin-bottom:24px;color:var(--hm-ink-soft);max-width:52ch}
@media(max-width:980px){
  .hm main .case-grid{grid-template-columns:1fr}
  .hm main .case-image{min-height:0;aspect-ratio:4/5}
}
@media(max-width:680px){
  .hm main .case-copy{padding:40px 24px}
}

/* ===== Runko: kaistat ==============================================

   Kaista on full-bleed: tausta reunasta reunaan, sisalto .shellin sisalla.
   Vanhoilla sivuilla kaistat olivat .shellin SISALLA ja pyoristettyja
   (border-radius:6px). Migraatiossa kaista nostetaan section-tasolle:

     <section class="cta"><div class="shell"> ... </div></section>

   Pyoristys jaa pois: etusivun muotokieli on suora reuna. */

/* Ametisti: vahva brandivaite. */
.hm main .statement{background:var(--hm-amethyst);color:#fff;padding:68px 0}
.hm main .statement p{
  max-width:1100px;font-size:clamp(30px,4.4vw,64px);line-height:1.0;
  letter-spacing:-.05em;font-weight:800
}

/* Kulta: huomiokaista, tyypillisesti sivun paattava yhteydenottokehotus.
   HUOM: .cta on kaista, EI painikerivi. Painikerivi on .hero-actions. */
.hm main .cta{background:var(--hm-gold);padding:64px 0}
.hm main .cta h2{margin:8px 0 20px;max-width:22ch}
.hm main .cta p{
  font-size:var(--hm-fs-lead);line-height:1.4;max-width:46ch;margin-bottom:28px
}

/* ===== Runko: tuotelohko =========================================== */

/* Kaksi saraketta: kuvitus ja teksti, joka toinen kaannettyna. Lohkon SISUS
   (CSS-wireframet .mock ja .phone) jaa sivun omaan lohkoon: se on yhden
   sivutyypin kuvitusta, ei runkoa. */
.hm main .prod{
  display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;
  padding:46px 0;border-bottom:1px solid var(--hm-line)
}
.hm main .prod:last-child{border-bottom:none}
.hm main .prod.flip .pv{order:2}
.hm main .prod h3{margin:10px 0 14px}
.hm main .prod p{color:var(--hm-ink-soft);max-width:46ch}
.hm main .prod ul{list-style:none;margin-top:18px;display:flex;flex-direction:column;gap:8px}
.hm main .prod ul li{font-size:var(--hm-fs-small);color:var(--hm-ink-soft);padding-left:18px;position:relative}
.hm main .prod ul li::before{content:"\2013";position:absolute;left:0;color:var(--hm-ink)}
@media(max-width:760px){
  .hm main .prod{grid-template-columns:1fr;gap:24px}
  .hm main .prod.flip .pv{order:0}
}

/* ===== Reveal ======================================================
   Nimetty poikkeus scoping-saantoon: luokka on sisaltomarkupissa, mutta
   .in-tilan asettaa jaetun footer-partiaalin IntersectionObserver. */

.reveal{opacity:0;transform:translateY(16px);transition:opacity 600ms var(--hm-ease),transform 600ms var(--hm-ease)}
.reveal.in{opacity:1;transform:none}
.reveal[data-d="1"]{transition-delay:90ms}
.reveal[data-d="2"]{transition-delay:180ms}
.reveal[data-d="3"]{transition-delay:270ms}

@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  header .btn:hover{transform:none}
  header nav.links{transition:none}
  header nav.links a::after{transition:none}
  /* Runko (vaihe 3) */
  html:has(> body.hm){scroll-behavior:auto}
  .hm main .btn:hover{transform:none}
  .hm main .row,.hm main .faq-item summary{transition:none}
}

/* ==========================================================================
   Runko: kaksi valia jotka loytyivat vasta oikeilla sivuilla
   ==========================================================================

   Nama eivat muuta yhtaan yllaolevaa saantoa, vaan taydentavat kaksi kohtaa
   jotka jaivat auki kunnes runko-osaa kaytettiin sivulla jolla on murupolku
   tai h3-tasoinen case-otsikko. Bodyn oma marginaali kuului samaan loytoon,
   mutta se asuu perusta-lohkossa .hm, koska se on saman elementin ominaisuus
   eika saa jaada kahteen paikkaan.
   ========================================================================== */

/* Murupolun pystyvali. Runko maarittelee murupolun typografian mutta ei sen
   paikkaa, ja .hm * nollaa marginit, joten murupolku oli kiinni seuraavassa
   eyebrow-rivissa. 18 px ei ole uusi luku: se on sama vali jolla h1 erottuu
   eyebrow'sta (.page-hero h1{margin-top:18px}) ja sama jota jokainen sivu
   kaytti omassa poistetussa lohkossaan (.breadcrumbs{margin:0 0 18px}).
   Rajaus .page-heron sisalle pitaa saannon siella missa se on mitattu. */
.hm main .page-hero .breadcrumbs{margin-bottom:18px}

/* Case-lohkon otsikko voi olla h3 eika h2, kun lohko on osion h2:n alla
   (tyomme). Runko maarittelee valit vain h2:lle, joten h3-versiossa tunniste,
   otsikko ja leipateksti osuivat kiinni toisiinsa. */
.hm main .case-copy h3{margin:12px 0 18px}