/* Mielii-teeman tyylit. Lähde: _mockup/mockup-src.html (v97).
   ÄLÄ muokkaa mockupia ja teemaa eri suuntiin: teema on nyt totuus. */
/* ==========================================================================
   MIELII v3 — "Ei jää ovelle."
   MOTION RULE: energy is front-loaded and decays as the page gets personal.
   Hero / router / MINSA may move. Pull-quote, price, crisis line stay STILL.
   ========================================================================== */
:root{
  /* grounds */
  /* PALETTI (Mika valitsi 23.8.): vaalea = pellava, vihreä = vehreä.
     Ei punaista vaaleassa eikä keltaista vihreässä. */
  --cream:#F6F4EA; --cream-2:#EAE7D9; --white:#FFFFFF;
  --sage:#E9EFE4; --sage-2:#EFF4EA;
  --dark:#1F2B22; --dark-2:#26312B;
  /* ink */
  /* leipäteksti tummennettu #5F6B61 → #4A5749, jotta taustat voivat olla väkevämpiä */
  --ink:#26312B; --muted:#4A5749; --ink-invert:#EDF2E8;
  /* greens = method & product */
  --brand:#596F5C; --brand-dark:#405444; --brand-deep:#33452F;
  /* korostusväri = vehreän paletin oma vihreä; tummalla bandilla oma vaaleampi sävy
     .minsa-lohkossa, muuten teksti ei erotu taustastaan */
  --lime:#5A9440; --lime-ink:#3F6626; --lime-soft:#E4EFD9;
  --idot:#5A9440; /* i-pilkut samalla korostusvärillä kuin muut aksentit */
  /* toinen korostusvihreä = inhimillinen, lämmin aksentti (ent. savenpunainen) */
  /* toinen korostusvihreä savenpunaisen tilalle (Mika 23.8.): syvä havu, joka erottuu
     sekä limekorostuksesta #5A9440 että brändinvihreästä #596F5C */
  --vihre2:#3E6B4A; --vihre2-soft:#DCE8DC; --vihre2-tint:#E9F0E7;
  --beige:#E3DECB;
  /* Osiotaustat: kumpikin osio on SELKEÄSTI omaa väriään, ja vain osioiden sauma
     liukuu (Mika 23.8.). Molemmat osiot päättyvät saumassa samaan välisävyyn
     --bg-sauma, joten rajaviivaa ei synny, mutta osiot erottuvat toisistaan. */
  --bg-pellava:#FBFAF4; --bg-savikivi:#DCD6C9; --bg-sauma:#EBE8DE; --sauma:130px;
  /* limeverho: iso ja hyvin läpinäkyvä, ulottuu kulmasta pitkälle keskelle sivua */
  --verho:radial-gradient(closest-side,rgba(185,223,99,.16),rgba(185,223,99,.07) 48%,transparent 80%);
  --verho-kivi:radial-gradient(closest-side,rgba(185,223,99,.19),rgba(185,223,99,.08) 48%,transparent 80%);
  --verho-valo:radial-gradient(closest-side,rgba(255,255,255,.42),transparent 78%);
  /* lines */
  --line:rgba(64,84,68,.14); --line-solid:#DDE4D6;
  --shadow:0 22px 50px -20px rgba(40,56,45,.28);
  /* rhythm */
  --pad-s:2.4rem; --pad-m:4rem; --pad-l:5.2rem; --pad-xl:7rem;
  /* Ankkurivierityksen ylavara: kiintean ylapalkin korkeus + pieni hengitystila.
     Kun valikosta hypataan osioon, osion tunnus ("05 · Hinnasto") jaa tasan
     taman verran ruudun ylareunasta. Katso section-saannon kommentti. */
  --ankkuri:88px;
  /* Tekstin pystyrytmi kahtena muuttujana (Mika 31.8.).
     --vali-teksti  on kappaleiden vali ja myos otsikon ALApuolinen vali.
     --vali-otsikko on otsikon YLApuolinen vali.
     Nama EIVAT saa olla samat. Otsikko kuuluu sita seuraavaan tekstiin,
     joten sen ylapuolella on oltava enemman ilmaa kuin alapuolella.
     Kun molemmat olivat .8rem, teksti luki yhtena massana eivatka
     otsikot enaa jasentaneet sivua. */
  --vali-teksti:.8rem;
  --vali-otsikko:1.8rem;
  --gutter:clamp(1.15rem,4vw,2rem);
  --r:14px; --r-lg:20px; --pill:999px;
  --leaf:150px 18px 150px 18px;
  --ease:cubic-bezier(.22,1,.36,1);
  --serif:Georgia,"Iowan Old Style","Palatino Linotype",serif;
  --brand-soft:#7E9880;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --display:clamp(2.3rem,3.6vw,3.3rem);
}
/* MOBILE-FIRST: tighter vertical meter on phones — the single biggest length saving */
@media(max-width:700px){
  /* --display (Mika 1.9.): heron on oltava selvasti osio-otsikoita (h2.title,
     390 px:ssa 28,8 px) suurempi koko mobiilikaistalla. Aiempi 1.9rem-alaraja
     jatti eron 1,6 pikseliin eli hierarkia oli lattea. */
  :root{--pad-s:1.5rem; --pad-m:2.3rem; --pad-l:2.8rem; --pad-xl:3.4rem; --display:clamp(2.1rem,7.5vw,2.6rem)}
  /* photos: wider crops on phones — tall portraits eat whole screens */
  .hero-grid{gap:.5rem}
  .hero-photo{aspect-ratio:var(--suhde,3/2)!important}
  .hero h1{font-size:clamp(2.15rem,8vw,2.7rem)}
  .kicker{margin-bottom:.3rem}
  .hero-triplet{font-size:1.05rem;margin-bottom:.7rem}
  .hero-bubble{position:static;max-width:none;margin-top:.6rem}
  .hero-bubble::after{display:none}
  .hero h1{margin-bottom:.5rem}
  .hero .lead{margin-bottom:.5rem}
  .derisk{margin-bottom:.9rem}
  .cta-row{gap:.5rem;margin-bottom:1rem}
  /* Rajattu #ireneen: sama kehysluokka on kaytossa myos alasivujen kuvissa. */
  #irene .irene-photo img{aspect-ratio:var(--suhde,4/3.2)}
  .hero-photo img{object-position:var(--kohdistus,50% 30%)}
  #irene .irene-photo img{object-position:var(--kohdistus,50% 25%)}
  .tilat-grid{grid-template-columns:1fr 1fr;gap:.5rem}
  .tilat-grid img{aspect-ratio:1/1.05}
  .tilat-grid img:first-child{grid-column:1/-1;aspect-ratio:16/9}
  .minsa-shots{min-height:220px}
  .minsa-shot{width:74%}
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;color:var(--ink);font-family:var(--sans);
  background:var(--cream);
  /* pohja: pellava + vehreät pesut, ei punaista eikä keltaista (Mika 23.8.) */
  background-image:
    radial-gradient(58rem 40rem at 88% -8%, rgba(208,196,176,.7), transparent 62%),
    radial-gradient(46rem 34rem at -12% 32%, rgba(208,196,176,.45), transparent 62%),
    radial-gradient(52rem 36rem at 108% 78%, rgba(208,196,176,.55), transparent 62%),
    radial-gradient(44rem 32rem at 6% 112%, rgba(208,196,176,.38), transparent 62%),
    linear-gradient(180deg,#F8F6EF 0%,#F3F1E5 45%,#EFEDE0 100%);
  background-attachment:fixed;
  font-size:clamp(1rem,.97rem + .18vw,1.09rem);line-height:1.62;-webkit-font-smoothing:antialiased}
h1,h2,h3,.serif{font-family:var(--serif);font-weight:500;letter-spacing:-.018em;line-height:1.1;color:var(--brand-deep);margin:0;text-wrap:balance}
p{margin:0}
/* height:auto on PAKOLLINEN. WordPress lisaa mediakirjaston kuviin width- ja
   height-attribuutit, ja height-attribuutti kumoaisi kaikki aspect-ratio-saannot
   (aspect-ratio patee vain kun toinen mitta on auto). Ilman tata rivia jokainen
   hallinnasta vaihdettu kuva nakyy alkuperaisessa muodossaan rajauksen sijaan.
   Ne kuvat joilla on oma korkeus (logo, minsa-logo, hero) asettavat sen itse
   tarkemmalla valitsimella, joten tama ei riko niita. */
img{max-width:100%;display:block;height:auto}
a{color:var(--brand-dark)}
/* fokusrengas: tumma vihreä + vaalea halo, jotta se erottuu myös Minsan tummalla bandilla */
:focus-visible{outline:3px solid var(--vihre2);outline-offset:3px;border-radius:6px;
  box-shadow:0 0 0 6px rgba(255,255,255,.85)}
::selection{background:var(--lime);color:var(--brand-deep)}

/* containers */
.wrap{max-width:1120px;margin-inline:auto;padding-inline:clamp(1.15rem,4vw,2rem)}
.wrap-narrow{max-width:680px;margin-inline:auto;padding-inline:clamp(1.15rem,4vw,2rem)}
/* ANKKURIVIERITYS
   Selain vierittaa ankkurin OMAAN ylareunaan. Osiolla on 30-83 px
   ylapehmustetta, joten kiinteä arvo 74px jatti osion tunnuksen lahes sata
   pikselia ruudun ylareunan alapuolelle: valikosta hypattaessa nakyi ensin
   iso tyhja alue ja vasta sitten "05 · Hinnasto".

   scroll-margin-top vahennetaan siksi osion omasta pehmusteesta, jolloin
   vieritys pysahtyy otsikkolohkon kohdalle riippumatta siita mika pehmuste
   osiolla on. Arvo tulee samasta --pad-*-muuttujasta jota osio kayttaa, joten
   pehmusteen muuttaminen korjaa kohdistuksen itsestaan.

   Luokkavalitsin (0,1,0) voittaa tyyppivalitsimen (0,0,1), joten .pad-*
   -saannot kumoavat section-saannon ilman !important-maaretta. Heron oma
   scroll-margin-top:0 on inline-tyylissa ja voittaa nama molemmat. */
section{position:relative;padding-block:var(--pad-m);scroll-margin-top:calc(var(--ankkuri) - var(--pad-m))}
.pad-s{padding-block:var(--pad-s);scroll-margin-top:calc(var(--ankkuri) - var(--pad-s))}
.pad-l{padding-block:var(--pad-l);scroll-margin-top:calc(var(--ankkuri) - var(--pad-l))}
.pad-xl{padding-block:var(--pad-xl);scroll-margin-top:calc(var(--ankkuri) - var(--pad-xl))}

/* editorial section marker (replaces uppercase kickers) */
.marker{display:flex;align-items:baseline;gap:.55rem;margin:0 0 1.1rem;font-size:.95rem;color:var(--muted)}
.marker b{font-family:var(--serif);font-size:1.15rem;color:var(--vihre2);font-weight:500}
.marker span{font-weight:500}
.on-dark .marker{color:#AFC0A8} .on-dark .marker b{color:var(--lime)}
h1.title,h2.title{font-size:clamp(1.95rem,1.4rem + 2.4vw,3rem);margin-bottom:.7rem}
/* otsikko yhdellä rivillä (Mika 23.8.): koko seuraa näkymän leveyttä, jotta rivi
   mahtuu myös kapealla puhelimella. Käytössä alasivujen pitkissä otsikoissa.
   HUOM: nowrap vain työpöydällä. Mobiilin otsikkokoko tulee tiedoston lopussa
   olevasta säännöstä (h1.title,h2.title), joka voittaa kaskadissa, mutta nowrap
   jäi tänne voimaan. Mitattu 320 px:ssä: "Hyvinvoiva mieli tekee hyvää työtä"
   oli 425 px 268 px:n laatikossa ja .subpage{overflow:hidden} leikkasi lopun. */
h1.title-1l,h2.title-1l{font-size:clamp(1.05rem,4.6vw,2.45rem)}
@media(min-width:701px){h1.title-1l,h2.title-1l{white-space:nowrap}}
.lead{color:var(--muted);font-size:clamp(1.05rem,1rem + .35vw,1.2rem);max-width:60ch}
.on-dark{color:var(--ink-invert)} .on-dark h2,.on-dark h3{color:#F1F6EC} .on-dark .lead{color:#C3D2BC}

/* buttons — lime is ONLY the primary fill */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:52px;
  padding:.85rem 1.5rem;border-radius:var(--pill);border:1.5px solid transparent;
  font-family:var(--sans);font-weight:700;font-size:1rem;text-decoration:none;cursor:pointer;
  transition:transform .22s var(--ease),background .22s var(--ease),border-color .22s var(--ease)}
.btn-primary{background:var(--brand);color:#FFFFFF;border-color:var(--beige);
  box-shadow:0 10px 24px -10px rgba(64,84,68,.45)}
.btn-primary:hover{background:var(--brand-dark);transform:translateY(-2px)}
.btn-ghost{background:var(--white);color:var(--brand-dark);border-color:var(--lime);
  box-shadow:0 6px 16px -12px rgba(64,84,68,.3)}
.btn-ghost:hover{border-color:var(--brand);transform:translateY(-2px)}
.on-dark .btn-ghost{color:#E8F0E2;border-color:rgba(255,255,255,.3)}
.on-dark .btn-ghost:hover{background:rgba(255,255,255,.09)}

/* ---------- header ---------- */
/* yläpalkki erottuu sekä lämpimästä että vihreästä osiotaustasta: lähes valkoinen
   pinta + pehmeä varjo (Mika 23.8.) */
header.site{position:sticky;top:0;z-index:60;background:rgba(255,254,250,.95);
  backdrop-filter:saturate(1.3) blur(10px);border-bottom:1px solid var(--line-solid);
  box-shadow:0 8px 20px -14px rgba(40,56,45,.45)}
.nav{display:flex;align-items:center;gap:.8rem;padding-block:.6rem}
.brand{margin-right:auto;display:inline-flex;align-items:center;text-decoration:none}
.brand img{height:52px;width:auto}
.navlinks{display:none;gap:.05rem;align-items:center}
.navlinks>a,.nav-item>a{position:relative;color:var(--ink);text-decoration:none;font-size:.94rem;font-weight:600;
  padding:.5rem .65rem;border-radius:var(--pill);transition:color .2s var(--ease);display:inline-block}
.navlinks>a::after,.nav-item>a::after{content:"";position:absolute;left:.65rem;right:.65rem;bottom:.25rem;height:2px;
  background:var(--lime);border-radius:2px;transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
.navlinks>a:hover::after,.nav-item>a:hover::after,.navlinks>a[aria-current="true"]::after{transform:scaleX(1)}
/* Palvelut dropdown */
.nav-item{position:relative}
.subnav{position:absolute;top:100%;left:0;min-width:190px;background:#fff;border:1px solid var(--line-solid);
  border-radius:14px;box-shadow:0 18px 40px -18px rgba(40,56,45,.35);padding:.4rem;display:none;flex-direction:column;z-index:80}
.nav-item:hover .subnav,.nav-item:focus-within .subnav{display:flex}
.nav-item.closed .subnav{display:none!important}
.subnav a{color:var(--ink);text-decoration:none;font-size:.94rem;font-weight:600;padding:.55rem .8rem;border-radius:10px}
.subnav a:hover{background:var(--sage)}
.nav-biz{display:none;border-left:1px solid var(--line-solid);padding-left:.9rem;margin-left:.45rem;
  color:var(--muted);font-size:.88rem;font-weight:600;text-decoration:none}
.nav-biz:hover{color:var(--brand-dark)}
.nav-cta{display:none}
.menu-btn{display:inline-grid;place-items:center;margin-left:auto;width:46px;height:46px;
  border-radius:var(--r);border:1px solid var(--line-solid);background:var(--white);color:var(--brand-dark);cursor:pointer}
.menu-btn svg{width:22px;height:22px}
/* Auki oleva valikko nakyy myos napista: tumma vihrea tayttö, sama kuin
   ensisijaisella napilla. Tila luetaan aria-expanded-maareesta, jonka skripti
   asettaa joka tapauksessa, joten erillista luokkaa ei tarvita. */
.menu-btn[aria-expanded="true"]{background:var(--brand);border-color:var(--brand);color:#fff}

/* ---------- puhelimen vetolaatikko ---------- */
/* Valikossa on 12 riviä, ja 54 px:n rivikorkeudella se oli 668 px korkea eli
   ei mahtunut pienen puhelimen ruudulle kerralla. Kaksi muutosta: rivikorkeus
   tiivistettiin 44 pikseliin, joka on projektin kosketusraja eika sen alle
   menna, ja alakohdat ladottiin kahteen sarakkeeseen. Jalkimmainen on suurin
   yksittainen saasto: Palvelut-ryhman nelja kohtaa vievat kahden rivin verran
   tilaa neljan sijasta.

   Valikossa EI ole taustavareja lainkaan, ei linkeilla eika ryhmilla.
   Hover- ja aria-current-taustat poistettiin, koska kosketusnaytolla
   hover-tila jaa napautuksen jalkeen paalle: linkin taakse ilmestyi
   vaaleanvihrea laatikko joka ei lahtenyt pois. Nykyinen sivu erottuu
   ylatasolla limepallon taydella varilla ja alakohdissa lihavoinnilla. */
.drawer{display:none;flex-direction:column;gap:.15rem;padding:.5rem 0 .7rem;
  border-top:1px solid var(--line);margin-top:.35rem}
.drawer.open{display:flex}
.drawer a{color:var(--brand-deep);text-decoration:none;font-weight:600;font-size:1.02rem;
  padding:.4rem .85rem;border-radius:var(--r);min-height:44px;display:flex;align-items:center;gap:.65rem;
  transition:background .2s var(--ease),color .2s var(--ease)}
/* Limepallo ylatason kohdan edessa: sama merkki kuin korttien luettelossa
   (.rgroup li::before) ja saman varinen kuin .rlink-nuoli. */
.drawer>a::before{content:"";width:7px;height:7px;border-radius:50%;flex:none;background:var(--lime);
  opacity:.45;transition:opacity .2s var(--ease),transform .2s var(--ease)}
.drawer>a:hover::before{opacity:1;transform:scale(1.3)}
.drawer>a[aria-current]::before{opacity:1;transform:scale(1.3)}

/* Alakohdat pelkalla sisennyksella, ei omaa laatikkoa. Kaksi saraketta
   sailyttaa tilansaaston: Palvelut-ryhman nelja kohtaa vievat kahden rivin
   verran. Yksin jaava pitka nimi ("Ratkaisukeskeinen lyhytterapia")
   levitetaan koko leveydelle jottei se katkea kahdelle riville. */
.drawer-alat{display:grid;grid-template-columns:1fr 1fr;gap:.1rem .3rem;
  margin:0 0 .25rem 2.6rem}
.drawer-alat>a.sub:only-child{grid-column:1 / -1}
.drawer a.sub{padding:.35rem .55rem;font-weight:500;font-size:.98rem;color:var(--brand-dark)}
.drawer a.sub[aria-current]{color:var(--brand-deep);font-weight:600}
.drawer .sep{border-top:1px solid var(--line);margin-top:.4rem;padding-top:.6rem}
/* varausnappi näkyviin jo tabletissa: ennen se ilmestyi vasta 1000 px:ssä, jolloin
   isollakin tabletilla ainoa reitti varaukseen oli hampurilaisvalikko */
@media(min-width:600px){.nav-cta{display:inline-flex}.menu-btn{margin-left:.6rem}}
@media(min-width:1000px){.navlinks,.nav-cta,.nav-biz{display:flex}.menu-btn{display:none}.drawer{display:none!important}}

/* ---------- mobile sticky booking bar ---------- */
.mbar{position:fixed;left:0;right:0;bottom:0;z-index:70;display:flex;gap:.5rem;align-items:center;
  padding:.45rem .8rem calc(.45rem + env(safe-area-inset-bottom));background:rgba(255,254,250,.96);
  backdrop-filter:blur(10px);border-top:1px solid var(--line-solid);
  transform:translateY(110%);transition:transform .4s var(--ease),visibility .4s;
  visibility:hidden}
/* visibility eika pelkka transform: siirretty palkki on yha nappaimiston
   tavoitettavissa, jolloin sarkain hyppaa nakymattomiin nappeihin. */
.mbar.show{transform:none;visibility:visible}
/* Palkki peittaa alareunan 58 px. Ilman tata alatunnisteen alin rivi jaa sen
   alle jokaisella alasivulla, koska siella palkki nakyy koko ajan. Luku on
   sidottu palkin korkeuteen: jos napin korkeutta muutetaan, muuta myos tama. */
@media(max-width:999px){body{padding-bottom:calc(60px + env(safe-area-inset-bottom))}}
/* Palkki on kiinteä ja peittää alareunaa koko ajan, joten jokainen pikseli
   maksaa. Napit ovat 44 px eli WCAG:n kosketuskohteen vähimmäiskoko.
   Mitattu 390 px:ssä: palkki 76 px -> 58 px. */
.mbar .btn{flex:1;min-height:44px;padding-block:.5rem;font-size:.98rem}
.mbar .tel{flex:none;width:44px;height:44px;border-radius:var(--pill);border:1.5px solid var(--line-solid);
  background:var(--white);color:var(--brand-dark);display:grid;place-items:center}
.mbar .tel svg{width:20px;height:20px}
@media(min-width:1000px){.mbar{display:none}}

/* ---------- hero ---------- */
/* hero = LÄMMIN kermatausta. Seuraava osio (#kenelle) on raikas vihreä,
   joten osiot erottuvat toisistaan selvästi. */
/* Hero: selkeä pellava, alareunassa 130 px liukuma kohti saumasävyä.
   HUOM: pystysuora gradientti on pakollinen, vinossa reunaväri vaihtelisi eikä sauma olisi saumaton. */
.hero{position:relative;background:linear-gradient(180deg,var(--bg-pellava) 0%,
  var(--bg-pellava) calc(100% - var(--sauma)),var(--bg-sauma) 100%);
  padding-block:clamp(1.1rem,2vw,1.6rem) clamp(1.3rem,2.4vw,1.9rem);overflow:hidden}
/* LIMEVERHO (Mika 23.8.): Mieliin lime rgb(185,223,99) laskeutuu kulmista verhona
   pitkälle sivun keskelle. Iso koko + matala peitto = ei pistä silmään.
   Yksi limeverho ja yksi vaalea valoverho per osio. */
.hero::before{content:"";position:absolute;z-index:0;width:1020px;height:1020px;border-radius:50%;
  left:-360px;bottom:-520px;background:var(--verho)}
.hero::after{content:"";position:absolute;z-index:0;width:1120px;height:1120px;border-radius:50%;
  right:-380px;top:-560px;background:var(--verho)}
.hero .wrap{position:relative;z-index:1}
.kicker{display:flex;align-items:center;gap:.6rem;text-transform:uppercase;letter-spacing:.16em;
  font-size:.8rem;font-weight:700;color:var(--brand);margin-bottom:.7rem}
.kicker span{width:26px;height:2px;background:var(--brand);border-radius:2px;flex:none}
.hero h1{font-size:clamp(2.2rem,3.3vw,2.9rem)}
.h1-soft{display:block;color:var(--brand-soft)}
.hero-triplet{font-family:var(--serif);font-size:1.1rem;color:var(--brand-deep);margin:0 0 1rem}
/* bubble hugs the photo's bottom-left corner and reaches out into the gutter,
   never over the text column */
.hero-bubble{position:absolute;left:-40px;bottom:14px;width:158px;max-width:none;background:#fff;
  border:1px solid var(--line-solid);border-radius:12px;padding:.5rem .65rem;
  box-shadow:0 16px 34px -16px rgba(40,56,45,.35);
  font-family:var(--serif);font-style:italic;font-size:.85rem;color:var(--brand-dark);line-height:1.42}
.hero-bubble strong{display:block;font-family:var(--serif);font-style:italic;font-size:.93rem;
  color:var(--brand-deep);margin-bottom:.15rem;font-weight:500}
.hero-bubble::after{content:"";position:absolute;bottom:22px;right:-8px;width:14px;height:14px;background:#fff;
  border-right:1px solid var(--line-solid);border-top:1px solid var(--line-solid);transform:rotate(45deg)}
/* credentials under the hero photo */
.cred-list{list-style:none;margin:.8rem 0 0;padding:0;display:grid;gap:.3rem}
.cred-list li{font-size:.83rem;color:var(--muted);font-weight:600;display:flex;gap:.45rem;align-items:flex-start;line-height:1.4}
.cred-list li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--idot);margin-top:.42em;flex:none}
/* teksti yhtenä flex-lapsena, muuten selite valuu omaksi sarakkeekseen bullettien viereen */
.cred-t{min-width:0}
/* MDFT-selite omalle rivilleen otsikon ALLE (Mika 23.8.), ei toiseen sarakkeeseen */
.cred-x{display:block;font-weight:500;opacity:.92}
/* mobile order: headline -> Irene's photo -> body. Her face must be on the first screen. */
.hero-grid{display:grid;gap:1.1rem;align-items:center}
@media(min-width:900px){
  .hero-grid{grid-template-columns:minmax(0,1fr) 330px;gap:.6rem clamp(1.8rem,4vw,3rem);
    grid-template-areas:"head visual" "body visual"}
  .hero-head{grid-area:head;align-self:end}
  .hero-body{grid-area:body;align-self:start}
  .hero-visual{grid-area:visual;max-width:330px;width:100%;justify-self:end}
  .hero-photo{aspect-ratio:var(--suhde,4/4.1)}
}
.hero .eyebrow{font-family:var(--serif);font-style:italic;color:var(--vihre2);font-size:1.15rem;margin-bottom:.7rem}
.hero h1{font-size:var(--display);margin-bottom:.8rem}
.u-draw{position:relative;display:inline-block}
.u-draw svg{position:absolute;left:0;right:0;bottom:-.22em;width:100%;height:.34em;overflow:visible}
.u-draw path{fill:none;stroke:var(--lime);stroke-width:7;stroke-linecap:round;
  stroke-dasharray:1000;stroke-dashoffset:1000;transition:stroke-dashoffset 1s 1.3s var(--ease)}
.js.loaded .u-draw path{stroke-dashoffset:0}
.hero .lead{margin-bottom:1.1rem;max-width:none}
.lead-accent{display:block;margin-top:.35rem;font-family:var(--serif);font-style:italic;color:var(--brand-deep)}
.derisk{font-weight:700;color:var(--brand-dark);margin-bottom:1.3rem;font-size:1.05rem}
.cta-row{display:flex;flex-wrap:wrap;gap:.7rem;margin-bottom:1.5rem}
/* trust ticks: fixed 2 + 2 layout */
.ticks{display:grid;grid-template-columns:repeat(2,minmax(0,max-content));gap:.55rem 1.6rem;list-style:none;margin:0;padding:0}
.ticks li{display:flex;align-items:flex-start;gap:.45rem;font-size:.9rem;font-weight:600;color:var(--muted)}
.ticks i{width:19px;height:19px;border-radius:50%;background:var(--sage);color:var(--brand-dark);
  display:inline-grid;place-items:center;font-size:11px;font-weight:800;font-style:normal;flex:none;margin-top:1px}
.hero-visual{position:relative}
.hero-visual{position:relative}
.hero-photo-wrap{position:relative}
.hero-photo{aspect-ratio:var(--suhde,4/4.5);max-height:var(--maxkorkeus,none);max-width:calc(100% * var(--koko,1));border-radius:calc(34px * var(--koko,1) * var(--pyoristys,1));overflow:hidden;background:var(--sage);box-shadow:var(--shadow)}
/* object-position on oltava myos tyopoydalla. Se oli aiemmin vain mobiili- ja
   vaakanaytto-saannoissa, joten hallinnan rajauskohta ei vaikuttanut hero-kuvaan
   isolla naytolla lainkaan. Oletus 50% 50% on sama kuin selaimen oma, eli
   ulkoasu ei muutu. */
.hero-photo img{width:100%;height:100%;object-fit:cover;object-position:var(--kohdistus,50% 50%);transform:scale(1.05);transition:transform 1.1s var(--ease)}
.js.loaded .hero-photo img{transform:scale(1)}
/* etusivun sisääntulo: koko sivu häivähtää esiin ja hero-elementit
   nousevat rauhallisesti porrastettuna (kokonaiskesto ~2 s) */
.js body{opacity:0}
.js.loaded body{opacity:1;transition:opacity .7s ease}
.js .hero .kicker,.js .hero h1,.js .hero .lead,.js .hero-visual,.js .hero .hero-triplet,.js .hero .cta-row,.js .hero .ticks{
  opacity:0;transform:translateY(24px);
  transition:opacity .95s var(--ease),transform .95s var(--ease)}
.js .hero .kicker{transition-delay:.2s}
.js .hero h1{transition-delay:.35s}
.js .hero .lead{transition-delay:.5s}
.js .hero-visual{transition-delay:.65s}
.js .hero .hero-triplet{transition-delay:.8s}
.js .hero .cta-row{transition-delay:.95s}
.js .hero .ticks{transition-delay:1.1s}
.js.loaded .hero .kicker,.js.loaded .hero h1,.js.loaded .hero .lead,.js.loaded .hero-visual,
.js.loaded .hero .hero-triplet,.js.loaded .hero .cta-row,.js.loaded .hero .ticks{opacity:1;transform:none}
.hero-note{position:absolute;left:0;bottom:18px;max-width:min(290px,86%);background:rgba(255,255,255,.95);
  backdrop-filter:blur(8px);border:1px solid var(--line-solid);border-radius:var(--r);padding:.85rem 1rem;box-shadow:var(--shadow)}
.hero-note strong{display:block;font-family:var(--serif);font-size:1.05rem;color:var(--brand-deep);margin-bottom:.15rem}
.hero-note span{font-size:.87rem;color:var(--muted)}
/* proof strip */
.proof{margin-top:clamp(.9rem,2vw,1.2rem);display:flex;flex-wrap:wrap;gap:.5rem}
.proof li{list-style:none;font-size:.87rem;font-weight:600;color:var(--brand-dark);background:var(--sage);
  border:1px solid var(--line);border-radius:var(--pill);padding:.45rem .9rem}
.js .proof li{opacity:0;transform:translateY(10px);transition:opacity .5s var(--ease),transform .5s var(--ease);transition-delay:calc(var(--i) * 70ms)}
.js.loaded .proof li{opacity:1;transform:none}

/* ---------- router ---------- */
.chips{display:flex;gap:.6rem;overflow-x:auto;padding:.2rem .2rem 1rem;margin-inline:calc(-1 * clamp(1.15rem,4vw,2rem));
  padding-inline:clamp(1.15rem,4vw,2rem);scrollbar-width:none;-webkit-overflow-scrolling:touch}
.chips::-webkit-scrollbar{display:none}
.chip{flex:0 0 auto;max-width:270px;background:var(--white);border:1px solid var(--line-solid);border-radius:var(--r);
  padding:1rem 1.1rem;text-decoration:none;color:var(--ink);min-height:44px;
  transition:transform .18s var(--ease),border-color .18s var(--ease)}
.chip q{font-family:var(--serif);font-size:1.06rem;color:var(--brand-deep);font-style:italic;quotes:"\201D" "\201D"}
.chip small{display:block;margin-top:.4rem;font-size:.82rem;color:var(--muted);font-weight:600}
.chip.open{background:var(--lime-soft);border-color:var(--lime)}
.chips-rule{height:2px;background:var(--line-solid);border-radius:2px;position:relative;max-width:320px}
.chips-rule i{position:absolute;left:0;top:0;bottom:0;width:30%;background:var(--lime);border-radius:2px;transition:transform .2s linear}
@media(min-width:900px){.chips{flex-wrap:wrap;overflow:visible;margin-inline:0;padding-inline:0}
  .chip{flex:1 1 calc(33.333% - .4rem)}.chips-rule{display:none}}
.small-thing{margin-top:1.6rem;max-width:62ch}
.small-thing b{font-family:var(--serif);font-weight:500;font-size:1.25rem;color:var(--brand-deep);display:block;margin-bottom:.35rem}
.small-thing p{color:var(--muted)}

/* ---------- free intro ---------- */
/* tutustuminen = lämmin kerma (edellinen osio #kenelle on vihreä) */
.intro{background:linear-gradient(180deg,var(--bg-sauma) 0%,var(--bg-pellava) var(--sauma),
  var(--bg-pellava) calc(100% - var(--sauma)),var(--bg-sauma) 100%)}
.intro-grid{display:grid;gap:clamp(1.4rem,4vw,3rem);align-items:center}
/* 0 € price-sticker: word + price + duration inside the disc, gentle tilt for life */
.zero{display:grid;justify-items:center;text-align:center}
.badge0{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:.05rem;width:clamp(175px,46vw,215px);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle at 32% 26%,#F6FBE4,var(--lime-soft) 72%);
  border:2px solid var(--lime);transform:rotate(-4deg);
  box-shadow:0 16px 32px -16px rgba(40,56,45,.3)}
.badge0::before{content:"";position:absolute;inset:8px;border-radius:50%;
  border:1.5px dashed rgba(78,104,38,.4)}
.b0-top{font-family:var(--serif);font-style:italic;font-size:1.05rem;color:var(--lime-ink)}
.badge0 b{font-family:var(--serif);font-size:clamp(2.7rem,7vw,3.4rem);line-height:1;color:var(--brand-deep);
  font-variant-numeric:tabular-nums;font-weight:500}
.b0-bottom{font-size:.92rem;font-weight:700;color:var(--brand-dark);letter-spacing:.05em}
.zero small{display:block;margin-top:1rem;font-family:var(--sans);
  font-size:.95rem;color:var(--muted);font-weight:600;max-width:24ch}
.zero-col{justify-self:center}
.howto{list-style:none;margin:0 0 1.3rem;padding:0;display:grid;gap:1rem;counter-reset:h}
.howto li{display:grid;grid-template-columns:auto 1fr;gap:.9rem;align-items:start;counter-increment:h}
.howto li::before{content:counter(h);font-family:var(--serif);font-size:1.05rem;color:var(--vihre2);
  width:30px;height:30px;border:1px solid var(--vihre2);border-radius:50%;display:grid;place-items:center;flex:none}
.norisk{font-weight:700;color:var(--brand-dark);margin-bottom:1.1rem}

/* ---------- method ---------- */
.note-line{margin-top:1.2rem;border-left:3px solid var(--lime);padding:.15rem 0 .15rem .95rem;
  font-family:var(--serif);font-size:1.1rem;color:var(--brand-dark)}
/* "mikä voi olla toisin" — no boxes: a growing stem with i-dots */
#tyoskentely .lead{max-width:62ch}
.after{position:relative;list-style:none;margin:1.8rem 0 0;padding:0 0 0 2.4rem;display:grid;gap:1.05rem;
  max-width:640px}
.after::before{content:"";position:absolute;left:5px;top:.55rem;bottom:.55rem;width:2px;border-radius:2px;
  background:linear-gradient(to bottom,var(--lime),rgba(89,111,92,.35))}
.after li{position:relative;font-family:var(--serif);font-size:clamp(1.15rem,1rem + .55vw,1.5rem);
  color:var(--brand-deep);line-height:1.3}
.after li::before{content:"";position:absolute;left:-2.4rem;top:.28em;width:13px;height:13px;
  background:var(--idot);border-radius:50%;
  box-shadow:0 0 0 4px var(--cream)}
.after li:nth-child(even)::before{background:var(--brand)}
/* desktop: kasvava polku vaakatasossa — aaltoileva varsi, kasvavat pisteet, lehti päässä.
   Joka toinen teksti viivan YLÄpuolella (aallonharjat 1/3/5), joka toinen ALApuolella (2/4).
   Gridin gap on 0, jotta sarakkeiden keskikohdat osuvat SVG:n pisteisiin (10–90 %). */
.after-wave{display:none}
@media(min-width:820px){
  .after-wrap{display:grid;grid-template-columns:repeat(5,1fr);gap:0;margin-top:1.2rem}
  .after-wave{display:block;grid-column:1/-1;grid-row:2;width:100%;height:auto;overflow:visible}
  .after{display:contents}
  .after::before,.after li::before{display:none}
  .after li{text-align:center;font-size:clamp(1.02rem,.9rem + .5vw,1.25rem)}
  .after li:nth-child(odd){grid-row:1;align-self:end;padding:0 .7rem .4rem}
  .after li:nth-child(even){grid-row:3;align-self:start;padding:.4rem .7rem 0}
  .after li:nth-child(1){grid-column:1}
  .after li:nth-child(2){grid-column:2}
  .after li:nth-child(3){grid-column:3}
  .after li:nth-child(4){grid-column:4}
  .after li:nth-child(5){grid-column:5}
}

/* ---------- irene (asymmetric, off-grid) ---------- */
.irene-wrap{display:grid;gap:clamp(1.5rem,4vw,2.6rem);align-items:start}
@media(min-width:900px){
  .irene-wrap{grid-template-columns:1fr 330px;gap:clamp(2rem,4vw,3.5rem)}
}
.irene-side{display:flex;flex-direction:column}
.photo-cap{margin-top:.7rem;text-align:center;color:var(--brand-deep);
  font-family:"Segoe Script","Bradley Hand","Ink Free","Brush Script MT",cursive;
  font-size:1.6rem;line-height:1.25}
/* testimonial carousel under the photo */
.rev-head{margin-top:1.1rem;text-align:center;font-family:var(--serif);font-size:1.05rem;color:var(--brand-deep)}
.revcar{margin-top:.5rem}
.revtrack{display:grid}
.revslide{grid-area:1/1;margin:0;opacity:0;visibility:hidden;transition:opacity .5s var(--ease);
  background:var(--white);border:1.5px solid #B7CDA9;border-radius:22px 6px 22px 6px;padding:1rem 1.1rem}
.revslide.is-on{opacity:1;visibility:visible}
.revslide q{display:block;font-family:var(--serif);font-style:italic;font-size:1.05rem;color:var(--brand-deep);
  line-height:1.4;quotes:"”" "”"}
.revslide cite{display:block;margin-top:.6rem;font-style:normal;font-size:.85rem;font-weight:600;color:var(--muted)}
/* pisteet näyttävät pieniltä mutta osumapinta on 44 px (WCAG 2.5.8) */
.revdots{display:flex;gap:0;justify-content:center;margin-top:.2rem}
.revdots button{width:44px;height:44px;padding:0;border:0;background:none;cursor:pointer;
  display:grid;place-items:center}
.revdots button::after{content:"";width:10px;height:10px;border-radius:50%;
  border:1.5px solid var(--brand-deep);background:transparent;transition:background .2s var(--ease)}
.revdots button.is-on::after{background:var(--lime)}
.irene-side .consent{margin-top:.7rem;text-align:center;font-size:.8rem}
/* HUOM yksi max-width. Aiemmin tassa oli kaksi: calc(100% * var(--koko)) ja
   sen jalkeen kiintea 330px, joka voitti. Hallinnan Kuvan koko ei siis
   muuttanut Irenen kuvan kokoa lainkaan mutta muutti kulmapyoristysta, koska
   pyoristys lukee saman muuttujan. Mitattu 1280 px:ssa: max-width oli 330px
   riippumatta koko-arvosta. */
.irene-photo{max-width:calc(330px * var(--koko,1));border-radius:0 calc(110px * var(--koko,1) * var(--pyoristys,1)) 0 calc(110px * var(--koko,1) * var(--pyoristys,1));overflow:hidden;background:var(--sage);
  box-shadow:var(--shadow);margin-inline:auto}
.irene-photo img{width:100%;height:100%;object-fit:cover;aspect-ratio:var(--suhde,4/4.2);max-height:var(--maxkorkeus,none);object-position:var(--kohdistus,50% 25%)}
.irene-quote{font-family:var(--serif);font-size:clamp(1.35rem,1.1rem + 1vw,1.9rem);line-height:1.32;
  color:var(--brand-deep);margin:.5rem 0 1rem}
.creds{display:flex;flex-wrap:wrap;gap:.45rem;list-style:none;padding:0;margin:1.2rem 0 0}
.creds li{font-size:.85rem;font-weight:600;color:var(--brand-dark);background:var(--sage);
  border:1px solid var(--line);border-radius:var(--pill);padding:.4rem .8rem}
/* testimonial — must be perfectly still */
.pull{margin-top:clamp(2.4rem,5vw,3.6rem);max-width:760px}
.pull q{font-family:var(--serif);font-style:italic;font-size:clamp(1.5rem,1.1rem + 1.9vw,2.5rem);
  line-height:1.28;color:var(--brand-deep);quotes:"\201D" "\201D"}
.pull .src{margin-top:.9rem;font-size:.9rem;color:var(--muted);font-weight:600}
.pull-more{margin-top:1.1rem;color:var(--muted);font-family:var(--serif);font-size:1.05rem}
.consent{margin-top:1rem;font-size:.82rem;color:var(--muted);max-width:60ch}

/* ---------- MINSA (dark band) ---------- */
.minsa{background:
  radial-gradient(56rem 38rem at 88% -10%, rgba(90,148,64,.1), transparent 62%),
  radial-gradient(44rem 32rem at -8% 108%, rgba(255,255,255,.08), transparent 62%),
  #627767;
  color:#FAFCF8;padding-block:var(--pad-l)}
/* vaaleampi vihreä tausta vaatii vaaleammat tekstit, jotta kontrasti säilyy */
/* tummalla bandilla lime vaaleampana: metsänvihreä ei erotu tarpeeksi taustasta */
.minsa{--lime:#B7DC97}
.minsa .marker{color:#E8F0E1}
.minsa .lead{color:#EAF2E4}
.minsa h2,.minsa h3{color:#FBFDF9}
.minsa-grid{display:grid;gap:clamp(1.8rem,4vw,3rem);align-items:center}
@media(min-width:900px){.minsa-grid{grid-template-columns:1.05fr .95fr}}
.badge{display:inline-flex;align-items:center;gap:.45rem;border:1px solid var(--lime);color:var(--lime);
  border-radius:var(--pill);padding:.35rem .85rem;font-size:.8rem;font-weight:700;margin-bottom:1rem}
.minsa-lock{font-family:var(--serif);letter-spacing:.08em;color:var(--lime);font-size:1.05rem}
/* Minsa-tarjous: yhtenäinen lehtikulmainen laatikko (hinta + linkki + koodiohje) */
.minsa-offer{display:block;max-width:520px;margin-top:1.2rem;background:rgba(90,148,64,.16);border:1.5px solid var(--lime);
  border-radius:22px 6px 22px 6px;padding:1rem 1.2rem;font-size:.98rem;color:#F4F8F0;line-height:1.55}
.minsa-offer b{display:block;font-family:var(--serif);font-weight:500;font-size:1.18rem;color:#FFFFFF;margin-bottom:.25rem}
.minsa-offer .offer-link{display:block;margin-top:.55rem}
.minsa-offer small{display:block;margin-top:.55rem;font-size:.85rem;color:#E8F0E1}
.minsa-offer small a{color:#FBFDF9;font-weight:700}
.subpage .minsa-offer{background:var(--lime-soft);color:var(--ink)}
.subpage .minsa-offer b{color:var(--brand-deep)}
.subpage .minsa-offer small{color:var(--muted)}
.subpage .minsa-offer small a{color:var(--brand-dark)}
/* Minsa-logo ilman vaaleaa taustalaattaa (Mika 23.8.). Musta sanamerkki jää
   vihreän bandin päälle, joten sen ympärille tulee pehmeä vaalea hehku:
   erottuvuus paranee ilman että taustalle syntyy näkyvää laatikkoa. */
.minsa-logo{height:62px;width:auto;margin:0 0 1.1rem;display:block;
  filter:drop-shadow(0 0 2px rgba(255,255,255,.9)) drop-shadow(0 0 9px rgba(255,255,255,.6))}
/* vaalealla alasivulla hehkua ei tarvita */
.subpage .minsa-logo{filter:none}
@media(max-width:700px){.minsa-logo{height:50px}}
.minsa p{color:#FBFDF9}
.privacy{margin-top:1.3rem;font-size:1.25rem;color:#E7F0E1;font-family:var(--serif);
  border-left:3px solid var(--lime);padding-left:1rem}
.lock-svg{width:1em;height:1em;vertical-align:-.12em;flex:none}
.minsa-shots{position:relative;display:grid;place-items:center;min-height:320px}
.minsa-shots::before{content:"";position:absolute;width:min(520px,90%);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(90,148,64,.22),transparent 68%)}
.minsa-shot{position:relative;width:min(320px,82%);transform:rotate(-3deg);border-radius:20px;overflow:hidden;
  border:1px solid rgba(255,255,255,.2);background:#16201A;box-shadow:0 30px 60px -22px rgba(0,0,0,.7)}
.minsa-shot img{display:block;width:100%;height:auto}
/* live demo */
details.demo{margin-top:clamp(1.6rem,4vw,3rem);background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.16);
  border-radius:var(--r-lg);max-width:760px;overflow:hidden}
details.demo>summary{list-style:none;cursor:pointer;padding:1.1rem 1.3rem;min-height:56px;
  display:flex;flex-wrap:wrap;align-items:center;gap:.2rem .7rem;color:#E7F0E1}
details.demo>summary::-webkit-details-marker{display:none}
details.demo>summary b{font-family:var(--serif);font-weight:500;font-size:1.2rem;color:#FBFDF9}
details.demo>summary span{color:#DFE9D8;font-size:.88rem}
details.demo>summary::after{content:"Aloita harjoitus  →";margin-left:auto;font-family:var(--sans);
  font-size:.92rem;font-weight:700;color:var(--brand-dark);background:#fff;border:1.5px solid var(--lime);
  border-radius:var(--pill);padding:.5rem 1rem;min-height:40px;display:inline-flex;align-items:center;white-space:nowrap}
details.demo[open]>summary::after{content:"Sulje  −";background:rgba(255,255,255,.12);color:#C3D2BC}
@media(max-width:520px){details.demo>summary::after{margin-left:0;width:100%;justify-content:center;margin-top:.4rem}}
details.demo>*:not(summary){margin-inline:clamp(1.3rem,3vw,2rem)}
details.demo>*:last-child{margin-bottom:clamp(1.3rem,3vw,2rem)}
.demo label{display:block;font-family:var(--serif);font-size:1.15rem;color:#E7F0E1;margin-bottom:.7rem}
.scaler{display:flex;align-items:center;gap:1rem}
.scaler input[type=range]{flex:1;-webkit-appearance:none;appearance:none;height:44px;border-radius:3px;
  background:transparent;outline:none;cursor:pointer}
.scaler input[type=range]::-webkit-slider-runnable-track{height:6px;border-radius:3px;
  background:linear-gradient(90deg,var(--lime) var(--p,30%),rgba(255,255,255,.18) var(--p,30%))}
.scaler input[type=range]::-moz-range-track{height:6px;border-radius:3px;
  background:linear-gradient(90deg,var(--lime) var(--p,30%),rgba(255,255,255,.18) var(--p,30%))}
.scaler input[type=range]::-webkit-slider-thumb{margin-top:-12px}
.scaler input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:30px;height:30px;border-radius:50%;
  background:var(--lime);border:3px solid #16201A;cursor:pointer;box-shadow:0 3px 10px rgba(0,0,0,.45)}
.scaler input[type=range]::-moz-range-thumb{width:30px;height:30px;border-radius:50%;background:var(--lime);
  border:3px solid #16201A;cursor:pointer}
.scaler output{font-family:var(--serif);font-size:2.4rem;color:var(--lime);min-width:2ch;text-align:center;
  font-variant-numeric:tabular-nums;transition:transform .18s var(--ease)}
.scaler output.bump{transform:scale(1.14)}
.demo textarea{width:100%;margin-top:.6rem;background:rgba(0,0,0,.22);border:1px solid rgba(255,255,255,.18);
  border-radius:var(--r);color:#EDF2E8;padding:.85rem;font-family:var(--sans);font-size:1rem;resize:vertical;min-height:76px}
.demo textarea::placeholder{color:#7E9078}
.demo-step{margin-top:1.4rem}
.demo-step[hidden]{display:none}
.demo-done{margin-top:1.4rem;background:rgba(90,148,64,.12);border:1px solid rgba(90,148,64,.4);
  border-radius:var(--r);padding:1.1rem;color:#E7F0E1}
.demo-done b{display:block;font-family:var(--serif);font-size:1.1rem;margin-bottom:.3rem;color:#F1F6EC}
/* hengähdyshetki: ympyrä kasvaa sisäänhengityksellä (4 s) ja supistuu uloshengityksellä (6 s) */
.breath{padding-bottom:.4rem}
.breath-stage{display:grid;place-items:center;padding:1.4rem 0 .8rem}
.breath-circle{width:150px;height:150px;border-radius:50%;display:grid;place-items:center;text-align:center;
  background:radial-gradient(circle at 35% 30%, #E4F4BC, var(--idot) 75%);
  box-shadow:0 0 0 12px rgba(90,148,64,.16), 0 22px 44px -20px rgba(0,0,0,.45);
  transform:scale(.72);transition:transform 4s cubic-bezier(.45,.05,.55,.95)}
.breath-circle span{font-family:var(--serif);font-style:italic;color:var(--brand-deep);font-size:.98rem;
  line-height:1.3;padding:0 1rem}
.breath-circle.in{transform:scale(1.06)}
.breath-circle.out{transform:scale(.72);transition-duration:6s}
.breath-info{margin-top:.5rem;text-align:center;font-size:.95rem;color:#EAF2E4}
@media (prefers-reduced-motion:reduce){.breath-circle{transition:none}}

/* ---------- services / prices ---------- */
.svc-grid{display:grid;gap:.6rem;margin-top:1.6rem}
@media(min-width:640px){.svc-grid{gap:1rem;grid-template-columns:1fr 1fr}}
/* accordion service cards — audience + price always visible, detail on demand */
details.svc{border:1px solid var(--line-solid);border-radius:var(--r-lg);overflow:hidden;
  transition:border-color .2s var(--ease)}
details.svc>summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:1fr auto;
  align-items:center;gap:.15rem .8rem;padding:1rem 1.15rem;min-height:56px}
details.svc>summary::-webkit-details-marker{display:none}
/* explicit affordance — a plain "+" is not informative enough */
details.svc>summary::after{content:"Lue lisää  +";grid-column:1;grid-row:2;justify-self:start;margin-top:.5rem;
  font-family:var(--sans);font-size:.92rem;font-weight:700;color:var(--lime-ink);
  background:var(--white);border:1.5px solid var(--lime);border-radius:var(--pill);
  padding:.45rem .95rem;min-height:38px;display:inline-flex;align-items:center;
  transition:background .2s var(--ease)}
details.svc[open]>summary::after{content:"Sulje  −";background:var(--sage);border-color:var(--line-solid);color:var(--muted)}
details.svc>summary:hover::after{background:var(--lime-soft)}
/* direct booking from the collapsed card: no need to open "Lue lisää" first */
.svc-book{grid-column:2;grid-row:2;justify-self:end;align-self:center;margin-top:.5rem;
  display:inline-flex;align-items:center;min-height:38px;padding:.45rem 1rem;border-radius:var(--pill);
  background:var(--brand);border:1.5px solid var(--beige);color:#fff;font-weight:700;font-size:.92rem;text-decoration:none}
.svc-book:hover{background:var(--brand-dark)}
details.svc .panel{padding:0 1.15rem 1.2rem}
.svc:hover{border-color:var(--lime)}
.svc.t1{background:var(--sage-2)} .svc.t2{background:var(--vihre2-tint)} .svc.t3{background:var(--cream-2)}
.svc.t4{background:var(--lime-soft)} .svc.t5{background:var(--white)}
.dots{display:flex;gap:5px;margin-bottom:.4rem}
.dots i{width:9px;height:9px;border-radius:50%;background:var(--lime);box-shadow:0 0 0 1px var(--brand-deep) inset}
.svc h3{font-size:1.35rem;margin-bottom:.05rem}
.svc .what{font-size:.85rem;color:var(--muted);font-weight:600}
.svc .price{font-family:var(--serif);font-size:1.6rem;color:var(--brand-deep);font-variant-numeric:tabular-nums;white-space:nowrap}
.svc .foryou{font-family:var(--serif);font-style:italic;font-size:1.05rem;color:var(--brand-deep);margin-bottom:.7rem}
.svc .notfor{font-size:.88rem;color:var(--muted);margin-bottom:1rem}
.svc .go{min-height:44px;display:inline-flex;align-items:center;font-weight:700;color:var(--brand-dark);font-size:.95rem}
@media(max-width:640px){ .biz-creds li{font-size:.78rem} }
.svc.flash{animation:ring 1.2s var(--ease)}
@keyframes ring{0%,100%{box-shadow:0 0 0 0 rgba(90,148,64,0)}25%{box-shadow:0 0 0 6px rgba(90,148,64,.55)}}
.intro-row{margin-top:1rem;background:linear-gradient(110deg,var(--lime-soft),var(--vihre2-tint));
  border:1px solid var(--line-solid);border-radius:var(--r-lg);padding:1.4rem 1.5rem;
  display:flex;flex-wrap:wrap;gap:1rem;align-items:center;justify-content:space-between}
.intro-row h3{font-size:1.3rem;margin-bottom:.2rem}
.intro-row p{color:var(--muted);max-width:46ch}
.rules{display:grid;gap:.8rem;margin-top:1.4rem}
@media(min-width:800px){.rules{grid-template-columns:1fr 1fr}}
.rule{background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:1rem 1.15rem;font-size:.92rem;color:var(--muted)}
.rule b{display:block;color:var(--brand-dark);font-weight:700;margin-bottom:.25rem;font-family:var(--sans)}

/* tilat — three photos shown at (or under) native size: no upscaling, no grain */
.tilat{background:var(--sage-2);border-block:1px solid var(--line);padding-block:var(--pad-m)}
.tilat .cap-title{font-family:var(--serif);font-size:clamp(1.35rem,1.1rem + 1vw,1.8rem);color:var(--brand-deep)}
.tilat .cap-sub{margin-top:.4rem;color:var(--muted);font-size:.95rem;font-weight:600}
.tilat-grid{display:grid;gap:.8rem;grid-template-columns:repeat(3,1fr);margin-top:1.4rem}
.tilat-grid img{width:100%;height:100%;aspect-ratio:4/4.6;object-fit:cover;
  border-radius:var(--r-lg);border:1px solid var(--line-solid)}

/* ---------- FAQ ---------- */
.faq{display:grid;gap:.6rem;margin-top:1.6rem}
details.qa{background:var(--white);border:1px solid var(--line-solid);border-radius:var(--r)}
details.qa summary{cursor:pointer;list-style:none;padding:1rem 1.1rem;min-height:44px;font-family:var(--serif);
  font-size:1.1rem;color:var(--brand-deep);display:flex;justify-content:space-between;gap:1rem;align-items:center}
details.qa summary::-webkit-details-marker{display:none}
details.qa summary::after{content:"Näytä  +";flex:none;font-family:var(--sans);font-size:.88rem;font-weight:700;
  color:var(--lime-ink);background:var(--sage-2);border:1.5px solid var(--lime);border-radius:var(--pill);
  padding:.4rem .85rem;min-height:36px;display:inline-flex;align-items:center;transition:background .2s var(--ease)}
details.qa[open] summary::after{content:"Sulje  −";background:var(--sage);border-color:var(--line-solid);color:var(--muted)}
details.qa summary:hover::after{background:var(--lime-soft)}
details.qa .a{padding:0 1.1rem 1.1rem;color:var(--muted)}
details.qa .a.warm{font-family:var(--serif);font-style:italic;font-size:1.1rem;color:var(--brand-dark)}

/* ---------- booking ---------- */
/* varaa = lämmin kerma (edellinen osio #palvelut on vihreä) */
/* varaa on viimeinen vaalea osio: yläreuna liukuu, alareuna kohtaa Minsan tumman
   bandin, joka on tarkoituksella kova raja */
.book{background:linear-gradient(180deg,var(--bg-sauma) 0%,var(--bg-pellava) var(--sauma),
  var(--bg-pellava) 100%)}
.book-box{max-width:760px;background:var(--white);border:1px solid var(--line-solid);border-radius:var(--r-lg);
  padding:clamp(1.4rem,3vw,2.2rem);margin-top:1.6rem}
.modes{display:flex;flex-wrap:wrap;gap:.6rem;margin:1rem 0 1.3rem}
.mode{flex:1 1 150px;position:relative}
.mode input{position:absolute;opacity:0;inset:0;cursor:pointer}
.mode span{display:flex;align-items:center;justify-content:center;min-height:48px;border:1.5px solid var(--line-solid);
  border-radius:var(--pill);font-weight:600;color:var(--brand-dark);background:var(--cream);transition:.2s var(--ease)}
.mode input:checked + span{border-color:var(--lime);background:var(--lime-soft)}
.mode input:focus-visible + span{outline:3px solid var(--vihre2);outline-offset:2px}
.embed-ph{border:1.5px dashed rgba(64,84,68,.3);border-radius:var(--r);padding:1.4rem;color:var(--muted);
  background:var(--cream);text-align:center;font-size:.94rem}
.embed-ph b{color:var(--brand-dark);font-family:var(--serif);font-size:1.05rem;display:block;margin-bottom:.3rem}
/* vaiheittainen varaus: palvelunapit (aktivoituvat kun palvelukohtaiset linkit on lisätty) */
.bsteps{margin-bottom:1rem}
.bsteps-label{font-family:var(--serif);font-size:1.1rem;color:var(--brand-deep);margin-bottom:.6rem}
.bstep-btn{flex:1 1 150px;min-height:56px;padding:.55rem .9rem;border:1.5px solid var(--line-solid);
  border-radius:var(--pill);background:var(--cream);cursor:pointer;font-family:var(--sans);text-align:center;
  transition:border-color .2s var(--ease),background .2s var(--ease)}
.bstep-btn b{display:block;font-size:.95rem;color:var(--brand-dark)}
.bstep-btn small{color:var(--muted);font-size:.8rem}
.bstep-btn:hover{border-color:var(--lime)}
.bstep-btn.is-on{border-color:var(--lime);background:var(--lime-soft)}
/* oikea Bookings-upotus: mahtuu aina yhteen ruutuun (rullaus vain kalenterin sisällä).
   --bcrop piilottaa kehyksen yläosan (turha otsikko + jo valitun palvelun kortti):
   kehys on koteloa korkeampi ja nostettu ylös, kotelo leikkaa ylimenevän osan. */
.bookings-crop{--bcrop:330px;--bh:clamp(520px,calc(100vh - 150px),980px);
  overflow:hidden;border:1px solid var(--line-solid);border-radius:var(--r);background:#fff}
.bookings-crop .bookings-frame{margin-top:calc(-1 * var(--bcrop));height:calc(var(--bh) + var(--bcrop));
  border:none;border-radius:0}
@media(max-width:700px){.bookings-crop{--bcrop:300px}}
.bookings-frame{display:block;width:100%;height:clamp(480px,calc(100vh - 170px),980px);
  border:1px solid var(--line-solid);border-radius:var(--r);background:#fff}
/* hinnastorivin alle avautuva varauspaneeli */
.prow-book{padding:.9rem .1rem 1.1rem;border-bottom:1px solid var(--line-solid)}
.bsm-solid.is-on{background:var(--brand-deep)}
/* #varaa on hinnastolaatikko .pbox eli KESKELLA osiota. Ankkuri on siina, koska
   varausmodaali tunnistaa avauksen juuri tasta osoitteesta (mielii.js, autoOpen).
   Vieritys sen sijaan kuuluu koko hinnasto-osioon: laatikkoon hypattaessa osion
   tunnus ja otsikko jaivat ruudun ylapuolelle. Sen hoitaa mielii.js, joka ohjaa
   vierityksen elementtiin #palvelut. Tama arvo on vain varalla siita jos
   skriptia ei ole: silloin laatikko ei ainakaan jaa ylapalkin alle. */
#varaa{scroll-margin-top:var(--ankkuri)}
/* varausmodaali: tausta lukitaan, vain kalenteri rullaa */
.bmodal{position:fixed;inset:0;z-index:90;display:flex;align-items:center;justify-content:center;
  padding:1rem;background:rgba(31,43,34,.55);backdrop-filter:blur(3px)}
.bmodal-box{display:flex;flex-direction:column;width:min(560px,100%);height:min(92vh,880px);
  background:#fff;border-radius:22px 8px 22px 8px;overflow:hidden;
  box-shadow:0 40px 80px -30px rgba(0,0,0,.5)}
/* Logo ja palvelun nimi vasemmalle, sulkunappi oikeaan reunaan. Sulkunapin
   margin-left:auto tekee saman kuin aiempi justify-content:space-between,
   mutta pitaa logon ja nimen kiinni toisissaan nyt kun niita on kaksi. */
.bmodal-head{display:flex;align-items:center;gap:.75rem;flex:none;
  padding:.7rem .7rem .7rem 1.15rem;border-bottom:1px solid var(--line-solid);background:var(--sage-2)}
.bmodal-head b{font-family:var(--serif);font-weight:500;font-size:1.12rem;color:var(--brand-deep)}
/* width:auto on pakollinen aina kun kuvalle annetaan kiintea korkeus, ks.
   .brand img ja .fcols img. */
.bmodal-logo{height:30px;width:auto;flex:none}
.bmodal-close{width:44px;height:44px;flex:none;margin-left:auto;border-radius:50%;border:1.5px solid var(--line-solid);
  background:#fff;color:var(--brand-dark);font-size:1.25rem;line-height:1;cursor:pointer}
.bmodal-close:hover{border-color:var(--lime)}
/* BOOKINGS-KEHYKSEN YLAOSAN RAJAUS
   Bookings-sivulla on oma ylaosansa: logo, yrityksen nimi omana otsikkonaan ja
   niiden ymparilla runsaasti tyhjaa. Modaalissa se on turha, koska modaalin oma
   otsikkorivi kertoo saman sivuston omalla typografialla ja logolla. Kehys
   nostetaan ylos ja kotelo leikkaa ylimenevan osan. Sama tekniikka kuin
   aiemmassa .bookings-crop -upotuksessa.

   275 px on mitattu Bookings-sivulta: logo alkaa 35 px:sta ja on 120 px korkea,
   otsikko "Mielii" on valilla 182-211 px, ja ensimmainen oma sisalto eli
   palvelukortti alkaa 291 px:sta. Mitta on sama seka 375 etta 560 pikselin
   leveydella, joten erillista mediakyselya ei tarvita.

   HUOM: arvo on ULKOPUOLISEN sivun mitta. Jos Microsoft muuttaa sivunsa
   ylaosaa, tama on ainoa kohta jota tarvitsee saataa. Rajauksen saa kokonaan
   pois arvolla --bcrop:0.

   Kaantopuoli: rajattu kaista on kehyksen nakymassa pysyvasti piilossa, joten
   kehyksen sisalla vieritettaessa sisalto katoaa ylareunasta taman verran
   aiemmin. Kotelo on 92vh korkea, joten kalenteri mahtuu silti kokonaan. */
/* Tapavalinta ennen kalenteria. Nakyy vain kun palvelulle on annettu useampi
   kuin yksi kalenterin osoite. Tama on teeman omaa kayttoliittymaa, joten se
   toimii myos silloin kun itse kalenteria ei voi upottaa. */
.bmodal-valinta{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:.7rem;
  padding:1.6rem 1.3rem;align-items:stretch;justify-content:center}
.bmodal-valinta-nimi{font-family:var(--serif);font-size:1.15rem;color:var(--brand-deep);
  text-align:center;margin:0}
.bmodal-valinta-ohje{text-align:center;color:var(--muted);margin:0 0 .5rem}
.bmodal-tapa{width:100%;justify-content:center}
.bmodal-crop{--bcrop:275px;flex:1;overflow:hidden}
.bmodal-crop iframe{display:block;width:100%;border:0;
  margin-top:calc(-1 * var(--bcrop));height:calc(100% + var(--bcrop))}
body.bmodal-open{overflow:hidden}
@media(max-width:700px){
  .bmodal{padding:0}
  .bmodal-box{width:100%;height:100%;border-radius:0}
}
.orcall{margin-top:1.2rem;color:var(--muted);line-height:2.1}
.orcall a{font-weight:700;display:inline-flex;align-items:center;min-height:44px;padding-inline:.15rem}
/* crisis — calm, never red, never animated */
.crisis{position:relative;margin-top:1.4rem;border:1px solid var(--line-solid);
  border-radius:var(--r);padding:1rem 1.15rem 1rem 1.35rem;background:var(--cream);color:var(--muted);font-size:.93rem}
.crisis::before{content:"";position:absolute;left:0;top:12px;bottom:12px;width:3px;border-radius:2px;background:var(--muted)}
.crisis b{display:block;color:var(--brand-dark);margin-bottom:.25rem}
.sign{margin-top:1.6rem;font-family:"Segoe Script","Bradley Hand","Ink Free","Brush Script MT",cursive;
  font-size:1.9rem;color:var(--brand-deep);transform:rotate(-2.5deg);display:inline-block}

/* ---------- B2B ---------- */
.biz{background:var(--cream-2);color:var(--ink);border-top:2px solid var(--lime);border-bottom:1px solid var(--line);padding-block:var(--pad-l)}
.biz h2,.biz h3{font-family:var(--sans);font-weight:800;letter-spacing:-.01em;color:var(--brand-deep)}
.biz h2{font-size:clamp(1.8rem,1.3rem + 2vw,2.6rem)}
.biz .lead{color:var(--muted);max-width:56ch}
.biz-grid{display:grid;gap:1rem;margin-top:1.8rem}
@media(min-width:820px){.biz-grid{grid-template-columns:1fr 1fr}}
.sku{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.15);border-radius:var(--r-lg);padding:1.5rem}
.sku h3{font-size:1.25rem;margin-bottom:.5rem}
.sku p{color:#B9C9B2;font-size:.96rem}
.sku ul{margin:.6rem 0 0;padding:0 0 0 1.1rem;color:#B9C9B2;font-size:.94rem}
details.mini{margin-top:.7rem}
details.mini>summary{list-style:none;cursor:pointer;min-height:44px;display:flex;align-items:center;gap:.4rem;
  font-size:.9rem;font-weight:700;color:var(--lime)}
details.mini>summary::-webkit-details-marker{display:none}
details.mini>summary::after{content:"+";font-size:1.1rem;transition:transform .25s var(--ease)}
details.mini[open]>summary::after{transform:rotate(45deg)}
.sku .tags{display:flex;flex-wrap:wrap;gap:.4rem;margin:.9rem 0}
.sku .tags span{font-size:.78rem;font-weight:700;color:#DCE8D6;background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.14);border-radius:var(--pill);padding:.3rem .65rem}
.sku .from{font-family:var(--serif);font-size:1.35rem;color:var(--lime);margin-top:.6rem}
.conf{margin-top:1.2rem;background:rgba(90,148,64,.09);border:1px solid rgba(90,148,64,.32);
  border-left:3px solid var(--lime);border-radius:var(--r);padding:1.1rem 1.2rem;color:#DCE8D6}
.conf b{display:block;color:#F1F6EC;margin-bottom:.3rem}
.biz-teaser{margin-top:1.3rem;color:var(--ink);max-width:64ch;font-size:1.05rem}
.biz-teaser em{font-style:normal;color:var(--lime-ink);font-family:var(--serif);white-space:nowrap}
.biz-rows{display:grid;gap:.6rem;margin-top:1.5rem}
details.qa.dark-qa{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.15)}
details.qa.dark-qa summary{color:#F1F6EC;font-size:1.05rem;gap:.6rem}
details.qa.dark-qa summary span{flex:1}
details.qa.dark-qa summary em{font-style:normal;font-family:var(--serif);color:var(--lime);font-size:1.15rem;white-space:nowrap}
details.qa.dark-qa summary::after{color:var(--lime);background:rgba(90,148,64,.12);border-color:rgba(90,148,64,.5)}
details.qa.dark-qa[open] summary::after{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.2);color:#A8BCA1}
details.qa.dark-qa summary:hover::after{background:rgba(90,148,64,.22)}
details.qa.dark-qa .a{color:#B9C9B2}
@media(max-width:520px){
  details.qa summary{flex-wrap:wrap}
  details.qa.dark-qa summary em{order:2}
  details.qa summary::after{order:3;width:100%;justify-content:center;margin-top:.5rem}
}
.biz-creds{display:flex;flex-wrap:wrap;gap:.45rem;list-style:none;padding:0;margin:1.3rem 0 0}
.biz-creds li{font-size:.83rem;font-weight:600;color:#DCE8D6;background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.14);border-radius:var(--pill);padding:.4rem .8rem}

/* ---------- footer ---------- */
/* Alabannerin tekstivarit (Mika 31.8.). Kolme kierrosta:
     alkuperainen #8CA084  kontrasti 5.2  = liian haalea
     puhdas valkoinen      kontrasti 14.5 = liian kirkas
     nyt kaytossa                         = nailta valilta
   --footer-teksti on tasan yhta kirkas kuin alkuperainen linkkivari
   #DCE8D6, joten linkit nayttavat tutuilta ja muu teksti nousee samalle
   tasolle. --footer-himmea on hienovaraisemmille teksteille: se sailyttaa
   hierarkian, jonka puhdas valkoinen litisti pois.
   Molemmat ylittavat selvasti WCAG AA -rajan 4.5. */
footer.site{--footer-teksti:#DDE3DA; --footer-himmea:#C6D0C2;
  background:#212C24;color:var(--footer-teksti);padding-block:3rem 1.5rem}
.fcols{display:grid;gap:2rem}
@media(min-width:760px){.fcols{grid-template-columns:1.2fr 1fr 1fr 1.2fr}}
.fcols h4{font-family:var(--sans);font-size:.78rem;text-transform:uppercase;letter-spacing:.12em;
  color:var(--footer-teksti);margin:0 0 .8rem;font-weight:800}
.fcols a{color:var(--footer-teksti);text-decoration:none;display:flex;align-items:center;padding:.5rem 0;min-height:44px}
.fcols a:hover{color:var(--lime)}
/* width:auto on PAKOLLINEN aina kun kuvalle asetetaan kiintea korkeus.
   WordPress lisaa mediakirjaston kuviin width- ja height-attribuutit, ja
   width-attribuutti maaraa leveyden jos CSS ei kumoa sita. Ilman tata
   alatunnisteen logo piirtyi 262x38 px vaikka oikea suhde on 2,2:1, eli
   yli kolminkertaisen levyisena. Vika nakyi vasta kun kuvat tuotiin
   mediakirjastoon, koska teeman omissa tiedostoissa attribuutteja ei ole.
   Sama syy kuin .brand img- ja .minsa-logo-saannoissa, joissa width:auto on.

   Ei suodatinta. Alatunniste kayttaa omaa valkoista logoa (kentta logo_tumma).
   Aiempi brightness(0) invert(1) valkaisi jokaisen pikselin ja havitti
   i-kirjainten limepisteet, ja se osui myos alatunnisteen karttaan. */
/* Logon alla oleva kuvausteksti. Vari ja koko olivat aiemmin footer.php:n
   inline-tyylissa, mika teki niista kumoamattomia ilman !important-maaretta. */
.footer-kuvaus{color:var(--footer-himmea);font-size:.9rem;max-width:34ch}
.fcols img{height:38px;width:auto;margin-bottom:.9rem}
.socials{display:flex;gap:.55rem;margin-top:1.1rem}
/* Vaalea pohja ja palvelujen omat tunnusvarit. Tumma alatunniste oli aiemmin
   yksivarinen, ja nama ovat siina ainoa varillinen kohta.

   HUOM: nama EIVAT ole teeman palettia vaan ulkopuolisten palvelujen
   tunnusvareja, eika niita lasketa mukaan saantoon "vaaleassa ei ole
   punaista". Ala kayta naita vareja missaan muualla.

   Vari tulee color-arvosta, koska Facebookin ja LinkedInin merkeissa on
   fill="currentColor". Instagramin liukuvari on SVG:n sisalla (footer.php). */
.socials a{width:44px;height:44px;min-height:44px;padding:0;border-radius:12px;display:grid;place-items:center;
  background:#fff;border:1px solid rgba(255,255,255,.55);
  transition:transform .2s var(--ease),box-shadow .2s var(--ease)}
.socials a.some-facebook{color:#1877F2}
.socials a.some-linkedin{color:#0A66C2}
/* Hover ei muuta varia: tunnusvari on koko idea. Vain pieni nosto. */
.socials a:hover{transform:translateY(-2px);box-shadow:0 8px 18px -8px rgba(0,0,0,.55)}
.socials svg{width:20px;height:20px}
.fbot{margin-top:2rem;padding-top:1.2rem;border-top:1px solid rgba(255,255,255,.1);
  display:flex;flex-wrap:wrap;gap:.8rem 1.5rem;justify-content:space-between;font-size:.84rem;color:var(--footer-himmea)}
/* footerin karttakortti: staattinen kuva, klikkaus avaa reittiohjeet */
.fmap{display:block;padding:0;min-height:0;border-radius:14px;overflow:hidden;
  border:1px solid rgba(255,255,255,.16);transition:border-color .2s var(--ease)}
.fmap:hover{border-color:var(--lime)}
/* Kartta on ainoa .fcols-kuva joka tayttaa sarakkeen leveyden, joten se kumoaa
   ylla olevan kiintean korkeuden. filter:none on jaljella varmuuden vuoksi:
   kartta oli aiemmin tayttavan valkoinen laatikko jokaisella sivulla, kun
   logon valkaisusuodatin osui myos siihen. */
.fmap img{display:block;width:100%;height:auto;filter:none;margin-bottom:0}
.fmap-cap{color:var(--footer-himmea);font-size:.78rem;margin-top:.5rem}
/* Kulkuohjeet omana rivinaan sarakkeiden alla, ei Vastaanotto-sarakkeessa:
   kolme kappaletta tekisi 250 pikselin sarakkeesta muita moninkertaisesti
   korkeamman ja kaataisi alatunnisteen tasapainon. Leveilla naytoilla
   kappaleet asettuvat vierekkain, puhelimessa allekkain. */
.fohjeet{margin-top:2rem;padding-top:1.4rem;border-top:1px solid rgba(255,255,255,.1)}
.fohjeet h4{font-family:var(--sans);font-size:.78rem;text-transform:uppercase;letter-spacing:.12em;
  color:var(--footer-teksti);margin:0 0 .8rem;font-weight:800}
.fohjeet-teksti{display:grid;gap:.7rem}
@media(min-width:760px){.fohjeet-teksti{grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1rem 2rem}}
.fohjeet p{color:var(--footer-himmea);font-size:.9rem;line-height:1.55;margin:0}

/* ---------- reveal (headers only) ---------- */
/* Piilotus vaatii luokan reveal-on, jonka skripti lisaa vasta kun havainnoija on
   luotu. Nain skriptivirhe ei voi jattaa sisaltoa pysyvasti nakymattomiin. */
.js.reveal-on .reveal{opacity:0;transform:translateY(16px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.js .reveal.in{opacity:1;transform:none}
/* Irene: the whole accordion header reads as a green button */
#irene details.qa{background:transparent;border:none;border-radius:0}
#irene details.qa>summary{display:inline-flex;align-items:center;gap:.6rem;justify-content:flex-start;
  background:var(--brand);color:#fff;border:1.5px solid var(--beige);border-radius:var(--pill);
  padding:.8rem 1.4rem;min-height:52px;font-family:var(--sans);font-size:1rem;font-weight:700;
  box-shadow:0 10px 24px -10px rgba(64,84,68,.45);transition:background .2s var(--ease),transform .2s var(--ease)}
#irene details.qa>summary:hover{background:var(--brand-dark);transform:translateY(-2px)}
#irene details.qa>summary::after{content:"+";background:none;border:none;color:#fff;padding:0;min-height:0;
  font-size:1.3rem;line-height:1}
#irene details.qa[open]>summary::after{content:"−"}
#irene details.qa .a{padding:1rem 0 0;color:var(--muted)}
/* booking: yksi palsta, laatikko rajattu lukuleveyteen */
.book-grid{display:grid;gap:1.4rem;align-items:start}
.book-main{min-width:0}
.room-card{margin:0;background:var(--white);border:1.5px solid #B7CDA9;border-radius:34px 8px 34px 8px;
  overflow:hidden;box-shadow:0 16px 34px -22px rgba(40,56,45,.4)}
.room-card img{display:block;width:100%;height:auto}
.room-card figcaption{padding:1rem 1.15rem 1.15rem;font-size:.9rem;color:var(--muted);line-height:1.5}
.room-card figcaption b{display:block;font-family:var(--serif);font-weight:500;font-size:1.12rem;
  color:var(--brand-deep);margin-bottom:.35rem}

/* Sipaisuvihje nakyy VAIN puhelimessa (display:block MOBILE COMPACTION
   -lohkossa), joten projektin 15 px:n raja on sen kohdalla aina voimassa.
   Arvo oli .85rem eli 13,6 px. Erillista mobiilisaantoa ei tarvita, koska
   elementti ei nay tyopoydalla lainkaan. */
.swipe-hint{display:none;margin-top:.2rem;font-size:.95rem;color:var(--muted);font-weight:600}

/* ---------- multi-page routing (#/sivu) + subpage helpers ---------- */
.page[hidden]{display:none!important}
/* ALASIVUJEN PÄÄVÄRI ON SAVIKIVI (Mika 23.8.). Pellava ja vihreä ovat vain harkittuja
   korostuksia: vaaleat nostolaatikot, valkoiset kortit ja henkä limeverho kulmassa. */
.subpage{position:relative;overflow:hidden;padding-block:clamp(2rem,4vw,3.4rem) var(--pad-l);
  background:linear-gradient(180deg,var(--bg-sauma) 0%,var(--bg-savikivi) var(--sauma),var(--bg-savikivi) 100%)}
.subpage::before{content:"";position:absolute;z-index:0;right:-360px;top:-420px;width:1080px;height:1080px;
  border-radius:50%;background:var(--verho-kivi)}
.subpage::after{content:"";position:absolute;z-index:0;left:-320px;bottom:-460px;width:960px;height:960px;
  border-radius:50%;background:var(--verho-valo)}
.subpage>.wrap-narrow,.subpage>.wrap{position:relative;z-index:1}
.subpage h3{font-size:1.3rem;margin:var(--vali-otsikko) 0 var(--vali-teksti)}
.sublist{list-style:none;margin:.4rem 0 0;padding:0;display:grid;gap:.5rem}
.sublist li{display:flex;gap:.6rem;align-items:flex-start;color:var(--ink)}
.sublist li::before{content:"✓";flex:none;width:20px;height:20px;border-radius:50%;background:var(--sage);
  color:var(--brand-dark);font-size:.72rem;font-weight:800;display:grid;place-items:center;margin-top:3px}
/* rlink: nuoli i-pilkussa — vapaa teksti + logon vihreä pallo, joka liukuu hoverissa (Mikan valinta C) */
#tyoskentely .subquote{font-size:1.5rem}
#tyoskentely .rlink{font-size:1.3rem;gap:.85rem}
#tyoskentely .rlink::after{width:44px;height:44px;font-size:1.25rem}
.rlink{display:inline-flex;align-items:center;gap:.7rem;min-height:44px;
  font-weight:700;font-size:1.05rem;color:var(--brand-dark);text-decoration:none;
  transition:color .18s var(--ease)}
.rlink::after{content:"→";width:34px;height:34px;border-radius:50%;flex:none;
  background:var(--idot);color:var(--brand-deep);display:inline-grid;place-items:center;
  font-size:1.05rem;font-weight:700;transition:transform .18s var(--ease),background .18s var(--ease)}
.rlink:hover{color:var(--brand-deep)}
.rlink:hover::after{transform:translateX(4px);background:var(--lime)}
.rlink-ext::after{content:"↗"}
.on-dark .rlink{color:#E8F0E2}
.on-dark .rlink:hover{color:#fff}
.backlink{margin-top:2rem}
.backlink a{display:inline-flex;align-items:center;min-height:44px;font-weight:700;color:var(--muted);text-decoration:none}
.backlink a:hover{color:var(--brand-dark)}
.subquote{font-family:var(--serif);font-style:italic;font-size:1.18rem;color:var(--brand-deep);
  border-left:3px solid var(--lime);padding-left:1rem;margin:1.2rem 0}
/* nuorten nosto: vaalea liukuväritausta, ei korttireunusta */
.youth{position:relative;margin-top:1.8rem;padding:1.3rem 1.5rem;border-radius:30px 8px 30px 8px;
  background:linear-gradient(125deg,#FDFCF7 0%,var(--bg-pellava) 60%,#F6F3E8 100%);
  box-shadow:inset 0 0 0 1.5px rgba(185,223,99,.4)}
.youth h3{margin:0 0 .5rem}
.youth p{color:var(--ink)}
/* elävämpi alasivu: isompi ingressi ja väljemmät otsikot. Tausta ja verhot tulevat
   .subpage-säännöstä, joten omaa taustaa ei enää tarvita. */
.svc-lively::before{content:"";position:absolute;z-index:0;right:-360px;top:-420px;width:1080px;height:1080px;
  border-radius:50%;background:var(--verho-kivi)}
.svc-lively::after{content:"";position:absolute;z-index:0;left:-320px;bottom:-460px;width:960px;height:960px;
  border-radius:50%;background:var(--verho-valo)}
.svc-lively>.wrap-narrow,.svc-lively>.wrap{position:relative;z-index:1}
.svc-lively .lead{font-size:clamp(1.1rem,1rem + .5vw,1.28rem);color:var(--brand-dark)}
.svc-lively h3{margin-top:var(--vali-otsikko);font-size:clamp(1.35rem,1.15rem + .7vw,1.7rem);color:var(--brand-deep)}
/* nostolaatikot ovat savikiven päällä vaaleaa pellavaa, ja vihreä näkyy vain
   ohuena limerajauksena — näin vihreää käytetään harkitusti */
.box-soft{margin-top:.8rem;padding:1.2rem 1.4rem;border-radius:28px 8px 28px 8px;
  background:linear-gradient(125deg,#FDFCF7 0%,var(--bg-pellava) 100%);
  box-shadow:inset 0 0 0 1.5px rgba(185,223,99,.55)}
.box-soft .sublist{margin-top:0}
.box-soft h3{margin-top:0}
/* korttien otsikot säilyttävät oman ilmeensä (sama koko kuin etusivun laatikoissa) */
.svc-lively .rgroup h3{font-size:1.28rem;margin-top:1.15rem}
.tera-photo{max-width:calc(280px * var(--koko,1));margin:1.2rem 0}
@media(min-width:720px){.tera-photo{float:right;max-width:calc(240px * var(--koko,1));margin:.4rem 0 1rem 1.6rem}}
.subpage .cta-row{clear:both}
.svc-img{margin:1.5rem 0;max-width:calc(440px * var(--koko,1));border-radius:calc(20px * var(--koko,1) * var(--pyoristys,1));overflow:hidden;
  border:1px solid var(--line-solid);box-shadow:0 14px 30px -20px rgba(40,56,45,.3)}
.svc-img img{display:block;width:100%;aspect-ratio:var(--suhde,16/10);object-fit:cover;max-height:var(--maxkorkeus,none);object-position:var(--kohdistus,50% 50%)}

/* ---------- router groups: three services, three recognitions each ---------- */
.rgroups{display:grid;gap:.8rem;margin-top:.4rem}
/* tabletti mukaan: auto-fit antaa kaksi saraketta 700–900 px:ssä ja kolme sitä leveämmällä,
   ennen tässä kaistassa oli yksi hyvin leveä kortti allekkain */
@media(min-width:701px){.rgroups{grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:1rem}}
/* leaf-shaped brand cards: asymmetric radius, tinted tab header, leaf bullets */
.rgroup{position:relative;display:flex;flex-direction:column;overflow:hidden;
  border:1.5px solid var(--line-solid);border-radius:34px 8px 34px 8px;background:var(--white);padding:0;
  transition:transform .2s var(--ease),box-shadow .2s var(--ease)}
.rgroup:hover{transform:translateY(-4px);box-shadow:0 20px 38px -22px rgba(40,56,45,.45)}
.rgroup::after{content:"";position:absolute;right:-38px;top:-38px;width:120px;height:120px;border-radius:50%;
  pointer-events:none;opacity:.5}
/* palvelulaatikoiden otsikot: selvästi otsikkomaiset, ei bulletin kokoisia (Mika 23.8.) */
.rgroup h3{position:relative;z-index:1;color:var(--brand-deep);font-size:1.42rem;font-weight:600;line-height:1.16;
  margin:1.15rem 1.15rem .35rem;padding-bottom:.85rem;letter-spacing:-.012em}
.rgroup h3::after{content:"";position:absolute;left:0;bottom:0;width:64px;height:5px;border-radius:3px}
/* kortit rinnakkain: kaksirivinen otsikko ei saa siirtää listaa alemmas kuin naapurissa */
@media(min-width:820px){.rgroups .rgroup h3,.biz-cards .rgroup h3{min-height:2.32em}}
.rgroup:nth-child(1){border-color:#4E8A3C}
.rgroup:nth-child(1) h3::after{background:var(--lime)} .rgroup:nth-child(1)::after{background:var(--lime-soft)}
.rgroup:nth-child(2){border-color:#A9C4B8}
.rgroup:nth-child(2) h3::after{background:#6E9B86} .rgroup:nth-child(2)::after{background:var(--vihre2-tint)}
.rgroup:nth-child(3){border-color:#B7CDA9}
.rgroup:nth-child(3) h3::after{background:var(--brand)} .rgroup:nth-child(3)::after{background:var(--sage)}
.rbody{position:relative;z-index:1;flex:1;padding:.6rem 1.15rem 1.2rem;display:flex;flex-direction:column}
/* yrityssivun palvelulaatikot: sama lehtikorttityyli; desktopissa vierekkäin kapean palstan yli */
.biz-cards{display:grid;gap:1rem;margin-top:1.2rem}
@media(min-width:701px) and (max-width:819px){.biz-cards{grid-template-columns:1fr 1fr}}
.biz-cards .rgroup ul{margin-bottom:0}
@media(min-width:820px){
  .biz-cards{grid-template-columns:repeat(3,1fr);width:min(1080px,calc(100vw - 2.4rem));
    position:relative;left:50%;transform:translateX(-50%)}
}
.rgroup ul{list-style:none;margin:0 0 1.1rem;padding:0;display:grid;gap:.55rem}
.rgroup li{position:relative;padding-left:1.6rem;font-size:.97rem;color:var(--ink);line-height:1.45}
/* i-pilkku: pyöreä pallo kuten Mielii-logossa */
.rgroup li::before{content:"";position:absolute;left:1px;top:.42em;width:10px;height:10px;
  background:var(--idot);border-radius:50%}
#kenelle .lead{max-width:none}
.small-thing{margin-inline:auto;text-align:center}
.rgroup .rlink{margin-top:auto;align-self:flex-start}
/* Kortissa voi olla kaksi Lue lisaa -linkkia (pari- ja perheterapia omille
   sivuilleen). Kaari ottaa yhden linkin margin-top:auto -tehtavan, jotta
   linkit pysyvat kortin alareunassa myos silloin kun niita on kaksi.
   Valitsin .rgroup .rlinks .rlink (0,3,0) voittaa ylla olevan (0,2,0). */
/* row-gap on pakollinen: kapealla kortilla linkit rivittyvat allekkain, ja
   ilman sita kaksi 44 px:n kosketuskohdetta olisivat kiinni toisissaan. */
.rgroup .rlinks{margin-top:auto;display:flex;flex-wrap:wrap;gap:.15rem 1.4rem}
.rgroup .rlinks .rlink{margin-top:0}

/* ---------- quote interludes between sections: still, serif, centred ---------- */
.interlude{max-width:720px;margin-inline:auto;padding:clamp(1.6rem,4vw,2.8rem) clamp(1.15rem,4vw,2rem) 0;text-align:center}
.interlude::before{content:"”";display:block;font-family:var(--serif);font-size:3.4rem;line-height:.55;
  color:var(--vihre2);margin-bottom:.55rem}
.interlude q{font-family:var(--serif);font-style:italic;font-size:clamp(1.3rem,1.1rem + 1vw,1.75rem);
  line-height:1.35;color:var(--brand-deep);quotes:"" ""}
.interlude::after{content:"";display:block;width:44px;height:2px;background:var(--line-solid);
  border-radius:2px;margin:1rem auto 0}

/* ---------- simple price list ---------- */
.plist{max-width:720px;margin-top:1.4rem}
.prow{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
  padding:.85rem .2rem;border-bottom:1px solid var(--line-solid)}
.prow span{font-weight:600;color:var(--ink)}
.prow small{display:block;font-weight:600;color:var(--muted);font-size:.85rem;margin-top:.15rem}
.prow b{font-family:var(--serif);font-size:1.35rem;color:var(--brand-deep);font-weight:500;white-space:nowrap;font-variant-numeric:tabular-nums}
.prow.feat{background:var(--sage-2);border:1px solid var(--line-solid);border-radius:var(--r);padding:.9rem 1rem}
/* price cards: leaf radius, tinted tab, serif price */
.pgrid{display:grid;gap:1rem;margin-top:1.6rem}
@media(min-width:700px){.pgrid{grid-template-columns:repeat(3,1fr)}}
.pcard{position:relative;overflow:hidden;background:var(--white);border:1.5px solid var(--line-solid);
  border-radius:34px 8px 34px 8px;padding:1.3rem 1.25rem 1.2rem;display:flex;flex-direction:column;
  transition:transform .2s var(--ease),box-shadow .2s var(--ease)}
.pcard:hover{transform:translateY(-4px);box-shadow:0 20px 38px -22px rgba(40,56,45,.45)}
.pcard::after{content:"";position:absolute;right:-40px;top:-40px;width:120px;height:120px;border-radius:50%;opacity:.55}
.pcard:nth-child(1){border-color:#4E8A3C} .pcard:nth-child(1)::after{background:var(--lime-soft)}
.pcard:nth-child(2){border-color:#A9C4B8} .pcard:nth-child(2)::after{background:var(--vihre2-tint)}
.pcard:nth-child(3){border-color:#B7CDA9} .pcard:nth-child(3)::after{background:var(--sage)}
.pcard h3{position:relative;z-index:1;font-size:1.3rem;margin-bottom:.35rem}
.pcard .meta{position:relative;z-index:1;font-size:.9rem;color:var(--muted);font-weight:600}
.pcard .amount{position:relative;z-index:1;margin-top:1rem;font-family:var(--serif);font-size:2.2rem;
  color:var(--brand-deep);line-height:1;font-variant-numeric:tabular-nums}
.pcard .go{position:relative;z-index:1;margin-top:auto;padding-top:1rem}
.pfree{margin-top:1rem;display:flex;flex-wrap:wrap;gap:1rem;align-items:center;justify-content:space-between;
  background:linear-gradient(110deg,var(--lime-soft),var(--vihre2-tint));
  border:1.5px solid #4E8A3C;border-radius:34px 8px 34px 8px;padding:1.3rem 1.5rem}
.pfree h3{font-size:1.25rem;margin-bottom:.2rem}
.pfree p{color:var(--muted);max-width:46ch}
.pfree .amount{font-family:var(--serif);font-size:2.4rem;color:var(--brand-deep);line-height:1}

/* ============================================================
   WATERCOLOR WASHES & SPRIGS — from the brand's own ad.
   Rule: washes live in corners/edges, NEVER behind body text.
   ============================================================ */
.wrap,.wrap-narrow{position:relative;z-index:1}
.washes{overflow:hidden}
/* Etusivun osiot vuorottelevat TIUKASTI: lämmin kerma <-> raikas vihreä, niin
   ettei kaksi peräkkäistä osiota näytä samalta (Mika 23.8.). Järjestys:
   hero kerma · kenelle vihreä · tutustuminen kerma · työskentely vihreä ·
   irene kerma · hinnasto vihreä · varaa kerma · minsa tumma.
   Persikkaiset pallot vaihdettu limeen, salviaan ja valkoiseen. */
#kenelle{position:relative;overflow:hidden;
  background:linear-gradient(180deg,var(--bg-sauma) 0%,var(--bg-savikivi) var(--sauma),
    var(--bg-savikivi) calc(100% - var(--sauma)),var(--bg-sauma) 100%)}
/* savikivellä verho saa olla hitusen vahvempi, koska tummempi pohja nielee sitä enemmän */
#kenelle::before{content:"";position:absolute;z-index:0;right:-360px;top:-420px;width:1080px;height:1080px;
  border-radius:50%;background:var(--verho-kivi)}
#kenelle::after{content:"";position:absolute;z-index:0;left:-320px;bottom:-460px;width:960px;height:960px;
  border-radius:50%;background:var(--verho-valo)}
#kenelle>.wrap{position:relative;z-index:1}
#tyoskentely{position:relative;overflow:hidden;
  background:linear-gradient(180deg,var(--bg-sauma) 0%,var(--bg-savikivi) var(--sauma),
    var(--bg-savikivi) calc(100% - var(--sauma)),var(--bg-sauma) 100%)}
#tyoskentely::before{content:"";position:absolute;z-index:0;left:-360px;bottom:-420px;width:1080px;height:1080px;
  border-radius:50%;background:var(--verho-kivi)}
#tyoskentely::after{content:"";position:absolute;z-index:0;right:-320px;top:-440px;width:940px;height:940px;
  border-radius:50%;background:var(--verho-valo)}
#tyoskentely>.wrap{position:relative;z-index:1}
#irene{position:relative;overflow:hidden;
  background:linear-gradient(180deg,var(--bg-sauma) 0%,var(--bg-pellava) var(--sauma),
    var(--bg-pellava) calc(100% - var(--sauma)),var(--bg-sauma) 100%)}
#irene::before{content:"";position:absolute;z-index:0;right:-360px;bottom:-460px;width:1060px;height:1060px;
  border-radius:50%;background:var(--verho)}
#irene::after{content:"";position:absolute;z-index:0;left:-320px;top:-440px;width:940px;height:940px;
  border-radius:50%;background:var(--verho-valo)}
#irene>.wrap{position:relative;z-index:1}
#palvelut{background:linear-gradient(180deg,var(--bg-sauma) 0%,var(--bg-savikivi) var(--sauma),
    var(--bg-savikivi) calc(100% - var(--sauma)),var(--bg-sauma) 100%)}
/* watercolor: SVG turbulence filters give real ragged pigment edges — no image file needed */
.wash{position:absolute;z-index:0;pointer-events:none;overflow:visible}
.wash ellipse{mix-blend-mode:multiply}
.sprig-svg{position:absolute;z-index:0;color:#8FA97E;opacity:.75;pointer-events:none}
.sprig-svg path{stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round}
.sprig-svg ellipse{fill:currentColor;opacity:.85}
/* pastellipallot washes-osioiden kulmiin: eloa taustaan, ei koskaan tekstin alle */
.intro::before{content:"";position:absolute;z-index:0;right:-360px;top:-440px;width:1060px;height:1060px;border-radius:50%;
  background:var(--verho)}
.intro::after{content:"";position:absolute;z-index:0;left:-320px;bottom:-460px;width:940px;height:940px;border-radius:50%;
  background:var(--verho-valo)}
#palvelut::before{content:"";position:absolute;z-index:0;left:-360px;bottom:-460px;width:1080px;height:1080px;border-radius:50%;
  background:var(--verho-kivi)}
#palvelut::after{content:"";position:absolute;z-index:0;right:-320px;top:-440px;width:940px;height:940px;border-radius:50%;
  background:var(--verho-valo)}
.book::before{content:"";position:absolute;z-index:0;left:-340px;top:-440px;width:1040px;height:1040px;border-radius:50%;
  background:var(--verho)}
.book::after{content:"";position:absolute;z-index:0;right:-320px;bottom:-440px;width:940px;height:940px;border-radius:50%;
  background:var(--verho-valo)}
.heart-div{display:flex;align-items:center;justify-content:center;gap:.6rem;
  color:var(--brand);opacity:.35;padding-block:.2rem 0}
/* Etusivulla osioiden välissä on täsmälleen YKSI väriraja ja sydänviiva istuu sen
   PÄÄLLÄ (Mika 23.8.): erotin ei vie omaa korkeuttaan, joten osiot koskettavat
   toisiaan eikä välissä ole omaa taustakaistaa. Alasivuilla erotin toimii ennallaan. */
#page-front>.heart-div{position:relative;z-index:3;height:0;padding:0;overflow:visible;opacity:.45}
/* Hinnasto → Minsa on ainoa raja vaalean ja tumman välillä: tumma sydän katoaisi
   alapuoliskollaan bandiin, joten tälle saumalle vaalea hehku ja täysi peitto. */
#page-front>.heart-div.on-seam-dark{opacity:1;color:#5A7A5E;
  filter:drop-shadow(0 0 2px rgba(255,255,255,.9)) drop-shadow(0 0 5px rgba(255,255,255,.55))}
.heart-div .line{width:min(320px,36vw);height:2px;border-radius:2px;background:linear-gradient(90deg,transparent,currentColor)}
.heart-div .line.r{background:linear-gradient(90deg,currentColor,transparent)}
.heart-div svg{width:22px;height:22px;flex:none}
@media(max-width:700px){.wash{opacity:.75}.sprig-svg{opacity:.6}}

/* ============================================================
   MOBILE TYPOGRAPHY — placed LAST so it wins the cascade.
   Rule: no body-adjacent text below ~15px on a phone.
   ============================================================ */
@media(max-width:700px){
  body{font-size:1.08rem;line-height:1.62}
  .lead{font-size:1.14rem;line-height:1.56}
  h1.title,h2.title{font-size:clamp(1.8rem,6.6vw,2.15rem)}
  .marker{font-size:1rem} .marker b{font-size:1.2rem}
  .derisk{font-size:1.1rem}
  .ticks li{font-size:1rem}
  .proof li{font-size:.97rem;padding:.5rem 1rem}
  .hero-note strong{font-size:1.15rem} .hero-note span{font-size:1rem}
  .chip q{font-size:1.14rem} .chip small{font-size:.97rem}
  .small-thing b{font-size:1.32rem} .small-thing p{font-size:1.06rem}
  .svc h3{font-size:1.5rem}
  .svc .what{font-size:1rem}
  .svc .price{font-size:1.8rem}
  .svc .foryou{font-size:1.14rem}
  .svc .notfor{font-size:1.02rem;line-height:1.55}
  .svc .go{font-size:1.05rem}
  details.svc>summary::after,details.qa summary::after{font-size:1rem;min-height:44px;padding:.55rem 1.1rem}
  .intro-row h3{font-size:1.28rem} .intro-row p{font-size:1.04rem}
  details.qa summary{font-size:1.16rem;padding:1.05rem 1.1rem}
  details.qa .a{font-size:1.05rem;line-height:1.62}
  details.qa .a.warm{font-size:1.18rem}
  .zero small{font-size:1.04rem}
  .howto li{font-size:1.05rem}
  .norisk{font-size:1.1rem}
  .privacy{font-size:1.18rem}
  .minsa p,.minsa .lead{font-size:1.08rem}
  .badge{font-size:.95rem;padding:.45rem 1rem}
  details.demo>summary b{font-size:1.22rem}
  details.demo>summary span{font-size:.98rem}
  details.demo>summary::after{font-size:1rem;min-height:44px}
  .demo label{font-size:1.14rem} .demo textarea{font-size:1.06rem}
  .irene-quote{font-size:1.42rem}
  .creds li{font-size:.98rem;padding:.45rem .9rem}
  .pull q{font-size:1.5rem}
  .pull .src{font-size:1rem}
  .consent{font-size:.98rem;line-height:1.58}
  .after li{font-size:1.05rem}
  .after-close{font-size:1.05rem}
  .room .cap{font-size:1rem} .room .cap b{font-size:1.22rem}
  .crisis{font-size:1.02rem} .crisis b{font-size:1.06rem}
  .modes .mode span{font-size:1.04rem}
  .orcall{font-size:1.05rem} .embed-ph{font-size:1.02rem}
  .biz .lead{font-size:1.12rem}
  details.qa.dark-qa summary{font-size:1.12rem}
  details.qa.dark-qa summary em{font-size:1.22rem}
  .sku .tags span{font-size:.92rem;padding:.35rem .75rem}
  /* !important poistettu: se oli olemassa vain footer.php:n inline-tyylin
     kumoamiseksi, ja se inline-tyyli on poistettu. */
  .fcols a{font-size:1.05rem} .fcols p{font-size:1rem}
  .fcols h4{font-size:.85rem}
  .fbot{font-size:.95rem}
  .biz .wrap>p{font-size:.98rem!important}
  .shot .body span{font-size:.8rem}
  .hero-visual,.hero-photo-wrap{display:contents}
  .hero{padding-top:.55rem}
  .hero h1{margin-bottom:.4rem}
  .hero .lead{line-height:1.5}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .intro-photo img{transition:none}
  .js body{opacity:1;transition:none}
  .js .hero .kicker,.js .hero h1,.js .hero .lead,.js .hero-visual,.js .hero .hero-triplet,.js .hero .cta-row,.js .hero .ticks{
    opacity:1;transform:none;transition:none}
  .js .reveal{opacity:1;transform:none;transition:none}
  .js .proof li{opacity:1;transform:none;transition:none}
  .js.loaded .hero-photo img{transition:none}
  .u-draw path,.sign path{transition:none;stroke-dashoffset:0}
  .btn,.svc,.chip,.rlink,.rlink::after{transition:none}
  .mbar{transition:none}
  .socials a{transition:none}
  .socials a:hover{transform:none}
  details.maksut>summary::after{transition:none}
}
/* tilat mobile — LAST so it wins the cascade */
@media(max-width:700px){
  .tilat-grid{grid-template-columns:1fr 1fr;gap:.5rem}
  .tilat-grid img{aspect-ratio:1/1.05}
  .tilat-grid img:first-child{grid-column:1/-1;aspect-ratio:16/9}
  .svc-book{font-size:1rem;min-height:44px}
  .rgroup h3{font-size:1.32rem}
  .rgroup li{font-size:1.06rem}
  .prow b{font-size:1.35rem}
  .prow span{font-size:1.02rem}
  .interlude q{font-size:1.22rem}
  /* MOBIILI-HERO (Mikan asettelu):
     otsikko -> lead ("Voimavarakeskeistä...") -> [kuva | koulutukset] -> kupla -> triplet+CTA -> ticks */
  .brand img{height:38px}
  .hero-visual{display:grid;grid-template-columns:170px minmax(0,1fr);gap:.6rem .7rem;align-items:center;order:3}
  .hero-photo-wrap{display:contents}
  .hero-photo{grid-column:1;grid-row:1;aspect-ratio:var(--suhde,4/5)!important;border-radius:calc(22px * var(--koko,1) * var(--pyoristys,1))}
  .hero-photo img{object-position:var(--kohdistus,50% 32%)}
  .hero-bubble{position:static;width:auto;max-width:none;grid-column:1/-1;grid-row:2;margin:0;font-size:.92rem;padding:.6rem .7rem}
  .hero-bubble::after{display:none}
  .cred-list{grid-column:2;grid-row:1;margin:0;gap:.18rem;grid-template-columns:1fr}
  .cred-list li{font-size:.78rem}
  .hero-body{display:contents}
  .hero-head{order:1}
  .hero .lead{order:2;margin:0 0 .3rem;font-size:.98rem;line-height:1.5}
  .hero .lead-more{display:none}
  .hero .hero-triplet{order:4;margin:.15rem 0 .15rem}
  .hero .cta-row{order:5;margin-bottom:.7rem}
  .hero .ticks{order:6}
  /* 0 € -pallo limittyy kuvan alareunaan myös mobiilissa */
  .zero-col{position:relative;z-index:2;margin-top:-72px}
  .zero small{margin-top:.4rem}
  .after li{font-size:1.06rem}
  .rgroup li{font-size:1.02rem}
  .rgroup h3{font-size:1.32rem}
}
/* ============ MOBILE COMPACTION — last block, wins the cascade ============ */
@media(max-width:700px){
  /* tasan yksi kortti näkyvissä kerrallaan: ei gutter-kurkistusta seuraavaan.
     Sama karuselli kahdessa paikassa: etusivun kohderyhmäkortit (.rgroups)
     ja yrityssivun palvelukortit (.biz-cards). */
  .rgroups,.biz-cards{grid-auto-flow:column;grid-auto-columns:100%;overflow-x:auto;scroll-snap-type:x mandatory;
    gap:.7rem;padding-bottom:.6rem;scrollbar-width:none}
  .rgroups::-webkit-scrollbar,.biz-cards::-webkit-scrollbar{display:none}
  .rgroup{scroll-snap-align:start}
  .rgroup:hover{transform:none;box-shadow:none}
  .swipe-hint{display:block}
  .embed-ph img{max-height:250px;object-fit:cover;object-position:50% 0}
  .minsa-shot img{max-height:250px;object-fit:cover;object-position:50% 0}
  .room-card img{max-height:210px;object-fit:cover;object-position:50% 55%}
  .pcard{flex-direction:row;align-items:center;flex-wrap:wrap;gap:.2rem .9rem;padding:1rem 1.1rem;
    border-radius:26px 8px 26px 8px}
  .pcard h3{flex:1;margin-bottom:0;font-size:1.2rem}
  .pcard .meta{flex-basis:100%;order:3;font-size:.88rem;margin-top:-.2rem}
  .pcard .amount{margin-top:0;font-size:1.7rem}
  .pcard .go{flex-basis:100%;order:4;margin-top:.4rem;padding-top:0}
  .pfree{padding:1.1rem 1.2rem}
  /* Tassa oli .intro-photo img -saanto (16/9, max-height 180px) ja
     .intro-photo{max-width:100%}. Molemmat olivat kuolleita: samat valitsimet
     tulevat uudelleen ilman mediakyselya taempana tiedostossa ja voittavat.
     Mitattu 375 px:ssa: aspect-ratio 4/4.4 ja max-height none. Poistettu, jottei
     seuraava muokkaaja luule niiden vaikuttavan. */
  .cred-list{grid-template-columns:1fr;gap:.15rem}
  .cred-list li{font-size:.76rem}
}
/* free intro: photo | overlapping 0 € badge | text (mobiilissa: otsikko -> kuva -> 0 € -> teksti) */
.intro-grid{align-items:center}
@media(min-width:960px){
  .intro-grid{grid-template-columns:250px 190px minmax(0,1fr);gap:1.2rem clamp(1.4rem,2.5vw,2.2rem)}
  .intro-head{grid-column:1/-1;grid-row:1}
  .intro-photo{grid-column:1;grid-row:2;margin:0}
  .intro-dots{grid-column:1;grid-row:3;justify-self:center;margin-top:.55rem}
  .zero-col{grid-column:2;grid-row:2;margin-left:-86px;z-index:2;align-self:center}
  .intro-body{grid-column:3;grid-row:2;align-self:center}
}
.intro-photo{margin:0;max-width:calc(100% * var(--koko,1));border-radius:calc(30px * var(--koko,1) * var(--pyoristys,1)) calc(8px * var(--koko,1) * var(--pyoristys,1)) calc(30px * var(--koko,1) * var(--pyoristys,1)) calc(8px * var(--koko,1) * var(--pyoristys,1));overflow:hidden;border:1.5px solid #A9C4B8;
  box-shadow:0 16px 34px -22px rgba(40,56,45,.4)}
.intro-photo img{display:block;width:100%;aspect-ratio:var(--suhde,4/4.4);object-fit:cover;max-height:var(--maxkorkeus,none);object-position:var(--kohdistus,52% 45%)}
/* vaihtuva toimistokuva: kuvat päällekkäin, ristihäivytys; pallot kuvan alareunassa */
.intro-photo{display:grid;position:relative}
.intro-photo img{grid-area:1/1;opacity:0;transition:opacity .9s var(--ease)}
.intro-photo img.is-on{opacity:1}
.intro-dots{margin:.55rem 0 0;position:relative;z-index:1}
/* tabletti: pinotussa asettelussa kuva ei saa kasvaa koko rivin levyiseksi */
@media(min-width:700px) and (max-width:959px){.intro-photo{max-width:440px}}
.badge0{box-shadow:0 16px 32px -12px rgba(40,56,45,.42)}

/* carousel arrows */
.rgroups-wrap{position:relative}
.rnav{display:none;position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  width:44px;height:44px;border-radius:50%;border:1.5px solid var(--brand-dark);background:#fff;
  color:var(--brand-dark);font-size:1.6rem;line-height:1;cursor:pointer;align-items:center;justify-content:center;
  box-shadow:0 8px 18px -8px rgba(40,56,45,.45)}
.rnav:disabled{opacity:.35;cursor:default}
.rprev{left:-6px} .rnext{right:-6px}
@media(max-width:700px){.rnav{display:flex}}

/* compact price cards */
.pcard{padding:1.05rem 1.15rem}
.pcard .amount{margin-top:.55rem;font-size:2rem}
.pcard .go{padding-top:.6rem}
.pcard-free{background:linear-gradient(150deg,var(--lime-soft),#fff 70%)}
.pnote{margin-top:1rem;font-size:1.05rem;color:var(--muted)}
.pnote a{font-weight:700}
/* maksutavat hinnaston alla: samat tiedot kuin nykyisellä sivustolla */
.paylabel{margin-top:1.6rem}
.paybox{max-width:820px;margin-top:.5rem}
/* MAKSUTAVAT AVATTAVANA PUHELIMESSA
   Tyopoydalla kohta on aina auki eika summarya voi sulkea (pointer-events),
   jolloin ulkoasu on tasmalleen entinen otsikko + laatikot. Puhelimessa
   summary on 44 px:n kosketuskohde plus/miinus-merkilla, ja mielii.js sulkee
   kohdan latauksessa. Ilman skriptia open-maare pitaa sisallon nakyvissa. */
details.maksut>summary{list-style:none}
details.maksut>summary::-webkit-details-marker{display:none}
@media(min-width:701px){details.maksut>summary{pointer-events:none}}
@media(max-width:700px){
  details.maksut>summary{cursor:pointer;min-height:44px;display:flex;align-items:center;gap:.8rem;margin-bottom:0}
  /* Sama nappi kuin muissa avattavissa (details.qa summary::after): teksti
     kertoo mita tapahtuu, pelkka plus-ympyra hukkui otsikon viereen. */
  details.maksut>summary::after{content:"Näytä  +";margin-left:auto;flex:none;
    font-family:var(--sans);font-size:1rem;font-weight:700;color:var(--lime-ink);
    background:var(--sage-2);border:1.5px solid var(--lime);border-radius:var(--pill);
    padding:.55rem 1.1rem;min-height:44px;display:inline-flex;align-items:center;
    transition:background .2s var(--ease)}
  details.maksut[open]>summary::after{content:"Sulje  −";background:var(--sage);border-color:var(--line-solid);color:var(--muted)}
}
.paybox .rule{line-height:1.6}
.paycode{display:inline-block;font-weight:700;color:var(--brand-deep);font-size:1.02rem;
  letter-spacing:.01em;font-variant-numeric:tabular-nums}
@media(min-width:700px){.pgrid{grid-template-columns:repeat(4,1fr);gap:.8rem}}

/* hinnasto: yksi kompakti laatikko, rivissä nimi | napit | hinta */
.pbox{max-width:820px;margin-top:1.6rem;background:var(--white);border:1.5px solid #B7CDA9;
  border-radius:34px 8px 34px 8px;padding:.5rem 1.4rem;box-shadow:0 16px 34px -22px rgba(40,56,45,.4)}
.pbox .prow{display:flex;align-items:center;gap:.6rem 1rem;padding:.7rem .1rem}
.pbox .prow:last-child{border-bottom:none}
.pbox .prow b{min-width:64px;text-align:right}
/* nostorivin pesu limestä salviaan, ei persikkaa (Mika 23.8.) */
.pbox .prow.feat{background:linear-gradient(110deg,var(--lime-soft),var(--sage-2));
  border:1.5px solid #4E8A3C;border-radius:22px 6px 22px 6px;padding:.7rem .9rem;margin:.5rem -.5rem}
.pname{flex:1;min-width:0;font-weight:600;color:var(--ink)}
.pname small{display:block;font-weight:600;color:var(--muted);font-size:.83rem;margin-top:.1rem}
.prow-btns{display:flex;gap:.45rem;flex:none}
/* pienet nappityylit hinnastoriveille */
.bsm{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:.35rem .95rem;
  border-radius:var(--pill);font-weight:700;font-size:.88rem;text-decoration:none;white-space:nowrap;
  transition:background .2s var(--ease)}
.bsm-ghost{background:var(--white);border:1.5px solid var(--lime);color:var(--lime-ink)}
.bsm-ghost:hover{background:var(--lime-soft)}
.bsm-solid{background:var(--brand);border:1.5px solid var(--beige);color:#fff}
.bsm-solid:hover{background:var(--brand-dark)}
/* hinnasto mobiilissa: nimi + hinta ylärivillä, napit alla täysleveinä.
   HUOM: tämän on oltava pbox-perustyylien JÄLKEEN, jotta voittaa kaskadin. */
@media(max-width:700px){
  .pbox{padding:.3rem .9rem}
  .pbox .prow{flex-wrap:wrap;gap:.2rem .7rem;padding:.75rem .1rem}
  .pbox .prow b{order:2;min-width:0}
  .pname{flex:1 1 0;min-width:0}
  .prow-btns{order:3;flex:0 0 100%;margin-top:.2rem}
  .prow-btns .bsm{flex:1;min-height:44px}
  .pname small{font-size:.92rem}
  .pbox .prow.feat{margin:.4rem 0}
  /* siirtymänuolet laatikon ULKOPUOLELLE: kapeampi rata keskellä */
  /* Nuolet 44 -> 38 px ja kortille 16 px lisaa leveytta. 38 px ylittaa
     WCAG 2.5.8:n 24 px:n vahimmaismitan, ja nuolet ovat kortin ulkopuolella
     omalla kaistallaan. Mitattu 390 px:ssa: kortti 257 -> 273 px. */
  .rgroups,.biz-cards{width:calc(100% - 80px);margin-inline:auto}
  .rnav{width:38px;height:38px;font-size:1.3rem}
  /* Kortin sisainen tila tiiviimmaksi, jotta kahdeksan kohdan kortti mahtuu
     paremmin yhdelle ruudulle. Sisennys tulee .rbody-kaareesta, ei listasta.
     Fonttikokoihin ei kosketa. */
  .rgroup h3{margin:.95rem .95rem .3rem;padding-bottom:.7rem}
  .rbody{padding:.5rem .95rem .95rem}
  .rgroup ul{gap:.45rem;margin-bottom:.9rem}
  .rprev{left:0}
  .rnext{right:0}
  /* Samsung-havaintojen optimoinnit */
  .cred-x{display:none}
  .kicker{font-size:.7rem;letter-spacing:.12em}
  .kicker span{display:none}
  /* Heron on oltava selvasti osio-otsikoita suurempi: 390 px:ssa h2.title on
     28,8 px, joten alaraja on nostettu 2.1remiin (33,6 px). Tama saanto on
     mobiilissa se joka VOITTAA - ei --display-muuttuja eika ensimmaisen
     mobiililohkon .hero h1 - joten koon muutos tehdaan tahan. */
  .hero h1{font-size:clamp(2.1rem,7.5vw,2.6rem)}
  .note-line{font-size:1rem}
  #irene details.qa>summary{font-size:.95rem;padding:.7rem 1.1rem;white-space:nowrap;flex-wrap:nowrap}
  #irene details.qa>summary::after{width:auto;flex:none}
  /* "mikä voisi olla toisin" mobiilissa: matomainen serpentiini.
     Kolme suoraa viivaa päällekkäin, päissä puoliympyrät; pisteet viivalla,
     tekstit pisteiden ALLA (viiva ei koskaan leikkaa tekstiä).
     Vain .js-tilassa: ilman JavaScriptiä lista putoaa pystyvarteen, joka ei tarvitse piirtoa. */
  .js .after-wrap{position:relative}
  .js .after-worm{position:absolute;inset:0;pointer-events:none;overflow:visible}
  .js .after{position:relative;z-index:1;grid-template-columns:1fr 1fr;gap:1.2rem .9rem;padding:0;max-width:none;margin-inline:10px}
  .js .after::before{display:none}
  .js .after li{padding:1.15rem .35rem 0;text-align:center;font-size:.98rem}
  .js .after li::before{left:50%;top:0;transform:translateX(-50%);width:11px;height:11px;box-shadow:0 0 0 3px var(--cream)}
  .js .after li:nth-child(1){grid-area:1/1}
  .js .after li:nth-child(2){grid-area:1/2}
  .js .after li:nth-child(3){grid-area:2/2}
  .js .after li:nth-child(4){grid-area:2/1}
  .js .after li:nth-child(5){grid-column:1/-1;grid-row:3;justify-self:center}
  /* kuvanvaihtopallot kuvan alla oikealla, pois 0 € -pallon limitysalueelta */
  .intro-dots{justify-content:flex-end;padding-right:8px;margin-top:.5rem}
  /* 0 € -pallo vasemmalle, "Puhelu, Teams tai vastaanotto" sen oikealle puolelle */
  .zero{grid-template-columns:auto 1fr;justify-items:start;text-align:left;gap:0 1rem;align-items:center}
  .zero small{margin-top:0}
  /* Irene-osio mobiilissa: kuva heti otsikon ja lainauksen jälkeen */
  .irene-wrap{display:flex;flex-direction:column}
  .irene-wrap>div:first-child,.irene-side{display:contents}
  .irene-wrap .marker{order:1}
  .irene-wrap .title{order:2}
  .irene-quote{order:3}
  .irene-photo{order:4;width:100%}
  .photo-cap{order:5}
  #irene .lead{order:6}
  /* Koulutuslista tarvitsee oman order-arvon. Ilman sita se jaa oletukseen 0
     ja nousee display:contents-purun jalkeen koko osion karkeen, ennen
     osiomerkintaa ja otsikkoa. Mitattu 375 px:ssa: creds oli y 4394, marker
     4607. Paikka on sama kuin tyopoydalla eli heti accordionin ylapuolella. */
  .irene-wrap .creds{order:7}
  .irene-wrap details.qa{order:8}
  .rev-head{order:9}
  .revcar{order:10}
  .irene-wrap .consent{order:11}
  .rev-link{order:12}
}

/* ============================================================
   RESPONSIIVISUUSKORJAUKSET 23.8.2026 — viimeisenä, jotta voittavat kaskadin
   ============================================================ */
/* pitkät suomen sanat eivät saa työntää sivua leveämmäksi kapealla näytöllä */
body{overflow-wrap:break-word}
h1,h2,h3,.rgroup li,.sublist li,.pname{hyphens:auto}
/* lovinäytöt: sisältö ei jää kameran alle vaakatilassa */
@media(max-width:900px){
  body{padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}
}
/* logolinkki riittävän isoksi kosketuskohteeksi */
.brand{min-height:44px}
/* karusellipisteet: näkyvä piste pieni, osumapinta 40 px (AA vaatii 24 px) */
.revdots button{width:40px;height:40px}
@media(max-width:700px){
  /* Puhelimen pystyrytmi (Mika 1.9.): OSIOIDEN valit tiiviit, TEKSTIN valit
     valjat. Padit pidetaan pienina jotta kokonaisuudet mahtuvat yhteen
     nakymaan, mutta kappaleiden ja otsikoiden valeja kasvatetaan, koska
     tyopoydan .8rem/1.8rem luki puhelimessa yhtena tiiviina massana.
     --ankkuri on puhelimessa pienempi, koska ylapalkki on matalampi (n. 66 px).
     Kaikki tassa lohkossa, jotta arvot ovat samassa paikassa. */
  :root{--pad-s:1.3rem; --pad-m:1.9rem; --pad-l:2.3rem; --pad-xl:2.9rem; --ankkuri:78px;
    --vali-teksti:1.05rem; --vali-otsikko:2.1rem}
  .minsa-shots{min-height:180px}
  .minsa-shot{width:62%}
  /* Rajattu #ireneen. Ilman rajausta tama osui myos terapeuttisi- ja
   yrityssivun kuviin, jotka kayttavat samaa .irene-photo-kehysta, ja litisti
   pystymuotokuvan vaakakaistaksi puhelimessa. Mitattu 375 px:ssa:
   /terapeuttisi/ sai 4/2.9 vaikka oletus on 4/4.2. */
#irene .irene-photo img{aspect-ratio:var(--suhde,4/2.9)}
  .orcall{line-height:1.9}
  .note-line{margin-top:.9rem}
  .small-thing{margin-top:1.1rem}
  .revdots{margin-top:0}
  /* Tutustumisosion vaihtuva kuva on puhelimessa pystykuvana liian iso: se vei
     388 px eli lahes puolet ruudusta. Vaakasuhde 3/2 pudottaa sen 235 px:iin
     ja huone nakyy yha kokonaan, koska rajaus on object-fit:cover. Tama on
     tiedoston VIIMEINEN mobiililohko, joten se voittaa kaskadissa. */
  .intro-photo img{aspect-ratio:var(--suhde,3/2);object-position:var(--kohdistus,52% 45%)}

  /* ---------- pystytilan siivous, mitattu 390x844 px ----------
     Naissa ei muuteta yhtaan varia, fonttiperhetta, fonttikokoa eika
     elementtien jarjestysta. Kyse on tuplavaleista ja kaskadivirheista. */

  /* Irene-osio: .irene-wrap on tassa pystyflex ja kaareet on purettu
     display:contents-arvolla, joten kahden palstan 24 px:n rako tulee
     yhdentoista elementtiparin valiin vaikka jokaisella on jo oma
     marginaalinsa. Vain kuvatekstilta puuttuu oma vali, se annetaan alla. */
  .irene-wrap{row-gap:0}
  .photo-cap{margin-bottom:1.1rem}

  /* Osiomerkinta on otsikon etiketti, ei oma lohkonsa. Kuusi osiota. */
  .marker{margin-bottom:.4rem}

  /* Hero: nama kaksi arvoa on kirjoitettu tiedoston alkuun mobiilia varten,
     mutta myohemmat samaa spesifisyytta olevat saannot voittavat, joten ne
     eivat ole koskaan olleet voimassa. Rivivali oli 17,6 px vaikka
     tarkoitus oli 8 px, ja kickerin alavali 11,2 px vaikka tarkoitus 4,8. */
  .hero-grid{gap:.5rem}
  .hero .kicker{margin-bottom:.3rem}
  .ticks{column-gap:.9rem}

  /* Hinnasto: nimi ja sen metateksti ovat taulukkosolun kaksi kerrosta,
     eivat luettavaa leipatekstia, joten ne eivat tarvitse rivivalia 1,62.
     Rivin pystypadding pienemmaksi ja nappien tuplavali pois: sama vali
     tulee jo .prow:n gap-arvosta. */
  .pbox .pname{line-height:1.3}
  .pbox .pname small{line-height:1.35}
  .pbox .prow{padding-block:.5rem}
  .prow-btns{margin-top:0}

  /* Tyoskentelyn polku: ruudukon rivivali ja kohtien ylapadding. Pallo on
     11 px plus varjo, joten se mahtuu yha 13,6 px:n paddingiin. */
  .js .after{gap:.8rem .9rem;margin-top:.9rem}
  .js .after li{padding-top:.85rem}
  #tyoskentely .subquote{line-height:1.3;margin:.7rem 0}
  #tyoskentely .rlink{line-height:1.22}

  /* Irenen koulutuspillerit ovat kaytannossa nelirivinen lista, eivat
     linkkeja, joten 44 px:n kosketusvaatimus ei koske niita. */
  .creds{gap:.35rem}
  .creds li{padding-block:.28rem}

  /* Tutustuminen ja Minsa: clamp-arvojen 4vw jaa alarajan alle kapealla
     naytolla, joten voimassa on turhan iso alaraja. */
  .intro-grid{gap:1rem}
  #minsa .minsa-grid{gap:1rem}
  #minsa details.demo{margin-top:1rem}

  /* Maksutapalohko. Sivupaddingia ei saa pienentaa, muuten tilinumero
     alkaa katkeilla. */
  .paylabel{margin-top:1rem}
  .paybox{gap:.55rem}
  /* Perussaanto .rule (0,1,0) on .92rem eli 14,72 px, eika sille ollut
     yhtaan mobiiliylikirjoitusta. Laatikossa on taysia lauseita ja
     tilinumero, ei poikkeuslistan pikkuetiketti, joten 15 px:n raja koskee
     sita. Valitsin .paybox .rule (0,2,0) voittaa ilman !important-maaretta. */
  .paybox .rule{padding-block:.7rem;font-size:.98rem}

  /* Palautteiden lupateksti oli 12,8 px eli alle taman projektin 15 px:n
     rajan, koska .irene-side .consent voittaa spesifisyydella. Tama
     kasvattaa osiota noin 20 px, ja se on oikein. */
  .irene-side .consent{font-size:.98rem}

  /* Alatunnisteen kulkuohjeet ovat taysia lauseita, joten niita koskee
     sama 15 px:n raja kuin muutakin leipatekstia. Perusarvo .9rem on
     14,4 px. Sama arvo kuin .fcols p saa MOBILE TYPOGRAPHY -lohkossa. */
  .fohjeet p{font-size:1rem}

  /* Ilmaa luetteloihin (Mika 1.9.): korttien ja alasivujen listojen rivivali
     kasvatettu, jotta kohdat erottuvat toisistaan eivatka lue yhtena
     tekstimassana. Voittaa MOBILE COMPACTION -lohkon arvot jarjestyksella. */
  .rgroup ul{gap:.6rem}
  .rgroup li{line-height:1.5}
  .sublist{gap:.7rem}

  /* Palvelusivun kuva matalammaksi (16/10 -> 16/9), jotta otsikko, ingressi,
     sitaatti ja kuva mahtuvat yhteen nakymaan. Koskee vain fallback-arvoa:
     hallinnasta valittu kuvasuhde ohittaa taman aina. */
  .subpage .svc-img img{aspect-ratio:var(--suhde,16/9)}

  /* Fonttikorotukset (Mika 1.9.), mitattu 390 px:ssa:

     Koulutuslista hero-kuvan alla oli sivuston pienin teksti (12,2 px) ja
     poistuu talla poikkeuslistalta: viisi rivia patevyyksia on luettavaa
     sisaltoa, ei pikkuetiketti. Aiemmat .78/.76rem-saannot haviavat talle
     jarjestyksella.

     Hinnaston napit ovat sivuston tarkeimmat kehotteet ja olivat sen
     pieninta tekstia (14,1 px). Metarivi ja heron puhekupla (taysi lause,
     puhelimessa taysleveana staattisena laatikkona) nousevat 15 px:n
     rajan yli. */
  .cred-list li{font-size:.875rem;line-height:1.5}
  .prow-btns .bsm{font-size:.95rem}
  .pbox .pname small{font-size:.95rem}
  .hero-bubble{font-size:.95rem}
  .hero-bubble strong{font-size:.98rem}
  /* Sama korotus kuin .fcols h4 saa MOBILE TYPOGRAPHY -lohkossa. Uusi otsikko
     on .fcols-ruudukon ULKOPUOLELLA, joten se ei osu siihen valitsimeen ja jai
     ilman tata 12,48 pikseliin. */
  .fohjeet h4{font-size:.85rem}
  /* Minsan tarjouslaatikon pieni teksti on alasivulla sivun ainoa
     tilausreitti nyt kun "Tee tilaus" -nappi on poistettu. Etusivun bandi saa
     korotuksen valitsimella .minsa .minsa-offer small, joka ei osu alasivulle. */
  .subpage .minsa-offer small{font-size:.95rem;line-height:1.45}
  .subpage .minsa-offer small a{display:inline-block;min-height:44px;padding-block:.6rem}
}
/* TABLETTI 701–899 px: tässä kaistassa hero putosi mobiilipinoon ilman mobiilin
   kaksipalstaista kuvaratkaisua, jolloin Irenen kuva venyi koko ruudun kokoiseksi.
   Sama kahden palstan asettelu kuin työpöydällä, mutta kapeampana. */
@media(min-width:701px) and (max-width:899px){
  .hero-grid{grid-template-columns:minmax(0,1fr) 300px;gap:.6rem 1.8rem;align-items:start;
    grid-template-areas:"head visual" "body visual"}
  .hero-head{grid-area:head;align-self:end}
  .hero-body{grid-area:body;align-self:start}
  .hero-visual{grid-area:visual;max-width:300px;width:100%;justify-self:end}
  .hero-photo{aspect-ratio:var(--suhde,4/4.4)}
  .hero-bubble{left:-26px;bottom:12px;width:150px}
  .intro-grid,.irene-wrap{gap:1.6rem}
}
/* matala vaakanäyttö: hero ei saa vaatia kahta ruutua ennen nappia */
@media(max-height:520px) and (orientation:landscape){
  .hero{padding-block:.6rem .8rem}
  .hero-photo{aspect-ratio:var(--suhde,16/9)!important}
  .hero h1{font-size:1.7rem}
  .hero .lead{margin-bottom:.5rem}
}

/* =====================================================================
   TEEMALISÄYKSET
   Näitä ei ole mallissa. Ne kuuluvat oikeaan sivustoon: näppäimistöllä
   liikkuvan ohituslinkki ja tiedotenauha.
   ===================================================================== */
.skip-link{position:absolute;left:-9999px;top:0;z-index:200;padding:.7rem 1.1rem;
  background:var(--brand);color:#fff;border-radius:0 0 12px 0;font-weight:600;text-decoration:none}
.skip-link:focus{left:0}
.tiedote{background:var(--bg-savikivi);color:var(--brand-deep);
  border-bottom:1px solid rgba(89,111,92,.18);font-size:.95rem;line-height:1.45}
.tiedote .wrap{padding-top:.6rem;padding-bottom:.6rem;text-align:center}
/* Tiedotenauhalla oli mobiiliylikirjoitus .9rem eli 14,4 px, mika alitti
   projektin 15 px:n rajan. Nauha on Irenen kirjoittama lause ("Olen lomalla
   7.7.-21.7.") eika etiketti, ja se on nakyvissa juuri silloin kun se on
   tarkoitettu luettavaksi. Nauha on yksi- tai kaksirivinen, joten
   perusarvo .95rem = 15,2 px ei uhkaa asettelua. */

/* Alasivujen väliotsikot ovat h2, jotta otsikkotasot menevät järjestyksessä
   h1 -> h2 -> h3. Ulkoasu on sama kuin mallin h3-otsikoilla. Korttien otsikot
   pysyvät h3-tasolla, koska ne ovat väliotsikon alla. */
.subpage h2:not(.title){font-size:1.3rem;margin:var(--vali-otsikko) 0 var(--vali-teksti)}
.youth h2:not(.title){margin:0 0 .5rem}
.svc-lively h2:not(.title){margin-top:var(--vali-otsikko);font-size:clamp(1.35rem,1.15rem + .7vw,1.7rem);color:var(--brand-deep)}
/* Lomake (tarjouspyyntö) */
.lomake{margin-top:1.6rem;max-width:640px}
.lomake p{margin:0 0 1.1rem}
.lomake label{display:block;font-weight:600;color:var(--brand-deep);margin-bottom:.35rem;font-size:1rem}
.lomake .pakollinen{color:var(--lime-ink)}
.lomake input,.lomake textarea{width:100%;box-sizing:border-box;min-height:48px;
  padding:.7rem .9rem;font:inherit;font-size:1rem;color:var(--ink);
  background:#fff;border:1.5px solid #C9D3C4;border-radius:14px}
.lomake textarea{min-height:150px;line-height:1.55;resize:vertical}
.lomake input:focus,.lomake textarea:focus{outline:none;border-color:var(--brand);
  box-shadow:0 0 0 3px rgba(89,111,92,.18)}
.lomake button{min-height:48px}
.lomake-piilo{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.lomake-tieto{font-size:.95rem;color:var(--muted)}
.lomake-virhe{margin-top:1.4rem;padding:1rem 1.2rem;border-radius:18px;
  background:#FBEDE7;border:1.5px solid #E0B4A2;color:#7A3B24}
.lomake-virhe ul{margin:.5rem 0 0;padding-left:1.2rem}
.lomake-kiitos{margin-top:1.4rem;padding:1.2rem 1.4rem;border-radius:20px;
  background:var(--lime-soft);border:1.5px solid rgba(90,148,64,.35);color:var(--brand-deep);font-size:1.1rem}/* Nykyisen sivun korostus yläpalkissa. Mallissa korostus tuli vain vieritystä
   seuraavasta skriptistä; teemassa myös alasivu näyttää missä ollaan. */
.navlinks>a[aria-current]::after,.nav-item>a[aria-current]::after{transform:scaleX(1)}/* Hallinnasta muokattava pitkä teksti. Mallissa kappaleiden välit olivat
   inline-tyyleinä; teemassa ne tulevat tästä, koska Irene ei kirjoita tyylejä.
   Muista: sivuston pohjatyyli on p{margin:0}. */
.rikas p+p{margin-top:var(--vali-teksti)}
/* Hyva tietaa -vastaukset: sama kappalevali. Mallissa nama olivat inline-tyyleina,
   mutta hallinnasta kirjoitettu vastaus ei voi sisaltaa tyyleja. */
details.qa .a p+p{margin-top:.6rem}
/* Nostolainaus noudattaa samaa periaatetta kuin otsikko: se aloittaa uuden
   ajatuksen, joten sen ylapuolella on ilmaa, ja sita seuraava kappale
   jatkaa lukua tiiviisti. Nain sivulla on vain kaksi valia, ei kolmea. */
.rikas .subquote{margin:var(--vali-otsikko) 0 var(--vali-teksti)}
.lead+.rikas>p:first-child{margin-top:1rem}

/* Varauskalenterin modaali: maininta ulkopuolisesta palvelusta. */
.bmodal-note{margin:0;padding:.55rem 1.1rem;font-size:.86rem;line-height:1.45;
  color:var(--muted);background:var(--bg-sauma);border-bottom:1px solid rgba(89,111,92,.16)}
.bmodal-note a{color:var(--brand-dark)}
/* Huomautus oli puhelimessa 13,76 px eli alle projektin 15 px:n rajan. Se on
   taysi lause jossa on linkki tietosuojaselosteeseen, ei pikkuetiketti, eli
   sama tapaus kuin .irene-side .consent ja .minsa .minsa-offer small. Jai
   aiemmin huomaamatta, koska modaali avautuu vain https-yhteydella eika sita
   nae paikallisessa http-kehityksessa lainkaan.
   HUOM: tama lohko on tassa eika RESPONSIIVISUUSKORJAUKSET-osiossa, koska
   .bmodal-note maaritellaan vasta tuon osion JALKEEN. Yhta spesifinen
   mobiilisaanto aiemmin tiedostossa haviaisi sille. */
@media(max-width:700px){.bmodal-note{font-size:.95rem;line-height:1.5}}
/* =====================================================================
   Kuva tekstin vierellä (yrityssivun nosto ja kouluttajaesittely).
   Ruudukko eikä kelluva kuva: float asettaa tekstin aina kuvan ylareunaan,
   ruudukossa align-items:center saa ne samalle korkeudelle.
   ===================================================================== */
/* Alareunan vali: sama 2.2rem kuin muissa osiovaihdoksissa talla sivulla.
   HUOM vierekkaisten elementtien marginaalit menevat paallekkain, joten tama
   arvo on koko vali eika lisays seuraavan lohkon marginaaliin. */
.kuvarivi{display:grid;gap:1.2rem;margin-bottom:2.2rem}
.kuvarivi-teksti>h2:first-child{margin-top:0!important}
.kuvarivi-kuva{margin:0;max-width:calc(100% * var(--koko,1));border-radius:calc(20px * var(--koko,1) * var(--pyoristys,1));overflow:hidden;
  border:1px solid var(--line-solid);box-shadow:0 14px 30px -20px rgba(40,56,45,.3)}
.kuvarivi-kuva img{display:block;width:100%;aspect-ratio:var(--suhde,4/5);object-fit:cover;
  max-height:var(--maxkorkeus,none);object-position:var(--kohdistus,50% 50%)}
@media(min-width:820px){
  /* Sama levitys kuin korttiriveilla: kapea 616 px:n palsta jaettuna kahtia
     ahtaisi seka tekstin etta kuvan, joten lohko levitetaan keskitetysti. */
  .kuvarivi.on-kuva{grid-template-columns:minmax(0,1fr) 300px;gap:2.4rem;align-items:center;
    width:min(940px,calc(100vw - 2.4rem));position:relative;left:50%;transform:translateX(-50%)}
}

.kouluttaja{display:grid;gap:1.3rem;margin-top:1rem}
.kouluttaja-kuva{max-width:calc(280px * var(--koko,1))}
.kouluttaja-kuva img{max-height:var(--maxkorkeus,none)}
/* Koulutuslista on hero-kuvan vieressa tarkoituksella pieni etiketti (.83rem,
   ks. .cred-list li), mutta yrityssivun kouluttajaosiossa se on sivun omaa
   luettavaa listaa: 13,28 px erottui selvasti ympariston 17,44 px:sta.
   Valitsin (0,2,1) voittaa seka perussaannon etta mobiililohkojen
   .cred-list li -saannot (0,1,1), joten jarjestyksella ei ole valia. */
.kouluttaja .cred-list li{font-size:1.05rem;line-height:1.45}
.kouluttaja .cred-list{gap:.45rem}
@media(min-width:720px){
  /* Ylareunaan tasaus, ei pystykeskitys. Kuva on tekstipalstaa korkeampi
     (283 px vs 169 px), joten keskitys tyonsi otsikon "Kouluttaja" ja nimen
     valiin 73 px tyhjaa. Nyt vali on 35 px eli puolet entisesta, ja se tulee
     tasta marginaalista: h2:n alamarginaali 12,8 px menee sen sisaan, koska
     vierekkaisten elementtien marginaalit menevat paallekkain. */
  .kouluttaja{grid-template-columns:minmax(0,1fr) 250px;gap:2.2rem;align-items:start;margin-top:2.2rem}
  .kouluttaja-kuva{max-width:calc(100% * var(--koko,1))}
}
/* Kuvan sovittaminen viereisen tekstin korkeuteen. Kaytossa vain
   kaksipalstaisissa lohkoissa ja vain kun palstat ovat rinnakkain. */
/* Kuva EI saa kasvattaa rivin korkeutta, muuten teksti venyisi kuvan mukaan
   eika toisin pain. Siksi kuva irrotetaan asettelusta absoluuttisesti: silloin
   rivin korkeuden maaraa teksti ja kuva tayttaa sen. */
@media(min-width:820px){
  .kuvarivi.on-kuva.on-sovita{align-items:stretch}
  .kuvarivi.on-sovita .kuvarivi-kuva{position:relative;height:100%;min-height:0;width:100%;margin-inline:0}
  .kuvarivi.on-sovita .kuvarivi-kuva img{position:absolute;inset:0;width:100%;height:100%;
    aspect-ratio:auto;max-height:none;object-fit:cover}
}
@media(min-width:720px){
  .kouluttaja.on-sovita{align-items:stretch}
  .kouluttaja.on-sovita .kouluttaja-kuva{position:relative;height:100%;min-height:0;width:100%;margin-inline:0}
  .kouluttaja.on-sovita .kouluttaja-kuva img{position:absolute;inset:0;width:100%;height:100%;
    aspect-ratio:auto;max-height:none;object-fit:cover}
}
/* Kavennettu kuva keskitetaan omassa sarakkeessaan, jottei se jaa kiinni reunaan. */
.kuvarivi-kuva,.kouluttaja-kuva{margin-inline:auto}
@media(min-width:820px){.kuvarivi.on-kuva .kuvarivi-kuva{margin-inline:0 auto}}
/* Sivun otsikko levitetaan samaan leveyteen kuin sen alla oleva kaksipalstainen
   lohko, muuten otsikko nayttaa sisennetylta suhteessa tekstiin. */
@media(min-width:820px){
  .sivun-otsikko.levea{width:min(940px,calc(100vw - 2.4rem));position:relative;left:50%;transform:translateX(-50%)}
}
/* ===================================================================
   VIDEOKEHYS (lyhytterapia-sivu)

   Pystysuora kehys, jossa on aloituskuva ja sen paalla iso
   toistopainike. Video ei lataa mitaan ennen kuin katsoja kaynnistaa
   sen: preload="none" ja poster-maare hoitavat sen ilman skriptia.

   Soitin toimii myos ilman JavaScriptia, koska selaimen omat saatimet
   ovat kaytossa. Iso painike naytetaan vain .js-luokan alla, jottei
   sivulle jaa toimimatonta nappia jos skripti ei lataudu.

   Muuttujat --suhde, --koko, --pyoristys ja --maxkorkeus tulevat
   funktiosta mielii_kuvatyyli(), joten hallinnan saatimet toimivat
   taalla samoin kuin kuvilla.
   =================================================================== */
.videokehys{margin:2.4rem auto 0;max-width:calc(300px * var(--koko,1));text-align:center}
.video-ala{position:relative;aspect-ratio:var(--suhde,9/16);max-height:var(--maxkorkeus,none);
  border-radius:calc(20px * var(--koko,1) * var(--pyoristys,1));overflow:hidden;
  background:var(--sage);box-shadow:0 18px 40px -28px rgba(38,49,43,.55)}
.video-soitin{display:block;width:100%;height:100%;object-fit:cover;background:var(--sage)}

/* Painike on piilossa ilman skriptia, jotta se ei peita selaimen omia
   saatimia eika nayta rikkinaiselta. */
.video-nappi{display:none}
/* Nappi oli keskitetty pystysuunnassa (inset:0 + margin:auto), jolloin se osui
   pystykuvassa suoraan kasvojen paalle. Se on sidottu alareunaan ja pieni.
   Aiempi 64 px:n etaisyys alareunasta vaisti selaimen saadinpalkkia, mutta
   saatimet ovat nykyisin levossa pois paalta, joten nappi saa istua lahes
   alareunassa. Tyopoydalla 48 px ja puhelimessa 44 px: puhelimen koko on
   TASAN projektin kosketusraja, eika sen alle menna.

   VARMISTIN: ehtona on video-ohjattu, jonka mielii.js itse lisaa, EI pelkka
   js-luokka. Sen lisaa header.php:n sisainen skripti aina - myos silloin kun
   mielii.js jaa lataamatta tai kaatuu. Skripti sammuttaa saatimet levossa
   MOLEMMISSA tiloissa (aloituskuvan kanssa ja ilman), jolloin selaimen omaa
   isoa keskelle piirtyvaa play-palloa ei ole ja tama pieni alareunan nappi
   hoitaa kaynnistyksen. Ilman skriptia nappi jaa pois ja controls-maare
   pitaa selaimen saatimet paalla, eli video toimii aina - mutta koskaan ei
   ole kahta play-nappia paallekkain. */
.video-ala.video-ohjattu .video-nappi{display:flex;position:absolute;inset:auto 0 16px 0;margin-inline:auto;
  width:48px;height:48px;align-items:center;justify-content:center;
  border:0;border-radius:var(--pill);cursor:pointer;
  background:rgba(255,255,255,.92);box-shadow:0 6px 18px -6px rgba(38,49,43,.5);
  opacity:1;visibility:visible;
  transition:transform .18s var(--ease),background .18s var(--ease),
             opacity .35s var(--ease),visibility .35s var(--ease)}
.video-ala.video-ohjattu .video-nappi:hover{background:#fff;transform:scale(1.06)}
/* Nappi ei katoa koskaan: se on videon ainoa saadin, joka seka toistaa etta
   pysayttaa. Toistossa kolmio vaihtuu tauko-merkiksi (alla). Selaimen omia
   saatimia ei kayteta, koska niiden iso play/pause-pallo piirtyy keskelle
   kuvaa eli kasvojen paalle eika sita voi siirtaa. */

/* ALOITUSKUVAN RISTIHAIVYTYS
   Aloituskuva on kahtena: <video poster> selaimelle ilman skriptia, ja tama
   kerros skriptin kanssa. Erillinen kerros on valttamaton, koska poster ja
   videon ensimmainen ruutu ovat saman elementin kaksi tilaa: selain vaihtaa ne
   kovalla leikkauksella eika niiden valiin voi asettaa siirtymaa.

   Kansi on klikattava ja kaynnistaa videon, joten koko aloituskuva on
   osumapinta eika pelkka nappi. Se peittaa myos selaimen saadinpalkin, ja
   skripti sammuttaa saatimet lepotilassa: palkki tulee esiin vasta kun video
   pyorii. Ilman skriptia kantta ei ole ja saatimet ovat paalla koko ajan. */
   VARMISTIN: kansi piirtyy vain luokan kansi-on kanssa, ja sen lisaa mielii.js
   itse. Ehto EI saa olla pelkka luokka js, koska sen lisaa header.php:n sisainen
   skripti aina - myos silloin kun mielii.js jaa lataamatta tai kaatuu. Silloin
   kansi peittaisi selaimen omat saatimet ilman klikkauskasittelijaa eika videota
   saisi kayntiin lainkaan. Sama periaate kuin .reveal-piilotuksen reveal-on. */
.video-kansi{display:none}
.video-ala.kansi-on .video-kansi{display:block;position:absolute;inset:0;cursor:pointer;
  opacity:1;transition:opacity .5s var(--ease)}
.video-kansi img{display:block;width:100%;height:100%;object-fit:cover}
/* Luokka on-alkanut tulee playing-tapahtumasta eli vasta kun ensimmainen ruutu
   on piirretty. Jos haivytys alkaisi jo play-tapahtumasta, valiin jaisi tyhja
   laatikko juuri niin pitkaksi aikaa kuin lataus kestaa. */
.video-ala.on-alkanut .video-kansi{opacity:0;pointer-events:none}

/* Kolmio piirretaan reunuksilla, jottei tarvita erillista kuvaa. */
.video-kolmio{width:0;height:0;margin-left:4px;
  border-top:11px solid transparent;border-bottom:11px solid transparent;
  border-left:18px solid var(--brand-deep)}
/* Toistossa sama elementti piirtaa tauko-merkin: kaksi pystypalkkia
   vasemmasta ja oikeasta reunuksesta, valissa elementin lapinakyva keskusta.
   Ei erillista kuvaa, samat mitat kuin kolmiolla. */
.video-ala.on-toistossa .video-kolmio{width:5px;height:16px;margin-left:0;
  border-top:0;border-bottom:0;
  border-left:5px solid var(--brand-deep);border-right:5px solid var(--brand-deep)}

/* Ei omaa font-size-arvoa: kuvateksti perii leipatekstin koon, jolloin se on
   tasan yhta iso kuin muu sivun teksti. Aiempi 1.05rem oli 16,8 px kun muu
   teksti on 17,44 px, ja ero nakyi juuri videon vieressa. Serif-fontti ja
   varitys jaavat, ne erottavat kuvatekstin ilman kokoeroa. */
.video-teksti{margin-top:.9rem;font-family:var(--serif);color:var(--brand-dark);line-height:1.4}

@media(prefers-reduced-motion:reduce){
  .video-ala.video-ohjattu .video-nappi{transition:none}
  .video-ala.video-ohjattu .video-nappi:hover{transform:none}
  .video-kansi{transition:none}
}

@media(max-width:700px){
  .videokehys{margin-top:2rem;max-width:calc(260px * var(--koko,1))}
  .video-ala.video-ohjattu .video-nappi{width:44px;height:44px;inset:auto 0 14px 0}
}

/* ===================================================================
   LYHYTTERAPIA-SIVUN RIVIJARJESTELMA (Mika 30.8.)

   Sivun kontti on .wrap eli sama 1120 px kuin etusivulla, ei kapea
   .wrap-narrow. Kapeassa palstassa videolle ei jaanyt tilaa tekstin
   viereen.

   Koko sivun sisalto kaaritaan .lyhyt-rivi -ruudukkoon, myos ne lohkot
   joilla ei ole videota. Ruudukko on kaikilla sama, joten tekstipalstan
   vasen reuna ja leveys ovat identtiset lohkosta toiseen. Ilman tata
   videollinen rivi olisi eri levyinen kuin muut ja teksti hyppisi.

   Tekstipalstaksi jaa noin 700 px eli noin 70 merkkia rivilla. Se on
   sama suuruusluokka kuin etusivun osioiden leipatekstilla (642-675 px),
   joten sivut nayttavat samalta perheelta.

   Videopalsta 340 px: pystyvideo on nyt selvasti isompi kuin kapeassa
   palstassa mahtunut 260 px.
   =================================================================== */
/* -------------------------------------------------------------------
   YKSI PYSTYVALI KOKO SIVULLE (Mika 30.8.)

   Mitattu ennen: kappaleiden vali 13 px, otsikon jalkeen 10 px ja
   tekstilaatikoiden vali 29 px. Kolme eri valia samassa lukuvirrassa
   nakyy epatasaisuutena, vaikka syyta ei osaisi nimeta.

   Nyt kaikki ovat sama --lyhyt-vali. Arvo on pienin, joka viela erottaa
   kappaleet toisistaan: rivivali on noin 28 px, joten 13 px:n rako on
   selvasti alle puolet rivista eika synny toista palstaa.

   Otsikot eivat tarvitse lisatilaa, koska ne erottuvat jo koolla, serif-
   fontilla ja varilla. Siksi myos otsikon ylapuolinen vali on sama.
   ------------------------------------------------------------------- */
.lyhyt-rivi{display:grid;gap:1.2rem}

/* Otsakelohko: ylateksti, otsikko ja ingressi samaan rytmiin. */
.lyhyt-rivi .kicker{margin-bottom:var(--vali-teksti)}
.lyhyt-rivi h1.title{margin-bottom:var(--vali-teksti)}
.lyhyt-rivi .lead{margin-bottom:0}

/* Leipateksti ja otsikot laatikon sisalla. */
.lyhyt-rivi .rikas p + p{margin-top:var(--vali-teksti)}
.lyhyt-rivi .rikas h2,
.lyhyt-rivi .rikas h3{margin-top:var(--vali-otsikko);margin-bottom:var(--vali-teksti)}
.lyhyt-rivi .rikas ul,
.lyhyt-rivi .rikas ol{margin-top:var(--vali-teksti);margin-bottom:var(--vali-teksti)}
/* Laatikon ensimmainen lapsi ei saa omaa ylamarginaalia: valin maaraa
   rivin marginaali, muuten ne laskettaisiin yhteen. */
.lyhyt-rivi .rikas > *:first-child{margin-top:0}

/* Laatikoiden vali. Laatikkoraja on lukijalle nakymaton, joten valin on
   maaraydyttava sisallosta eika rakenteesta: jos seuraava laatikko alkaa
   otsikolla, vali on otsikon vali, muuten kappaleen vali. Ilman tata
   otsikko sai laatikon alussa vain kappaleen valin ja teksti luki yhtena
   massana. :has() ei toimi vanhoissa selaimissa, ja silloin jaljelle jaa
   kappaleen vali eli sama kuin ennen: ei rikkoudu, vain tiivistyy. */
.lyhyt-rivi + .lyhyt-rivi{margin-top:var(--vali-teksti)}
.lyhyt-rivi + .lyhyt-rivi:has(> .rikas > h2:first-child),
.lyhyt-rivi + .lyhyt-rivi:has(> .rikas > h3:first-child){margin-top:var(--vali-otsikko)}
/* Perussaanto .lead rajaa ingressin 60 merkkiin. Talla sivulla ingressin
   on oltava yhta levea kuin muu teksti, joten katto puretaan ja leveyden
   maaraa rivin oma sarake kuten muillakin lohkoilla. Sama tapa kuin
   etusivun saannossa #kenelle .lead. */
.lyhyt-rivi .lead{max-width:none}
/* Kehyksella on omillaan ylamarginaali ja automaattikeskitys. Kapealla
   naytolla keskitys on oikein, sarakkeessa ei. */
.lyhyt-rivi > .videokehys{margin:0 auto}
/* Yksipalstaisessa tilassa ruudukko ei rajaa tekstia, joten 1120 px:n
   kontissa rivi venyisi noin 85 merkkiin. Katto pitaa rivinpituuden
   samana kuin tyopoydalla, noin 70-80 merkissa. */
.lyhyt-rivi > :not(.videokehys){max-width:42rem}
@media(min-width:1000px){
  /* Ruudukon sarake hoitaa rajauksen, joten katto puretaan. */
  .lyhyt-rivi > :not(.videokehys){max-width:none}
}
/* Raja on 1000 px eika 820 px. Mitattu: 900 pikselin naytolla kiintea
   340 px:n videosarake puristi tekstin 442 pikseliin eli 52 merkkiin,
   mika on kapeampi kuin vanha yksipalstainen asettelu samalla leveydella.
   1000 px on myos teeman oma raja, jolla tyopoytavalikko tulee esiin. */
@media(min-width:1000px){
  /* align-items:start eika center. Pystyvideo on 340 px:n sarakkeessa noin
     600 px korkea. Jos teksti on sita lyhyempi, center jattaa aukon seka
     tekstin ylle etta alle ja katkaisee lukuvirran edellisesta lohkosta.
     start pitaa otsikon kiinni edellisessa tekstissa ja siirtaa tyhjan
     tilan kokonaan videon alapuolelle, missa se lukee luonnollisemmin. */
  .lyhyt-rivi{grid-template-columns:minmax(0,1fr) 340px;gap:2.4rem;align-items:start}

  /* Lohko ilman videota kayttaa MOLEMMAT sarakkeet, jolloin sen oikea reuna
     osuu tasan videon oikeaan reunaan. Ylä- ja alalaatikko ovat siis leveita
     ja vain keskilaatikko kapea, jolloin video asettuu tekstien valiin.
     Reuna on tasan sama koska se on sama ruudukon viiva, ei arvattu mitta. */
  .lyhyt-rivi > :not(.videokehys){grid-column:1 / -1}
  .lyhyt-rivi.on-video > :not(.videokehys){grid-column:1}

  /* Sarake sidotaan nimenomaisesti, jottei kehys valu tekstisarakkeeseen
     jos lohkon lapsijarjestys joskus muuttuu. */
  .lyhyt-rivi.on-video > .videokehys{grid-column:2;margin:0;max-width:calc(340px * var(--koko,1))}
}
/* ===================================================================
   MINSA-OSION TIIVISTYS JA VAALEA TARJOUSLAATIKKO (Mika 28.8.)

   Kolme asiaa:

   1. Sydanerotin ennen tummaa bandia nousi ylos. Aiemmin se istui
      tasan bandin ylareunassa, jolloin se nayti lovelta reunassa eika
      hengahdykselta osioiden valissa. Muut erottimet ovat vaalean ja
      vaalean valissa, joten ne saavat jaada paikalleen.

   2. Tarjouslaatikko on nyt vaalea ja teksti tumma. Se tuo bandiin
      toisen varin ilman uutta savya: pellava on jo paletissa. Laatikon
      sisalla --lime palautetaan normaaliksi, koska bandin vaalennettu
      lime katoaisi vaalealla pohjalla.

   3. Pystyrytmi tiivistetty. Bandi oli korkein osio etusivulla ja
      alaosaan jai iso tyhja.
   =================================================================== */

/* 1. Erotin pois tumman reunan paalta */
#page-front > .heart-div.on-seam-dark{transform:translateY(-30px)}

/* 2. Vaalea tarjouslaatikko tummalla bandilla */
.minsa .minsa-offer{--lime:#5A9440;
  background:var(--cream);color:var(--ink);
  border-color:rgba(90,148,64,.45)}
.minsa .minsa-offer b{color:var(--brand-deep)}
.minsa .minsa-offer small{color:var(--muted)}
.minsa .minsa-offer small a{color:var(--brand-dark)}
/* Linkin vari tulee saannosta .on-dark .rlink, joka on bandin takia
   voimassa. Vaalean laatikon sisalla se olisi lukukelvoton, joten se
   kumotaan tarkemmalla valitsimella. Kohdistus on oltava itse linkkiin,
   ei sen ymparilla olevaan kappaleeseen. */
.minsa .minsa-offer .rlink{color:var(--brand-dark)}
.minsa .minsa-offer .rlink:hover{color:var(--brand-deep)}

/* 3. Tiivistys */
.minsa{padding-block:var(--pad-m)}
.minsa-grid{gap:clamp(1.4rem,3vw,2.2rem)}
.minsa .minsa-offer{margin-top:1rem;padding:.9rem 1.1rem}
.minsa .privacy{margin-top:1rem;font-size:1.12rem}
.minsa details.demo{margin-top:clamp(1.1rem,2.5vw,1.8rem)}
.minsa-shots{min-height:260px}

@media(max-width:700px){
  #page-front > .heart-div.on-seam-dark{transform:translateY(-24px)}
  .minsa-shots{min-height:200px}
  .minsa .privacy{font-size:1.05rem}

  /* Puhelimessa korkeutta ei ole juuri muualla kuin marginaaleissa:
     tekstipalstan sisalto on jo pientakin pienempaa. Kavennetaan siis
     valistykset, ei tekstikokoa. */
  .minsa .badge{margin-bottom:.5rem}
  .minsa .minsa-logo{margin-bottom:.6rem}
  .minsa .lead{margin-bottom:.5rem}
  .minsa .minsa-offer{margin-top:.8rem}
  .minsa .privacy{margin-top:.8rem}
  .minsa details.demo{margin-top:.9rem}

  /* Laatikon selitysteksti oli 13,6 px. Projektin oma raja on 15 px
     puhelimen leipatekstille, eika tama ole poikkeuslistan pikkuetiketti
     vaan lause, jossa on linkki. Nostetaan rajan ylapuolelle. */
  .minsa .minsa-offer small{font-size:.95rem;line-height:1.45}
}

@media(prefers-reduced-motion:reduce){
  /* Siirto on asettelua, ei animaatiota, joten se jaa voimaan. */
}

/* =====================================================================
   KOSKETUS JA ZOOMAUS (3.14.1)

   Havaittu vika puhelimilla: korttikarusellin nuolen kaksi nopeaa
   napautusta tulkittiin tuplanapautukseksi, joka zoomasi koko sivun
   sisaan. Zoomatussa nakymassa sipaisu panoroi sivua vaakaan, jolloin
   otsikot ja tekstit "leikkautuvat" reunoista. Sivulla ei ole oikeaa
   vaakaylivuotoa (mitattu 375 ja 412 px), kyse on selaimen zoomista.

   touch-action:manipulation poistaa tuplanapautuszoomin VAIN
   painikkeilta ja linkeilta. Nipistyszoomaus toimii kaikkialla
   edelleen, eli saavutettavuus ei heikkene - siksi taalla EI kayteta
   user-scalable=no -maaretta, joka veisi zoomin nakovammaisilta. */
a,button,summary,input,select,textarea,label{touch-action:manipulation}

@media(max-width:700px){
  /* Kun karusellin rata on sipaistu paatyyn asti, jatkosipaisu valui
     sivun (tai zoomatun nakyman) vaakapanorointiin. Rajataan vieritys
     rataan itseensa. */
  .rgroups,.biz-cards{overscroll-behavior-x:contain}
}