/* ========================================================================= OEF PALVELUSIVUJEN JAETTU SAPLUUNA (lohko E, 14.9.2026) ========================================================================= KENELLE: kahdeksan sivua, kaksi perhetta. PERHE A, sapluunasivut (6). Sama luuranko rivi rivilta: murupolku, hero (h1 + lede + kaksi toimintoa + luottamusmerkit), "Mita on X?", "Miksi hankkia X?", "Milloin X on ajankohtainen?", "Nain prosessi etenee", FAQ, Lahteet, CTA. energiaselvitys, energiatodistukset, hankesuunnittelu, aurinkosahko, sahkoauto, konsultointi Konsultointi kuuluu tahan perheeseen eika poikkeuksiin: sen luuranko on sama ja siina on kolme YLIMAARAISTA AEO-osiota (11 osiota 8:n sijaan). Suunnitelmassa puhuttiin muodosta "5 + 2"; mitattuna se on 6 + 2. PERHE B, poikkeukset (2). Sama jarjestelma, eri sisaltotyyppi: services = palveluhakemisto, ei heron toimintoja palvelutarpeen-kartoitus = velho, seitseman h2:ta yhden osion sisalla HALLITSEVA IDEA (makuportti §1 testi 5): sivu vastaa ostajan kysymyksiin maaratyssa jarjestyksessa, ja jarjestys on nakyvissa. Jokainen h2 on jo valmiiksi kysymys, joten kortteja ei tarvita: osio erottuu osiomerkista, hiusviivasta ja painoluokasta. Tama on sama sanasto kuin VARKE-klusterin .osio-merkki / .osio--tiivis, eli sivut ovat samaa jarjestelmaa. MIKSI TAMA ON OMA TIEDOSTO EIKA LISAYS styles.css:AAN Nama sivut jakavat css/styles.css:n etusivun (lohko F) ja yhteystietosivun (lohko G) kanssa. Jokainen muutos styles.css:n olemassa oleviin valitsimiin vuotaisi noille kahdelle. Siksi sapluuna on omassa tiedostossaan, jokainen saanto on juuritettu `body.sivu--palvelu`-luokkaan, ja index.html ja contact.html EIVAT lataa tata tiedostoa lainkaan. Vuotamattomuus on siis rakenteellinen eika tarkkuuteen perustuva. Vanhoja saantoja ei poisteta: siivous on lohko G. MIKSI RAKENNEVALITSIMET EIVATKA UUDET LUOKAT Sapluuna kuvataan sivujen JAETULLA LUURANGOLLA (`main > section`, `main h1 + p`, `:has()`), ei uusilla apuluokilla. Syy on mitattava: luokkien lisays kahdeksaan tiedostoon olisi satoja markup-muutoksia, ja jokainen niista on paikka jossa teksti voi vahingossa muuttua. Nain markup-muutoksia on kolme per sivu: body-luokka, tama linkki ja alapalkin `data-mitta`. Tekstisolmuja ei kosketa yhtaan. LATAUSJARJESTYS: oef-tokens.css -> oef-typo.css -> TAMA. Ei yhtaan !importantia. ========================================================================= */ /* ========================================================================= §1 YKSI AKSELI. Vasen linja, ei keskitysta. ------------------------------------------------------------------------- Lahtotilassa sivulla oli KAKSI akselia: hero, prosessiosio, FAQ ja CTA olivat keskitettyja ja kolme muuta osiota vasemmalla. Mitattu 1440 px:lla: yhdeksan eri alkulinjaa (makuportti §2 mitta 4 sallii nelja). ========================================================================= */ body.sivu--palvelu main { padding-top: 104px; padding-bottom: var(--v24); } /* Palsta. Sivun jokainen alkulinja tulee tasta yhdesta saannosta. */ body.sivu--palvelu main > section > div, body.sivu--palvelu main > div > div { max-width: var(--palsta, 1160px); margin-left: auto; margin-right: auto; padding-left: var(--v6); padding-right: var(--v6); } /* Osion oma sivupehmuste pois: palsta omistaa vaakamitan, ei osio. Ilman tata Tailwindin `px-6` ja palstan oma pehmuste summautuvat. */ body.sivu--palvelu main > section, body.sivu--palvelu main > div { padding-left: 0; padding-right: 0; } /* Keskitys puretaan kahdessa paikassa. Pelkka `text-align` EI riita: oef-typo.css antaa otsikoille max-widthin (h2 24ch) ja keskittaa kapean laatikon saannolla `html .text-center h2 { margin-inline: auto }` (0,2,1). Kumoaminen vaatii (0,3,1), ei !importantia. Tama on sama ansa jonka oef-typo.css itse dokumentoi. */ body.sivu--palvelu main .text-center, body.sivu--palvelu main .sm\:text-center, body.sivu--palvelu main .lg\:text-center { text-align: left; } /* LOHKO I 16.9.2026: tasta POISTETTIIN `body.sivu--palvelu main .justify-center { justify-content: flex-start }` Se kumosi sisasuuntauksen mainin jokaiselta elementilta. Mitattu: services.html 9/9 rikki (yhdeksan ikonilaattaa, ligatuuri vasemmassa reunassa), energiaselvitys.html ja konsultointi.html 4/4. Vasen akseli nailla sivuilla on jo tehty nimetyille riveille §3:ssa (`main > section:first-of-type > div > div.flex` ja `> div.flex-wrap`), joten tama rivi ei tehnyt mitaan mita ne eivat jo tee, ja rikkoi loput. Perustelu ja portti: ks. css/oef-etusivu-a.css §A1. */ body.sivu--palvelu main .text-center h1, body.sivu--palvelu main .text-center h2, body.sivu--palvelu main .text-center h3, body.sivu--palvelu main .text-center p, body.sivu--palvelu main h1.text-center, body.sivu--palvelu main h2.text-center, body.sivu--palvelu main h3.text-center { margin-inline: 0; } /* ========================================================================= §2 MURUPOLKU ON SIVUN KICKER ------------------------------------------------------------------------- VARKE-klusterissa heron ylla on mono-kicker. Palvelusivuilla sellaista ei ole, mutta murupolku on jo olemassa ja se on tasmalleen sama asia: koneen kirjoittama etiketti joka kertoo missa ollaan. Se nostetaan kickeriksi sen sijaan etta sivulle kirjoitettaisiin uutta tekstia. Yhtaan tekstisolmua ei lisata, ja ::before-viiva ei ole tekstisolmu. ========================================================================= */ body.sivu--palvelu main > div > div > nav { font-family: var(--f-kone); font-size: var(--t-0); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--teksti-3); display: flex; align-items: center; flex-wrap: wrap; } body.sivu--palvelu main > div > div > nav::before { content: ""; width: 16px; height: 2px; background: var(--toiminta); flex-shrink: 0; margin-right: var(--v2); } body.sivu--palvelu main > div > div > nav a { color: var(--teksti-3); text-decoration: none; } body.sivu--palvelu main > div > div > nav a:hover { color: var(--teksti-1); } body.sivu--palvelu main > div > div > nav .mx-2 { margin-left: var(--v1); margin-right: var(--v1); opacity: 0.55; } /* ========================================================================= §3 HERO ------------------------------------------------------------------------- §5.4.1 (14.9.2026): POISTETTU. Seitseman palvelusivun h1 jakautui kahteen savyyn `.gradient-text`-spanilla, ja tama saanto vain vaihtoi jalkimmaisen puoliskon varin. Kuvio itse oli vika. Spanit on purettu lahteessa, ja siella missa rivi tarvitsi keventamista tilalle tuli `.otsikko-rivi` eli pelkka rivinvaihto. Samalla lahti kolme em-viivaa jotka olivat vain jakokohdan merkkeja otsikossa. ========================================================================= */ body.sivu--palvelu main > section:first-of-type { padding-top: var(--v5); padding-bottom: var(--v8); margin-bottom: 0; border-top: 0; } body.sivu--palvelu main h1 { font-family: var(--f-naytto); font-weight: 900; line-height: 1.06; letter-spacing: -0.02em; text-align: left; margin: 0 0 var(--v5); } body.sivu--palvelu main h1 + p { color: var(--teksti-2); line-height: 1.55; margin: 0; text-align: left; } /* Toimintarivi ja byline. Byline tulee TOIMINNAN JALKEEN: se on metatietoa. */ body.sivu--palvelu main > section:first-of-type > div > div.flex { justify-content: flex-start; margin-top: var(--v6); margin-bottom: 0; } body.sivu--palvelu main > section:first-of-type > div > div.flex-wrap { justify-content: flex-start; margin-top: var(--v6); font-size: var(--t-1); color: var(--teksti-3); } /* --- §3.1 KAKSIPALSTAINEN HERO ------------------------------------------- Mitattu yksipalstaisena: suurin yhtenainen tyhja alue 19,2 % @1280 px (makuportti mitta 8 sallii 18 %), laatikko x 896..1280, y 80..592 eli heron oikea puoli koko heron korkeudelta. Kun lasikortit purettiin, niiden taustapinta lakkasi olemasta mustetta, joten sama aukko joka oli aina ollut olemassa tuli vasta silloin mitatuksi. Korjaus ei ole uusi paneeli vaan bylinen siirto heron oikeaan palstaan. Ero suuntaan 1 (tapettu): siella oikea palsta sai oman pinnan ja oranssin ylareunan, jolloin sivun vahvin merkki osui luottamusmerkkeihin ja merkityskartta hajosi. Tassa byline pysyy metatietona: ei pintaa, ei reunaa, ei oranssia, vain sama sisalto toisessa sarakkeessa. Oikea palsta on 260 px + 48 px vali, jolloin se alkaa TASMALLEEN samasta x:sta kuin nelipalstaisen prosessiruudukon neljas sarake (1016 px @1440). Siksi sivulla on nelja alkulinjaa eika viitta: 164, 448, 732, 1016. Ehto `:has(> div.flex-wrap)` rajaa saannon niihin sivuihin joilla byline on olemassa: services.html ja palvelutarpeen-kartoitus.html saisivat muuten 260 px leveän tyhjan sarakkeen. ------------------------------------------------------------------------- */ @media (min-width: 1100px) { body.sivu--palvelu main > section:first-of-type > div:has(> div.flex-wrap) { display: grid; grid-template-columns: minmax(0,1fr) 260px; column-gap: var(--v12); align-items: start; } body.sivu--palvelu main > section:first-of-type > div:has(> div.flex-wrap) > div.flex-wrap { grid-column: 2; grid-row: 1 / span 3; flex-direction: column; align-items: flex-start; gap: var(--v3); margin-top: var(--v2); } } /* ========================================================================= §4 OSIORYTMI ------------------------------------------------------------------------- Hiusviiva erottaa osiot, osiomerkki avaa ne. Merkin VARI koodaa osiotyypin tasmalleen samalla mekanismilla kuin VARKE-klusterissa (.osio-merkki oranssi, .osio--tiivis neutraali), joten merkityskartta on klustereiden valilla sama eika kahta eri koodausta synny. Pystyrytmi on osion omaisuutta, ei Tailwindin. `.section-padding` antaa 96 px ylos ja alas jokaiselle osiolle riippumatta osion painosta; painoluokat tekevat rytmin, ei vakiopehmuste. ========================================================================= */ body.sivu--palvelu main > section { padding-top: var(--v12); padding-bottom: var(--v12); border-top: 1px solid var(--oef-viiva-heikko); background-image: none; /* osiokohtaiset oranssit taustaliu'ut pois */ } body.sivu--palvelu main > section:first-of-type { border-top: 0; } /* Lahdeluettelo ja muut h3-osiot ovat metatietoa: tiivis painoluokka. */ body.sivu--palvelu main > section:has(h3):not(:has(h2)) { padding-top: var(--v8); padding-bottom: var(--v8); } body.sivu--palvelu main > section > div > h2::before, body.sivu--palvelu main > section > div > div > h2::before, body.sivu--palvelu main > section:has(h3):not(:has(h2)) > div > h3::before { content: ""; display: block; width: 16px; height: 2px; background: var(--toiminta); margin-bottom: var(--v4); } body.sivu--palvelu main > section:has(h3):not(:has(h2)) > div > h3::before { background: var(--oef-viiva); } /* Osion ensimmainen otsikko ei tarvitse omaa ylamarginaalia: osion pehmuste hoitaa sen jo. oef-typo.css antaa h2:lle margin-top var(--v8). */ body.sivu--palvelu main > section > div > h2:first-child, body.sivu--palvelu main > section > div > div:first-child > h2:first-child, body.sivu--palvelu main > section > div > h3:first-child { margin-top: 0; } /* ========================================================================= §5 KORTIT POIS ------------------------------------------------------------------------- Lasikortti (backdrop-blur + puolilapinakyva pinta + reunus) on makuportti §6:n nimetty kielletty ja se rikkoo mitta 6:n efektibudjetin: kolme efektia samassa elementissa kun budjetti on kaksi. Nailla sivuilla niita oli 14-15 kappaletta, ja yksi niista oli 1120 px korkea kaare joka sisalsi kaksi eri sisaltotyyppia. Kortin tilalle tulee hiusviiva. Se kantaa saman ryhmittelyn ilman yhtaan efektia, ja se on sama mekanismi jota VARKE-klusteri kayttaa. ========================================================================= */ body.sivu--palvelu main .glass-card { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; border: 0; border-radius: 0; padding: 0; } /* POIKKEUS: jos lasikortti ON sivun palsta (CTA-osio), sen vaakapehmuste on palstan pehmustetta eika kortin koristetta. Ilman tata CTA:n otsikko putoaa vasemmalta linjalta 24 px (x 140 vs 164) ja mobiilissa 24 px (x 0 vs 24), jolloin nappi koskettaa bodyn overflow-x:hidden -reunaa ja sen ULKOPUOLINEN fokusrengas leikkautuu. Tama oli kaksi fokushylkya. */ body.sivu--palvelu main > section > div.glass-card { padding-left: var(--v6); padding-right: var(--v6); } body.sivu--palvelu main .grid > div { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; border: 0; border-top: 1px solid var(--oef-viiva); border-radius: 0; padding: var(--v4) 0 0; } /* Ruudukon sisennys pois: 8 px:n `pl-2` teki ensimmaisesta sarakkeesta oman alkulinjansa (x 172) kun ruudukon muut sarakkeet olivat 456/740/1024. */ body.sivu--palvelu main .grid > div > .pl-2 { padding-left: 0; } /* Ehtoluettelo oli kuusi identtista taytettya pilleria, jotka lukeutuvat kuudeksi samanarvoiseksi painikkeeksi. Luettelo on luettelo. */ body.sivu--palvelu main .space-y-3 > div.bg-white\/5, body.sivu--palvelu main .space-y-4 > div.bg-white\/5 { background: transparent; border-radius: 0; border-top: 1px solid var(--oef-viiva-heikko); padding: var(--v3) 0; } body.sivu--palvelu main .space-y-3 > div.bg-white\/5:first-child { border-top: 0; } /* ========================================================================= §6 MERKITYSKARTTA: yksi merkitys per vari ------------------------------------------------------------------------- Lahtotilassa oranssi tarkoitti viitta asiaa (painikkeen tayte, luku, luettelomerkki, osion taustaliuku, koristeikoni) ja koristeikonit toivat lisaksi vihrean, sinisen, keltaisen, punaisen ja violetin. Sumennustesti koko sivusta nayttaa sen suoraan: ruudulle jaa viisi erillista oranssia laikkua joista yksikaan ei ole hallitseva. Koristeikoni on metatietoa. Toiminnan sisalla oleva ikoni perii napin oman varin, koska se on osa toimintoa. ========================================================================= */ body.sivu--palvelu main .material-icons-round { color: var(--teksti-3); } body.sivu--palvelu main button .material-icons-round, body.sivu--palvelu main a.bg-primary .material-icons-round, body.sivu--palvelu main .bg-primary .material-icons-round { color: currentColor; } body.sivu--palvelu main li .material-icons-round { color: var(--oef-viiva); } /* §7.3 Varjoja on tasan yksi luokka ja se on modaalin. Oranssi glow painikkeen alla on kolmas efekti samassa elementissa (tayte + kulma + varjo) ja rikkoo mitta 6:n budjetin. */ body.sivu--palvelu main button, body.sivu--palvelu main a { box-shadow: none; } /* --- §6.1 HALLITSEVA ELEMENTTI, TASAN YKSI ------------------------------- Kolme lukua olivat oranssi, syaani ja vihrea, eli kolme eri merkitysta kolmelle samanarvoiselle luvulle: merkityskartan mukaan oranssi olisi maaraaika, syaani sitova ehto ja vihrea toteutunut tila. Yksikaan niista ei pida paikkaansa saastoprosentista. Kartassa VALKOINEN on itse vastaus, joten luvut ovat valkoisia ja YKSI saa oman pinnan ja oranssin ylareunan. Sama mekanismi kuin VARKE-klusterin .stat--paa. Efektibudjetti: tausta + ylareuna = 2. */ body.sivu--palvelu main .grid.md\:grid-cols-3 > div > .text-3xl, body.sivu--palvelu main .grid.md\:grid-cols-3 > div > div:first-child { color: var(--teksti-1); font-family: var(--f-naytto); font-weight: 900; } body.sivu--palvelu main .grid.md\:grid-cols-3 > div:first-child { background: var(--oef-bg-syva); border-top: 2px solid var(--toiminta); padding: var(--v5) var(--v6); } /* ========================================================================= §7 SAAVUTETTAVUUS ========================================================================= */ /* FAQ-harmonikan nappi on leikkaavan sailion sisalla (overflow:hidden), joten ULKOPUOLINEN fokusrengas leikkautuisi. Sama ratkaisu kuin VARKE-klusterin a.stat:focus-visible: rengas sisapuolelle. */ body.sivu--palvelu main .accordion-button:focus-visible { outline: 2px solid #FFFFFF; outline-offset: -2px; box-shadow: none; } /* Kiintea mobiilialapalkki on 138 px korkea. Mainin alapehmuste oli 96 px, joten palkki peitti sivun viimeiset rivit pysyvasti. */ @media (max-width: 1023px) { body.sivu--palvelu main { padding-bottom: 170px; } } /* ========================================================================= §8 KAHDEN PERHEEN EROT JA MITATUT KORJAUKSET ========================================================================= */ /* --- §8.1 YKSI RUUDUKKO KOKO KLUSTERILLE --------------------------------- Prosessiosio on nelipalstainen viidella sivulla ja VIISIPALSTAINEN hankesuunnittelussa (viisi vaihetta neljan sijaan). Mitattu 1440 px:lla: viisipalstaisena sivun alkulinjat olivat 164, 391, 618, 846, 1073 eli VIISI, ja ne eivat osuneet yhteenkaan muun sivun linjaan. Makuportti §2 mitta 4 sallii nelja, ja klusterin yhtenaisyys vaatii etta sivut alkavat samoista x-koordinaateista. Viides vaihe kaaritaan toiselle riville sen sijaan etta palstaa kavennettaisiin: 1112 px viitena palstana on 200 px per vaihe, jolloin "Toteutus ja valvonta" rivittyy kahdelle riville jo otsikkona. */ @media (min-width: 1100px) { body.sivu--palvelu main .grid.lg\:grid-cols-5 { grid-template-columns: repeat(4, minmax(0, 1fr)); } } /* --- §8.2 PROSESSIN VAIHEPALKIT ------------------------------------------ Jokaisella vaiheella on absoluuttisesti aseteltu 4 px oranssi pystypalkki, ensimmaisella tayteena ja lopuilla 70 %:n alfalla. Se on kuudes merkitys oranssille (vaiheen jarjestysnumero) ja samalla alfa varilla joka kantaa informaatiota, minka brandbook §3.4 kieltaa. Jarjestyksen kertoo jo "Vaihe 1..5" -monoetiketti, joka on sivulla valmiina tekstina. */ body.sivu--palvelu main .grid > div > .absolute { background: var(--oef-viiva); opacity: 1; } body.sivu--palvelu main .grid > div.border-primary\/30 { border-color: transparent; } /* --- §8.3 OTSIKON VAIMEA PUOLISKO VAIN KUN PUOLISKOJA ON KAKSI ----------- `.gradient-text` on nelja sivua osittainen (otsikon jalkimmainen puolisko) ja kaksi sivua KOKO otsikko (services, palvelutarpeen-kartoitus). Naille kahdelle §3:n vaimennus tekisi koko otsikosta --teksti-3:n, jolloin sivun vastaus olisi ruudun vaimein teksti. Merkityskartassa valkoinen ON itse vastaus, joten naiden kahden sivun otsikkospan jaa ilman luokkaa markupissa (luokan poisto, ei tekstin muutos) ja otsikko on valkoinen. CSS ei osaa laskea tekstisolmusisaruksia, joten eroa ei voi tehda valitsimella. */ /* --- §8.4 SERVICES: KAKSI ERI VARIA SAMALLE TOIMINNOLLE ------------------- Palveluhakemiston kaksi korttia paattyvat painikkeeseen jonka tayte on toisessa syaani ja toisessa vihrea. Merkityskartassa syaani = sitova ehto ja vihrea = toteutunut tila; kumpikaan ei ole toiminto. Sama toiminto, sama vari. Tekstin kontrasti tummalla pohjalla sailyy valkoisena. */ body.sivu--palvelu main a.bg-accent, body.sivu--palvelu main a.bg-green-400 { background-color: var(--toiminta-pinta); color: #FFFFFF; } body.sivu--palvelu main a.bg-accent:hover, body.sivu--palvelu main a.bg-green-400:hover { background-color: var(--toiminta-pinta-hover); color: #FFFFFF; } /* --- §8.5 MOBIILIN LEPOTILA ---------------------------------------------- Makuportti mitta 9 vaatii vahintaan 22 % ruudusta ilman mustetta. Kun korttien pehmuste poistettiin, mobiilin yksipalstainen pino tiivistyi ja lepotila putosi alle rajan kolmella sivulla (services 20,5 %, sahkoauto 21,1 %, palvelutarpeen-kartoitus 18,3 %). Korjaus on pystyvali rivien valiin, ei pehmuste rivien sisaan: rivi pysyy hiusviivaan sidottuna. */ @media (max-width: 820px) { body.sivu--palvelu main .grid > div { padding-top: var(--v5); } body.sivu--palvelu main .grid { row-gap: var(--v5); } body.sivu--palvelu main .space-y-3 > div.bg-white\/5, body.sivu--palvelu main .space-y-4 > div.bg-white\/5 { padding: var(--v4) 0; } } /* --- §8.6 SERVICES: NELJA KORTTIGEOMETRIAA YHDEKSI ------------------------ Palveluhakemistossa oli nelja eri tapaa aloittaa kortti: ikonilaatta otsikon VASEMMALLA (peruspalvelut), ikonilaatta otsikon YLLA (muut palvelut), ikoni otsikkotekstin sisalla ja pelkka otsikko. Mitattu 1440 px:lla: seitseman eri alkulinjaa, joista nelja syntyi pelkastaan siita etta ikonilaatta tyontaa otsikon 76 px sisaan sarakkeen linjalta. Ratkaisu on jo sivulla olemassa: "Muut palvelut" -kortit pinoavat ikonin otsikon ylle. Sama pino annetaan myos peruspalvelukorteille, jolloin otsikko alkaa sarakkeen linjasta eika ikonin leveyden paasta. */ body.sivu--palvelu main .grid > div > .flex.items-center.gap-3 { flex-direction: column; align-items: flex-start; gap: var(--v3); } /* Korttien reunavarit: syaani, oranssi ja keltainen merkitsivat samaa asiaa eli "tama on kortti". Merkityskartassa niilla on omat merkityksensa, joten kortin reuna on hiusviiva ja varit jaavat sinne minne ne kuuluvat. */ body.sivu--palvelu main .border-accent\/30, body.sivu--palvelu main .border-primary, body.sivu--palvelu main .border-2 { border-color: var(--oef-viiva); border-width: 1px; } body.sivu--palvelu main .text-yellow-400 { color: var(--toiminta-linkki); } body.sivu--palvelu main .text-yellow-400:hover { color: var(--teksti-1); } /* PAAPALVELU-merkki oli oranssi taytepilleri. Oranssi tayte on painike (§3.3), ei etiketti, ja pilleri kehyksellisessa elementissa on §7.1:n kielletty. Etiketti on kone-etiketti eli sama mono-kicker kuin murupolku. */ body.sivu--palvelu main .bg-primary.rounded-full:not(a):not(button) { background-color: transparent; color: var(--toiminta); border: 1px solid var(--toiminta); border-radius: var(--r-pieni); font-family: var(--f-kone); font-size: var(--t-0); font-weight: 700; letter-spacing: 0.12em; padding: var(--v2) var(--v3); } /* Sama pinoaminen leveaan korttiin jossa ikonilaatta on `flex-1`-sisallon vieressa: muuten sen otsikko on kuudes alkulinja (x 631 @1440). */ body.sivu--palvelu main .grid > div > .flex.md\:flex-row:has(> .flex-1) { flex-direction: column; align-items: flex-start; gap: var(--v3); }