/* Open Sans paikallisesti (SIL OFL 1.1, Google Fonts v44).
   EI ladata fonts.googleapis.comista: preconnect+CSS lahettaisi kavijan IP:n,
   user agentin ja referrerin Googlelle ennen kuin sivusta nakyy mitaan, ja
   tietosuojaseloste sanoo ettei tietoja luovuteta saannonmukaisesti muille.
   Tiedostot ovat variable-fontteja (wght 300-800) -> yksi tiedosto per subset.
   Paivitys: lataa uudet woff2:t Google Fontsista ja korvaa assets/fonts/. */

@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 300 800;
    font-stretch: 100%;
    font-display: swap;
    src: url('fonts/open-sans-var-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 300 800;
    font-stretch: 100%;
    font-display: swap;
    src: url('fonts/open-sans-var-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Farizon-ländäri — itsenäinen staattinen sivu.
   EI riipu WP-teemasta: tämä menee omaan docrootiin (httpdocs_landari), joten
   värit ja mitat on toistettava tässä. Arvot ovat teeman theme.jsonista, jotta
   ilme vastaa varsinaista sivustoa kun se avataan. */

:root {
    --ink: #12161D;
    --dark-gray: #333D4F;
    --light-gray: #BCC7D6;
    --soft-gray: #AAB6C6;
    --evolution-blue: #000F9F;
    /* Refreshing Orange, teeman `secondary`. Brandiohje: tunnusvareja
       kaytetaan vain PIENINA korosteina, ei hallitsevana pintana. */
    --secondary: #FF6432;
    --black: #151515;
    --neutral-gray: #51596A;
    /* Osiotausta ink:n ja dark-grayn valissa (35 % dark-grayta). EI teeman
       paletista vaan naiden kahden interpolaatio — kaytetaan VAIN osion
       taustana, ei koskaan tekstissa. Tarve: `.takuu` oli samaa inkia kuin
       alapuolinen `.kokemus` ja osiot sulautuivat, mutta dark-gray olisi
       sulauttanut sen ylapuoliseen `.edut`-osioon. Kontrastit: light-gray
       9,12:1 ja valkoinen 15,59:1. */
    --ink-light: #1E242E;
    --cta: linear-gradient(90deg, #FFC85C 0%, #FF6432 100%);
    /* Hieman sivuston `alignwidea` (1640px) kapeampi: yhden sivun landari
       hengittaa paremmin, kun reunoille jaa ilmaa. 1400px on teeman OMA aiempi
       sisaltoleveys ennen 6.8.2026 visuaaleja, eli ei mielivaltainen luku.
       Kaikki osiot kayttavat tata; tietosuojaselosteen leipateksti rajataan
       lisaksi omalla `ch`-arvollaan. Leveys on yksi arvo — muuta tasta. */
    --sisalto: 1400px;
    /* Lomakkeen leveys = varsinaisen sivuston lomakkeiden leveys. Sivustolla
       `.nf-form-cont` on teeman `contentSize` eli 1200px (mitattu
       /yhteystiedot/-sivulta), keskitettyna sisaltokaistan sisaan. */
    --lomake: 1200px;
}

*, *::before, *::after { box-sizing: border-box; }

/* Kuvasliderin kaistale seuraavasta kuvasta jaa tarkoituksella sailion
   ulkopuolelle → sivun oikea laita leikkaa sen. `clip` eika `hidden`, jottei
   sivusta tule vieritettavaa saliota.
   ⚠️ Sekä `html` ETTÄ `body`: pelkka `body`-saanto ei riittanyt, vaan sivu
   vieri yha 949px oikealle (mitattu 1728px ikkunassa). */
html, body { overflow-x: clip; }

body {
    margin: 0;
    background: var(--ink);
    color: #fff;
    font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 17px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

h1, h2 { font-weight: 300; line-height: 1.15; margin: 0 0 20px; }
h1 { font-size: clamp(2rem, 5vw, 3.5rem); }
h2 { font-size: clamp(1.6rem, 3.5vw, 2.2rem); }
p { margin: 0 0 20px; }
a { color: inherit; }

img { max-inline-size: 100%; block-size: auto; display: block; }

/* `<picture>` on vain kuoritagi kokovaihtoehdoille — se ei saa osallistua
   asetteluun. Ilman tata se on inline-elementti: herossa se toisi ylimaaraisen
   rivilaatikon absoluuttisesti asemoidun kuvan ympari, ja figuren sisalla se
   palauttaisi kuvan alle baseline-raon, jonka `line-height: 0` juuri poistaa. */
picture { display: contents; }

/* Sama kaava kuin sivuston `.alignwide`: 25px reunus kummallakin puolella,
   ja sisaltolaatikko enintaan 1640px. Reunus on `inline-size`-laskennassa eika
   pehmusteena — muuten sisalto jaisi 1590px:aan ja olisi 50px sivustoa kapeampi. */
.rajaus {
    inline-size: calc(100% - 50px);
    max-inline-size: var(--sisalto);
    margin-inline: auto;
}

/* Näppäimistökäyttäjän ohituslinkki — piilossa kunnes se saa fokuksen. */
.ohita {
    position: absolute;
    inset-block-start: -100px;
    inset-inline-start: 25px;
    z-index: 10;
    padding: 12px 20px;
    background: #fff;
    color: var(--ink);
    text-decoration: none;
}

.ohita:focus { inset-block-start: 12px; }

/* Farizon vasemmalle, YES-EU oikealle — sama sijoittelu kuin varsinaisen
   sivuston ylapalkissa, jossa YES-EU:n tunnus on viimeisena solunaan. */
.ylapalkki {
    position: absolute;
    inset-block-start: 0;
    inset-inline: 0;
    z-index: 2;
    padding: 25px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

/* Tunnus on omissa vareissaan (harmaa + turkoosi) eika valkoisennettuna, ja se
   osuu valokuvan vaaleimpaan kohtaan (oikea ylakulma, jossa peiton vaakagradientti
   on jo haipynyt nollaan). Sita varten tassa oli aiemmin tumma laatikko, mutta
   asiakas pyysi 10.9.2026 tunnuksen ilman laatikkoa.
   Tunnus on nyt taysin ilman omaa taustaa tai varjoa (asiakkaan linjaus 10.9.):
   ensin kokeiltiin varjoa laatikon korvaajana, mutta sekin hylattiin. Ainoa
   erottumista tukeva keino on siis `.hero__peitto`n ylalaidan gradientti, joka
   nostettiin samalla 0,45 → 0,58 — se tummentaa koko ylalaitaa tasaisesti eika
   piirra mitaan tunnuksen ymparille.
   ⚠️ Kontrasti pohjaan on tallaisenaan 2,7:1 (mitattu hero-kuvan pikseleista
   peiton kanssa). WCAG ei vaadi logotyypeilta kontrastia, joten tama on
   saantojen mukaan kunnossa, mutta jos erottuvuutta halutaan lisaa, ainoa
   jaljella oleva keino on tunnuksen valkoinen versio — sita ei ole toimitettu. */
.ylapalkki__yeseu {
    display: inline-flex;
}

/* Asiakkaan pyynto 10.9.2026 (ilta): tunnus isommaksi. 34px → 46px.
   ⚠️ Korotus vain 380px:sta ylospain, ja syy on mitattu. Ylapalkki on
   yksirivinen flex: Farizon 150px + vali 20px + pehmusteet 50px = 220px, ja
   YES-EU vie 46px korkeana 145px (kuvasuhde 3,147) eli rivi tarvitsee 365px.
   34px:n versio tarvitsi vain 327px. Ilman porrasta 360px:n puhelin olisi siis
   mennyt rikki juuri talla muutoksella — mitattu renderoity kuvasuhde putosi
   3,147 → 3,096 (360px) ja → 2,669 (320px). */
.ylapalkki__yeseu img { block-size: 34px; inline-size: auto; }

@media (min-width: 380px) {
    .ylapalkki__yeseu img { block-size: 46px; }
}

/* Turvaverkko kapeimmille naytoille: flex saa puristaa tunnusta, mutta
   `inline-size: auto` + kiintea `block-size` litistaisi sen (320px:lla kumpikin
   tunnus venyi 15 % vaaraan suhteeseen — tama oli rikki jo ennen korotusta).
   `contain` pitaa kuvasuhteen ja jattaa ylimaaraisen tilan tyhjaksi. */
.ylapalkki .logo, .ylapalkki__yeseu img { object-fit: contain; }

.logo { block-size: 40px; inline-size: auto; }

/* ---- Yläkuva ---- */

/* ---- Alkunakyma: hero + tiedotepalkki samaan ruutuun ---- */

/* Desktopilla molempien pitaa nakya ilman vieritysta. Pystyflex 100svh:n
   korkeudella ja hero `flex: 1` hoitaa taman ilman maagisia lukuja: palkki
   ottaa oman korkeutensa (72px leveilla naytoilla, 115px 782-1000px:n valilla)
   ja hero saa loput. `calc(100svh - 72px)` olisi vaarin heti kun palkki
   rivittyy toisin.
   ⚠️ `min-block-size` eika `block-size`: jos ruutu on niin matala ettei heron
   oma sisalto mahdu, kaare kasvaa sen mukana eika tekstia leikata.
   Kapealla naytolla (<782px) tata ei tehda: siella palkki on kaksirivinen ja
   selvasti korkeampi, jolloin hero kutistuisi liikaa. */
@media (min-width: 782px) {
    .alkunakyma {
        display: flex;
        flex-direction: column;
        min-block-size: 100svh;
    }

    /* `min-block-size: 0` kumoaa heron oman 100svh:n taman kaareen sisalla —
       muuten hero veisi koko ruudun ja palkki tyontyisi sen alle. */
    .alkunakyma > .hero {
        flex: 1 1 auto;
        min-block-size: 0;
    }
}

.hero {
    position: relative;
    /* Koko ruutu: 74svh (28.8.) -> 84svh (9.9., uusi hero-kuva) -> 88svh
       (10.9., alanuolen kaista) -> 100svh (10.9.).

       `svh` EIKA `vh`: `vh` on mobiilissa SUURI viewport eli mitta ilman
       selaimen osoitepalkkia. Sen kanssa heron alalaita — ja siina oleva
       alanuoli — jaisi puhelimessa palkin alle juuri silloin kun palkki on
       nakyvissa. `svh` mittaa nakyvan alueen, joten nuoli on aina ruudulla.

       Ylarajaa ei enaa ole: se esti heroa kasvamasta kohtuuttomaksi isolla
       naytolla, mutta 100svh on aina tasan yksi ruutu. Alarajaa ei myoskaan
       tarvita, koska sisalto kasvattaa heroa itse jos ruutu on matalampi.

       ⚠️ Tama muuttaa rajauksen suuntaa: kuva on 1,91:1 eli useimmilla
       naytoilla LEVEAMPI kuin hero, jolloin cover skaalaa sen KORKEUDEN mukaan
       eika pystyrajausta synny lainkaan (laskettu 12 ikkunakoolla). Autot ja
       teksti pysyvat samalla etaisyydella heron ALAREUNASTA kuin ennenkin —
       molemmat on ankkuroitu sinne — ja lisatila menee taivaalle otsikon ylle.

       Vanha perustelu "74 %, jotta lomakkeen kentta jaa taitteen ylapuolelle"
       kuoli jo 28.8., kun kuvaslideri tuli heron ja lomakkeen valiin. */
    min-block-size: 100svh;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
}

.hero__kuva {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
}

/* Peitto pitää tekstin luettavana valokuvan päällä. KAKSI gradienttia, koska
   yksi ei riitä: pystysuunta tummentaa ylä- ja alalaidan, ja vaakasuunta
   vasemmalta pitää otsikon ja ingressin luettavina myös vaaleaa taivasta ja
   auton kylkeä vasten. Sama kuvio kuin sivuston omassa `.dg-hero`ssa. */
.hero__peitto {
    position: absolute;
    inset: 0;
    background:
        /* 1. Vaaka: pitää otsikon luettavana leveällä näytöllä, jossa teksti on
              vasemmassa palstassa ja valokuva jatkuu oikealle. */
        linear-gradient(90deg, rgb(18 22 29 / 0.78) 0%, rgb(18 22 29 / 0.45) 50%, rgb(18 22 29 / 0) 90%),
        /* 2. Ylälaita: yläpalkin logot valokuvan päällä. */
        linear-gradient(180deg, rgb(18 22 29 / 0.58) 0, rgb(18 22 29 / 0) 200px),
        /* 3. Alalaita PIKSELEINÄ, ei prosentteina. Tämä on tarkoituksellista:
              tekstilohko on ankkuroitu heron alareunaan kiinteillä pehmusteilla,
              joten sen etäisyys alareunasta on sama joka leveydellä (365-392px),
              kun taas prosentti tarkoittaa eri kohtaa eri korkuisessa herossa.
              Prosenttiliuku joko riitti mobiilissa tai tummensi desktopin autoja
              — px-ankkurointi osuu molemmissa juuri tekstin taakse.

              MIKSI tarvitaan: kapealla näytöllä cover skaalaa kuvan KORKEUDEN
              mukaan, jolloin autot asettuvat aina pystysuunnan keskelle eli
              suoraan otsikon taakse, eikä object-position auta (pystysuunnassa
              ei ole rajattavaa). Mitattuna ilman tätä 390px: otsikon kontrasti
              1,53:1 ja 15,6 % pinta-alasta alle 3:1 — vaatimus isolle tekstille
              on 3:1, eli vaatimus ei täyttynyt. */
        linear-gradient(0deg, rgb(18 22 29 / 0.85) 0, rgb(18 22 29 / 0.72) 320px, rgb(18 22 29 / 0.18) 470px, rgb(18 22 29 / 0) 580px);
}

/* Yläpehmuste varaa tilan yläpalkin logolle: kapealla näytöllä sisältö on
   korkeampi kuin hero, jolloin se valuu ylöspäin ja otsikko törmäisi logoon
   (mitattu 390px: hero 979px, sisältö sitä korkeampi). */
.hero__sisalto {
    position: relative;
    max-inline-size: var(--sisalto);
    margin-inline: auto;
    inline-size: calc(100% - 50px);
    /* Alapehmuste 95px varaa kaistan alanuolelle (25px pohjasta + 48px korkea).
       Sama arvo joka leveydella tarkoituksella: nuoli on tekstin ALLA aina kun
       ingressin oikea reuna ulottuu keskilinjan yli, mika laskettuna tapahtuu
       aina alle ~1240px:n leveydella. Yksi arvo on turvallisempi kuin
       katkaisukohta, joka olisi osunut vaaraan paikkaan 768-1240px:n valilla. */
    padding: 110px 0 95px;
}

/* Rajaus autojen mukaan, molemmissa suunnissa eri syystä.

   VAAKA 48 %: kapealla näytöllä cover rajaa leveyttä rajusti (390x700 näyttää
   vain 29 % kuvan leveydestä). Autot ovat kuvassa x 30,5-66,3 % (mitattu
   kirkkaista pikseleistä horisontin alapuolelta), joten keskipiste 48 % pitää
   molemmat näkyvissä myös puhelimessa. Vanha arvo 78 % oli edellisen hero-kuvan
   rajaus ja jättäisi tästä kuvasta näkyviin pelkän asfaltin.

   PYSTY 100 % eli kuvan alareunaan: leveällä näytöllä cover rajaa pystysuunnassa,
   ja keskitettynä autot osuivat suoraan otsikon taakse — mitattu kontrasti oli
   pahimmillaan 3,36:1 V7E:n valkoista kylkeä vasten (isolle tekstille vaade 3:1,
   eli se läpäisi niukasti mutta teksti oli sotkuisen näköinen). Alareunaan
   ankkuroituna autot nousevat tekstin yläpuolelle ja otsikko asettuu asfaltille.
   Rajaus syö taivasta ylhäältä, ei asfalttia alhaalta — juuri toisin päin kuin
   `center`. */
.hero__kuva { object-position: 48% 100%; }

/* Erittäin leveä ja matala ikkuna: alareunaan ankkurointi lakkaa toimimasta kun
   rajattavaa on paljon. Rajaus syödään ylhäältä, joten autot nousevat ylälaitaan
   ja lopulta ulos kuvasta.

   🔑 **Ratkaisevaa on ikkunan kuvasuhde, ei leveys.** Kun hero oli katkaistu
   880px:ään (ennen 10.9.), leveys kelpasi mittariksi, koska korkeus oli vakio.
   Nyt hero on 100svh, joten sama 2560px:n näyttö rajautuu eri tavalla 1080px:n
   ja 1440px:n korkeudella. Pystyrajausta syntyy vasta kun ikkuna on kuvaa
   leveämpi (1,91:1), ja autot alkavat leikkautua vasta suhteessa **3,15:1**.
   Vanhat leveysportaat (2350/3200px) olisivat siksi 10.9. jälkeen sekä
   turhia (2560x1440 ei rajaudu pystysuunnassa lainkaan) että liian myöhään:
   laskettuna 2300x700 olisi leikannut autojen yläreunan -4,4 %:iin, koska
   se jää 2350px:n alle.

   Autojen yläreuna heron korkeudesta 16 ikkunakoolla laskettuna: tavallisilla
   suhteilla 39,2 % (ei pystyrajausta lainkaan), 1728x846 35,1 %, ja tämän
   säännön alueella 24,0-28,7 % — eli autot pysyvät kokonaan näkyvissä ja
   selvästi otsikon yläpuolella (alareuna enintään 56 %). */
@media (min-aspect-ratio: 3/1) { .hero__kuva { object-position: 48% 55%; } }

/* Otsikon alaotsikko. H1:n oma alamarginaali on 20px, joka jaa alaotsikon ja
   otsikon valiin; ingressille tulee oma 15px. */
.hero__alaotsikko {
    margin: 0 0 15px;
    /* 56ch. Teksti vaihtui 11.9.2026 pidemmaksi ("Suunniteltu alusta alkaen
       sahkoiseen ammattiajoon."), ja se vaatii yhdelle riville mitattuna
       488px — 46ch antoi 484px eli **jai neljan pikselin paahan** ja rivittyi
       kahdelle riville. 56ch = 589px, joten yksi rivi mahtuu myos jos sanamuoto
       viela hivenen pitenee. Kapealla naytolla sailio on tata kapeampi, joten
       arvo ei vaikuta mobiiliin.
       ℹ️ 1ch on tassa ja ingressissa sama 10,52px (molemmat 1.15rem), joten
       naiden ch-lukuja voi vertailla suoraan. */
    max-inline-size: 56ch;
    font-size: 1.15rem;
    font-weight: 700;
    color: #fff;
}

/* 74ch (778px). Nostettu 54ch:sta 11.9.2026: H1 on desktopilla 799px levea,
   joten 568px:n ingressi jatti tekstilohkoon kapean hannan otsikon alle.
   74ch tuo ingressin lahes H1:n levyiseksi, jolloin hero lukee yhtena
   palstana. 74 merkkia on typografisen 45-75 suosituksen ylapaassa, mika on
   lyhyelle hero-kappaleelle hyvaksyttavaa — ei leipatekstileveys.
   Kapeammilla naytoilla sailio rajaa taman joka tapauksessa. */
.hero .ingressi { max-inline-size: 74ch; font-size: 1.15rem; color: #fff; }

/* Kappale eika pelkka <a>, jotta nappi saa oman rivinsa ilman lisadiveja.
   Ingressin ja napin vali on suurempi kuin tekstien keskinainen vali. */
.hero__napit { margin-block: 30px 0; }

/* Otsikon rivipituus rajataan kuten ingressinkin. Tama ei ole vain typografiaa:
   ilman rajausta otsikko ulottui koko 1400px:n levyiseksi yhdelle riville ja sen
   oikea paa osui valokuvan vaaleaan taivaaseen, jossa vaakapeitto on jo haipynyt
   nollaan → kontrasti 1,87:1 (mitattu pikseleista, vaade isolle tekstille 3:1).
   Vasemmalla peitto on 0,78 ja teksti pysyy tummalla. */
.hero h1 { max-inline-size: 25ch; }

/* ---- Heron alanuoli ----

   Vieritysvihje heron alareunassa. Se on tarpeen, koska sliderin kuvien tausta
   on #0F141A eli kaytannossa sama kuin sivun --ink: taitteessa nakyva 100px:n
   kaista seuraavaa osiota on desktopilla pelkkaa tummaa (autot alkavat vasta
   109px kuvan ylareunasta), joten kavijalle ei nay etta alla on lisaa. Ennen
   10.9. siina oli lehdistokuvan maisemaa, joka hoiti saman tehtavan.

   Nuoli on sama `nuoli-oikea-vaalea.svg` kuin sliderissa, kaannettyna 90
   astetta — omaa tiedostoa ei tarvita ja nuolikieli pysyy samana. `mask` eika
   `background`, jotta vari tulee CSS:sta ja hover/focus voi vaihtaa sen.

   Sijainti on `.hero`n alareunassa eika sisaltolohkossa: leveasti nuoli osuu
   ingressin oikealle puolelle (ingressi paattyy x=732, keskilinja 864) ja
   kapealla naytolla tekstin alle, jonne varattiin tila `padding-block-end`illa. */
.hero__alanuoli {
    position: absolute;
    inset-block-end: 25px;
    inset-inline-start: 50%;
    transform: translateX(-50%);
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    inline-size: 48px;
    block-size: 48px;
    color: #fff;
    /* Vaimeneva pomppusarja: ensimmainen pudotus 18px, sitten 11px ja 6px.
       Iso alku huomataan, vaimeneminen estaa sita jaamasta haritsemaan.

       Kertaalleen (ei `infinite`) ja kesto 0,5s viive + 3,2s = 3,7s: WCAG 2.2.2
       vaatii pysaytyskeinon liikkeelle joka alkaa itsestaan ja kestaa yli 5s.
       Viive antaa hero-kuvan latautua ensin, jolloin liike osuu hetkeen jolloin
       katse on jo sivulla. Nuoli jaa sarjan jalkeen paikalleen nakyviin.
       Hoverilla sarja toistuu — kayttajan aloittama liike ei kuulu saannon
       piiriin.

       Alaspain `ease-in` (kiihtyy kuin pudotessa), ylospain `ease-out`
       (hidastuu nousun huipulla). Pelkka `ease-in-out` tekisi liikkeesta
       tasapaksun keinunnan. */
    animation: dg-alanuoli-pomppu 3.2s 0.5s both;
}

.hero__alanuoli::before {
    content: "";
    inline-size: 22px;
    block-size: 22px;
    background: currentColor;
    -webkit-mask: url("nuoli-oikea-vaalea.svg") no-repeat center / contain;
    mask: url("nuoli-oikea-vaalea.svg") no-repeat center / contain;
    rotate: 90deg;
}

.hero__alanuoli:hover {
    color: var(--light-gray);
    animation: dg-alanuoli-pomppu 3.2s both;
}

.hero__alanuoli:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 4px;
}

@keyframes dg-alanuoli-pomppu {
    0%   { transform: translate(-50%, 0);    animation-timing-function: cubic-bezier(.5, 0, .75, 0); }
    14%  { transform: translate(-50%, 18px); animation-timing-function: cubic-bezier(.25, 1, .5, 1); }
    30%  { transform: translate(-50%, 0);    animation-timing-function: cubic-bezier(.5, 0, .75, 0); }
    42%  { transform: translate(-50%, 11px); animation-timing-function: cubic-bezier(.25, 1, .5, 1); }
    56%  { transform: translate(-50%, 0);    animation-timing-function: cubic-bezier(.5, 0, .75, 0); }
    66%  { transform: translate(-50%, 6px);  animation-timing-function: cubic-bezier(.25, 1, .5, 1); }
    78%, 100% { transform: translate(-50%, 0); }
}

/* Kohde ei saa jaada kiinni ikkunan ylareunaan kun nuolta klikataan. */
.kuvaslider-osio { scroll-margin-block-start: 25px; }

/* ---- Kuvaslideri ----

   Sama slideri kuin varsinaisen sivuston etusivulla (teeman `.dg-kuvaslider`,
   inc/gutenberg/css/common.css + inc/peek-slider.php). Slick ja jQuery ovat
   omina kopioinaan `assets/`-kansiossa, koska tama sivu ei lataa WP:ta.

   MITAT ovat teemasta sellaisinaan, jotta ilme vastaa sivustoa:
     · kuvasuhde 1641/715 (desktop) / 16:9 (<782px)
     · kaistale seuraavasta kuvasta 44px sailion ULKOPUOLELLA
     · laskuri "1/2" 73px kuvan ylalaidasta / 54px oikeasta, 18px bold
     · nuoli #000F9F 48x48, kuvan reunoissa, pystysuunnassa kuvan keskella

   VARIT on kaannetty: sivustolla slideri on vaalealla pohjalla (tumma teksti,
   mustat mobiilinuolet, tumma aktiivipiste), tassa se on tummalla — teksti,
   nuolet ja aktiivipiste ovat siksi valkoisia. Mitat eivat muutu. */

.kuvaslider-osio {
    padding-block: 75px;
}

/* Sailiokysely nuolen pystysijaintiin: nuoli keskitetaan KUVAAN, jonka korkeus
   riippuu sailion leveydesta. Sama ratkaisu kuin teemassa — container-type on
   wrapperissa eika Slickin juurielementissa, jotta Slickin omat mittaukset ja
   radan nakyva ylivuoto (kaistale) eivat joudu containment-saantojen alle. */
.dg-kuvaslider-wrapper {
    container-type: inline-size;
}

.dg-peek-slider {
    position: relative;
}

/* Ennen Slickin alustusta: nayta vain ensimmainen slide (ei pystylistaa). */
.dg-peek-slider__track {
    display: flex;
    overflow: hidden;
}

.dg-peek-slider__track > .dg-peek-slider__item {
    flex: 0 0 100%;
}

.dg-peek-slider__track.slick-initialized {
    display: block;
    overflow: visible;
}

.dg-peek-slider__track.slick-initialized > .dg-peek-slider__item {
    flex: none;
}

.dg-peek-slider__track .slick-slide {
    height: auto;
}

/* Kuva = koko sisaltoleveys ja kaistale seuraavasta tulee sailion ULKOPUOLELTA.
   Slick laskee slidejen leveyden .slick-listin leveydesta, joten lista
   levennetaan gapin verran negatiivisella marginaalilla → slide = leveys+44 ja
   kuva sen sisalla tarkalleen sisaltoleveys. `overflow: visible` paljastaa
   seuraavan kuvan listan ulkopuolella; body { overflow-x: clip } leikkaa sen
   sivun oikeassa laidassa.
   ⚠️ Ala kayta slidessa marginia gapiin: slick ei huomioi sita
   leveyslaskennassa ja kuvat luisuvat pois linjasta slide-valein. */
.dg-kuvaslider .slick-list {
    margin-inline-end: -44px;
    overflow: visible;
}

.dg-kuvaslider .dg-peek-slider__track .slick-slide {
    padding-inline-end: 44px;
}

/* Kuvasuhde lukitaan, jottei eri mittasuhteiset kuvat hyppayta sliderin
   korkeutta slidea vaihdettaessa. */
.dg-kuvaslide__figure {
    margin: 0;
    line-height: 0; /* poistaa inline-kuvan baseline-raon figuren alalaidasta */
}

.dg-kuvaslide__image {
    display: block;
    inline-size: 100%;
    aspect-ratio: 1641 / 715;
    object-fit: cover;
}

/* Tekstit kuvan alle KAHTEEN palstaan: otsikko vasemmalle, kuvaus oikealle.
   Palstat alkavat samalta korkeudelta (align-items: start), muuten lyhyempi
   palsta keskittyisi pidempaan nahden ja otsikko alkaisi eri kohdasta. */
.dg-kuvaslide__sisalto {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 75px;
    align-items: start;
    margin-block-start: 50px;
}

/* Mallin nimi on H3 osion H2:n ("Farizon-mallisto") alla, joten sen on oltava
   PIENEMPI kuin osion otsikko (40px). Ennen 10.9. slide oli sivun ainoa otsikko
   ja sai teeman 50px:n display-koon; nyt sama koko olisi kaantanyt hierarkian
   nurin — mitattuna malli 50px vs. osio 40px. */
.dg-kuvaslide__otsikko {
    margin: 0 0 12px;
    font-size: clamp(1.4rem, 2.6vw, 32px);
    font-weight: 300;
    line-height: 1.15;
}

.dg-kuvaslide__teksti > p {
    margin: 0;
}

/* Laskuri kuvan paalla.
   ⚠️ Sivustolla tama on valkoista Boldia ILMAN taustaa. Tassa tekstin alla on
   tiivis tumma pohja: alkuperaisissa valokuvissa laskurin kohta oli vaaleaa
   taivasta ja kontrasti mitattuna 1,27:1 (vaade isolle tekstille 3:1).
   10.9.2026 kuvat vaihtuivat tummapohjaisiksi studiokuviksi, jolloin pohjaa ei
   enaa tarvita kontrastin takia — se jaa siksi, etta kuvan vaihtaminen ei saa
   rikkoa laskurin luettavuutta. Ala poista sita "sivuston mukaiseksi". */
.dg-peek-slider__counter {
    position: absolute;
    inset-block-start: 73px;
    inset-inline-end: 54px;
    z-index: 2;
    margin: 0;
    padding: 4px 10px;
    background: rgb(18 22 29 / 0.6);
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.2;
}

/* Nuolet: yhteiset ominaisuudet. Sijainti ja ilme vaihtuvat leveyden mukaan,
   ks. media queryt alla. */
.dg-slick-arrow {
    position: absolute;
    z-index: 2;
    padding: 0;
    cursor: pointer;
}

.dg-slick-arrow::before {
    content: "";
    position: absolute;
    inset: 0;
    background-repeat: no-repeat;
    background-position: center;
}

/* --- Nuolet DESKTOPILLA: sininen nelio kuvan reunassa --- */
@media (min-width: 992px) {
    .dg-kuvaslider .dg-slick-arrow {
        inline-size: 64px;
        block-size: 64px;
        border: 0;
        background: var(--evolution-blue);
        /* Nuoli KUVAN pystykeskelle. Slide sisaltaa kuvan JA tekstit, joten
           `50%` osuisi tekstien puolelle. Kuvan korkeus = sailion leveys x
           715/1641, ja `cqw` on 1 % sailion leveydesta → puolet siita. */
        inset-block-start: calc(50cqw * 715 / 1641);
        transform: translateY(-50%);
    }

    .dg-kuvaslider .dg-slick-arrow::before {
        background-image: url("nuoli-oikea-vaalea.svg");
        background-size: auto 22px;
    }

    /* Nuolet ovat radan lapsia ja rata on tarkalleen kuvan levyinen, joten `0`
       asettaisi nuolen tasan kuvan reunaan — silloin se lukee kuvan osana eika
       nappina. Nuoli tyonnetaan siksi reunan YLI: se rikkoo kuvan reunaviivan
       ja erottuu painikkeeksi.
       🔑 Ylitys on 25px eika puolet napista (32px), koska `.rajaus`in ulkopuolelle
       jaa aina tasan 25px (`inline-size: calc(100% - 50px)`). Isommalla arvolla
       nuolen oikea reuna leikkautuisi kapeilla desktop-leveyksilla —
       `html, body { overflow-x: clip }` ei tee vierityspalkkia vaan katkaisee. */
    .dg-kuvaslider .dg-slick-arrow--next { inset-inline-start: auto; inset-inline-end: -25px; }
    .dg-kuvaslider .dg-slick-arrow--prev { inset-inline-end: auto; inset-inline-start: 0; }

    /* Vasemmalle nuolelle ei ole omaa tiedostoa → sama peilataan. */
    .dg-kuvaslider .dg-slick-arrow--prev::before { transform: scaleX(-1); }

    .dg-kuvaslider .dg-slick-arrow:hover,
    .dg-kuvaslider .dg-slick-arrow:focus-visible {
        filter: brightness(1.25);
    }

    /* Ensimmaisella slidella nakyy vain seuraava-nuoli → kayttokelvoton nuoli
       piilotetaan kokonaan.
       ⚠️ `!important` on pakollinen: slick kirjoittaa nuolille inline-tyylin
       `display: block`, joka voittaa tavallisen saannon. */
    .dg-kuvaslider .dg-slick-arrow.slick-disabled { display: none !important; }

    /* Desktopilla indikaattori on laskuri, ei pisteet. Slick renderoi pisteet
       joka tapauksessa (kapealla naytolla ne ovat kaytossa), joten ne
       piilotetaan tassa. `!important` samasta syysta kuin nuolilla. */
    .dg-kuvaslider .slick-dots { display: none !important; }
}

/* --- Nuolet KAPEALLA NAYTOLLA: chevronit kuvan ALLE ---
   Kuva on koko ruudun levyinen, joten kuvan paalla nuolet peittaisivat sita. */
@media (max-width: 991px) {
    /* Tila nuoliriville.
       ⚠️ Pehmuste on pakko olla siina elementissa johon Slick on ALUSTETTU:
       slick antaa sille luokan `slick-slider` = `position: relative`, joten se
       on nuolten containing block ja `inset-block-end: 0` mittaa sen padding
       boxista. Ulompaan `.dg-kuvaslideriin` laitettu pehmuste ei vaikuta. */
    .dg-kuvaslider .dg-peek-slider__track {
        padding-block-end: 73px;
    }

    .dg-kuvaslider .dg-slick-arrow {
        inset-block-start: auto;
        inset-block-end: 0;
        transform: none;
        /* 48x48 kosketusalue (WCAG 2.5.8 vaatii 24x24), ikoni piirtyy 26px
           korkuisena chevronina ilman laatikkoa. */
        inline-size: 48px;
        block-size: 48px;
        border: 0;
        background: transparent;
    }

    /* ⚠️ `!important` on pakollinen molempiin suuntiin. Kun desktop-saanto
       piilottaa pisteet, slick huomaa ne piilotetuiksi ja jQueryn `.show()`
       kirjoittaa niille inline-tyylin `display: block`. Inline voittaa tavallisen
       saannon, jolloin pisteet muuttuvat lohkolistaksi ja asettuvat allekkain
       heti kun ikkuna kavennetaan alle 992px:n. Todennettu:
       `dots.getAttribute("style")` === "display: block;". */
    .dg-kuvaslider .slick-dots { display: flex !important; }

    .dg-kuvaslider .dg-slick-arrow::before { background-size: auto 26px; }
    .dg-kuvaslider .dg-slick-arrow--next::before { background-image: url("nuoli-oikea.svg"); }
    .dg-kuvaslider .dg-slick-arrow--prev::before { background-image: url("nuoli-vasen.svg"); }

    /* Napit vierekkain keskelle: 2 x 48px + 10px vali = 106px → 53px keskiviivasta. */
    .dg-kuvaslider .dg-slick-arrow--prev {
        inset-inline-start: 50%;
        inset-inline-end: auto;
        margin-inline-start: -53px;
    }

    .dg-kuvaslider .dg-slick-arrow--next {
        inset-inline-end: 50%;
        inset-inline-start: auto;
        margin-inline-end: -53px;
    }

    /* Ilman laatikkoa hoverille ei ole taustaa → palaute ikonin lapinakyvyydella. */
    .dg-kuvaslider .dg-slick-arrow:hover::before { opacity: 0.6; }

    /* Laatikon mukana katosi myos nappaimistofokuksen ainoa merkki → oma rengas. */
    .dg-kuvaslider .dg-slick-arrow:focus-visible {
        outline: 2px solid #fff;
        outline-offset: 2px;
    }

    .dg-kuvaslider .dg-slick-arrow.slick-disabled { opacity: 0.35; cursor: default; }

    /* Laskuri kuvan sisapuolelle 25px reunasta (desktopin 54px olisi kapealla
       naytolla suhteettoman iso sisennys). */
    .dg-kuvaslider .dg-peek-slider__counter {
        inset-block-start: 25px;
        inset-inline-end: 25px;
    }
}

/* Pisteet: viivamaiset, ei palloja — sama ilme kuin sivustolla. Sivustolla
   aktiivinen piste on tumma vaalealla pohjalla; tassa se on kaannetty. */
.slick-dots {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    list-style: none;
    margin: 25px 0 0;
    padding: 0;
}

/* ⚠️ Pakollinen pari ylla olevalle `display: flex`ille: `[hidden]`-attribuutin
   `display: none` tulee selaimen omasta tyylitiedostosta ja HAVIAA aina
   sivuston omalle saannolle. Ilman tata JS:n `el.hidden = true` ei piilota
   pisterivia lainkaan — mitattuna se jai 9px korkeaksi. */
.slick-dots[hidden] { display: none; }

.slick-dots li { display: block; margin: 0; line-height: 0; }

.slick-dots li button {
    inline-size: 40px;
    block-size: 4px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: rgb(255 255 255 / 0.35);
    font-size: 0;
    cursor: pointer;
    transition: background-color 0.2s ease;
    position: relative;
}

/* WCAG 2.5.8: viiva on tarkoituksella 4px paksu, joten kosketusalue
   laajennetaan pseudoelementilla napin ULKOPUOLELLE → 40x24 px. */
.slick-dots li button::before {
    content: "";
    position: absolute;
    inset-block: -10px;
    inset-inline: 0;
}

.slick-dots li.slick-active button { background: #fff; }

@media (max-width: 781px) {
    .kuvaslider-osio { padding-block: 50px; }

    /* Mobiilissa desktopin 2,3:1 tarkoittaisi 390px:n ruudulla vain 148px
       korkeaa kuvaa → 16:9 pitaa kuvan luettavana. Sama arvo kuin teemassa. */
    .dg-kuvaslide__image { aspect-ratio: 16 / 9; }

    /* Palstat allekkain, otsikko ensin. */
    .dg-kuvaslide__sisalto {
        grid-template-columns: 1fr;
        gap: 25px;
        margin-block-start: 25px;
    }
}

/* Liikkeenvahennys: slick liu'uttaa slidet CSS-siirtymalla (`useCSS`), joten
   liikkeen saa pois radan siirtymasta. Slidet vaihtuvat yha, mutta hyppayksella.
   `!important`, koska slick kirjoittaa siirtyman radan inline-tyyliin. */
@media (prefers-reduced-motion: reduce) {
    .slick-track { transition: none !important; }
    .hero__alanuoli { animation: none; }
}

/* Pehmea vieritys vain jos kavija ei ole pyytanyt vahemman liiketta. Koskee
   myos "Siirry sisaltoon" -ohituslinkkia, mika on toivottua. */
@media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }
}

/* ---- Osioiden yhteiset ----

   Osiorytmi tummalla sivulla: --ink ja --dark-gray vuorottelevat, jotta
   perakkaiset osiot erottuvat ilman viivoja. Pehmusteet ovat samat kuin
   kuvasliderilla (75 / 50px), jotta pystyrytmi pysyy. */
.osion-otsikko {
    margin: 0 0 40px;
    font-size: clamp(1.5rem, 3vw, 40px);
    font-weight: 300;
    line-height: 1.15;
}

/* Nappi teeman nappikielesta (inc/gutenberg/css/buttons.css): 16px Bold,
   padding 17px 30px, suorat kulmat, nuoli oletuksena.

   ⚠️ Reunaviiva EIKA oranssi liukuvari: teeman linjauksen mukaan liukuvari on
   "nakyman ainoa paateko", ja tassa se on varattu lomakkeen lahetysnapille.
   Reunaviiva on visuaalien toistuvin nappityyppi (47 esiintymaa XD:ssa) ja
   aina 1,5px light-gray sekä vaalealla etta tummalla taustalla. */
.dg-nappi {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 17px 30px;
    /* Lapinakyva reunus perustyylissa, jotta variantit ovat SAMAN korkuisia:
       reunaviivanappi oli 55px ja liukuvarinappi 52px, koska 1,5px reunus
       lisasi 3px korkeutta vain toiseen. Mitattu vierekkain herossa. */
    border: 1.5px solid transparent;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.125;
    text-decoration: none;
    cursor: pointer;
}

/* Nuoli maskina ja `currentColor`illa → se seuraa napin tekstivaria kuten
   teemassa. Sama tiedosto kuin sliderin nuolissa, joten uutta assettia ei
   tarvita. Mitat ikonin omasta natiivikoosta (13,178 x 13,491 / 16px). */
.dg-nappi::after {
    content: "";
    flex: none;
    inline-size: 0.825em;
    block-size: 0.845em;
    background-color: currentColor;
    -webkit-mask: url("nuoli-oikea-vaalea.svg") no-repeat center / contain;
    mask: url("nuoli-oikea-vaalea.svg") no-repeat center / contain;
}

.dg-nappi--reuna {
    border-color: var(--light-gray);
    background: transparent;
    color: #fff;
}

.dg-nappi--reuna:hover,
.dg-nappi--reuna:focus-visible {
    background: var(--light-gray);
    color: var(--ink);
}

/* CTA-liukuvarinappi, sama kuin teeman `is-style-cta-gradient`: liukuvari
   pohjana ja MUSTA teksti, ei valkoista. Nuoli seuraa `currentColor`ia, joten
   se muuttuu mustaksi itsestaan — kuten teemassa vaaleilla napeilla.

   Kontrasti mitattu: musta #151515 liukuvarin vaalealla paalla 11,89:1 ja
   tummalla paalla 6,19:1, eli AA tayttyy koko napin leveydelta. */
.dg-nappi--cta {
    background: var(--cta);
    color: var(--black);
}

.dg-nappi--cta:hover,
.dg-nappi--cta:focus-visible { filter: brightness(1.07); }


/* Napit rinnakkain, rivittyvat kapealla naytolla. */
.hero__napit {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px 30px;
}

/* ---- Numeronostot heron alla ---- */

/* Ilme on tarkoituksella typografinen eika koristeellinen: isot luvut, pienet
   harvennetut versaaliselitteet ja ohuet pystyviivat. Brandiohje sallii
   tunnusvarit vain pienina korosteina, joten ainoa varillinen elementti on
   kaistan ylareunan hiusviiva CTA-liukuvarilla — yksi korostus, ei nelja. */
/* ---- Tiedotekaista ---- */

/* Heron ja nostopalkin valissa. Pohja `--ink` eika `--dark-gray`, jotta kaista
   ei sulaudu alapuoliseen nostopalkkiin — nain nakyviin jaa kaksi eri kaistaa
   eika yksi levea. Korostus on VASEN gradienttireuna eika taustavari: kaista on
   huomautus, ei kehotus, eika se saa kilpailla heron CTA-napin kanssa. */
/* Oma matala palkkinsa heron ja nostopalkin valissa.
   Tausta on sivun tummin `--ink`: palkki ei kilpaile huomiosta heron eika
   nostopalkin kanssa, ja se erottuu silti alapuolisesta `--dark-gray`
   -nostopalkista. Rajan ylospain hoitaa gradienttireuna ja pieni tekstikoko —
   palkki luetaan heron jatkeeksi, mika on tarkoituskin. */
.tiedote {
    background: var(--ink);
    padding-block: 16px;
    scroll-margin-block-start: 0;
}

/* Kaksi palstaa desktopilla, jolloin palkki jaa kahden rivin korkuiseksi eika
   kasva allekkaisilla kappaleilla nelinkertaiseksi. Myyntitieto saa enemman
   tilaa (1,15fr), koska se on pidempi ja tarkeampi. */
.tiedote__sisalto {
    position: relative;
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: 10px 34px;
    align-items: center;
    padding-inline-start: 24px;
}

/* Gradientti reunaviivana pseudo-elementilla: se venyy itsestaan sisallon
   korkuiseksi, toisin kuin kiinteakorkuinen koriste. */
.tiedote__sisalto::before {
    content: "";
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    inline-size: 3px;
    background: var(--cta);
}

/* Palkin tekstit ovat leipatekstia pienemmat: tama on ilmoituskaista, ei
   sivun sisaltoa, ja pieni koko pitaa palkin matalana. */
.tiedote__paa {
    margin: 0;
    color: #fff;
    font-size: 0.82rem;
    font-weight: 700;
}

/* Viela hitusen pienempi kuin myyntitieto: kokoero erottaa huomautuksen
   varsinaisesta uutisesta ilman omaa varia tai kehysta. */
.tiedote__lisa {
    margin: 0;
    color: var(--light-gray);
    font-size: 0.76rem;
}

.nostopalkki {
    position: relative;
    background: var(--dark-gray);
    padding-block: 55px;
    scroll-margin-block-start: 0;
}

.nostopalkki::before {
    content: "";
    position: absolute;
    inset-block-start: 0;
    inset-inline: 0;
    block-size: 2px;
    background: var(--cta);
}

/* Yhta leveat sarakkeet + keskitetty sisalto. Aiemmin sarakkeet olivat
   sisallon levyisia ja teksti vasemmalla, jolloin lyhyet nostot ("8 v")
   jattivat oikeaan reunaan tyhjaa. Keskitys jakaa tyhjan tilan sarakkeen
   molemmille puolille, jolloin kaista on tasapainossa ja erotinviivat
   asettuvat tasavalein. */
.nostopalkki__lista {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    /* Kolme riviä: etuliite, luku, selite. Nostot perivat namat subgridilla,
       jolloin numerot ovat samalla linjalla vaikka "Jopa" on vain kahdessa. */
    grid-template-rows: repeat(3, auto);
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Pystyviiva erottimena, ei reunuksena: ensimmaiselta se jaa pois, jolloin
   viivoja on kolme neljan sarakkeen valissa. Pehmuste sailyy myos
   ensimmaisella ja viimeisella, jotta kaikki nelja ovat keskitetty samalla
   tavalla omaan sarakkeeseensa. */
.nostopalkki__nosto {
    display: grid;
    grid-row: span 3;
    grid-template-rows: subgrid;
    justify-items: center;
    gap: 8px;
    padding-inline: 25px;
    border-inline-start: 1px solid rgb(188 199 214 / 0.22);
    text-align: center;
}

/* Ilman subgrid-tukea nostot latautuvat normaalina pinona — numerot voivat
   jaada eri korkeuksille, mutta sisalto pysyy oikein. */
@supports not (grid-template-rows: subgrid) {
    .nostopalkki__nosto { display: flex; flex-direction: column; align-items: center; }
}

/* Etuliite ("Jopa") numeron ylapuolella pienella. Ei versaalia, jotta se
   erottuu alapuolisesta selitteesta: etuliite on sana, selite on luokitus. */
.nostopalkki__etuliite {
    color: var(--soft-gray);
    font-size: 0.8rem;
    line-height: 1.2;
}

.nostopalkki__nosto:first-child { border-inline-start: 0; }

.nostopalkki__luku {
    font-size: clamp(1.5rem, 2.8vw, 2.35rem);
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

/* Versaali + harvennus tekee lyhyesta selitteesta labelin eika lauseen. */
.nostopalkki__selite {
    color: var(--soft-gray);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

/* ---- Tekstiosio (yksi otsikko + leipateksti) ---- */

/* Vastavarit: vaalea osio tumman sivun keskella. Erottaa Geely-osion omaksi
   lohkokseen nostokaistan ja malliston valissa.

   Leipateksti `--neutral-gray` (7,03:1) ja otsikko `--ink` (18,13:1) —
   molemmat lapaisevat AA:n reilusti. */
.tekstiosio {
    background: #fff;
    color: var(--ink);
    padding-block: 75px;
}

/* Tunnussarake on sisallon levyinen (`auto`), jolloin teksti alkaa heti sen
   vierelta. 50/50-jaolla tunnus jai yksin 662px:n puoliskoon ja tekstin ja
   tunnuksen valiin syntyi iso tyhja alue. */
/* Molemmat sarakkeet sisallon levyisia ja pari keskitettyna: `auto 1fr` jatti
   leveaan tekstisarakkeeseen tyhjaa oikealle, jolloin tunnus + teksti nayttivat
   valuvan vasempaan laitaan. */
.tekstiosio__sisalto {
    display: grid;
    grid-template-columns: auto minmax(0, 65ch);
    justify-content: center;
    gap: 50px 60px;
    align-items: center;
}

/* Tunnus maskina → se seuraa osion tekstivaria. Sama tekniikka kuin korttien
   ikoneissa ja nappien nuolessa. Kuvasuhde 49,41:52 lukitaan, koska maskilla
   ei ole omaa luontaista kokoa. */
.tekstiosio__tunnus {
    inline-size: clamp(86px, 10.5vw, 143px);
    aspect-ratio: 49.41 / 52;
    background-color: currentColor;
    -webkit-mask: url("farizon-merkki-white.svg") no-repeat center / contain;
    mask: url("farizon-merkki-white.svg") no-repeat center / contain;
}

.tekstiosio__teksti .osion-otsikko { margin-block-end: 20px; }

.tekstiosio p { margin: 0; max-inline-size: 65ch; color: var(--neutral-gray); }

/* ---- Mallikohtaiset tiedot sliderissa ---- */

/* Vasen palsta: otsikko, kuvaus, hinta ja nappi allekkain. Oikea palsta on
   specsilista. Ruudukko on `.dg-kuvaslide__sisalto`ssa jo olemassa. */
.dg-kuvaslide__palsta { display: flex; flex-direction: column; align-items: flex-start; }

/* Hinta Refreshing Orangella: se on ostopaatoksen tarkein yksittainen luku ja
   antaa mallikortille katseen kiinnityspisteen. Kaytto on brandiohjeen
   mukainen — pieni korostus, ei pinta.

   ⚠️ Kontrasti mitattu: 6,15:1 sliderin `--ink`-pohjalla eli lapaisee AA:n
   tavalliselle tekstille. Samalla oranssilla `--dark-gray`-pohjalla se olisi
   vain 3,71:1, joten hintaa EI saa siirtaa harmaalle kaistalle sellaisenaan. */
.dg-kuvaslide__hinta {
    margin: 25px 0 0;
    font-size: 1.15rem;
    font-weight: 700;
}

/* Hinta CTA-liukuvarilla. Kolme asiaa on pakko tehda oikein:

   1. `fit-content`: liukuvari levittyy elementin laatikon yli. Ilman tata
      laatikko olisi koko palstan levyinen ja lyhyt teksti nayttaisi lahes
      yksivariselta, koska se osuisi vain liukuvarin alkupaahan.
   2. Oma elementti: alarivi ("sis. alv.") on samassa kappaleessa, ja
      `background-clip: text` tekisi myos siita lapinakyvan.
   3. 🔴 `@supports`-vahti: ilman tukea teksti olisi LAPINAKYVA eli hinta
      katoaisi kokonaan. Oletuksena on siksi tasainen oranssi, ja liukuvari
      otetaan kayttoon vain jos selain osaa leikata taustan tekstiin.

   Kontrasti ink-pohjalla: vaalea paa 11,8:1, tumma paa 6,15:1 — molemmat
   lapaisevat AA:n tavalliselle tekstille. */
/* "Alkaen" omalle rivilleen pienena, luku isolla — sama jako kuin
   nostokaistan etuliitteessa. */
.dg-kuvaslide__hintaetuliite {
    display: block;
    color: var(--soft-gray);
    font-size: 0.8rem;
    font-weight: 400;
    line-height: 1.2;
}

.dg-kuvaslide__hintaluku {
    display: block;
    inline-size: fit-content;
    margin-block-start: 2px;
    color: var(--secondary);
    font-size: 1.6rem;
    line-height: 1.1;
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .dg-kuvaslide__hintaluku {
        background: var(--cta);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
    }
}

/* Alarivi pysyy harmaana: korostus kuuluu luvulle, ei alv-huomautukselle. */
.dg-kuvaslide__hintalisa {
    display: block;
    margin-block-start: 4px;
    color: var(--light-gray);
    font-size: 0.85rem;
    font-weight: 400;
}

.dg-kuvaslide__palsta .dg-nappi { margin-block-start: 25px; }

.dg-kuvaslide__specsit {
    margin: 0;
    padding: 0;
    list-style: none;
    color: var(--light-gray);
}

/* Viiva erottaa specsit toisistaan ilman pallukoita — sama kevyt ilme kuin
   muualla sivulla. Viimeiselta rivilta viiva pois. */
.dg-kuvaslide__specsit li {
    padding-block: 12px;
    border-block-end: 1px solid rgb(188 199 214 / 0.25);
}

.dg-kuvaslide__specsit li:first-child { padding-block-start: 0; }
.dg-kuvaslide__specsit li:last-child { border-block-end: 0; }

/* ---- Edut ---- */

.edut {
    background: var(--dark-gray);
    padding-block: 75px;
}

.edut__lista {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 50px 75px;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Ruksi vasemmalle, teksti oikealle. `start`-linjaus pitaa merkin otsikon
   ylareunassa myos silloin kun teksti on monirivinen. */
.edut__etu {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 20px;
    align-items: start;
}

/* Liukuvarillinen ruksi: vari tulee TAUSTASTA ja muoto maskista, joten
   `--cta`-liukuvari nakyy merkin lapi. Samaa tekniikkaa kayttavat korttien
   ikonit ja nappien nuoli — erona vain se etta tassa tausta on liukuvari
   eika `currentColor`.

   Merkki on koristeellinen: otsikko kertoo asian, joten `aria-hidden`. */
.edut__merkki {
    display: block;
    inline-size: 44px;
    block-size: 44px;
    margin-block-start: -4px;
    background: var(--cta);
    -webkit-mask: url("ikoni-check.svg") no-repeat center / contain;
    mask: url("ikoni-check.svg") no-repeat center / contain;
}

.edut__etu h3 {
    margin: 0 0 12px;
    font-size: 1.3rem;
    font-weight: 700;
}

.edut__etu p { margin: 0; color: var(--light-gray); }

/* ---- Takuu ---- */

.takuu {
    background: var(--ink-light);
    padding-block: 75px;
}

/* Kaksi palstaa: teksti vasemmalle, takuuluvut oikealle. Yhdessa palstassa
   osio jai 70ch:n levyiseksi ja oikea puoli tyhjaksi — luvut ansaitsevat oman
   sarakkeensa ja tayttavat sisaltoleveyden. Sama jako kuin sliderin sisallossa. */
.takuu__sisalto {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px 75px;
    align-items: start;
}

.takuu__teksti p { margin: 0; color: var(--light-gray); }

.takuu__lista {
    display: flex;
    flex-direction: column;
    gap: 30px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.takuu__lista li {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-block-end: 30px;
    border-block-end: 1px solid rgb(188 199 214 / 0.25);
}

.takuu__lista li:last-child { padding-block-end: 0; border-block-end: 0; }

.takuu__luku {
    font-size: clamp(1.5rem, 3vw, 2.2rem);
    font-weight: 700;
    line-height: 1.1;
}

.takuu__selite { color: var(--light-gray); font-size: 0.95rem; }

/* ---- Kapea naytto: uudet osiot allekkain ---- */

@media (max-width: 781px) {
    .tiedote { padding-block: 14px 20px; }
    /* Kapealla naytolla palstat allekkain: 1,15fr/1fr jakaisi 340px:n rivin
       kahdeksi n. 150px:n palstaksi, joihin lauseet eivat mahdu. */
    .tiedote__sisalto { grid-template-columns: 1fr; gap: 8px; padding-inline-start: 18px; }
    .nostopalkki { padding-block: 35px; }
    .nostopalkki__lista { grid-template-columns: repeat(2, 1fr); gap: 28px 25px; }
    /* Kapealla naytolla pystyviiva jaisi vain sarakkeiden valiin ja nayttaisi
       satunnaiselta → erottimet pois, pelkka vali riittaa. */
    .nostopalkki__nosto { padding-inline: 0; border-inline-start: 0; }
    .tekstiosio, .edut, .takuu { padding-block: 50px; }
    .tekstiosio__sisalto { grid-template-columns: 1fr; gap: 30px; }
    .edut__lista { grid-template-columns: 1fr; gap: 30px; }
    .edut__merkki { inline-size: 36px; block-size: 36px; }
    .takuu__sisalto { grid-template-columns: 1fr; gap: 30px; }
    .osion-otsikko { margin-block-end: 25px; }
}

/* ---- Vuosien kokemus + Suomen kartta ---- */

/* Sama --ink kuin takuulla yllapuolella: osiot erottuvat 150px:n pehmusteilla
   ja kartta toimii omana visuaalisena ankkurinaan, joten varinvaihtoa ei
   tarvita. Uutiskirje alapuolella palaa --dark-grayhin. */
.kokemus { padding-block: 75px; }

/* Sarakkeet yhta leveiksi ja kartta keskitettyna omaan puoliskoonsa. Aiemmin
   oikea sarake oli `auto` eli tarkalleen kartan levyinen, jolloin kartta
   liimautui sisaltoalueen oikeaan reunaan. */
.kokemus__sisalto {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px 75px;
    align-items: center;
}

.kokemus__teksti > p { margin: 0 0 40px; max-inline-size: 60ch; color: var(--light-gray); }

.kokemus__luvut {
    display: grid;
    gap: 25px;
    margin: 0 0 40px;
    padding: 0;
    list-style: none;
}

.kokemus__luvut li { display: flex; flex-direction: column; gap: 4px; }

.kokemus__luku {
    font-size: clamp(1.4rem, 2.6vw, 2rem);
    font-weight: 700;
    line-height: 1;
}

.kokemus__selite { color: var(--light-gray); max-inline-size: 45ch; }

/* Palveluketju erottuu leipatekstista harvennuksella, ei omalla varilla —
   tunnusvarit ovat varattu korosteisiin. */
/* Paatelma 87 %:n luvun ja palveluketjun valissa. Siirtyi 10.9. kartan
   kuvatekstista tahan, jotta se seuraa suoraan sita vaitetta johon se
   vastaa. */
.kokemus__paatelma {
    margin: 0 auto 30px;
    max-inline-size: 50ch;
    color: #fff;
    font-weight: 700;
}

/* Koko palveluvalikoima yhdella rivilla kun tilaa on — se oli Tiinan pyynnon
   pointti. Keskitetty ja isompi kuin aiemmin, koska se ei ole enaa
   sivuhuomautus vaan osa nostoa. */
.kokemus__palvelut {
    margin: 0 auto;
    max-inline-size: 90ch;
    color: var(--soft-gray);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1.9;
}

.kokemus__kartta {
    margin: 0;
    justify-self: center;
    text-align: center;
}

/* Alaraja 260px eika 200px: kartan paikkakuntanimet ovat SVG-tekstia ja
   skaalautuvat kuvan mukana, joten liian pieni kartta tekee niista
   lukukelvottomia. 15px:n SVG-teksti on 260px:n leveydella noin 13px. */
.kokemus__kartta img {
    display: block;
    margin-inline: auto;
    inline-size: clamp(260px, 22vw, 300px);
    block-size: auto;
}

.kokemus__kartta figcaption {
    margin: 25px auto 0;
    max-inline-size: 30ch;
    color: var(--light-gray);
    font-size: 0.9rem;
}

/* ⚠️ Oma media-lohko, EI sivun yhteinen: `.kokemus`-saannot on kirjoitettu
   tiedostossa yhteisen 781px-lohkon JALKEEN, joten siella oleva override ei
   tehoaisi — sama spesifisyys, myohempi voittaa. Ilman tata kartta kutistui
   mobiilissa 107px:iin ja paikkakuntanimet olivat lukukelvottomia. */
@media (max-width: 781px) {
    .kokemus { padding-block: 50px; }
    .kokemus__sisalto { grid-template-columns: 1fr; gap: 35px; }
    .kokemus__nosto { margin-block-start: 40px; padding-block-start: 30px; }
    .kokemus__kartta img { inline-size: min(280px, 100%); }
}

/* Kartan alapuolinen nosto: 87 %:n luku ja koko palveluvalikoima omalla
   rivillaan, jolloin ne saavat sisaltoleveyden eivatka jaa 60ch:n palstaan.
   Ylaviiva erottaa noston kartan ja tekstin muodostamasta ruudukosta. */
.kokemus__nosto {
    margin-block-start: 60px;
    padding-block-start: 40px;
    border-block-start: 1px solid rgb(188 199 214 / 0.22);
    text-align: center;
}

.kokemus__prosentti {
    margin: 0 auto 25px;
    max-inline-size: 60ch;
    color: var(--light-gray);
}

.kokemus__prosentti strong {
    display: block;
    margin-block-end: 6px;
    color: #fff;
    font-size: clamp(1.8rem, 3.4vw, 2.6rem);
    line-height: 1;
}

/* ---- Palvelukokonaisuus ---- */

.palvelut {
    background: var(--dark-gray);
    padding-block: 75px;
}

.palvelut__sisalto p { margin: 0; max-inline-size: 65ch; color: var(--light-gray); }

/* Ketju omassa kehyksessaan: ylä- ja alaviiva rajaavat kokonaisuuden ja
   pystyviivat jakavat palvelut, jolloin ne lukevat yhtena pakettina eivatka
   erillisina napeina. Ei reunuksia joka palvelun ympari — se nayttaisi
   klikattavalta, ja linkitys YES-EU:n sivuille on viela auki. */
.palveluketju {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    margin: 40px 0 25px;
    padding: 0;
    list-style: none;
    border-block: 1px solid rgb(188 199 214 / 0.22);
}

/* Ruksi + nimi vierekkain, keskitettyna soluun. Pystyviiva erottaa palvelut
   toisistaan; ensimmaiselta se jaa pois, jolloin viivoja on nelja viiden
   solun valissa. */
.palveluketju li {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 22px 15px;
    border-inline-start: 1px solid rgb(188 199 214 / 0.3);
    text-align: center;
    font-weight: 600;
}

.palveluketju li:first-child { border-inline-start: 0; }

/* Sama ruksi ja sama liukuvari kuin `.edut`-osiossa, pienempana. */
.palveluketju li::before {
    content: "";
    flex: none;
    inline-size: 20px;
    block-size: 20px;
    background: var(--cta);
    -webkit-mask: url("ikoni-check.svg") no-repeat center / contain;
    mask: url("ikoni-check.svg") no-repeat center / contain;
}

.palvelut__lopetus { margin: 0; color: var(--soft-gray); }

/* Toistuva kehotus osion lopussa. Lisatty 10.9. joka toiseen lohkoon
   ylhaalta alas (hero · mallisto · edut · kokemus · kortit · yhteys), jotta
   lomakkeelle paasee mista kohtaa sivua tahansa eika vasta lopusta.
   Tasaus periytyy osiolta: `.kokemus__nosto` on keskitetty, muut vasemmalle. */
.osion-kehotus { margin: 45px 0 0; }

/* ---- Kayttotapauskortit ---- */

.kortit { padding-block: 75px; }

.kortit__ingressi { margin: 0 0 50px; max-inline-size: 70ch; color: var(--light-gray); }

.kortit__lista {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 50px;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Ikoni on maski ja saa varinsa `currentColor`ista, kuten teeman nappi-ikonit.

   ⚠️ Polku on TASSA tiedostossa eika HTML:n inline-tyylissa. Suhteellinen
   `url()` mukautetun ominaisuuden sisalla ratkaistaan sita KAYTTAVAA
   tyylitiedostoa vasten, ei sita kohtaa jossa se on maaritelty. Inline-tyyliin
   kirjoitettu `--dg-ikoni: url('assets/ikoni-paketti.svg')` resolvoitui siis
   muotoon `assets/assets/ikoni-paketti.svg` eika ikoni nakynyt lainkaan.
   Koska landari.css on assets-kansiossa, pelkka tiedostonimi riittaa. */
.kortti__ikoni {
    display: block;
    inline-size: 52px;
    block-size: 52px;
    margin-block-end: 20px;
    background-color: currentColor;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.kortti__ikoni--paketti { -webkit-mask-image: url("ikoni-paketti.svg"); mask-image: url("ikoni-paketti.svg"); }
.kortti__ikoni--huolto  { -webkit-mask-image: url("ikoni-huolto.svg");  mask-image: url("ikoni-huolto.svg"); }
.kortti__ikoni--salama  { -webkit-mask-image: url("ikoni-salama.svg");  mask-image: url("ikoni-salama.svg"); }

.kortti h3 { margin: 0 0 12px; font-size: 1.15rem; font-weight: 700; }
.kortti p { margin: 0; color: var(--light-gray); }

/* ---- Yhteyshenkilo ---- */

.yhteys { padding-block: 75px; }

.yhteys__sisalto {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 50px 75px;
    align-items: center;
}

.yhteys__teksti p { margin: 0; max-inline-size: 55ch; color: var(--light-gray); }

/* Kuva reunasta reunaan, ei pehmusteen sisalla. Pehmusteen keskella kelluva
   pikkukuva luki pikkukuvana; kortin laitaan asti vietyna se on osa korttia.
   Ei pyoristysta eika pyoreaa avataria: sivustolla jokainen `border-radius`
   on nolla (pisteet, kentat, napit), joten ympyra olisi ainoa pyorea muoto. */
.yhteys__kortti {
    display: flex;
    align-items: stretch;
    gap: 0;
    padding: 0;
    background: var(--dark-gray);
}

/* Mitat annetaan `img`:lle, ei `picture`:lle: `picture` on pelkka kaari
   `source`-vaihtoehdoille eika sille kannata laskea korkeutta erikseen —
   kuvan oma kuvasuhde (570:730) tuottaa 200px:n leveydella 256px:n korkeuden,
   ja kortti venyy sen mukaan. */
.yhteys__kortti picture { flex: none; display: block; }

.yhteys__kortti img {
    display: block;
    inline-size: 200px;
    block-size: auto;
    object-fit: cover;
}

.yhteys__tiedot {
    align-self: center;
    padding: 35px 40px;
}

.yhteys__nimi { margin: 0; font-size: 1.15rem; font-weight: 700; }

/* Nimi, titteli ja yhteystiedot ovat yksi tietoryhma, joten ne ovat lahella
   toisiaan; ryhman ja kortin reunan valin hoitaa `.yhteys__tiedot`in pehmuste.
   Aiemmin `.yhteys__nimi`lla oli 20px alamarginaali, joka oli vali NAPPIIN —
   nappi poistui asiakkaan pyynnosta 10.9.2026, joten vali kuuluu nyt tittelin
   alle, ei nimen. */
.yhteys__titteli { margin: 0 0 14px; color: var(--light-gray); }

.yhteys__yhteystieto { margin: 0 0 4px; }
.yhteys__yhteystieto:last-child { margin-block-end: 0; }

/* Osoite voi olla kortin kapeinta tilaa pidempi. `anywhere` eika `break-all`:
   katkaisu sallitaan vasta kun rivi ei muuten mahdu, eika joka riville. */
.yhteys__yhteystieto a, .yhteys__yhteystieto .maddr { overflow-wrap: anywhere; }

/* Spamminesto: @-merkki tulee CSS:sta, jolloin sita ei ole HTML-lahteessa.
   Sama tekniikka kuin teeman `digitaali_get_email_link()`issa. Ennen kuin JS
   ehtii koota linkin, osoite on luettavaa tekstia — `cursor: text` kertoo
   ettei se ole viela klikattava. */
span.at::before { content: '@'; }
span.maddr { cursor: text; }

@media (max-width: 781px) {
    .palvelut, .kortit, .yhteys { padding-block: 50px; }
    /* `minmax(0, 1fr)` eika pelkka `1fr`: oletuksena sarakkeen minimi on
       min-content, jolloin pisin palvelunimi levittaa vasemman sarakkeen
       leveammaksi kuin oikean ja jakoviiva valahtaa pois keskelta. */
    .palveluketju { grid-template-columns: repeat(2, minmax(0, 1fr)); border-block-end: 0; }
    .palveluketju li { border-block-end: 1px solid rgb(188 199 214 / 0.22); }
    .palveluketju li:nth-child(odd) { border-inline-start: 0; }
    .palveluketju li { gap: 8px; padding-inline: 8px; }
    /* Pariton maara palveluita jattaa viimeisen yksin puolikkaalle riville,
       jolloin myos kehyksen alaviiva jaisi puolikkaaksi. Koko rivin levyisena
       ketju sulkeutuu siististi. */
    .palveluketju li:last-child { grid-column: 1 / -1; }
    .kortit__lista { grid-template-columns: 1fr; gap: 35px; }
    .kortit__ingressi { margin-block-end: 35px; }
    .yhteys__sisalto { grid-template-columns: 1fr; gap: 35px; }
    /* Kortti ei veny koko sisaltoleveydelle: 781px:n naytolla se olisi 731px
       levea ja nappi jaisi yksin vasempaan laitaan 364px:n tyhjan viereen. */
    .yhteys__kortti { max-inline-size: 460px; }
    .yhteys__kortti img { inline-size: 130px; }
    .yhteys__tiedot { padding: 25px 22px; }
}

/* Kapeimmilla puhelimilla kuva ja teksti allekkain.
   🔑 Syy on min-content-leveys, ei estetiikka: vierekkain kortin kapein
   mahdollinen leveys on kuva 130 + pehmusteet 44 + levein tekstirivi, kun
   sisaltoalue on 320px:n naytolla vain 270px. Kortti levisi silloin ulos
   rajauksesta ja `html, body { overflow-x: clip }` LEIKKASI oikean reunan
   pois — vierityspalkkia ei tullut, joten vika ei nakynyt
   ylivuotomittauksessa. Sama vika oli jo aiemmassa 120px-versiossa.
   ℹ️ Levein rivi oli aiemmin 174px:n nappi; 10.9.2026 nappi korvattiin
   yhteystiedoilla, joista pisin on sahkopostiosoite (209px). Pinonta on siis
   yha tarpeen, ja raja-arvo mitattiin uudelleen: 320-479px pinoon, 480px:sta
   rinnakkain (mitattu: ei vaakavieritysta milläan naista leveyksista).
   Kuvakaista on 3:2 ja `object-position` pitaa kasvot mukana, kun korkeasta
   muotokuvasta naytetaan vain ylaosa. */
@media (max-width: 479px) {
    .yhteys__kortti { flex-direction: column; max-inline-size: none; }

    .yhteys__kortti picture { inline-size: 100%; }

    .yhteys__kortti img {
        inline-size: 100%;
        aspect-ratio: 3 / 2;
        /* 5 % eika keskitys: korkeasta muotokuvasta naytetaan vain ylin
           kolmannes, ja keskitys leikkaisi paalaen pois. Mitattu rajaamalla
           kuva samoilla suhteilla — 5 % jattaa paan ylle pienen ilmatilan. */
        object-position: 50% 5%;
    }

    .yhteys__tiedot { align-self: start; padding: 25px 22px; }
}

/* ---- Kuvagalleria ---- */

/* Tausta `--ink` eika `--dark-gray`: galleria siirtyi 10.9. malliston ja
   "Tyojuhta"-osion valiin, ja alapuolinen `.edut` on dark-gray — kaksi
   perakkaista harmaata olisi sulautunut yhdeksi lohkoksi. Ylapuolinen
   mallisto on myos ink, mutta kuvarivi erottaa osiot itsestaan. */
.galleria {
    padding-block: 75px;
}

/* Ennen Slickin alustusta: rivi, jossa nakyy kolme ensimmaista. */
.galleria__track { display: flex; overflow: hidden; }
/* Leveys kuvien maarasta: `--galleria-nayta` tulee inline-tyylina markupista.
   Tama koskee vain alustusta edeltavaa hetkea — sen jalkeen slick laskee
   leveydet itse. Varalla 3, jos muuttujaa ei jostain syysta ole. */
.galleria__track > .galleria__slide { flex: 0 0 calc(100% / var(--galleria-nayta, 3)); }
.galleria__track.slick-initialized { display: block; overflow: visible; }
.galleria__track.slick-initialized > .galleria__slide { flex: none; }

.galleria__slide { padding-inline: 8px; }

.galleria__linkki { display: block; }

.galleria__linkki img {
    display: block;
    inline-size: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    transition: opacity 0.2s ease;
}

.galleria__linkki:hover img,
.galleria__linkki:focus-visible img { opacity: 0.82; }

.galleria__linkki:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* Blueimpin oma CSS tulee `blueimp-gallery.min.css`:sta. Tassa vain ne kohdat
   joissa se poikkeaa Farizonin ilmeesta: pohja sivun omaan tummaan ja
   hallintaelementit paletin vaaleaan. */
.blueimp-gallery > .slides > .slide > .slide-content { box-shadow: none; }
.blueimp-gallery { background: rgb(18 22 29 / 0.96); }
.blueimp-gallery > .prev,
.blueimp-gallery > .next,
.blueimp-gallery > .close {
    border: 0;
    background: transparent;
    color: var(--light-gray);
    opacity: 1;
    text-shadow: none;
}
.blueimp-gallery > .prev:hover,
.blueimp-gallery > .next:hover,
.blueimp-gallery > .close:hover { color: #fff; }

.blueimp-gallery > .title {
    margin: 0;
    padding: 0 60px;
    color: var(--light-gray);
    font-size: 0.95rem;
    font-weight: 400;
}

.blueimp-gallery > .indicator > li { border-color: var(--soft-gray); }
.blueimp-gallery > .indicator > .active { background: var(--secondary); border-color: var(--secondary); }

@media (max-width: 781px) {
    .galleria { padding-block: 50px; }
    .galleria__track > .galleria__slide { flex-basis: 100%; }
}

/* ---- Uutiskirje omana osionaan ---- */

/* Omalla tummalla pohjallaan heron alla: kontrasti on kunnossa eika lomake
   tarvitse enaa omaa paneelia eika taustasumennusta valokuvan paalla. */
.uutiskirje {
    background: var(--dark-gray);
    padding-block: 50px;
}

.uutiskirje h2 { font-size: clamp(1.4rem, 2.6vw, 1.8rem); margin-block-end: 8px; }
/* Oli `.uutiskirje__sisalto > p`, joka ei osunut mihinkaan: kappale on
   `.uutiskirje__teksti`n sisalla eika `__sisalto`n suora lapsi, joten
   ingressi jai valkoiseksi 20px:n marginaalilla. */
.uutiskirje__teksti p { margin-block-end: 25px; color: var(--light-gray); }

/* Yksi keskitetty palsta: otsikko lomakkeen ylapuolella. Aiemmin otsikko oli
   1100px:sta ylospain vasemmalla ja lomake oikeassa 2fr-palstassa, mutta
   viiden kentan lomake ei mahdu siihen jarkevasti eika kapea palsta vastaa
   sivuston lomakkeiden leveytta. */
.uutiskirje__sisalto {
    max-inline-size: var(--lomake);
    margin-inline: auto;
}

.lomake__pakolliset { margin-block: 0 20px; font-size: 0.85rem; color: var(--soft-gray); }

/* Kentat kahdessa palstassa kun tilaa on, muuten allekkain.
   `flex-basis` eika mediakysely: lomake istuu 1100px:sta ylospain kapeassa
   2fr-palstassa, jonka leveys ei seuraa nayttoa lainkaan. Kun palsta on alle
   ~460px, kaksi 220px:n kenttaa ei mahdu rinnakkain ja ne kaartuvat itsestaan
   omille riveilleen — sama saanto pitaa 390px:n puhelimen ja 1728px:n
   tyopoydan kunnossa ilman erillisia rajoja. */
/* Valit sivuston lomakkeista: `dg-dark-form--parit` kayttaa 16px vaakavalia
   (leiskan 536 + 16 + 536) ja 25px rivivalia. */
.lomake__kentat { display: flex; flex-wrap: wrap; column-gap: 16px; row-gap: 25px; }

.lomake__rivi { flex: 1 1 220px; min-inline-size: 0; }
.lomake__rivi--taysi { flex-basis: 100%; }

.lomake__label { display: block; margin-block-end: 8px; }

.lomake__kentta {
    inline-size: 100%;
    min-block-size: 57px;
    padding: 12.5px 25px;
    border: 0;
    border-radius: 0;
    background: rgb(255 255 255 / 0.14);
    color: #fff;
    font: inherit;
}

.lomake__kentta::placeholder { color: var(--light-gray); }

.lomake__kentta:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
    background: rgb(255 255 255 / 0.22);
}

.lomake__suostumus {
    display: flex;
    margin-block-start: 25px;
    gap: 12px;
    align-items: flex-start;
    font-size: 0.9rem;
    color: var(--light-gray);
}

.lomake__suostumus input { margin-block-start: 5px; inline-size: 18px; block-size: 18px; flex: 0 0 auto; }

/* Kaksi ruutua peräkkäin: pakollinen kuittaus ja vapaaehtoinen markkinointilupa.
   Toinen tulee lähemmäs ensimmäistä kuin kenttäryhmää, jotta ne lukeutuvat
   yhteen ryhmäksi. */
.lomake__suostumus + .lomake__suostumus { margin-block-start: 12px; }

.lomake__suostumusteksti {
    margin-block: 25px 15px;
    font-size: 0.9rem;
    color: var(--light-gray);
}

/* Nappi on nyt omalla rivillaan kenttien alla: kuuden kentan lomakkeessa se ei
   enaa mahdu sahkopostikentan viereen. */
.lomake__nappi {
    margin-block-start: 25px;
    min-block-size: 57px;
    padding-inline: 40px;
    border: 0;
    border-radius: 0;
    background: var(--cta);
    color: var(--ink);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.lomake__nappi:hover, .lomake__nappi:focus-visible { filter: brightness(1.07); }

.lomake__pieni { margin-block-start: 20px; margin-block-end: 0; font-size: 0.85rem; color: var(--soft-gray); }

/* Hunajapurkki pois näkyvistä — ei `display:none`, koska osa boteista ohittaa
   piilotetut kentät. Ruudunlukijalta se on piilotettu aria-hiddenillä. */
.hunaja {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* ---- Tekstisivu (tietosuojaseloste) ----

   Etusivulla ylapalkki kelluu valokuvan paalla, joten se on `position: absolute`.
   Tekstisivulla valokuvaa ei ole → palkki normaaliin virtaan oman tumman
   pohjansa paalle, muuten sisalto alkaisi sen alta. */

.ylapalkki--kiintea {
    position: static;
    background: #000;
}

.tekstisivu {
    padding-block: 75px;
}

/* Rivipituus luettavaksi. `ch` seuraa fonttikokoa, joten raja pysyy oikeana
   myos jos perusfonttikoko muuttuu. */
.seloste {
    max-inline-size: 80ch;
}

.seloste h1 { margin-block-end: 50px; }

.seloste h2 {
    margin-block: 50px 20px;
    font-size: clamp(1.35rem, 2.4vw, 1.7rem);
}

.seloste h3 {
    margin-block: 30px 12px;
    font-weight: 600;
    font-size: 1.05rem;
    line-height: 1.35;
}

/* Tekstisivun leipateksti hieman himmeampi kuin otsikot — sama porras kuin
   uutiskirjekaistassa. */
.seloste p, .seloste li { color: var(--light-gray); }

.seloste ul { margin: 0 0 20px; padding-inline-start: 20px; }
.seloste li { margin-block-end: 8px; }

.seloste a { color: #fff; }

/* Taulukko voi olla leveampi kuin kapea ruutu → oma vieritettava saliokerros,
   jottei koko sivusta tule vaakavieritettavaa. */
.seloste .taulukko {
    margin: 0 0 25px;
    overflow-x: auto;
}

.seloste table {
    inline-size: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.seloste th, .seloste td {
    padding: 12px 15px;
    border: 1px solid rgb(255 255 255 / 0.18);
    text-align: start;
    vertical-align: top;
    color: var(--light-gray);
}

.seloste th {
    background: rgb(255 255 255 / 0.06);
    color: #fff;
    font-weight: 600;
}

.seloste__paluu { margin-block-start: 50px; }

@media (max-width: 781px) {
    .tekstisivu { padding-block: 50px; }
    .seloste h1 { margin-block-end: 30px; }
    .seloste h2 { margin-block: 35px 15px; }
}

/* ---- Alapalkki ---- */

.alapalkki {
    background: #000;
    padding-block: 50px;
    color: var(--light-gray);
    font-size: 0.9rem;
}

.alapalkki .logo { block-size: 34px; margin-block-end: 25px; }
.alapalkki p { max-inline-size: 70ch; margin-block-end: 12px; }
.alapalkki p:last-child { margin-block-end: 0; }
.alapalkki__linkit { margin-block-start: 20px; }

/* Erotin himmeampi kuin linkit, mutta EI `--neutral-gray`: se antaa mustaa
   vasten vain 2,99:1. Erottimet ovat `aria-hidden`, mutta nakeva kayttaja
   tarvitsee ne rivin jasentamiseen, joten ne eivat ole puhdasta koristetta.
   `--soft-gray` on 10,2:1. */
.alapalkki__linkit span[aria-hidden] { color: var(--soft-gray); }

/* Tunnus vasemmalle, YES-EU:n kuvaus oikealle — peilaa ylapalkin rakennetta.
   Sama raja kuin uutiskirjekaistassa, jotta sivu vaihtaa yksipalstaiseksi
   kerralla eika porrastaen. */
@media (min-width: 1100px) {
    .alapalkki__sisalto {
        display: grid;
        grid-template-columns: auto 1fr;
        gap: 60px;
        align-items: start;
    }

    .alapalkki .logo { margin-block-end: 0; }
}

/* ---- Ilmoitukset (signup.php ohjaa takaisin ?ok= / ?virhe=) ---- */

.ilmoitus {
    padding: 15px 25px;
    margin-block-end: 25px;
    border-inline-start: 4px solid;
}

.ilmoitus--ok { background: rgb(255 255 255 / 0.10); border-color: #7BD88F; }
.ilmoitus--virhe { background: rgb(255 255 255 / 0.10); border-color: #FF6432; }