/*
Theme Name: Bastinet
Theme URI: https://bastinet.fi
Author: Bastinet
Author URI: https://bastinet.fi
Description: Bastinetin oma lohkoteema. Ei ostettua pohjaa, ei sivunrakentajaa, ei lisäosariippuvuuksia. Nopeus ja löydettävyys rakennettu sisään.
Version: 1.0.0
Requires at least: 6.7
Tested up to: 7.1
Requires PHP: 8.1
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: bastinet
Tags: full-site-editing, block-theme
*/

/* --------------------------------------------------------------------------
   Perusta

   Värit, typografia ja välistykset tulevat theme.jsonista — niitä ei toisteta
   täällä. Tässä on vain se, mitä theme.json ei osaa sanoa.
   ----------------------------------------------------------------------- */

:root {
  --viiva:  rgba(255,255,255,.085);
  --viiva2: rgba(255,255,255,.14);
}

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

html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
}

/* Archivon leveysakseli: otsikot hieman kavennettuina, kuten tunnuksessa.

   Sama rajaus kuin kappaleleveydessä alla: `font-variation-settings` on
   vahvempi kuin `font-weight`, joten landerin `.note h3` (650) piirtyisi
   tämän takia kahdeksansataisena. */
body:not(.landeri) h1,
body:not(.landeri) h2,
body:not(.landeri) h3 { font-variation-settings: 'wdth' 100, 'wght' 800; }

/* Leipäteksti ei koskaan täyteen leveyteen: rivi yli 75 merkkiä on hidas lukea.

   Landerit rajaavat rivinsä itse (.say 56ch, .lede 50ch, .qa p 66ch) ja
   niissä on kappaleita, jotka kuuluu saada olla leveitä — prosessirivin
   selitteet ovat 1144 px leveitä. Siksi sääntö suljetaan landereilta
   `:not()`-valinnalla eikä kumota niiden puolella: kumoaminen vaatisi
   `body.landeri p`-säännön, joka olisi tarkempi kuin `.say` ja pyyhkisi
   landerin omat rajaukset mukanaan. */
body:not(.landeri) p { max-width: 70ch; }

/* --------------------------------------------------------------------------
   Saavutettavuus
   ----------------------------------------------------------------------- */

/* Näppäimistön käyttäjä näkee mihin on menossa. Hiiri ei näe tätä. */
:focus-visible {
  outline: 2px solid var(--wp--preset--color--vihrea-v);
  outline-offset: 3px;
  border-radius: 2px;
}

.ohita-linkki {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 99;
  padding: 12px 18px;
  background: var(--wp--preset--color--vihrea);
  color: #08120A;
  font-weight: 700;
}

.ohita-linkki:focus { left: 12px; top: 12px; }

/* Ruudunlukijalle, ei silmälle. */
.vain-ruudunlukijalle {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   Mediat

   Kuvalta vaaditaan mitat, jottei taitto hyppää latauksen aikana. Ilman tätä
   CLS ei ole nolla, ja nolla on tavoite.
   ----------------------------------------------------------------------- */

img, video, svg { max-width: 100%; height: auto; }
img[width][height] { height: auto; }

/* --------------------------------------------------------------------------
   Apuluokat, joita omat lohkot käyttävät
   ----------------------------------------------------------------------- */

.mono {
  font-family: var(--wp--preset--font-family--mono);
  letter-spacing: .07em;
}

.kick, .kicker {
  font-family: var(--wp--preset--font-family--mono);
  font-size: 11.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--wp--preset--color--vihrea);
}

.viiva-ylla   { border-top: 1px solid var(--viiva); }
.viiva-alla   { border-bottom: 1px solid var(--viiva); }

/* --------------------------------------------------------------------------
   Ylätunniste

   Valikko on kiinteitä linkkejä eikä navigation-lohko. Syy: navigation-lohko
   ilman valikkoa listaa kaikki sivut, ja sen mobiiliavaus tuo mukanaan JS:ää
   jota tämä sivusto ei tarvitse. Linkkejä on viisi — ne mahtuvat riville.
   ----------------------------------------------------------------------- */

.paavalikko p { margin: 0; max-width: none; }

.paavalikko a {
  color: var(--wp--preset--color--pehmea);
  text-decoration: none;
  transition: color .18s ease;
}

.paavalikko a:hover { color: var(--wp--preset--color--teksti); }

/* --------------------------------------------------------------------------
   Hero

   Rakenne on sama kuin hyväksytyssä suunnitelmassa: taustataivas, suppilo ja
   verho ovat omia kerroksiaan tekstin takana. Ne ovat sivun sisällössä
   wp:html-lohkoina, koska ne ovat koodia eivätkä sisältöä — tekstiä muokataan
   normaaleilla lohkoilla niiden päällä.
   ----------------------------------------------------------------------- */

.home .hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  /* Palsta kuuluu osiolle, ei sen sisukselle. Aiemmin .inner lisasi sen
     itse, jolloin hero sai palstan kahdesti heti kun ikkuna oli yli
     1560 px: sisalto oli 72 px oikealla sekä tunnuksesta etta kaikista
     muista osioista. Alle 1560 px:n ruudulla virhe ei nakynyt. */
  padding: 104px var(--wp--custom--palsta) 56px;
  overflow: hidden;
  isolation: isolate;
}

.home .hero .sky {
  position: absolute; inset: 0; z-index: -2;
  background:
    radial-gradient(70% 60% at 72% 42%, rgba(63,155,69,.28) 0%, rgba(63,155,69,0) 62%),
    radial-gradient(80% 70% at 10% 100%, rgba(46,122,51,.30) 0%, rgba(46,122,51,0) 60%),
    linear-gradient(0deg, #0C2312 0%, #060B07 54%, #050706 100%);
}

/* Grafiikka asetetaan sisältöpalstan oikean puoliskon keskelle: putki on
   66,67 % grafiikan leveydestä sen vasemmasta reunasta, joten se vähennetään
   kohdasta. Prosentit lasketaan .heron leveydestä eikä vw:stä, koska vw
   sisältää vierityspalkin ja siirtäisi kuvaa parikymmentä pikseliä. */
.home .hero .gfx {
  --gfxw:   min(540px, 38%);
  --kaista: clamp(20px, 5%, 72px);
  --sisus:  min(100%, 1560px);
  --palsta: calc(var(--sisus) - 2 * var(--kaista));
  position: absolute; top: 50%; right: auto;
  transform: translateY(-50%);
  z-index: -2;
  left: calc(max(0px, (100% - 1560px) / 2) + var(--kaista)
             + .85 * var(--palsta) - .6667 * var(--gfxw));
  width: var(--gfxw);
  aspect-ratio: 360 / 530;
  pointer-events: none;
  filter: drop-shadow(0 0 80px rgba(139,208,60,.20));
}

.home .hero .veil {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg,
    rgba(5,7,6,.97) 0%, rgba(5,7,6,.9) 34%, rgba(5,7,6,.4) 56%, rgba(5,7,6,0) 74%);
}

.home .hero .inner { position: relative; width: 100%; }

/* Merkki on ainoa asia joka sykkii. */
@keyframes nieluHehku {
  0%, 100% { filter: drop-shadow(0 0 10px rgba(163,227,85,.45)); }
  50%      { filter: drop-shadow(0 0 34px rgba(163,227,85,.95)); }
}

.home .hero .gfx .nielu {
  animation: nieluHehku 3.6s ease-in-out infinite;
  transform-box: fill-box;
}

/* Neljä päällekkäistä varjoa: tiukka valkoinen kuumuus ja sen ympärillä kolme
   yhä leveämpää vihreää kehää. Putkessa näyttää kulkevan jotain, mitä ei
   kannata koskea. Hehku ei liiku — liike vei huomion merkiltä. */
.home .hero .gfx .ydin {
  filter: drop-shadow(0 0 2.5px rgba(226,255,168,.95))
          drop-shadow(0 0 6px   rgba(163,227,85,.9))
          drop-shadow(0 0 13px  rgba(139,208,60,.5))
          drop-shadow(0 0 28px  rgba(110,190,40,.26));
}

.home .hero h1   { max-width: 14ch; }
.home .hero .lede{ max-width: 46ch; }

@media (max-width: 900px) {
  /* Mobiilissa grafiikka menee omalle rivilleen tekstin alle, ei sen päälle,
     ja sommittelu keskitetään koska pystysuppilo on symmetrinen. */
  .home .hero {
    flex-direction: column;
    align-items: stretch;
    padding-top: 56px;
    padding-bottom: clamp(32px, 6vw, 48px);
  }
  .home .hero .veil  { display: none; }
  .home .hero .inner { order: 1; text-align: center; }

  /* h1:llä on max-width, joten pelkkä text-align ei keskitä sitä — laatikko
     jäisi vasempaan reunaan ja teksti näyttäisi hiukan vinolta. */
  .home .hero h1    { margin-inline: auto; }
  .home .hero .lede { margin-left: auto; margin-right: auto; max-width: 34ch; }
  .home .hero .kick { justify-content: center; }
  .home .hero .hint { justify-content: center; }

  /* Putki päättyy grafiikan alareunaan, joten nappirivi tulee siihen kiinni. */
  .home .hero .acts { justify-content: center; margin-top: 0; }

  /* Grafiikka pienemmaksi puhelimessa: taysikokoisena se vei 300 px
     otsikon ja CTA:n valista, jolloin "Katso palvelut" jai taitteen alle.
     Jarjestysta ei voi vaihtaa - svg ei osallistu flex-jarjestykseen
     vaikka order-arvo asettuu. */
  .home .hero .gfx {
    position: relative;
    left: auto; right: auto; top: auto;
    transform: none;
    width: min(150px, 40vw);
    aspect-ratio: 400 / 410;
    margin: clamp(8px, 2vw, 12px) auto 0;
    opacity: .95;
  }
}

@media (prefers-reduced-motion: reduce) {
  .home .hero .gfx .nielu {
    animation: none;
    filter: drop-shadow(0 0 12px rgba(163,227,85,.45));
  }
}

/* Etusivun osiot ovat täysleveitä; sisältöpalsta rajataan osion sisällä,
   samoilla mitoilla kuin ylä- ja alatunniste. */
/* Sisaltopalstan rajaus. Sivupehmuste on .osiolla itsellaan, ei sen
   lapsilla — muuten ruudukon harmaa taustavari levittyisi pehmusteeseen. */
.home .hero .inner { max-width: 1560px; margin-inline: auto; }
.osio > * { max-width: 1560px; margin-inline: auto; }

.home .hero .kick { margin: 0 0 clamp(18px, 2.4vw, 28px); }
.home .hero .acts { margin-top: clamp(26px, 3.2vw, 38px); }
.home .hero .hint { margin-top: clamp(34px, 4vw, 52px); }
.home .hero .hint p { margin: 0; max-width: none; }

/* --------------------------------------------------------------------------
   Osiot
   ----------------------------------------------------------------------- */

.osio {
  padding-block: clamp(56px, 7vw, 96px);
}

/* Sivupehmuste on osiolla, ei sen lapsilla. Ruudukolla on harmaa taustavari,
   joka nakyy ruutujen valisena yhden pikselin viivana - jos pehmuste olisi
   ruudukossa, sama harmaa levittyisi 72 pikselin kaistaksi molemmille reunoille. */
.osio { padding-inline: clamp(20px, 5vw, 72px); }
.osio > .head,
.osio > .grid { max-width: 1560px; margin-inline: auto; }

.head { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-end; justify-content: space-between; }
.head > * { margin: 0; }
.head .kick + h2 { margin-top: 18px; }
.head .say { max-width: 38ch; }

/* --------------------------------------------------------------------------
   Palveluruudukko

   Ruudukon rako on yhden pikselin viiva taustavärinä — näin erottimet ovat
   aina yhtä paksut eikä reunaviivoja tarvitse laskea kortti kortilta.
   ----------------------------------------------------------------------- */

.grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--viiva);
  border: 1px solid var(--viiva);
  margin-top: clamp(34px, 4.4vw, 54px);
}

.cell {
  position: relative;
  background: var(--wp--preset--color--paneeli);
  padding: 0 0 30px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: background .45s;
}

.cell:hover { background: #0F1811; }

.cell .art {
  position: relative;
  height: clamp(160px, 15vw, 208px);
  overflow: hidden;
  border-bottom: 1px solid var(--viiva);
}

.cell .art svg { position: absolute; inset: 0; width: 100%; height: 100%; }

.cell .art::after {
  content: '';
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 100% at 50% 118%, rgba(139,208,60,.16) 0%, rgba(139,208,60,0) 62%);
}

.cell .tx {
  padding: 26px clamp(20px, 1.8vw, 30px) 0;
  display: flex; flex-direction: column; gap: 11px; flex: 1;
}

.cell h3 { margin: 0; }

/* Linkki on otsikossa, mutta klikkausalue on koko kortti: ruudunlukija saa
   oikean kohteen ja hiiri ison napin. Tekstin valinta säilyy, koska laajennos
   on vain otsikon linkin pseudoelementti. */
.cell h3 a { color: inherit; text-decoration: none; }
.cell h3 a::after { content: ''; position: absolute; inset: 0; z-index: 1; }
.cell:hover h3 a { color: var(--wp--preset--color--vihrea-v); }

.cell p { margin: 0; font-size: 14.5px; line-height: 1.6; max-width: none; }

.cell .pr {
  margin-top: auto;
  padding-top: 22px;
  font-size: 11px;
  letter-spacing: .07em;
  color: var(--wp--preset--color--vihrea);
}

/* Viivagrafiikan yhteinen kieli. */
.ln   { fill: none; stroke: #8BD03C; stroke-width: 1; vector-effect: non-scaling-stroke; }
.ln.f { stroke: rgba(242,245,240,.30); }
.ln.d { stroke: rgba(139,208,60,.34); }
.cell:hover .ln { stroke: #A3E355; }

.cell .art .sweep { transform-origin: 50% 50%; animation: spin 26s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .cell .art .sweep { animation: none; }
}

@media (max-width: 1080px) { .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px)  { .grid { grid-template-columns: 1fr; } }

/* WordPressin flow-taitto lisää lohkojen väliin oman marginaalinsa. Kortin
   sisällä välit tulevat .cellin omasta flex-taitosta, joten se nollataan —
   muuten ruudukon rivit eivät ala samalta korkeudelta. */
.grid > *,
.cell > *,
.cell .tx > * { margin-block: 0; }

.head .otsikko { display: flex; flex-direction: column; gap: 0; }
.head .otsikko > * { margin: 0; }
.head .otsikko .kick + h2 { margin-top: 18px; }

/* Hinta painuu kortin pohjaan, jotta rivin hinnat ovat samalla korkeudella
   vaikka kuvaustekstit olisivat eri mittaisia. Tämä tulee marginaalien
   nollauksen jälkeen, koska nollaus veisi sen muuten mukanaan. */
.cell .tx > .pr { margin-top: auto; }

/* --------------------------------------------------------------------------
   Työnäytteen kuva

   Käyttää samaa kuvakehystä kuin osastokorttien piirros, jotta ruudukon
   rivit pysyvät samankorkuisina. Rajaus ylös: työnäytteestä kertoo juuri
   sivuston ylälaita, ei alaosa.

   Vihreä hehku otetaan pois valokuvan päältä. Piirroksessa se sitoo grafiikan
   sivuston väreihin, mutta valokuvan päällä se vain värjää asiakkaan ilmeen.
   ----------------------------------------------------------------------- */

.cell .art.kuva img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: top center;
}

.cell .art.kuva::after { background: none; }

/* Työnäytesivustot ovat vaaleita ja tumma tausta katkeaa kuvan reunaan
   jyrkästi. Ohut sisäviiva pehmentää rajan ilman että kuvaa peitetään. */
.cell .art.kuva { box-shadow: inset 0 0 0 1px rgba(0,0,0,.28); }

.tyot .acts { margin-top: clamp(26px, 3.2vw, 38px); }
.osio > .acts { max-width: 1560px; margin-inline: auto; }

/* --------------------------------------------------------------------------
   Vihreä pinta
   ----------------------------------------------------------------------- */

.plate {
  background:
    radial-gradient(90% 130% at 84% 6%, rgba(139,208,60,.20) 0%, rgba(139,208,60,0) 58%),
    linear-gradient(158deg, var(--wp--preset--color--metsa) 0%, var(--wp--preset--color--metsa-t) 100%);
}

.plate .kick { color: #DCF3B4; }
.plate .say  { color: rgba(255,255,255,.86); }

/* --------------------------------------------------------------------------
   Kaksipalstainen nosto ja aikajana
   ----------------------------------------------------------------------- */

.osio > .sisus,
.osio > .feature { max-width: 1560px; margin-inline: auto; }

.feature {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .9fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
}

.feature > * { margin: 0; }

.scope { position: relative; aspect-ratio: 1; width: 100%; max-width: 520px; margin-inline: auto; }
.scope svg { width: 100%; height: 100%; }

/* Etusivun mitat. Landereilla on omat (`.say` 56ch, väli otsikkoon 26px),
   ja `h2 + .say` on tarkempi kuin landerin `.say`, joten se voittaisi ne
   ilman tätä rajausta — osio kutistui neljä pikseliä ja johtokappale
   nousi lähemmäs otsikkoa kuin suunnitelmassa. */
body:not(.landeri) .say { max-width: 52ch; }
body:not(.landeri) .kick + h2 { margin-top: 18px; }
body:not(.landeri) h2 + .say  { margin-top: clamp(16px, 1.8vw, 22px); }

.nopeus { background: var(--wp--preset--color--pohja-2); border-block: 1px solid var(--viiva); }

.rail { margin-top: clamp(28px, 3.6vw, 44px); border-top: 1px solid var(--viiva); }

.beat {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: clamp(16px, 2.4vw, 32px);
  padding: clamp(18px, 2.2vw, 26px) 0;
  border-bottom: 1px solid var(--viiva);
}

.beat > * { margin: 0; }
.beat .t  { font-size: 12px; color: var(--wp--preset--color--vihrea); padding-top: 4px; }
.beat h4  { margin: 0; font-size: clamp(18px, 1.9vw, 23px); font-weight: 600; letter-spacing: -.022em; }
.beat p   { margin: 6px 0 0; font-size: 15.5px; line-height: 1.5; }

.tarjous .acts { margin-top: clamp(26px, 3.2vw, 38px); }

@media (max-width: 900px) {
  .feature { grid-template-columns: 1fr; }
  .beat    { grid-template-columns: 92px minmax(0, 1fr); }
}

/* --------------------------------------------------------------------------
   Tarjouslomake
   ----------------------------------------------------------------------- */

.lomake { margin-top: clamp(26px, 3.2vw, 38px); max-width: 640px; }

.lomake .hunaja {
  position: absolute; left: -9999px;
  width: 1px; height: 1px; overflow: hidden;
}

.kentat { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 18px; }
.kentta { margin: 0; display: flex; flex-direction: column; gap: 6px; max-width: none; }
.kentta-leve { grid-column: 1 / -1; }

.kentta label {
  font-family: var(--wp--preset--font-family--mono);
  font-size: 11.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.72);
}

.lomake input,
.lomake select,
.lomake textarea {
  width: 100%;
  padding: 12px 14px;
  font: inherit;
  font-size: 16px;                     /* alle 16px saa iOS:n zoomaamaan */
  color: var(--wp--preset--color--teksti);
  background: rgba(0,0,0,.28);
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 6px;
}

/* Pudotusvalikko piirtyy selaimen omalla koodilla, ei sivun tyyleilla.
   Lapinakyva tausta sai sen nayttamaan harmaalta laatikolta, jossa oli
   valkoista tekstia. Kiintea vari ja color-scheme kertovat selaimelle,
   etta kyse on tummasta lomakkeesta, jolloin se piirtaa myos nuolen ja
   vierityspalkin oikein. */
.lomake select {
  color-scheme: dark;
  background-color: #0C130E;
}

.lomake select option {
  background-color: #0C130E;
  color: var(--wp--preset--color--teksti);
}

.lomake input:focus,
.lomake select:focus,
.lomake textarea:focus {
  outline: 2px solid var(--wp--preset--color--vihrea-v);
  outline-offset: 1px;
  border-color: transparent;
}

.lomake textarea { resize: vertical; min-height: 110px; }

.lomake button {
  margin-top: 18px;
  padding: 14px 26px;
  font: inherit; font-weight: 700; font-size: 16px;
  color: #08120A;
  background: var(--wp--preset--color--vihrea);
  border: 0; border-radius: 6px;
  cursor: pointer;
}

.lomake button:hover { background: var(--wp--preset--color--vihrea-v); }

/* Vihrealla levylla nappi kaantyy toisin pain, jotta se erottuu. */
.plate .lomake button { color: #153F1B; background: var(--wp--preset--color--teksti); }
.plate .lomake button:hover { background: #fff; }

.lomake-pikkuteksti { margin: 12px 0 0; font-size: 13px; color: rgba(255,255,255,.7); }
.lomake-virhe       { margin: 0 0 14px; padding: 12px 14px; border-radius: 6px;
                      background: rgba(0,0,0,.3); border: 1px solid rgba(255,255,255,.3); }

.lomake-kuitti { margin-top: clamp(26px, 3.2vw, 38px); max-width: 46ch; }
.lomake-kuitti p:last-child { margin-top: 10px; }

@media (max-width: 620px) { .kentat { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   Ylätunniste kapealla ruudulla

   Linkit piiloon, tunnus ja yhteydenottopainike jäävät. Sama ratkaisu kuin
   suunnitelmassa: viisi linkkiä kolmella rivillä on huonompi kuin kaksi
   elementtiä yhdellä, ja hampurilaisvalikko vaatisi JavaScriptiä sivulle
   jolla sitä ei muuten ole.
   ----------------------------------------------------------------------- */

.mvalikko { display: none; }

@media (max-width: 760px) {
  .paavalikko > p { display: none; }
  .paavalikko { gap: 10px; }

  /*
   * Paneeli asemoidaan ylatunnisteeseen nahden, ei sivuun.
   *
   * ⚠ Z-INDEX ON KORKEAMPI KUIN LANDERIN OMA NAVI (60). Ilman sita
   * landerin tarttuva palkki piirtyi auki olevan valikon paalle ja
   * valikko naytti lapinakyvalta.
   */
  header.wp-block-template-part { position: relative; z-index: 200; }
  header.wp-block-group { position: relative; }

  .mvalikko { display: block; order: -1; }

  .mvalikko > summary {
    list-style: none; cursor: pointer;
    width: 42px; height: 42px; display: grid; place-items: center;
    border: 1px solid var(--viiva); border-radius: 8px;
  }
  .mvalikko > summary::-webkit-details-marker { display: none; }
  .mvalikko[open] > summary { border-color: var(--wp--preset--color--vihrea); }

  .mv-viivat { display: grid; gap: 4px; width: 18px; }
  .mv-viivat i {
    display: block; height: 2px; border-radius: 2px;
    background: var(--wp--preset--color--teksti);
  }
  .mvalikko[open] .mv-viivat i { background: var(--wp--preset--color--vihrea); }

  .mv-paneeli {
    position: absolute; left: 0; right: 0; top: 100%; z-index: 200;
    background: var(--wp--preset--color--paneeli, #0C130E);
    border-bottom: 1px solid var(--viiva);
    padding: 14px 20px 22px;
    max-height: calc(100dvh - 74px); overflow-y: auto;
  }
  .mv-otsikko {
    margin: 14px 0 6px; font-family: var(--wp--preset--font-family--mono, monospace);
    font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
    color: var(--wp--preset--color--himmea);
  }
  .mv-otsikko:first-child { margin-top: 4px; }

  /* Kosketuskohde on 46 pikselia korkea. Pienempi tarkoittaa, etta
     kaksi linkkia osuu saman peukalon alle. */
  .mv-paneeli a {
    display: block; padding: 12px 0; min-height: 46px;
    font-size: 1.05rem; color: var(--wp--preset--color--teksti);
    text-decoration: none; border-bottom: 1px solid var(--viiva);
  }
  .mv-paneeli a:last-of-type { border-bottom: 0; }

  .mv-paneeli .mv-nappi {
    margin-top: 16px; padding: 13px 20px; min-height: 0;
    background: var(--wp--preset--color--vihrea); color: var(--wp--preset--color--pohja);
    border: 0; border-radius: 8px; text-align: center; font-weight: 700;
  }
}

/* Tunnus ylätunnisteessa on versaalilla. Versaali tarvitsee hieman väljyyttä
   kirjainten väliin — sama negatiivinen välistys joka toimii gemenassa tekee
   versaalista puuroa. */
.wp-block-site-title a { text-decoration: none; color: inherit; }

/* --------------------------------------------------------------------------
   Tunnus: merkki + sana

   Merkki tulee taustakuvana linkin pseudoelementtiin, ei erillisenä
   img-elementtinä. Kaksi syytä: sivun sisältöön ei tarvitse kirjoittaa
   teematiedoston polkua, ja suhteellinen osoite ratkeaa tyylitiedoston
   sijainnista — teeman voi siis nimetä uudelleen ilman että tunnus katoaa.

   Koko on 1,06 × kirjainkoko. Se on sama suhde kuin lukitussa logossa
   (logot/BRANDIVARIT.md): merkin korkeus vastaa versaalikorkeutta, jolloin
   merkki ja sana istuvat samalla rivillä ilman että kumpikaan hallitsee.
   ----------------------------------------------------------------------- */

.wp-block-site-title a {
  display: inline-flex;
  align-items: center;
  gap: .42em;
  text-decoration: none;
  color: inherit;
}

.wp-block-site-title a::before {
  content: '';
  width: 1.06em;
  height: 1.06em;
  flex: none;
  background: url(assets/kuvat/merkki.svg) center / contain no-repeat;
}

/* Optinen linjaus: merkin muste alkaa laatikkonsa reunasta, mutta kirjaimessa
   on sivuvara — mitattuna noin 3 px otsikkokoossa. Laatikot ovat siis samassa
   kohdassa, mutta silmä näkee merkin ulkonevana. Siirretään lukkoa saman
   verran oikealle, jolloin merkin ja otsikon muste alkavat samalta viivalta. */
.wp-block-site-title { margin-left: 3px; }

/* --------------------------------------------------------------------------
   Blogi ja artikkeli

   Blogi ei ole sivuston lisä vaan koko näkyvyystyön moottori: kielimalli
   siteeraa sitä, minkä kirjoittajan, päiväyksen ja lähteen se näkee. Siksi
   nämä kolme ovat tässä näkyvää sisältöä eivätkä pelkkää rakenteista dataa —
   ihminen ja kone lukevat saman tiedon samasta paikasta.

   Rivin pituus on rajattu noin 68 merkkiin. Se ei ole makuasia: pitkä rivi
   hidastaa lukemista, koska silmä kadottaa rivin alun paluuliikkeessä.
   ----------------------------------------------------------------------- */

.artikkeli > * { max-width: 68ch; margin-inline: auto; }

.artikkeli-otsake { margin-bottom: clamp(32px, 4vw, 52px); }
.artikkeli-otsake h1 { margin: 14px 0 0; }
/* Otsikko ei katkea kesken sanan */
.artikkeli-otsake h1 {
  font-size: clamp(30px, 3.6vw, 48px);
  line-height: 1.05;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}

.artikkeli-otsake .lede {
  margin: clamp(18px, 2vw, 24px) 0 0;
  font-size: clamp(17px, 1.4vw, 19.5px);
  line-height: 1.6;
  color: var(--wp--preset--color--pehmea);
}

/* Kirjoittaja ja päiväys erottuvat leipätekstistä mutta eivät huuda:
   ne ovat todiste, eivät myyntiargumentti. */
.artikkeli-meta {
  margin-top: clamp(20px, 2.4vw, 28px);
  padding-top: 16px;
  border-top: 1px solid var(--viiva);
  gap: 18px;
  font-size: 12.5px;
  letter-spacing: .04em;
  color: var(--wp--preset--color--himmea-2);
}
.artikkeli-meta p { margin: 0; max-width: none; }
.artikkeli-meta .paivitetty { color: var(--wp--preset--color--vihrea); }

/* Leipäteksti. Väliotsikot saavat ilmaa ylös ja vähän alas, jotta osio
   näyttää kuuluvan otsikkonsa alle eikä kellu niiden välissä. */
.artikkeli .wp-block-post-content > * + * { margin-top: 1.15em; }
.artikkeli .wp-block-post-content h2 { margin: 2.2em 0 0; font-size: clamp(24px, 2.4vw, 32px); }
.artikkeli .wp-block-post-content h3 { margin: 1.8em 0 0; }
.artikkeli .wp-block-post-content ul,
.artikkeli .wp-block-post-content ol { padding-left: 1.3em; }
.artikkeli .wp-block-post-content li + li { margin-top: .5em; }
.artikkeli .wp-block-post-content li::marker { color: var(--wp--preset--color--vihrea); }

/* Taulukko on tekoälyhaussa poikkeuksellisen arvokas: siitä malli poimii
   faktan ilman että sen pitää tulkita virkettä. Siksi se saa olla luettava
   myös kapealla ruudulla. */
.artikkeli .wp-block-table { max-width: none; overflow-x: auto; }
.artikkeli .wp-block-table table { border-collapse: collapse; font-size: 15px; }
.artikkeli .wp-block-table th,
.artikkeli .wp-block-table td {
  border: 1px solid var(--viiva);
  padding: 10px 14px;
  text-align: left;
}
.artikkeli .wp-block-table th {
  font-family: var(--wp--preset--font-family--mono);
  font-size: 11.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--wp--preset--color--vihrea);
}

/* --------------------------------------------------------------------------
   Artikkelin CTA

   Artikkeli, joka vastaa lukijan kysymykseen ja päättyy siihen, tuottaa
   liikennettä muttei yhteydenottoa. Viisi ensimmäistä artikkelia
   julkaistiin ilman yhtäkään nappia — CTA-lohko korjaa sen.

   Erottuu leipätekstistä reunuksella, ei värillä: artikkeli on asiaa ja
   CTA on tarjous, mutta lukija saa itse päättää missä kohtaa vaihtaa.
   ----------------------------------------------------------------------- */

.artikkeli-cta {
  margin-top: clamp(44px, 5vw, 68px);
  padding: clamp(26px, 3vw, 36px);
  border: 1px solid var(--viiva2);
  border-radius: 10px;
  background: #0B120D;
}
.artikkeli-cta h2 { margin: 0; font-size: clamp(20px, 2vw, 26px); }
.artikkeli-cta p { margin: 12px 0 0; color: var(--wp--preset--color--himmea); max-width: none; }
.artikkeli-cta .acts { margin-top: clamp(20px, 2.4vw, 26px); }

.artikkeli .wp-block-quote {
  border-left: 2px solid var(--wp--preset--color--vihrea);
  padding-left: 22px;
  margin-block: 1.8em;
  font-size: 1.05em;
  color: var(--wp--preset--color--pehmea);
}

/* Lähdeluettelo. Väite ilman lähdettä on mielipide, ja mielipidettä ei
   siteerata — siksi jokainen artikkeli päättyy tähän. */
.artikkeli .lahteet {
  margin-top: clamp(44px, 5vw, 68px);
  padding-top: 24px;
  border-top: 1px solid var(--viiva2);
  font-size: 14.5px;
}
.artikkeli .lahteet h2 {
  font-family: var(--wp--preset--font-family--mono);
  font-size: 11.5px !important;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--wp--preset--color--vihrea);
  margin: 0 0 14px !important;
}
.artikkeli .lahteet li { color: var(--wp--preset--color--himmea); }
.artikkeli .lahteet a { word-break: break-word; }

/* --------------------------------------------------------------------------
   Artikkelilista
   ----------------------------------------------------------------------- */

.blogi-otsake { margin-bottom: clamp(36px, 4.5vw, 60px); }
.blogi-otsake h1 { margin: 14px 0 0; }

.blogi .lista .wp-block-post-template {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 1px;
  background: var(--viiva);
  border-block: 1px solid var(--viiva);
}
.blogi .nosto {
  background: var(--wp--preset--color--pohja);
  padding: clamp(24px, 3vw, 34px) 0;
}
/* WordPressin flow-taitto lisaa ruudukon lapsille 24 pikselin marginaalin.
   Ruudukon rako on 1 px ja sen tausta on erotinviiva, joten marginaali
   nakyi 25 pikselin harmaana palkkina artikkelien valissa. */
.blogi .lista .wp-block-post-template > * { margin-block: 0; background: var(--wp--preset--color--pohja); }

.blogi .nosto h2 { margin: 10px 0 0; font-size: clamp(21px, 2vw, 27px); }
.blogi .nosto h2 a { color: inherit; }
.blogi .nosto h2 a:hover { color: var(--wp--preset--color--vihrea-v); }
.blogi .nosto .wp-block-post-excerpt { margin-top: 12px; color: var(--wp--preset--color--himmea); }
.blogi .nosto .wp-block-post-date {
  margin-top: 12px;
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--wp--preset--color--himmea-2);
}

/* --------------------------------------------------------------------------
   Tavallinen sivu (tarjouspyyntö, sopimusehdot, tietosuoja)

   Nämä eivät ole landereita eivätkä etusivu, mutta niiden pitää näyttää
   samalta perheeltä. Ilman tätä WordPressin `constrained`-asettelu keskittää
   sisällön 760 pikselin palstaan, jolloin otsikko, lomake ja prosessirivit
   alkavat kolmesta eri kohdasta — sivu näyttää siltä kuin osat olisi
   ripoteltu eri aikaan.

   Ratkaisu on yksi vasen reuna: kaikki alkaa samalta viivalta, kuten
   landereilla.
   ----------------------------------------------------------------------- */

/* Asettelu on `default`, ei `constrained`. Syy: WordPress keskittaa
   constrained-lohkon lapset !important-maareella, jota ei voi kumota
   ilman omaa !importantia. Kun asettelu on default, palsta ja leveys
   maaritellaan tassa - ja sivu alkaa samasta reunasta kuin ylatunniste. */
.sivu {
  padding-block: clamp(52px, 6.5vw, 92px);
  padding-inline: var(--wp--custom--palsta);
  max-width: 1560px;
  margin-inline: auto;
}

.sivu .wp-block-post-content { max-width: none; }

.sivu .wp-block-post-content > * { max-width: 860px; }

.sivu .wp-block-post-content > h1 { margin: 14px 0 0; max-width: 16ch; }

.sivu .wp-block-post-content > .lede,
.sivu .wp-block-post-content > .wp-block-paragraph.lede {
  margin: clamp(18px, 2vw, 26px) 0 0;
  font-size: clamp(17px, 1.4vw, 19.5px);
  line-height: 1.6;
  color: var(--wp--preset--color--pehmea);
  max-width: 54ch;
}

.sivu .wp-block-post-content > h2 {
  margin: clamp(48px, 5.5vw, 76px) 0 0;
  font-size: clamp(24px, 2.4vw, 34px);
}

.sivu .wp-block-post-content > h2 + * { margin-top: clamp(18px, 2vw, 24px); }

/* Lomake täyttää saman palstan kuin muu sisältö, ei omaa kapeampaansa. */
.sivu .lomake { max-width: 860px; }

/* Prosessirivit ovat samat kuin landereilla, mutta täällä ne alkavat
   samasta reunasta kuin lomake. */
.sivu .rail { margin-top: clamp(24px, 3vw, 34px); }

/* Alatunnisteen keskitys.

   `has-text-align-center` keskittää tekstin laatikkonsa sisällä, mutta
   laatikko on `p { max-width: 70ch }`-säännön takia kapea ja sivun
   vasemmassa reunassa. Teksti näytti siis vasemmalle vedetyltä vaikka se
   oli keskitetty. Alatunnisteessa rivin pituus ei ole ongelma. */
footer .mono { max-width: none; }

/* ---------------------------------------------------------------------
   Videolohko

   Video ei lataudu ennen klikkausta: `preload="none"` ja julistekuva
   hoitavat sen ilman kirjastoa. Play-nappi peittää videon kokonaan,
   jotta koko kuva on klikkausalue - pieni kolmio keskellä on turhan
   tarkka osumapinta puhelimessa.

   Nappi katoaa vasta kun toisto alkaa (.kaynnissa), ei klikkauksen
   hetkellä: muuten kuva välähtää tyhjänä sillä aikaa kun ensimmäinen
   ruutu haetaan.
   ------------------------------------------------------------------ */

/* Lohko rajaa itse leveytensä. Landerin osiot ovat .wrapin sisällä, mutta
   lyhytkoodi voidaan sijoittaa myös niiden väliin - silloin ilman tätä se
   levittyisi reunasta reunaan. Luvut ovat samat kuin landeri.css:n .wrap. */
.bastinet-video {
  margin: clamp(28px, 4vw, 48px) auto;
  max-width: 1560px;
  padding-inline: clamp(20px, 5vw, 72px);
}

/* Osion sisällä rajaus on jo tehty, joten sitä ei tehdä kahdesti. */
.wrap .bastinet-video, .plate .bastinet-video { max-width: none; padding-inline: 0; }

.bastinet-video .kehys {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--viiva2);
  background: #000;
  aspect-ratio: 16 / 9;
}

.bastinet-video video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bastinet-video .play {
  position: absolute;
  inset: 0;
  width: 100%;
  display: flex;
  align-items: flex-end;
  gap: 14px;
  padding: clamp(16px, 2.4vw, 26px);
  border: 0;
  cursor: pointer;
  text-align: left;
  color: #fff;
  background: linear-gradient(to top, rgba(0,0,0,.72) 0%, rgba(0,0,0,.15) 46%, rgba(0,0,0,0) 72%);
  transition: background .18s ease;
}

.bastinet-video .play:hover { background: linear-gradient(to top, rgba(0,0,0,.8) 0%, rgba(0,0,0,.25) 50%, rgba(0,0,0,.05) 78%); }
.bastinet-video .kehys.kaynnissa .play { display: none; }

/* Kolmio piirretään reunuksilla, jotta se ei ole erillinen kuvapyyntö. */
.bastinet-video .kolmio {
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--wp--preset--color--vihrea);
  position: relative;
}

.bastinet-video .kolmio::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 52%;
  transform: translate(-50%, -50%);
  border-style: solid;
  border-width: 9px 0 9px 15px;
  border-color: transparent transparent transparent #0B141C;
}

.bastinet-video .play .teksti { flex: 1 1 auto; font-weight: 700; font-size: clamp(15px, 1.5vw, 19px); line-height: 1.25; }
.bastinet-video .play .kesto  { flex: 0 0 auto; font-size: 13px; opacity: .8; }

.bastinet-video .litterointi { margin-top: 14px; }
.bastinet-video .litterointi summary { cursor: pointer; font-size: 14px; color: var(--wp--preset--color--vihrea); }
.bastinet-video .litterointi p { margin-top: 10px; font-size: 15px; opacity: .82; }

@media (max-width: 560px) {
  .bastinet-video .play { flex-wrap: wrap; gap: 10px; }
  .bastinet-video .play .teksti { flex-basis: 100%; order: 3; }
}

/* Liikkeen vähentäminen ei koske videota itseään - se soi vain
   pyynnöstä - mutta napin siirtymä pois. */
@media (prefers-reduced-motion: reduce) {
  .bastinet-video .play { transition: none; }
}

/* ---------------------------------------------------------------------
   Blogin nostot

   Sama merkintä palvelee kahta paikkaa: etusivun "uusimmat" ja landerin
   "tähän liittyvät". Ero on vain siinä, että landerilla ei näytetä
   päivämäärää — siellä olennaista on aihe, ei tuoreus.

   Kortit ovat linkkejä kokonaisuudessaan eivätkä laatikoita, joissa on
   linkki: koko pinta on klikattava, mikä on puhelimessa olennaista.
   Erotin on hiusviiva eikä reunus, koska sivustolla on jo kortteja
   (palvelut) ja kaksi eri korttityyliä tekisi hierarkiasta sotkun.
   ------------------------------------------------------------------ */

.blogi-nosto {
  padding: clamp(46px, 6vw, 82px) clamp(20px, 5vw, 72px);
  max-width: 1560px;
  margin: 0 auto;
  border-top: 1px solid var(--viiva);
}

.blogi-nosto .kansi { max-width: 62ch; margin-bottom: clamp(26px, 3.4vw, 40px); }

.blogi-nosto .kick {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .14em;
  color: var(--wp--preset--color--vihrea);
  margin-bottom: 14px;
}

.blogi-nosto h2 {
  font-size: clamp(26px, 3.4vw, 40px);
  line-height: 1.08;
  font-weight: 800;
  letter-spacing: -.02em;
  margin: 0;
  hyphens: none;
}

.blogi-nosto .johto { margin: 14px 0 0; opacity: .72; max-width: 58ch; }

.blogi-nosto .jutut {
  display: grid;
  gap: 1px;
  background: var(--viiva);
  border-block: 1px solid var(--viiva);
}

@media (min-width: 760px) {
  /* Sarakemäärä korttien mukaan. Kiinteä kolme jättäisi kahdella
     kortilla tyhjän solun, ja koska erotin on taustaväri, tyhjä solu
     näkyy eri sävyisenä laatikkona. */
  .blogi-nosto .jutut.n2 { grid-template-columns: repeat(2, 1fr); }
  .blogi-nosto .jutut.n3 { grid-template-columns: repeat(3, 1fr); }
}

/* Yksi kortti ei veny koko leveydelle: se näyttäisi rikkinäiseltä. */
.blogi-nosto .jutut.n1 { max-width: 560px; }

.blogi-nosto .juttu {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: clamp(20px, 2.4vw, 28px);
  background: var(--wp--preset--color--pohja);
  text-decoration: none;
  color: inherit;
  transition: background .16s ease;
}

.blogi-nosto .juttu:hover { background: var(--wp--preset--color--pohja-2); }

.blogi-nosto .aihe {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--wp--preset--color--vihrea);
}

.blogi-nosto .otsikko {
  font-size: clamp(17px, 1.7vw, 20px);
  font-weight: 700;
  line-height: 1.24;
  letter-spacing: -.01em;
  hyphens: none;
}

.blogi-nosto .juttu:hover .otsikko { color: var(--wp--preset--color--vihrea-v); }

.blogi-nosto .ingressi { font-size: 14.5px; line-height: 1.5; opacity: .68; }

/* Päivämäärä alimmaksi ja irti tekstistä: se on tieto, ei osa lupausta. */
.blogi-nosto .pvm { font-size: 12px; opacity: .5; margin-top: auto; padding-top: 6px; }

.blogi-nosto .kaikki { margin: clamp(22px, 2.6vw, 30px) 0 0; }
.blogi-nosto .kaikki a { font-weight: 700; }

/* Landerilla nosto on osa sivun kulkua, ei oma alue: kevyempi. */
.blogi-nosto.lander { border-top: 0; padding-block: clamp(38px, 4.6vw, 60px); }

/* ---------------------------------------------------------------------
   Alatunnisteen linkkirivi

   Tämä on sisäisen linkityksen halvin voitto: jokainen sivu linkittää
   jokaiseen landeriin ja blogiin. Ennen tätä blogiin ei päässyt
   klikkaamalla mistään.
   ------------------------------------------------------------------ */

footer .linkit {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 22px;
  margin: 0 auto 22px;
  padding: 0 20px;
  max-width: none;
  font-size: 14px;
}

footer .linkit a { color: var(--wp--preset--color--teksti); opacity: .74; text-decoration: none; }
footer .linkit a:hover { opacity: 1; color: var(--wp--preset--color--vihrea); }

@media (prefers-reduced-motion: reduce) {
  .blogi-nosto .juttu { transition: none; }
}

/* ---------------------------------------------------------------------
   Landerin nosto: sivupehmuste takaisin

   landeri.css asettaa `.landeri-sisalto section{padding:clamp(...) 0}`,
   joka on tarkempi (0,2,1) kuin `.blogi-nosto` (0,1,0) ja nollaa
   sivupehmusteen. Lohko meni siis vasemmasta reunasta yli.

   Sääntö rajataan kolmella luokalla (0,3,0) eikä lisätä elementtiä
   perään: silloin se voittaa varmasti eikä nojaa siihen, kummassa
   järjestyksessä tyylitiedostot latautuvat.
   ------------------------------------------------------------------ */

.landeri-sisalto .blogi-nosto.lander {
  padding: clamp(38px, 4.6vw, 60px) clamp(20px, 5vw, 72px);
}

/* ---------------------------------------------------------------------
   Tilauslomake

   Näyttää samalta kuin tarjouspyyntölomake yhtä kohtaa lukuun ottamatta:
   sopimusehtojen rasti erottuu, koska juuri se tekee tilauksesta sitovan.
   Jos se näyttää samalta kuin muut kentät, se ohitetaan lukematta — ja
   silloin hyväksyntä on muodollinen eikä todellinen.
   ------------------------------------------------------------------ */

.tilauslomake .apu {
  display: block;
  font-size: 13px;
  opacity: .62;
  margin-top: 5px;
}

.tilauslomake .kentta-rasti {
  margin: clamp(20px, 2.6vw, 28px) 0 0;
  padding: 16px 18px;
  background: var(--wp--preset--color--pohja-2);
  border-left: 3px solid var(--wp--preset--color--vihrea);
}

.tilauslomake .kentta-rasti label {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  cursor: pointer;
  font-size: 15px;
  line-height: 1.5;
}

.tilauslomake .kentta-rasti input {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  accent-color: var(--wp--preset--color--vihrea);
}

/* Y-tunnus on numerosarja: tasavälinen fontti tekee virheen näkyväksi. */
.tilauslomake #bn-ytunnus { font-family: var(--wp--preset--font-family--mono, monospace); }

/* -----------------------------------------------------------------------
 * Tilauslomake: nimenkirjoitusoikeus ja kiitos
 * -------------------------------------------------------------------- */

/*
 * Kaksi vaihtoehtoa ovat yksi kysymys, joten ne piirretään yhtenä
 * laatikkona. Ilman tätä .kentta-rasti antaisi kummallekin oman
 * laatikkonsa ja reunuksensa, jolloin ne näyttäisivät kahdelta eri
 * kysymykseltä.
 */
.tilauslomake .kentta-ryhma {
  margin: clamp(20px, 2.6vw, 28px) 0 0;
  padding: 16px 18px;
  border: 0;
  border-left: 3px solid var(--wp--preset--color--vihrea);
  background: var(--wp--preset--color--pohja-2);
}

.tilauslomake .kentta-ryhma legend {
  padding: 0;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  margin-bottom: 10px;
}

.tilauslomake .kentta-ryhma .kentta-rasti {
  margin: 0;
  padding: 6px 0;
  background: none;
  border-left: 0;
}

.tilauslomake .kentta-ryhma .kentta-rasti input { border-radius: 50%; }

/* Kiitosnäkymä. Asiakas on juuri tehnyt sitovan tilauksen ja on
   epävarma: menikö perille, mitä nyt tapahtuu. Numeroitu lista vastaa
   siihen ilman että hänen tarvitsee kysyä. */
.lomake-kiitos {
  padding: clamp(22px, 3vw, 32px);
  background: var(--wp--preset--color--pohja-2);
  border-left: 3px solid var(--wp--preset--color--vihrea);
}

.lomake-kiitos h2 { margin: 0 0 10px; }

.lomake-kiitos h3 {
  margin: clamp(20px, 2.4vw, 26px) 0 8px;
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: .08em;
  opacity: .72;
}

.lomake-kiitos .mono {
  font-family: var(--wp--preset--font-family--mono, monospace);
  font-size: 14px;
  opacity: .78;
  margin: 0 0 14px;
}

.lomake-kiitos ol { margin: 0; padding-left: 1.3em; }
.lomake-kiitos ol li { margin-bottom: 8px; line-height: 1.55; }

.lomake-kiitos .lomake-pikkuteksti {
  margin-top: clamp(18px, 2.2vw, 24px);
  padding-top: 14px;
  border-top: 1px solid color-mix(in srgb, currentColor 14%, transparent);
  font-size: 14px;
  opacity: .72;
}

/*
 * Tilauksen jälkeen myyntiteksti on tarpeeton ja hämäävä: asiakas on jo
 * tilannut, eikä hänen tarvitse enää lukea miksi kannattaisi tilata.
 * Otsikko jätetään, jotta otsikkotasot pysyvät ehjinä.
 *
 * :has() ei toimi vanhoissa selaimissa, jolloin teksti vain jää näkyviin
 * kuten ennenkin. Se on hyväksyttävä lopputulos, ei rikkinäinen sivu.
 */
.entry-content:has(> .lomake-kiitos) > p:not(.lomake-kiitos p) { display: none; }

/*
 * Leveä lohko sivun sisällössä.
 *
 * page.html käyttää flow-taittoa (layout type "default"), jolloin
 * WordPressin alignwide ei yksinään tee mitään — leveyden ratkaisee
 * sääntö `.sivu .wp-block-post-content > * { max-width: 860px }`.
 *
 * Tämä antaa alignwide-lohkolle luvan levitä. Tarkkuus (0,3,0) voittaa
 * yllä olevan (0,2,0), joten järjestyksellä ei ole väliä.
 *
 * Tarvitaan tilauswidgetille: 860 pikselissä yhteenvetopaneeli ei mahdu
 * sisällön viereen, ja hinnan pitäminen näkyvissä koko ajan on mitattu
 * keskeyttämistä vähentäväksi.
 */
.sivu .wp-block-post-content > .alignwide { max-width: 1400px; }

/* -----------------------------------------------------------------------
   Tilaussivu: otsikko widgetin sisäreunaan

   Widgetillä on oma kehys, ja sen sisältö alkaa kehyksen sisäpuolelta
   (.bn-sisalto, clamp(24px, 3.4vw, 40px)). Silmä seuraa sitä sisäreunaa,
   ei kehyksen ulkoreunaa — joten pelkkä sama vasen reuna näytti siltä
   kuin otsikko olisi liukunut vasemmalle. Sama pehmuste otsikolle ja
   ingressille asettaa ne samaan linjaan widgetin tekstin kanssa.
   ----------------------------------------------------------------------- */

.sivu .wp-block-post-content:has(.bn-widget) > h1,
.sivu .wp-block-post-content:has(.bn-widget) > .lede {
  padding-inline-start: clamp(24px, 3.4vw, 40px);
}

/* --------------------------------------------------------------------------
   Toimintopalkki puhelimen alareunassa

   Kolme tekoa, ei navigaatiota: soita, WhatsApp, tilaa. Navigaatio on
   ylätunnisteen valikossa — sama lista kahdessa paikassa tekisi
   kummastakin epäselvän.

   Palkki tulee näkyviin vasta vierityksen jälkeen (inc/mobiilipalkki.php),
   ja body saa silloin alapehmusteen, ettei palkki peitä sivun viimeistä
   riviä. Ilman JavaScriptiä palkkia ei tule lainkaan.
   ----------------------------------------------------------------------- */

.mpalkki { display: none; }

@media (max-width: 760px) {
  .mpalkki {
    display: grid; grid-template-columns: 1fr 1fr 1.15fr;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
    background: rgba(10, 16, 12, .96);
    border-top: 1px solid var(--viiva);
    padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
    gap: 8px;
    animation: mpalkki-esiin .18s ease-out;
  }

  .mpalkki a {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 3px; min-height: 52px; border-radius: 10px;
    border: 1px solid var(--viiva);
    font-size: 12px; font-weight: 600; letter-spacing: .01em;
    color: var(--wp--preset--color--teksti); text-decoration: none;
  }
  .mpalkki svg {
    width: 19px; height: 19px;
    fill: var(--wp--preset--color--vihrea);
  }

  .mpalkki .mp-paa {
    background: var(--wp--preset--color--vihrea);
    border-color: var(--wp--preset--color--vihrea);
    color: var(--wp--preset--color--pohja);
    font-size: 14px; font-weight: 700;
  }

  body.mpalkki-tilaa { padding-bottom: 78px; }
}

@keyframes mpalkki-esiin {
  from { transform: translateY(100%); }
  to   { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .mpalkki { animation: none; }
}

/* --------------------------------------------------------------------------
   Evästeasetukset-nappi mobiilipalkin yläpuolelle

   nanoconsent jättää sivulle pienen "Evästeasetukset"-napin vasempaan
   alakulmaan (bottom: 12px). Mobiilipalkki on samassa kohdassa, joten
   nappi osuu tasan Soita-painikkeen päälle heti kun palkki on esillä —
   asiakas painaisi Soita ja saisi evästeikkunan.

   Nosto tehdään täällä eikä lisäosassa: lisäosa on oma tuotteensa eikä
   saa tietää tämän sivuston palkista.
   -------------------------------------------------------------------------- */

@media (max-width: 760px) {
  body.mpalkki-tilaa .nc-o { bottom: calc(86px + env(safe-area-inset-bottom)); }
}

/* --------------------------------------------------------------------------
   Kiitossivun uudet osat

   Tilatut rivit, seuraava askel ja sopimusasiakirjan lataus. Nämä näkyvät
   vain sitovan tilauksen jälkeen ja vain kun kertakäyttöinen avain on
   mukana osoitteessa — muuten sivu on entisensä.
   ----------------------------------------------------------------------- */

.kiitos-rivit {
  margin: 22px 0 0;
  border: 1px solid var(--viiva-2);
  border-radius: 10px;
  overflow: hidden;
}

.kiitos-rivi {
  display: flex; justify-content: space-between; align-items: center;
  gap: 16px; padding: 12px 16px;
  font-size: .93rem; color: var(--wp--preset--color--pehmea);
  border-bottom: 1px solid var(--viiva);
}
.kiitos-rivi:last-child { border-bottom: 0; }

.kiitos-rivi .h {
  font-family: var(--wp--preset--font-family--mono, monospace);
  color: var(--wp--preset--color--vihrea-v); white-space: nowrap;
}

.kiitos-rivi.summa {
  background: rgba(255, 255, 255, .03);
  color: var(--wp--preset--color--teksti); font-weight: 700;
}

.kiitos-rivi.alv {
  flex-wrap: wrap; font-size: .84rem;
  color: var(--wp--preset--color--himmea);
}

/*
 * ⚠ LINKKI ASETTAA OMAT VÄRINSÄ. Teeman linkkisääntö antaa vaalean
 * vihreän, joka häviää tähän riviin — ja tämä on nappi, ei linkki
 * tekstin seassa.
 */
.kiitos-pdf {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 14px; border-radius: 8px;
  border: 1px solid var(--viiva-2);
  font-size: .86rem; font-weight: 600;
  color: var(--wp--preset--color--teksti); text-decoration: none;
}
.kiitos-pdf::before { content: "↓"; color: var(--wp--preset--color--vihrea); }
.kiitos-pdf:hover {
  border-color: var(--wp--preset--color--vihrea);
  color: var(--wp--preset--color--teksti);
}

/* ---------- seuraava askel ---------- */

.kiitos-askel {
  margin: 26px 0 0; padding: clamp(18px, 2.4vw, 26px);
  background: rgba(139, 208, 60, .06);
  border: 2px solid var(--wp--preset--color--vihrea);
  border-radius: 13px;
}
.kiitos-askel .kick {
  margin: 0 0 8px;
  font-family: var(--wp--preset--font-family--mono, monospace);
  font-size: 10.5px; letter-spacing: .11em; text-transform: uppercase;
  color: var(--wp--preset--color--vihrea-v);
}
/*
 * ⚠ TÄMÄ EI OLE PIKKUOTSIKKO. .lomake-kiitos h3 on teemassa versaali
 * mono-selite ("MITÄ SEN JÄLKEEN TAPAHTUU"), ja ilman kumoamista tämä
 * piirtyi samalla tavalla — vaikka se on osion oikea otsikko.
 */
.kiitos-askel h3 {
  margin: 0 0 10px; font-size: clamp(18px, 2vw, 22px);
  font-family: inherit; font-weight: 700;
  text-transform: none; letter-spacing: -.02em;
  color: var(--wp--preset--color--teksti);
}
.kiitos-askel p {
  margin: 0 0 18px; font-size: .95rem;
  color: var(--wp--preset--color--pehmea);
}

.kiitos-nappi {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 28px; border-radius: 10px;
  background: var(--wp--preset--color--vihrea);
  color: var(--wp--preset--color--pohja);
  font-weight: 700; font-size: 1rem; text-decoration: none;
}
.kiitos-nappi::after { content: "→"; font-weight: 400; }
.kiitos-nappi:hover {
  background: var(--wp--preset--color--vihrea-v);
  color: var(--wp--preset--color--pohja);
}

.kiitos-alle {
  margin: 14px 0 0 !important; font-size: .84rem;
  color: var(--wp--preset--color--himmea) !important;
}

@media (max-width: 560px) {
  .kiitos-rivi.alv { align-items: flex-start; flex-direction: column; gap: 10px; }
  .kiitos-nappi { width: 100%; justify-content: center; }
}

/* Tarjoussivun latausnappi omalla rivillään, ei rivierittelyn sisällä. */
.kiitos-lataa {
  display: flex; align-items: center; flex-wrap: wrap; gap: 12px;
  margin-top: 20px !important;
}
.kiitos-lataa span {
  font-size: .85rem; color: var(--wp--preset--color--himmea);
}

/* --------------------------------------------------------------------------
   Yksi valikko kerrallaan landerisivuilla

   Työpöydällä landerin oma .hub-nauha riittää, ja teeman ylätunniste olisi
   sen kanssa päällekkäistä navigaatiota. Puhelimessa .hub on vaakavieritettävä
   12 pikselin lista, jota ei käytännössä lue kukaan — siellä käytetään teeman
   ylätunnistetta ja sen hampurilaisvalikkoa.

   ⚠ TÄMÄ ASUI ENNEN `assets/css/landeri.css`:SSÄ, JOSTA SE HÄVISI.
   Sen tiedoston kirjoittaa `sisalto/landerit.mjs` joka ajolla uusiksi, joten
   käsin lisätty sääntö katosi ensimmäisessä koonnissa 7.9.2026 ilman
   virheilmoitusta — landereille olisi ilmestynyt kaksi navigaatiota.
   Sääntö kuuluu tänne, koska style.css ei ole generoitu.

   ⚠ VALITSIN ON TARKKA JA SE MENI KAHDESTI VÄÄRIN. Ylätunniste ei ole bodyn
   suora lapsi vaan `.wp-site-blocks`-kääreen sisällä, ja sivupohjaosa kääriin
   sen omaan ulompaan elementtiinsä:
   <header class="wp-block-template-part"><header class="wp-block-group">.
   Kohde on siis ULOMPI header, ei sisempi.
   ----------------------------------------------------------------------- */

@media (min-width: 761px) {
  .wp-site-blocks:has(.landeri-sisalto) > header.wp-block-template-part { display: none; }
}

@media (max-width: 760px) {
  .landeri-sisalto .hub { display: none; }
}