/* Runko Ratkaisut, sivuston tyylit. Generoitu sivusto: python3 _lahde/rakenna.py */

@font-face{font-family:"Geist";font-style:normal;font-weight:400 500;font-display:swap;src:url(/fontit/geist-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Geist";font-style:normal;font-weight:400 500;font-display:swap;src:url(/fontit/geist-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Geist Mono";font-style:normal;font-weight:400;font-display:swap;src:url(/fontit/geist-mono-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Geist Mono";font-style:normal;font-weight:400;font-display:swap;src:url(/fontit/geist-mono-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* Ei sinistä napautuskorostusta puhelimella; näppäimistön fokus näkyy edelleen (:focus-visible). */
html{-webkit-tap-highlight-color:transparent}
:focus:not(:focus-visible){outline:none}

:root{
  --bg:#0a0a0a;
  --card:#0e0e0e;
  --card-2:#111111;
  --ink:#f2f2f0;
  --muted:#a3a39f;
  --soft:#c9c9c5;
  --faint:#6f6f6b;
  --line:rgba(255,255,255,.10);
  --line-2:rgba(255,255,255,.18);
  --line-hi:rgba(255,255,255,.28);
  --sans:"Geist","Helvetica Neue",Helvetica,Arial,sans-serif;
  --mono:"Geist Mono","SF Mono",Menlo,Consolas,monospace;
  --gutter:clamp(20px,4vw,56px);
  --nav-pad:14px;
  --nav-h:66px;
  --radius:10px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--bg);scroll-behavior:smooth}
body{
  background:transparent;color:var(--ink);
  font-family:var(--sans);font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;
}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:#f2f2f0;color:#0a0a0a}
/* typografian viimeistely: tasapainoiset otsikkorivit, ei yksinäisiä sanoja kappaleen lopussa */
h1,h2,h3,h4{text-wrap:balance}
p,li,dd,blockquote{text-wrap:pretty}
.skip{position:absolute;left:-9999px;top:8px;z-index:100;background:var(--ink);color:#0a0a0a;padding:8px 12px;border-radius:6px}
.skip:focus{left:8px}

/* ---------- tausta: musta runko hienoisella rakeella; etusivun herossa koodattu rasteri (js/rasteri.js) ---------- */
:root{--rae-kuva:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='r'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .03 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23r)'/%3E%3C/svg%3E")}
body{background:var(--bg) var(--rae-kuva) 0 0/180px 180px}
.hero-rasteri{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden;background:linear-gradient(90deg,#141414,#1c1c1c 45%,#0c0c0c 70%,#0a0a0a);-webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - var(--hero-liuku,22%)),transparent);mask-image:linear-gradient(to bottom,#000 calc(100% - var(--hero-liuku,22%)),transparent)}
.hero-rasteri canvas{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;transition:opacity .4s ease}
.hero-rasteri.valmis canvas{opacity:1}
.hero:has(.hero-rasteri){isolation:isolate}
.hero:has(.hero-rasteri) .hero-figure img{-webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - var(--hero-liuku,22%) * 1.4),transparent);mask-image:linear-gradient(to bottom,#000 calc(100% - var(--hero-liuku,22%) * 1.4),transparent)}
/* Vieritys: hero jää jälkeen puolella nopeudella (js/sivusto.js), seuraavat osiot liukuvat sen päälle läpinäkymättöminä. */
.hero-siirto{will-change:transform;box-shadow:0 -100vh 0 0 #121212} /* nopeassa ylösvierityksessä heron yläpuolelle ei paljastu ruudukkoa */
.hero-siirto ~ *,footer{position:relative;z-index:1;background:var(--bg) var(--rae-kuva) 0 0/180px 180px}

/* ---------- yhteiset ---------- */
.wrap{max-width:1180px;margin:0 auto;padding:0 var(--gutter)}
.wrap-narrow{max-width:860px}
section{scroll-margin-top:calc(var(--nav-h) - 8px)}
.section{padding:120px 0}
.eyebrow{font:400 12px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);display:flex;align-items:center;gap:12px}
.eyebrow::before{content:"";width:20px;height:1px;background:var(--faint)}
.eyebrow.center{justify-content:center}
.eyebrow.center::before{display:none}
.h2{font-weight:500;font-size:clamp(34px,4vw,56px);line-height:1.05;letter-spacing:-.03em;text-wrap:balance;margin:22px 0 18px}
.h2 .dim,.h1 .dim{color:#8a8a86}
.sub{color:var(--muted);font-size:17px;max-width:54ch}
.center{text-align:center}
.center .sub{margin:0 auto}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:42px;padding:0 20px;border-radius:6px;font:500 14.5px/1 var(--sans);letter-spacing:-.005em;white-space:nowrap;transition:background-color .18s ease,border-color .18s ease,color .18s ease,transform .12s ease,opacity .18s ease}
.btn:active{transform:scale(.98)}
.btn-light{background:var(--ink);color:#0a0a0a}
.btn-light:hover{background:#d9d9d6}
.btn-ghost{border:1px solid var(--line-2);color:var(--ink);background:transparent}
.btn-ghost:hover{border-color:var(--line-hi);background:rgba(255,255,255,.04)}
.btn svg{width:15px;height:15px}
.btn[disabled]{opacity:.55;cursor:default;transform:none}

/* ---------- navi: kiinteä, reunoista irti oleva kehys (malli plinthai.xyz); vierittäessä läpinäkymätön tausta, ei sumennusta ---------- */
.nav{position:fixed;top:10px;left:max(40px,calc((100% - 1440px) / 2 + 40px));right:max(24px,calc((100% - 1440px) / 2 + 24px));z-index:50;height:56px;display:flex;align-items:center;justify-content:space-between;padding:0 8px 0 16px;background:transparent;transition:background-color .3s ease}
.nav.vieritetty{background:var(--card)}
/* Luettavuus herokuvan päällä ilman taustaa: pehmeä tumma varjo tekstin ja logon ympärille, kunnes navi saa taustan. */
.nav:not(.vieritetty) .menu a,.nav:not(.vieritetty) .menu-toggle{text-shadow:0 1px 2px rgba(0,0,0,.85),0 0 14px rgba(0,0,0,.7)}
.nav:not(.vieritetty) .brand img,.nav:not(.vieritetty) .brand svg{filter:drop-shadow(0 1px 2px rgba(0,0,0,.8)) drop-shadow(0 0 10px rgba(0,0,0,.6))}
.brand{display:flex;align-items:center;height:32px}
.brand img{height:100%;width:auto}
.brand svg{height:100%;width:auto;overflow:visible}
/* Sivun avaus (js/avaus.js asettaa html.avaa-intro millä tahansa sivulla, kun tultiin sivuston ulkopuolelta):
   musta intro, jossa pystylogon R piirtyy (SVG-maskin vedot runko → kaari → jalka) ja teksti avautuu keskeltä,
   sitten sivu häivyttyy esiin. Navin R on aina valmiina. Muut sivulataukset: kevyt häivytys. */
.lp{fill:none;stroke:#fff;stroke-linecap:butt;stroke-dasharray:1 1;stroke-dashoffset:0}
.lp-runko{stroke-width:26}
.lp-kaari{stroke-width:23}
.lp-jalka{stroke-width:31}
.intro-ruutu{display:none}
@media all{
  html::after{content:"";position:fixed;inset:0;z-index:1000;background:#000;pointer-events:none;animation:musta-pois .6s cubic-bezier(.4,0,.2,1) both}
  @keyframes musta-pois{from{opacity:.5}to{opacity:0;visibility:hidden}}

  html.avaa-intro::after{display:none}
  html.avaa-intro .intro-ruutu{display:grid;place-items:center;position:fixed;inset:0;z-index:1001;background:#000;pointer-events:none;animation:intro-pois 1s cubic-bezier(.4,0,.2,1) 2.8s both}
  .intro-logo{width:min(300px,62vw);height:auto;overflow:visible;animation:intro-logo-pois .5s cubic-bezier(.4,0,.2,1) 2.5s both}
  .intro-logo .lp{animation:logo-piirto var(--lp-kesto) cubic-bezier(.65,0,.35,1) calc(.25s + var(--lp-viive)) both}
  .lp-runko{--lp-kesto:.45s;--lp-viive:0s}
  .lp-kaari{--lp-kesto:.6s;--lp-viive:.35s}
  .lp-jalka{--lp-kesto:.4s;--lp-viive:.9s}
  .lp-jalka-pyyhi{transform-box:fill-box;transform-origin:top;animation:jalka-pyyhi .45s cubic-bezier(.65,0,.35,1) 1.15s both}
  @keyframes jalka-pyyhi{from{transform:scaleY(0)}to{transform:none}}
  .intro-teksti{transform-box:fill-box;transform-origin:center;animation:intro-teksti .8s cubic-bezier(.22,1,.36,1) 1.25s both}
  @keyframes logo-piirto{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
  @keyframes intro-teksti{from{opacity:0;transform:scaleX(.55)}to{opacity:1;transform:none}}
  @keyframes intro-logo-pois{to{opacity:0;transform:translateY(-6px);filter:blur(4px)}}
  @keyframes intro-pois{to{opacity:0;visibility:hidden}}
  html.avaa-intro .hero-text,html.avaa-intro .nav,html.avaa-intro .page-head{animation-delay:3.05s}
  html.avaa-intro .hero-figure img{animation-delay:3.15s}
}
.menu{display:flex;list-style:none;font-size:15.5px;font-weight:500;color:var(--ink)}
.menu a{position:relative;display:block;padding:6px 12px;transition:color .2s ease}
.menu a:hover,.menu a[aria-current="page"]{color:var(--ink)}
/* Animoitu alleviivaus (21st.dev AnimatedUnderline CSS:nä): kasvaa vasemmalta, poistuu oikealle. */
.menu a::after{content:"";position:absolute;left:12px;right:12px;bottom:2px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:var(--viiva-alku,left) bottom;transition:transform .3s ease-in-out}
/* Alleviivaus kasvaa siltä puolelta, jolta kursori tulee, ja poistuu sille puolelle, jonne kursori lähtee (--viiva-alku, js/sivusto.js). */
.menu a:hover::after,.menu a:focus-visible::after{transform:scaleX(1)}
.menu a[aria-current="page"]::after{transform:scaleX(1)}
.nav-right{display:flex;align-items:center;gap:8px}
.nav .btn-nav{height:40px;padding:0 16px;margin-left:8px;border-radius:0;font-size:14px;font-weight:600}
/* Solut ilman reunaviivoja: jokainen linkki oma solunsa koko korkeudelta, CTA täyttää oikean reunan (7.10.2026). */
.nav{padding:0 0 0 16px}
.nav .nav-right{align-self:stretch;gap:0}
.nav .btn-nav{align-self:stretch;height:auto;margin:0;padding:0 24px}
.nav .menu-toggle{align-self:center;margin-right:8px}
@media (min-width:901px){
  .nav-right > nav,.nav .menu{height:100%}
  .nav .menu li{display:flex}
  .nav .menu a{display:flex;align-items:center;padding:0 20px;transition:color .2s ease,background-color .2s ease}
  .nav .menu a::after{left:20px;right:20px;bottom:14px}
}
.menu-toggle{display:none;height:40px;padding:0 14px;border:0;border-radius:0;font-size:14px;color:var(--ink)}
/* mobiilivalikko: koko ruudun paneeli paljastuu ylhäältä alas (clip-path), linkit nousevat porrastetusti.
   Ei display-vaihtoa, joten avaus ja sulkeminen ovat sulavia; sulkeminen nopeampi. Malli: pohjat/miesten-urheiluhieronta 16q. */
.mt-roll{position:relative;display:inline-block;overflow:hidden;height:1.2em;line-height:1.2em}
.mt-roll>span{display:block;transition:transform .55s cubic-bezier(.76,0,.24,1)}
.menu-toggle[aria-expanded="true"] .mt-roll>span{transform:translateY(-100%)}
.mobile-menu{display:none}
@media (max-width:900px){
  .mobile-menu{
    display:flex;flex-direction:column;position:fixed;inset:0;z-index:-1;height:100dvh;
    padding:calc(var(--nav-h) + clamp(28px,6vh,56px)) 24px calc(24px + env(safe-area-inset-bottom));
    overflow-y:auto;overscroll-behavior:contain;
    background:radial-gradient(120% 55% at 50% 110%,rgba(255,255,255,.06),transparent 60%),var(--bg) var(--rae-kuva) 0 0/180px 180px;
    visibility:hidden;pointer-events:none;clip-path:inset(0 0 100% 0);
    transition:clip-path .5s cubic-bezier(.65,0,.35,1),visibility 0s linear .5s;
  }
  .mobile-menu.open{visibility:visible;pointer-events:auto;clip-path:inset(0 0 0 0);transition:clip-path .75s cubic-bezier(.76,0,.24,1),visibility 0s}
  .mobile-menu>a{
    display:flex;align-items:baseline;gap:18px;padding:clamp(14px,2.6vh,22px) 0;border-bottom:1px solid var(--line);
    font-weight:500;font-size:clamp(30px,8.5vw,44px);line-height:1.05;letter-spacing:-.035em;color:var(--ink);
    opacity:0;transform:translateY(26px);
    transition:opacity .3s ease,transform .4s cubic-bezier(.65,0,.35,1),color .3s ease;
  }
  .mobile-menu>a:first-child{border-top:1px solid var(--line)}
  .mobile-menu>a[aria-current="page"],.mobile-menu>a:active{color:var(--muted)}
  .mm-num{flex:none;width:2.4em;font:400 12px/1 var(--mono);letter-spacing:.1em;color:var(--faint);transform:translateY(-.9em)}
  .mobile-menu.open>a{opacity:1;transform:none;transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1),color .3s ease}
  .mobile-menu.open>a:nth-child(1){transition-delay:.18s}
  .mobile-menu.open>a:nth-child(2){transition-delay:.24s}
  .mobile-menu.open>a:nth-child(3){transition-delay:.30s}
  .mobile-menu.open>a:nth-child(4){transition-delay:.36s}
  .mm-foot{display:grid;gap:14px;margin-top:auto;padding-top:clamp(28px,6vh,56px);opacity:0;transform:translateY(20px);transition:opacity .3s ease,transform .4s cubic-bezier(.65,0,.35,1)}
  .mobile-menu.open .mm-foot{opacity:1;transform:none;transition:opacity .7s cubic-bezier(.2,.7,.2,1) .5s,transform .9s cubic-bezier(.2,.7,.2,1) .5s}
  .mm-foot .btn{height:52px;border-radius:0;font-size:15px;font-weight:600}
  .mm-portaali{display:flex;justify-content:center;align-items:center;height:52px;border:1px solid var(--line-2);font:400 12px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--soft);transition:border-color .2s ease,color .2s ease}
  .mm-portaali:hover{border-color:var(--line-hi);color:var(--ink)}
  html.menu-lukko .nav{background:transparent}
}
/* Valikon ajaksi sivu lukitaan kosketukselta eikä overflow:hiddenillä: Androidin Chrome näyttää osoiterivin, kun sivu
   lakkaa olemasta vieritettävä, ja koko näkymä navia myöten nytkähtää alas (10.10.2026). */
html.menu-lukko{touch-action:none;overscroll-behavior:none}
html.menu-lukko .mobile-menu{touch-action:pan-y}

/* ---------- hero ---------- */
.hero{position:relative;min-height:100vh;min-height:100svh;overflow:hidden;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);padding:var(--nav-h) var(--gutter) 0}
.hero-text{align-self:center;max-width:600px;padding:72px 0 120px}
.hero-text .eyebrow{margin-bottom:34px}
/* Heron vaihtuva sana (js/sivusto.js): kolme riviä, joten sanan pituus ei siirrä muuta tekstiä. */
.piilo{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.hero-otsikko .rivi{display:block}
.hero-otsikko .vaihtuva{color:#8a8a86;white-space:nowrap;font-size:min(1em,10.5vw)} /* pisin sana mahtuu 360 px:n näytölle */
.hero-otsikko .vaihtuva span{display:inline-block;will-change:transform,opacity,filter}
.h1,h1{font-weight:500;font-size:clamp(42px,5vw,72px);line-height:1.02;letter-spacing:-.035em;text-wrap:balance;margin-bottom:28px}
.lead{font-size:18px;line-height:1.6;color:var(--muted);max-width:44ch;margin-bottom:40px}
/* Otsikon alateksti heron tyyliin kaikilla sivuilla: isompi, vaaleampi, kapeampi; varjo erottaa rasterista (7.10.2026) */
.hero-text .lead,.page-head .lead{font-size:21px;line-height:1.5;letter-spacing:-.01em;color:var(--soft);max-width:38ch;text-shadow:0 1px 2px rgba(0,0,0,.6)}
.actions{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.actions .btn{height:48px;padding:0 24px;font-size:15px}
.note{margin-top:22px;font:400 12.5px/1.5 var(--mono);color:var(--soft);letter-spacing:.01em;text-shadow:0 1px 2px rgba(0,0,0,.7)}
.hero-figure{position:relative;min-height:60vh}
.hero-figure::before{content:"";position:absolute;left:50%;bottom:0;width:140%;height:120%;transform:translateX(-50%);background:radial-gradient(ellipse at 50% 70%,rgba(0,0,0,.55),rgba(0,0,0,0) 62%);pointer-events:none}
.hero-figure img{position:absolute;bottom:0;right:4%;height:min(92vh,92svh,1100px);width:auto;max-width:none;user-select:none;-webkit-user-drag:none;pointer-events:none}
/* Keskitetty hero (malli-keskitetty, 16.10.2026): ei hahmoa eikä yläotsaketta; kolme riviä keskitettynä, joten vaihtuvan sanan pituus ei siirrä muita rivejä. */
.hero-rasteri[data-tausta="teksti"]{background:#151515}
.hero-keskitetty{grid-template-columns:minmax(0,1fr);justify-items:center;text-align:center}
.hero-keskitetty .hero-text{max-width:860px;padding:72px 0 140px}
.hero-keskitetty .hero-otsikko{font-size:clamp(46px,6.6vw,104px)}
.hero-keskitetty .lead{max-width:44ch;margin-left:auto;margin-right:auto}
.hero-keskitetty .actions{justify-content:center}
/* Ruudukkohero (malli-ruudukko, 16.10.2026, asettelu chaseai.io): ei rasteria, joten mainin ruudukko ja hiiren valokeila
   näkyvät läpinäkyvän heron läpi. Otsikko: 1. rivi ohut ja himmeä, 2. rivi lihava. "Geist Paino" on sama tiedosto koko
   painoalueella; perus-Geistin 400–500-rajausta ei laajenneta, ettei muun sivun lihavointi muutu. */
@font-face{font-family:"Geist Paino";font-style:normal;font-weight:100 900;font-display:swap;src:url(/fontit/geist-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Geist Paino";font-style:normal;font-weight:100 900;font-display:swap;src:url(/fontit/geist-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
.hero-ruudukko{align-items:center}
.hero-ruudukko::before{content:"";position:absolute;right:-20%;top:-20%;width:40%;height:40%;border-radius:50%;background:rgba(255,255,255,.07);filter:blur(120px);pointer-events:none}
.hero-ruudukko .hero-text{max-width:1024px;padding:64px 0 120px}
.hero-ruudukko .hero-otsikko{font-family:"Geist Paino",var(--sans);font-size:clamp(36px,5vw,72px);line-height:1.1;letter-spacing:-.025em;margin-bottom:32px}
.hero-ruudukko .hero-otsikko .ohut{font-weight:300;color:var(--ink)} /* värit kuten etusivulla: valkoinen / #8a8a86 / valkoinen */
.hero-ruudukko .hero-otsikko .lihava{font-weight:700;color:var(--ink)}
.hero-ruudukko .hero-otsikko .vaihtuva,.hero-ruudukko .hero-otsikko .runko{display:block} /* kolme riviä: sanan pituus ei siirrä "runko."-sanaa */
.hero-ruudukko .hero-otsikko .vaihtuva{color:#8a8a86;font-size:min(1em,10.5vw)}
.hero-ruudukko .lead{font-size:20px;line-height:1.625;color:var(--muted);max-width:672px;margin:0 auto 48px}
@media (max-width:600px){
  .hero-ruudukko .lead{font-size:18px}
}
/* Soturi on huppuhahmoa leveämpi (1128×1394): kapealla työpöydällä korkeus rajataan leveyden mukaan, ettei keihäs mene tekstin päälle. */
@media (min-width:901px){.hahmo-soturi img{height:min(92vh,92svh,1100px,61vw)}}
/* malli-sade (18.10.2026): koko vartalon soturi myrskytaustaa vasten (js/tausta-myrsky.js); jalat rajautuvat heron alareunaan
   kuten mallikuvassa, eikä tummaa varjoa soturin taakse, koska tausta on siinä kirkkain */
.hero-rasteri[data-tausta="myrsky"]{background:#080808}
.hahmo-soturi-tunika::before{display:none}
.hahmo-soturi-tunika img{right:12%;bottom:-12vh;height:min(100vh,100svh,1150px)}
@media (max-width:900px){.hahmo-soturi-tunika img{right:6%;bottom:-8vh;height:calc(100% + 8vh)}}
@media all{
  .hero-text,.nav,.page-head{animation:rise .7s cubic-bezier(.16,1,.3,1) both}
  .nav{animation-fill-mode:backwards} /* ei jäävää transformia: muuten navi olisi mobiilivalikon (position:fixed) sisältölohko */
  .hero-figure img{animation:rise 1s cubic-bezier(.16,1,.3,1) .1s both}
  @keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
}

/* ---------- alasivun otsikko ---------- */
.page-head{padding:calc(var(--nav-h) + 96px) 0 64px}
.page-head h1{margin:30px 0 24px} /* sama koko ja tyyli kuin heron otsikossa (h1-perussääntö) */
.page-head .lead{margin-bottom:0}
.crumbs{list-style:none;display:flex;flex-wrap:wrap;gap:6px;font:400 12px/1 var(--mono);letter-spacing:.04em;color:var(--faint);margin-bottom:26px}
.crumbs li + li::before{content:"/";margin-right:6px;color:var(--faint)}
.crumbs a:hover{color:var(--ink)}
.crumbs [aria-current]{color:var(--muted)}

/* ---------- palvelut ---------- */
.services{border-top:1px solid var(--line);margin-top:40px}
.services-list{list-style:none;margin-top:56px;border-top:1px solid var(--line)}
.services-list li{border-bottom:1px solid var(--line)}
.services-list a{display:grid;grid-template-columns:72px minmax(0,1fr) minmax(0,1.3fr) 28px;gap:24px;align-items:baseline;padding:26px 0;transition:padding-left .2s ease}
@media (hover:hover){.services-list a:hover{padding-left:8px}}
.services-list .num{font:400 12px/1 var(--mono);color:var(--faint);letter-spacing:.08em}
.services-list h3{font-weight:500;font-size:20px;letter-spacing:-.015em;line-height:1.3}
.services-list p{color:var(--soft);font-size:15.5px}
.services-list .arrow{width:16px;height:16px;color:var(--faint);align-self:center;justify-self:end}
@media (hover:hover){.services-list a:hover .arrow{color:var(--ink)}}

/* palvelusivu */
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:8px}
.stat{position:relative;overflow:hidden;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:26px 24px;transition:border-color .55s cubic-bezier(.22,1,.36,1),box-shadow .55s cubic-bezier(.22,1,.36,1),translate .55s cubic-bezier(.22,1,.36,1)}
/* hover nostaa translate-ominaisuudella, koska .ilmesty käyttää transformia; .stat.ilmesty yhdistää molempien siirtymät */
.stat.ilmesty{transition:opacity .7s cubic-bezier(.22,1,.36,1) var(--viive,0s),transform .7s cubic-bezier(.22,1,.36,1) var(--viive,0s),border-color .55s cubic-bezier(.22,1,.36,1),box-shadow .55s cubic-bezier(.22,1,.36,1),translate .55s cubic-bezier(.22,1,.36,1)}
.stat::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(120% 90% at 50% 0%,rgba(255,255,255,.09),transparent 60%);opacity:0;transition:opacity .55s cubic-bezier(.22,1,.36,1)}
/* hover vain osoitinlaitteilla: kosketusnäytöllä :hover jäisi päälle napautuksen jälkeen */
@media (hover:hover){
  .stat:hover{border-color:rgba(255,255,255,.65);box-shadow:0 0 0 1px rgba(255,255,255,.08),0 10px 32px -10px rgba(255,255,255,.22)}
  .stat:hover::after{opacity:1}
}
@media (hover:hover){.stat:hover{translate:0 -3px}}
/* 7.10.2026: ei prosenttilukuja; perustelulause on kortin pääsisältö */
.stat p{position:relative;color:var(--ink);font-weight:500;font-size:19px;line-height:1.35;letter-spacing:-.015em}
.features{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:48px}
.feature{position:relative;overflow:hidden;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:28px;transition:border-color .55s cubic-bezier(.22,1,.36,1),box-shadow .55s cubic-bezier(.22,1,.36,1),translate .55s cubic-bezier(.22,1,.36,1)}
/* sama valkoinen hover kuin .stat: nosto translatella, koska .ilmesty käyttää transformia */
.feature.ilmesty{transition:opacity .7s cubic-bezier(.22,1,.36,1) var(--viive,0s),transform .7s cubic-bezier(.22,1,.36,1) var(--viive,0s),border-color .55s cubic-bezier(.22,1,.36,1),box-shadow .55s cubic-bezier(.22,1,.36,1),translate .55s cubic-bezier(.22,1,.36,1)}
.feature::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(120% 90% at 50% 0%,rgba(255,255,255,.064),transparent 60%);opacity:0;transition:opacity .55s cubic-bezier(.22,1,.36,1)}
.feature>*{position:relative}
@media (hover:hover){
  .feature:hover{border-color:rgba(255,255,255,.65);box-shadow:0 0 0 1px rgba(255,255,255,.064),0 10px 32px -10px rgba(255,255,255,.176)}
  .feature:hover::after{opacity:1}
  .feature:hover .num{color:#fff}
}
@media (hover:hover){.feature:hover{translate:0 -3px}}
.feature .num{font:400 12px/1 var(--mono);color:var(--faint);letter-spacing:.08em;display:block;margin-bottom:18px;transition:color .55s cubic-bezier(.22,1,.36,1)}
.feature h3{font-weight:500;font-size:19px;letter-spacing:-.015em;margin-bottom:10px}
.feature p{color:var(--soft);font-size:15px}
/* /palvelut/: palvelut kahdessa ryhmässä */
.ryhmat{display:grid;gap:72px}
.ryhma{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2.4fr);gap:40px}
.ryhma > div:first-child h2{font-weight:500;font-size:28px;letter-spacing:-.025em;line-height:1.1;margin-bottom:10px}
.ryhma > div:first-child p{color:var(--muted);font-size:15px;max-width:30ch}
.ryhma .services-list{margin-top:0}
@media (max-width:900px){.ryhma{grid-template-columns:1fr;gap:20px}}
.service-cta{margin-top:64px;display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.service-cta p{color:var(--muted);font-size:15px}
.more{margin-top:80px;padding-top:40px;border-top:1px solid var(--line)}
.more h2{font-weight:500;font-size:18px}
.more-paa{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px}
.more ul{list-style:none;display:flex;flex-wrap:wrap;gap:10px}
.more a{display:inline-flex;align-items:center;height:38px;padding:0 14px;border-radius:999px;border:1px solid var(--line);font-size:14px;color:var(--muted);transition:border-color .18s ease,color .18s ease}
.more a:hover{border-color:var(--line-hi);color:var(--ink)}
/* palvelusivujen paluulinkki palveluluetteloon */
a.takaisin{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 16px 0 12px;border:1px solid var(--line-2);border-radius:999px;font-size:14px;color:var(--soft);transition:border-color .45s cubic-bezier(.22,1,.36,1),color .45s cubic-bezier(.22,1,.36,1),background-color .45s cubic-bezier(.22,1,.36,1)}
.page-head a.takaisin{margin-bottom:26px}
.takaisin svg{width:15px;height:15px;transition:translate .45s cubic-bezier(.22,1,.36,1)}
@media (hover:hover){a.takaisin:hover{border-color:rgba(255,255,255,.65);color:#fff;background-color:rgba(255,255,255,.04)}}
@media (hover:hover){.takaisin:hover svg{translate:-3px 0}}

/* ---------- hinnoittelu ---------- */
.pricing-head{display:flex;flex-direction:column;align-items:center;text-align:center;margin-bottom:56px}
.toggle{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:12px;margin-top:40px;font-size:14px;font-weight:500}
.toggle .lbl{color:var(--faint);transition:color .18s ease}
.toggle .lbl.on{color:var(--ink)}
.switch{position:relative;width:44px;height:24px;border-radius:999px;background:#2a2a28;transition:background-color .18s ease;flex:none}
.switch:hover{background:#363634}
.switch::after{content:"";position:absolute;top:4px;left:4px;width:16px;height:16px;border-radius:50%;background:var(--ink);transition:transform .2s ease}
.switch[aria-checked="true"]::after{transform:translateX(20px)}
.tag{display:inline-block;border-radius:999px;padding:3px 9px;margin-left:6px;font:400 10px/1.4 var(--mono);letter-spacing:.12em;text-transform:uppercase;background:#242422;color:var(--ink)}
.tag-light{background:var(--ink);color:#0a0a0a;font-weight:500}
.plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.plan{position:relative;display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:32px 32px 30px;transition:border-color .18s ease}
.plan:hover{border-color:var(--line-2)}
.plan.hi{border-color:var(--line-hi);background:var(--card-2)}
.plan.hi::before{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;background:var(--ink);border-radius:12px 12px 0 0}
.plan-head{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:24px;margin-bottom:28px}
.plan-head .tag{margin-left:0}
.plan h3{font:500 12px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.plan.hi h3{color:var(--ink)}
.plan-desc{color:var(--soft);font-size:15px;line-height:1.5;margin-bottom:28px;min-height:3em;text-wrap:pretty}
.price{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px;margin-bottom:18px}
.price .amt{font-weight:500;font-size:64px;letter-spacing:-.045em;line-height:1;white-space:nowrap;font-variant-numeric:tabular-nums}
.price .per{color:var(--faint);font-size:15px;font-weight:500}
/* Hinnan numerorullat (js: hintarullat), NumberFlow-tyyliin: jokainen numero on pystyrulla, reunat häivytetään maskilla */
.nf{--nf-maski:.15em;--nf-askel:1.15em;display:inline-flex;padding:var(--nf-maski) 0;margin:calc(-1 * var(--nf-maski)) 0;-webkit-mask-image:linear-gradient(to bottom,transparent,#000 var(--nf-maski),#000 calc(100% - var(--nf-maski)),transparent);mask-image:linear-gradient(to bottom,transparent,#000 var(--nf-maski),#000 calc(100% - var(--nf-maski)),transparent)}
.nf-c{position:relative;display:inline-block;white-space:pre}
.nf-p{visibility:hidden}
.nf-r{position:absolute;left:0;top:0;display:flex;flex-direction:column;will-change:transform}
.nf-r>span{height:var(--nf-askel)}
.price .save{display:none;flex-basis:100%;margin-top:10px;font:400 11px/1 var(--mono);color:var(--muted);letter-spacing:.06em}
.annual .price .save{display:block}
.plan .btn{width:100%;margin-bottom:28px}
.plan .btn[data-jakso="vuosi"]{display:none}
.annual .plan .btn[data-jakso="kk"]{display:none}
.annual .plan .btn[data-jakso="vuosi"]{display:inline-flex}
.plan hr{border:0;border-top:1px solid var(--line);margin-bottom:24px}
.feat{list-style:none;display:flex;flex-direction:column;gap:14px;font-size:14.5px;color:#d4d4d0}
.feat li{display:flex;gap:12px;align-items:flex-start}
.feat svg{width:16px;height:16px;flex:none;margin-top:3px;color:var(--faint)}
.plan.hi .feat svg{color:var(--ink)}
.feat .plus{color:var(--muted)}
/* 30 päivän rahat takaisin -takuu pakettien alla (8.10.2026) */
.takuu{display:flex;align-items:center;gap:28px;max-width:760px;margin:40px auto 0;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:28px 32px}
.takuu-merkki{flex:none;display:flex;flex-direction:column;align-items:center;justify-content:center;width:88px;height:88px;border:1px solid var(--line-hi);border-radius:50%;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.takuu-merkki b{font-weight:500;font-size:32px;line-height:1;letter-spacing:-.03em;color:var(--ink);text-transform:none}
.takuu h3{font-weight:500;font-size:19px;letter-spacing:-.015em;margin-bottom:8px}
.takuu p{color:var(--soft);font-size:15px;max-width:58ch}
.takuu a{color:var(--muted);text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.takuu a:hover{color:var(--ink)}
@media (max-width:600px){.takuu{flex-direction:column;align-items:flex-start;gap:18px;padding:24px 20px}.takuu-merkki{width:72px;height:72px}.takuu-merkki b{font-size:26px}}
.pricing-note{margin-top:28px;text-align:center;color:var(--faint);font-size:13.5px;max-width:70ch;margin-left:auto;margin-right:auto}
.pricing-note a,.prose a{color:var(--muted);text-decoration:underline;text-underline-offset:3px}
.pricing-note a:hover,.prose a:hover{color:var(--ink)}
.faq{margin-top:72px;max-width:760px;margin-left:auto;margin-right:auto}
.faq h2{font-weight:500;font-size:22px;letter-spacing:-.02em;margin-bottom:8px}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 0;font-weight:500;font-size:16px}
.faq summary::-webkit-details-marker{display:none}
/* Plus muuttuu miinukseksi: pystyviiva kutistuu (background-size). Avautuminen ja sulkeutuminen js/sivusto.js:llä
   (korkeus + teksti nousee häivyttäen), sama käyrä kuin mobiilivalikossa. */
.faq summary::after{content:"";flex:none;width:14px;height:14px;color:var(--faint);
  background:linear-gradient(currentColor,currentColor) center/14px 1.5px no-repeat,linear-gradient(currentColor,currentColor) center/1.5px 14px no-repeat;
  transition:background-size .45s cubic-bezier(.76,0,.24,1),color .2s ease}
.faq details[data-auki] summary::after{background-size:14px 1.5px,1.5px 0;color:var(--soft)}
.faq-sisus{overflow:hidden}
.faq-sisus>*{transition:opacity .45s cubic-bezier(.2,.7,.2,1),transform .55s cubic-bezier(.2,.7,.2,1)}
.faq details:not([data-auki]) .faq-sisus>*{opacity:0;transform:translateY(8px)}
.faq details p{color:var(--soft);font-size:15px;padding:0 0 18px;max-width:62ch}

/* ---------- prosessi ---------- */
/* Prosessi: pystysuora aikajana, kuvan kanssa kaksi saraketta (Impeccable live 7.10.2026) */
.prosessi-runko{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:56px;align-items:center;text-align:left;margin-top:40px}
.prosessi-runko.ilman-kuvaa{grid-template-columns:minmax(0,640px);justify-content:center}
.jana{list-style:none;position:relative;display:grid;gap:12px}
.jana::before{content:"";position:absolute;left:19px;top:24px;bottom:24px;width:1px;background:var(--line-2)}
.jana li{position:relative;display:grid;grid-template-columns:40px minmax(0,1fr);gap:22px;padding:18px 0}
.step-icon{position:relative;z-index:1;width:40px;height:40px;border-radius:10px;background:#1a1a19;border:1px solid var(--line);display:grid;place-items:center}
.step-icon svg{width:18px;height:18px;stroke:var(--ink);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.jana h3{font-weight:500;font-size:19px;margin-bottom:4px;display:flex;gap:12px;align-items:baseline;flex-wrap:wrap}
.jana .dur{font:400 12px/1 var(--mono);color:var(--muted);letter-spacing:.04em}
.jana p{color:var(--soft);font-size:15.5px;max-width:52ch;margin-top:8px}
.prosessi-runko .kuvitus-nauha{margin:0;max-width:none}
.prosessi-runko .steps-cta{justify-content:flex-start;margin-top:28px;padding-left:62px}
.steps-cta{display:flex;margin-top:40px}
/* Etusivun prosessi ilman kuvaa: aikajana yhtenäisessä kortissa, varausnappi kortin alapalkissa (Impeccable live 7.10.2026, vaihtoehto 3) */
.prosessi-runko.ilman-kuvaa{grid-template-columns:minmax(0,720px)}
.prosessi-runko.ilman-kuvaa > div{background:var(--card);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.ilman-kuvaa .jana{gap:0;padding:12px 36px}
.ilman-kuvaa .jana::before{display:none}
.ilman-kuvaa .jana li:not(:last-child)::after{content:"";position:absolute;left:19px;top:68px;bottom:-28px;width:1px;background:var(--line-2)}
.ilman-kuvaa .jana li{padding:28px 0}
.ilman-kuvaa .jana li + li{border-top:1px solid var(--line)}
.prosessi-runko.ilman-kuvaa .steps-cta{margin:0;padding:24px 36px;border-top:1px solid var(--line);background:var(--card-2);justify-content:flex-start}
/* Valoviiva: kulkee vierityksen mukana vaiheesta toiseen, osio ei lukitu. JS asettaa --x, --alku, --pituus ja --p; ilman JS:ää jäävät staattiset yhdysviivat. */
.jana-kehys{position:relative}
.jana-rata{display:none;position:absolute;left:var(--x,0);top:var(--alku,0);height:var(--pituus,0);width:1px;background:var(--line-2);pointer-events:none}
.jana-valo{position:absolute;inset:0;transform-origin:top;transform:scaleY(var(--p,0));background:linear-gradient(to bottom,rgba(255,255,255,.12),rgba(255,255,255,.95));box-shadow:0 0 8px rgba(255,255,255,.45)}
.jana-rata::after{content:"";position:absolute;left:50%;top:calc(var(--p,0) * 100%);width:7px;height:7px;border-radius:50%;background:#fff;transform:translate(-50%,-50%);box-shadow:0 0 10px 2px rgba(255,255,255,.6),0 0 28px 6px rgba(255,255,255,.18);opacity:var(--paa,1)}
.valo-paalla .jana-rata{display:block}
.valo-paalla .jana::before,.valo-paalla .jana li::after{display:none}
.valo-paalla .step-icon{transition:border-color .5s ease,box-shadow .5s ease}
.valo-paalla .step-icon svg{stroke:var(--faint);transition:stroke .5s ease}
.valo-paalla .jana li.valaistu .step-icon{border-color:var(--line-hi);box-shadow:0 0 0 4px rgba(255,255,255,.04),0 0 18px rgba(255,255,255,.14)}
.valo-paalla .jana li.valaistu .step-icon svg{stroke:var(--ink)}
.timeline{margin-top:64px;border-top:1px solid var(--line)}
.timeline>div{display:grid;grid-template-columns:140px minmax(0,1fr);gap:24px;padding:24px 0;border-bottom:1px solid var(--line)}
.timeline>div>div{display:block}
.timeline b{font:400 12px/1.6 var(--mono);color:var(--muted);letter-spacing:.06em;text-transform:uppercase}
.timeline h3{font-weight:500;font-size:17px;margin-bottom:6px}
.timeline p{color:var(--soft);font-size:15px;max-width:62ch}

/* ---------- yhteystiedot ---------- */
.contact{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:28px;margin-top:56px;align-items:start}
.side{display:flex;flex-direction:column;gap:22px}
.card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:22px 24px}
.progress-head{display:flex;justify-content:space-between;font-size:14px;font-weight:500;margin-bottom:12px}
.progress-head span:last-child{font:400 12px/1.4 var(--mono);color:var(--muted)}
.bar{height:6px;border-radius:999px;background:#242422;overflow:hidden}
.bar i{display:block;height:100%;width:0;background:var(--ink);border-radius:999px;transition:width .25s ease}
.expect{padding:0 6px}
.expect h3{font-weight:500;font-size:14px;margin-bottom:14px}
.expect ul{list-style:none;display:flex;flex-direction:column;gap:12px;color:var(--soft);font-size:14.5px}
.expect li{display:flex;gap:12px;align-items:flex-start}
.expect svg{width:16px;height:16px;flex:none;margin-top:3px;color:var(--faint)}
.mail p{color:var(--muted);font-size:14px;margin-bottom:6px}
.mail a{font-weight:500;font-size:15px;display:inline-flex;align-items:center;gap:6px}
.mail a svg{width:14px;height:14px}
.mail a + p{margin-top:12px}
form.card{padding:28px}
.row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field{margin-bottom:22px}
.field label,.field .lbl{display:block;font-size:14px;font-weight:500;margin-bottom:8px}
.req::after{content:" *";color:var(--faint)}
.opt{color:var(--faint);font-weight:400;font-size:12px}
.input{width:100%;height:44px;padding:0 14px;border-radius:8px;background:#141413;border:1px solid var(--line);color:var(--ink);font:400 16px var(--sans);transition:border-color .18s ease}
.input::placeholder{color:var(--faint)}
.input:focus{outline:0;border-color:var(--line-hi)}
.input.bad,.group.bad{border-color:rgba(255,255,255,.45)}
textarea.input{height:120px;padding:12px 14px;resize:vertical;line-height:1.5}
.group{border:1px solid transparent;border-radius:10px;margin:-6px;padding:6px}
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.tiles label,.chips label{position:relative;cursor:pointer}
.tiles input,.chips input{position:absolute;opacity:0;width:0;height:0}
.tiles span{display:flex;align-items:center;gap:10px;height:46px;padding:0 14px;border-radius:8px;background:#141413;border:1px solid var(--line);font-size:14.5px;color:var(--muted);transition:border-color .18s ease,color .18s ease,background-color .18s ease}
.tiles span svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex:none}
.tiles input:checked + span{border-color:var(--ink);color:var(--ink);background:#1a1a19}
.tiles input:focus-visible + span,.chips input:focus-visible + span{outline:2px solid var(--line-hi);outline-offset:2px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips span{display:inline-flex;align-items:center;height:36px;padding:0 14px;border-radius:999px;background:#141413;border:1px solid var(--line);font-size:13.5px;color:var(--muted);transition:border-color .18s ease,color .18s ease,background-color .18s ease}
.chips input:checked + span{border-color:var(--ink);color:var(--ink);background:#1a1a19}
.turnstile{min-height:0;margin-bottom:10px}
.turnstile:empty{display:none}
.submit{width:100%;height:50px;font-size:15px;margin-top:6px}
.form-error{display:none;margin-top:14px;padding:12px 14px;border:1px solid var(--line-2);border-radius:8px;color:var(--ink);font-size:14px}
.form-error.show{display:block}
.consent{font-size:12.5px;color:var(--faint);margin-top:16px;line-height:1.5}
.consent a{color:var(--muted);text-decoration:underline;text-underline-offset:3px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.thanks{display:none;text-align:center;padding:40px 10px}
.thanks h3{font-weight:500;font-size:24px;letter-spacing:-.02em;margin-bottom:10px}
.thanks p{color:var(--muted)}
form.sent .form-body{display:none}
form.sent .thanks{display:block}

/* ---------- tietoa ---------- */
.prose{max-width:66ch;color:var(--soft);font-size:17px}
.prose p + p{margin-top:18px}
.prose strong{color:var(--ink);font-weight:500}
.values{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:40px}
.values .feature p{font-size:15px}

/* ---------- lakisivut ---------- */
.legal{display:grid;grid-template-columns:260px minmax(0,1fr);gap:48px;align-items:start}
.toc{position:sticky;top:24px;border:1px solid var(--line);border-radius:12px;background:var(--card);padding:18px 20px}
.toc b{display:block;font:400 11px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--faint);margin-bottom:12px}
.toc ol{list-style:none;display:flex;flex-direction:column;gap:2px;max-height:60vh;overflow:auto}
.toc a{display:block;padding:5px 0;font-size:13.5px;color:var(--muted);transition:color .15s ease}
.toc a:hover{color:var(--ink)}
.legal-body{max-width:72ch;font-size:16px;color:var(--soft)}
.legal-body h2{font-weight:500;font-size:22px;letter-spacing:-.02em;color:var(--ink);margin:44px 0 14px;scroll-margin-top:calc(var(--nav-h) + 20px)}
.legal-body h3{font-weight:500;font-size:17px;color:var(--ink);margin:28px 0 10px}
.legal-body p{margin:0 0 14px}
.legal-body strong{color:var(--ink);font-weight:500}
.legal-body ul,.legal-body ol{margin:0 0 16px 20px}
.legal-body li{margin:4px 0}
.legal-body a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.legal-body hr{border:0;border-top:1px solid var(--line);margin:40px 0}
.legal-meta{font:400 12.5px/1.6 var(--mono);color:var(--faint);letter-spacing:.02em;margin-bottom:28px;padding-bottom:20px;border-bottom:1px solid var(--line)}
.legal-table{overflow:auto;margin:0 0 18px;border:1px solid var(--line);border-radius:10px;background:var(--card)}
.legal-table table{width:100%;border-collapse:collapse;font-size:14px}
.legal-table th,.legal-table td{text-align:left;vertical-align:top;padding:12px 14px;border-bottom:1px solid var(--line)}
.legal-table th{color:var(--ink);font-weight:500;background:#131312}
.legal-table tr:last-child td{border-bottom:0}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--line);padding:80px 0 0;overflow:clip} /* sivu päättyy footeriin: ilmestymisanimaation siirtymä ei jatka vieritystä */
/* Iskulause johtaa footeria (Impeccable live 7.10.2026, vaihtoehto 1) */
.foot-paa{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;flex-wrap:wrap;padding-bottom:56px;margin-bottom:56px;border-bottom:1px solid var(--line)}
.foot-iskulause{font-weight:500;font-size:48px;line-height:1.02;letter-spacing:-.035em;max-width:14ch;text-wrap:balance}
.foot-paa .btn{height:48px;padding:0 22px;border-radius:0;font-weight:600;gap:10px}
.foot-paa .btn svg{width:15px;height:15px}
.foot-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,3fr);gap:48px}
.foot-merkki img{height:40px;width:auto}
.foot-logo p{color:var(--muted);font-size:14.5px;max-width:34ch;margin-top:16px}
.foot-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.foot-cols span{display:block;font-weight:500;font-size:14.5px;margin-bottom:16px}
.foot-cols a{display:block;color:var(--muted);font-size:14.5px;padding:5px 0;transition:color .15s ease}
.foot-cols a:hover{color:var(--ink)}
.foot-bar{margin-top:56px;padding:24px 0 28px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 24px;font-size:13.5px;color:var(--faint)}
.foot-bar a{color:var(--muted)}
.foot-bar .ylos{color:var(--soft);transition:color .2s ease}
.foot-bar .ylos:hover{color:var(--ink)}
.nav .brand:focus-visible,.foot-bar .ylos:focus-visible{outline:2px solid var(--line-hi);outline-offset:4px}
.foot-bar a:hover{color:var(--ink)}

/* ---------- responsiivisuus ---------- */
@media (max-width:1100px){.nav .menu a{padding:0 14px}.nav .menu a::after{left:14px;right:14px}}
@media (max-width:960px){
  .plans{grid-template-columns:1fr;max-width:520px;margin:0 auto}
  .plan-desc{min-height:0}
  .prosessi-runko{grid-template-columns:1fr;gap:16px}
  .prosessi-runko .kuvitus-nauha{order:-1}
  .prosessi-runko .steps-cta{padding-left:0}
  .contact{grid-template-columns:1fr}
  .side{order:2}
  .foot-grid{grid-template-columns:1fr;gap:40px}
  .features,.values,.stats{grid-template-columns:1fr}
  .stats{grid-template-columns:repeat(3,1fr)}
  .legal{grid-template-columns:minmax(0,1fr);gap:28px}
  .toc{position:static}
  .toc ol{max-height:none}
}
@media (max-width:900px){
  .menu{display:none}
  .nav{left:12px;right:12px}
  .menu-toggle{display:inline-flex;align-items:center}
  .hero{grid-template-columns:1fr;padding-top:calc(var(--nav-h) + 24px)}
  .hero-text{padding:24px 0 48px;max-width:600px}
  .hero-figure{min-height:0;height:min(72vh,720px)}
  .hero-figure img{right:0;height:100%}
  .section{padding:88px 0}
  .page-head{padding:calc(var(--nav-h) + 56px) 0 48px}
  .services-list a{grid-template-columns:48px 1fr 24px;gap:6px 16px}
  .services-list p{grid-column:2}
  .services-list .arrow{grid-row:1;grid-column:3}
  .timeline>div{grid-template-columns:1fr;gap:8px}
}
@media (max-width:600px){
  .ilman-kuvaa .jana{padding:4px 20px}
  .prosessi-runko.ilman-kuvaa .steps-cta{padding:20px}
  .prosessi-runko.ilman-kuvaa .steps-cta .btn{width:100%}
  .row{grid-template-columns:1fr}
  .foot-cols{grid-template-columns:1fr 1fr}
  .foot-cols>:first-child{grid-row:span 2} /* Lakiasiat Yrityksen alle, footer puolet lyhyempi (10.10.2026) */
  .foot-iskulause{font-size:34px}
  .stats{grid-template-columns:1fr}
}
@media (max-width:520px){
  .price .amt{font-size:52px}
  .nav .btn-nav{margin-left:0}
  .menu-toggle{padding:0 12px}
  .lead{font-size:17px}
  .actions .btn{width:100%}
  .hero-figure{height:min(64vh,560px)}
  .hero-figure img{right:-6%}
  .tiles{grid-template-columns:1fr}
  form.card{padding:22px 18px}
  .section{padding:72px 0}
}

/* ---------- malliversio: monoliittitausta ---------- */
.bg-mono{position:fixed;inset:0;z-index:-1;pointer-events:none;background:#0a0a0a}
.bg-mono canvas{position:absolute;inset:0;width:100%;height:100%}
.malli-banner{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);z-index:40;background:var(--ink);color:#0a0a0a;font:500 12.5px/1 var(--sans);padding:10px 14px;border-radius:999px;display:flex;gap:12px;align-items:center;white-space:nowrap}
.malli-banner a{text-decoration:underline;text-underline-offset:3px}

/* ---------- vieritysanimaatiot (js/sivusto.js lisää .ilmesty vain näkymän alapuolella oleville) ---------- */
.ilmesty{opacity:0;transform:translate3d(var(--ilm-x,0),var(--ilm-y,20px),0);transition:opacity .7s cubic-bezier(.22,1,.36,1) var(--viive,0s),transform .7s cubic-bezier(.22,1,.36,1) var(--viive,0s)}
.ilmesty.nakyy{opacity:1;transform:none}
.osio-paa > .kuvitus.ilmesty{--ilm-x:56px;--ilm-y:0}

/* ---------- footerin jälkeinen paljastus: sisältö liukuu ylös, alta paljastuu kiinteä paneeli (malli plinthai.xyz) ---------- */
main{position:relative;z-index:1;background:var(--bg) var(--rae-kuva) 0 0/180px 180px}

/* ---------- ruudukkotausta (malli chaseai.io, 7.10.2026; liike 8.10.2026): 40 px viivaruudukko läpinäkymättömien kerrosten sisällä.
   js/sivusto.js lisää main-, osio- ja footer-kerroksiin .ruutu-elementin: kiinteä näkymään, joten sisältö vierii yli, ja kerroksen
   clip-path rajaa sen omalle alueelleen. Liuku oikealle alas: kaksi terävää ruudukkoa (i) näyttöpikselin välein, joiden
   läpinäkymättömyydet js/sivusto.js laskee lineaarisessa valossa. Näin viiva liikkuu sulavasti eikä väreile (selaimen oma
   alipikselisiirto sekoittaa sRGB:ssä ja himmentää viivaa pikselien välissä). Hiiren hohto (.ruutu-hohto) on paikallaan
   pysyvä maski, jonka alla kirkkaampi ruudukko liukuu samassa tahdissa. --hx/--hy = hiiri näkymässä. ---------- */
main,.hero-siirto ~ *,footer{clip-path:inset(0)}
.ruutu,.ruutu-hohto{position:fixed;inset:0;z-index:-1;pointer-events:none}
.ruutu-hohto{position:absolute;z-index:auto;display:none;
  -webkit-mask-image:radial-gradient(200px circle at var(--hx,-9999px) var(--hy,-9999px),#000,transparent);
  mask-image:radial-gradient(200px circle at var(--hx,-9999px) var(--hy,-9999px),#000,transparent)}
@media (hover:hover) and (pointer:fine){.ruutu-hohto{display:block}}
.ruutu.piilossa{display:none}
.ruutu i{position:absolute;left:-40px;top:-40px;right:0;bottom:0;will-change:transform,opacity;
  background-image:linear-gradient(to right,var(--ruutu-viiva) var(--ruutu-lw,1px),transparent var(--ruutu-lw,1px)),
    linear-gradient(to bottom,var(--ruutu-viiva) var(--ruutu-lw,1px),transparent var(--ruutu-lw,1px));
  background-size:40px 40px;--ruutu-viiva:rgba(255,255,255,.012)} /* perus himmennetty 8.10.2026 .022 → .012 */
.ruutu i+i{opacity:0}
.ruutu-hohto i{--ruutu-viiva:rgba(255,255,255,.22)}
/* Kosketuslaitteilla liuku on pelkkä CSS-animaatio (näytönohjain, ei JS:ää joka ruudussa), koska JS-liuku puolitti
   Androidin vierityksen ruudunpäivityksen. Viiva on puhelimella niin himmeä, ettei alipikselisiirron väreilyä erota. */
@media (hover:none),(pointer:coarse){
  .ruutu i:first-child{animation:ruutu-liuku 5.714s linear infinite}
  .ruutu-hohto{display:none!important}
  @keyframes ruutu-liuku{from{transform:translate3d(0,0,0)}to{transform:translate3d(40px,40px,0)}}
}

/* ---------- marmorikuvitus (kuvat/kuvitus/) ---------- */
.osio-paa{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,340px);gap:48px;align-items:end}
.kuvitus{margin:0;pointer-events:none;user-select:none}
.kuvitus img{width:100%;height:auto}
/* Pystykuva: häivytys alas ja vasemmalle, ulottuu osion yläpaddingiin. */
.kuvitus-pysty{margin-top:-120px}
.kuvitus-pysty img{-webkit-mask-image:linear-gradient(to bottom,transparent,#000 14%,#000 60%,transparent 97%),linear-gradient(to right,transparent,#000 26%,#000 88%,transparent);-webkit-mask-composite:source-in;mask-image:linear-gradient(to bottom,transparent,#000 14%,#000 60%,transparent 97%),linear-gradient(to right,transparent,#000 26%,#000 88%,transparent);mask-composite:intersect}
/* Neliökuva: pehmeä pyöreä häivytys reunoille. */
.kuvitus-nelio img{-webkit-mask-image:radial-gradient(closest-side,#000 68%,transparent);mask-image:radial-gradient(closest-side,#000 68%,transparent)}
/* Nauha: leveä kuva otsikon ja korttien välissä. */
.kuvitus-nauha{max-width:980px;margin:24px auto -40px}
.kuvitus-nauha img{-webkit-mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 55%,transparent);mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 55%,transparent)}
.page-head-kuva .osio-paa{align-items:center}
.page-head-kuva .kuvitus-pysty{margin-top:-60px}
@media (max-width:900px){
  .osio-paa{grid-template-columns:1fr;gap:8px}
  .kuvitus-pysty,.page-head-kuva .kuvitus-pysty{margin:8px 0 0 auto;width:62%;max-width:300px}
  .kuvitus-nelio{width:64%;max-width:300px;margin:8px auto 0}
  .kuvitus-nauha{margin:16px -12% -24px}
}

/* ---------- malliversio: rasteritaustan säätöpaneeli (/malli-rasteri/) ---------- */
.rasteri-vertailu{position:absolute;inset:0;display:none;background:#0a0a0a url("/originals/hienojakoinen-harmaa-musta-tausta.png") center/cover no-repeat}
.rasteri-vertailu::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,var(--tv,.58)),rgba(0,0,0,var(--to,.12)))}
.nayta-vertailu .rasteri-vertailu{display:block}
.saato{position:fixed;top:calc(var(--nav-h) + 8px);right:14px;z-index:45;width:300px;max-height:calc(100vh - var(--nav-h) - 80px);overflow:auto;background:var(--card);border:1px solid var(--line-2);border-radius:var(--radius);font-size:13px;color:var(--soft)}
.saato-otsikko{display:block;width:100%;text-align:left;padding:12px 14px;font:500 13.5px/1 var(--sans);color:var(--ink);position:sticky;top:0;background:var(--card);border-bottom:1px solid var(--line)}
.saato.kiinni .saato-runko{display:none}
.saato.kiinni .saato-otsikko{border-bottom:0}
.saato-runko{padding:6px 14px 14px}
.saato-rivi{display:grid;grid-template-columns:1fr auto;gap:2px 8px;padding:7px 0}
.saato-rivi output{font:12px/1.4 var(--mono);color:var(--muted);font-variant-numeric:tabular-nums}
.saato-rivi input{grid-column:1/-1;width:100%;accent-color:var(--ink)}
.saato-valinta{display:flex;gap:8px;align-items:center;padding:10px 0 4px;color:var(--ink)}
.saato-napit{display:flex;gap:8px;margin-top:10px}
.saato-napit .btn{height:36px;padding:0 12px;font-size:13px;flex:1}
.saato-tila{margin-top:8px;color:var(--muted);font-size:12px;min-height:1em}
@media (max-width:600px){.saato{left:14px;right:14px;width:auto;top:auto;bottom:62px;max-height:55vh}}

/* ---------- etusivun palveluesittely (palvelut_esittely, malli stonesystems.io): rivi per palvelu, puhelin vuorotellen ---------- */
/* Heron ja palveluiden raja (8.10.2026): ei viivaa eikä kovaa reunaa; osion yläosa häivytetään, joten hero ja sen
   rasteri sulautuvat mustaan osion liukuessa päälle. Pehmeä alue on yläpehmusteen sisällä, sisältö alkaa sen jälkeen. */
.hero-siirto ~ .esittely{padding-top:240px;
  -webkit-mask-image:linear-gradient(to bottom,transparent,rgba(0,0,0,.35) 90px,rgba(0,0,0,.8) 160px,#000 220px);
  mask-image:linear-gradient(to bottom,transparent,rgba(0,0,0,.35) 90px,rgba(0,0,0,.8) 160px,#000 220px)}
.esittely-pehmea{display:none}
/* Mobiilissa koko palveluosion (videot mukana) maskaus pakotti puhelimen koostamaan sen joka ruudussa erillisenä pintana
   heron päällä, ja vieritys herosta alas nyki (10.10.2026). Pehmeä raja on siksi oma 160 px:n kaistansa (.esittely-pehmea,
   pieni maskattu kerros, jossa myös sen ruudukko häipyy), ja itse osio on läpinäkymätön ilman maskia. */
@media (max-width:900px){
  .esittely-pehmea{display:block;height:160px;
    -webkit-mask-image:linear-gradient(to bottom,transparent,rgba(0,0,0,.4) 60px,#000 160px);mask-image:linear-gradient(to bottom,transparent,rgba(0,0,0,.4) 60px,#000 160px)}
  .hero-siirto ~ .esittely{padding-top:20px;-webkit-mask-image:none;mask-image:none}
}
.esittely-rivit{margin-top:72px}
.esittely-rivi{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:clamp(48px,9vw,140px);align-items:center;padding:72px 0;border-top:1px solid var(--line)}
.esittely-rivi.kaanteinen{grid-template-columns:300px minmax(0,1fr)}
.esittely-rivi.kaanteinen .esittely-teksti{order:2}
.esittely-teksti>.num{font:400 12px/1 var(--mono);letter-spacing:.08em;color:var(--faint)}
.esittely-teksti h3{font-weight:500;font-size:clamp(28px,3vw,40px);line-height:1.1;letter-spacing:-.025em;margin:14px 0 14px}
.esittely-lyhyt{color:var(--soft);font-size:17px;max-width:46ch;margin-bottom:32px}
.esittely-linkki{display:inline-flex;align-items:center;gap:8px;margin-top:28px;font-size:15px;color:var(--ink);border-bottom:1px solid var(--line-2);padding-bottom:4px}
.esittely-linkki svg{width:14px;height:14px}
.esittely-linkki:hover{border-color:var(--ink)}
.esittely-myos{margin-top:8px;padding-top:32px;border-top:1px solid var(--line);color:var(--muted);font-size:15px}
.esittely-myos a{color:var(--ink);border-bottom:1px solid var(--line-2)}
/* Kiemurteleva valoviiva (testi): katkoviiva tekstin ja puhelimen välissä, valo täyttää sen vierityksen mukana ja näkymä on lukittu valon päähän (kaarteissa sivu pysähtyy); mobiilissa suora viiva vasemmassa reunassa. */
.pv-sisus{position:relative}
.viiva-lukittu .pv-sisus{will-change:transform}
.palvelu-viiva{display:none;position:absolute;left:0;top:0;overflow:visible;pointer-events:none}
.viiva-paalla .palvelu-viiva{display:block}
.pv-pohja{fill:none;stroke:var(--line-2);stroke-width:1;stroke-dasharray:2 6;stroke-linecap:round}
.pv-valo{fill:none;stroke:rgba(255,255,255,.75);stroke-width:1.25;stroke-linecap:round;filter:drop-shadow(0 0 3px rgba(255,255,255,.6))}
.pv-paa{fill:#fff;filter:drop-shadow(0 0 5px rgba(255,255,255,.9)) drop-shadow(0 0 14px rgba(255,255,255,.35))}
.pv-solmu{fill:var(--bg);stroke:var(--line-hi);stroke-width:1;transition:fill .5s ease,stroke .5s ease}
.pv-solmu.valaistu{fill:#fff;stroke:#fff;filter:drop-shadow(0 0 6px rgba(255,255,255,.7))}
.viiva-paalla .esittely-teksti>.num{transition:color .5s ease}
.viiva-paalla .esittely-rivi.valaistu .esittely-teksti>.num{color:var(--ink)}
/* Rivien ilmestyminen sidottu vieritykseen (view timeline): etenee täsmälleen vierityksen tahdissa myös nopeasti vieritettäessä.
   Selaimissa ilman tukea rivit näkyvät suoraan. */
@keyframes esittely-nousu{from{opacity:0;transform:translate3d(0,48px,0)}to{opacity:1;transform:none}}
@supports (animation-timeline:view()){@media all{
  .esittely-teksti>*,.esittely-rivi>.puhelin{animation:esittely-nousu linear both;animation-timeline:view();animation-range:entry 0% cover 22%}
}}
.demo-vaiheet{list-style:none;border-left:1px solid var(--line-2)}
.demo-vaiheet li{position:relative;display:grid;grid-template-columns:44px minmax(0,1fr);padding:12px 0 12px 24px;color:var(--faint);transition:color .4s ease}
.demo-vaiheet li.on{color:var(--ink)}
.demo-palkki{position:absolute;left:-1px;top:0;bottom:0;width:1px;overflow:hidden}
.demo-palkki i{display:block;width:100%;height:100%;background:var(--ink);transform:scaleY(var(--p,0));transform-origin:top}
.demo-vaiheet .num{font:400 12px/1 var(--mono);letter-spacing:.08em;padding-top:5px}
.demo-vaiheet h4{font-weight:500;font-size:17px;letter-spacing:-.015em;line-height:1.3}
.demo-vaiheet p{font-size:15px;line-height:1.5;color:var(--soft);margin-top:2px;opacity:.5;transition:opacity .4s ease}
.demo-vaiheet li.on p{opacity:1}
.puhelin-tyhja .puhelin-naytto{background:#141413;display:flex;align-items:center;justify-content:center}
.puhelin-tyhja span{font:400 12px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
/* puhelimen runko CSS:llä (mittasuhteet kuten animaation RK_PHONE 430x900, reunus 14, kulma 66); video = näyttö */
.puhelin{margin:0;width:100%;max-width:300px;aspect-ratio:430/900;padding:3.26%;border-radius:15.35%/7.33%;position:relative;
  background:linear-gradient(135deg,#3a3a38,#1c1c1b 35%,#151514 70%,#2e2e2c);
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.22),inset 0 0 0 5px #050505,0 40px 90px rgba(0,0,0,.75)}
.puhelin-naytto{width:100%;height:100%;border-radius:12.94%/5.96%;overflow:hidden;background:#f4f4f2;position:relative}
.puhelin-naytto video{display:block;width:100%;height:100%;object-fit:cover}
.puhelin-naytto::after{content:"";position:absolute;left:50%;top:1.6%;width:30.85%;height:4.13%;transform:translateX(-50%);border-radius:999px;background:#050505}
@media (max-width:900px){.esittely-rivi,.esittely-rivi.kaanteinen{grid-template-columns:minmax(0,1fr) 240px;gap:40px}.esittely-rivi.kaanteinen{grid-template-columns:240px minmax(0,1fr)}}
@media (max-width:760px){
  .esittely-rivit{margin-top:40px}
  .esittely-rivi,.esittely-rivi.kaanteinen{grid-template-columns:minmax(0,1fr) 40%;gap:0 20px;align-items:start;padding:48px 0}
  .esittely-teksti{display:contents}
  .esittely-rivi.kaanteinen .esittely-teksti{order:0}
  .esittely-teksti>.num,.esittely-teksti h3,.esittely-lyhyt,.esittely-linkki{grid-column:1/-1}
  .esittely-lyhyt{margin-bottom:24px;font-size:16px}
  .esittely-teksti .demo-vaiheet{grid-column:1;grid-row:4}
  .esittely-rivi .puhelin{grid-column:2;grid-row:4;max-width:none}
  .esittely-linkki{grid-row:5;justify-self:start}
  .demo-vaiheet li{grid-template-columns:1fr;padding:9px 0 9px 14px}
  .demo-vaiheet .num{padding:0 0 5px}
  .demo-vaiheet h4{font-size:15px}
  .demo-vaiheet p{font-size:13.5px}
}

/* ---------- palveluvideo (kuvat/video/, mykkä silmukka) ---------- */
.palveluvideo-osio{padding:0 0 96px}
.palveluvideo{margin:0;border-radius:12px;overflow:hidden;border:1px solid var(--line, rgba(255,255,255,.10));background:#0a0a0a;aspect-ratio:16/9}
.palveluvideo video{display:block;width:100%;height:100%;object-fit:cover}
@media (max-width:760px){.palveluvideo-osio{padding:0 0 64px}.palveluvideo{border-radius:8px;aspect-ratio:4/5}}

/* teksti optisesti keskelle painikkeissa ja tageissa (Chrome/Safari; muut selaimet ennallaan) */
@supports (text-box:trim-both cap alphabetic){
  .btn,.tag{text-box:trim-both cap alphabetic}
  .tag{padding:6px 9px 5px}
}

/* ---------- mobiili: kosketusalueet ja pienet tekstit (9.10.2026, Android-emulaattoritesti). Vain kosketuslaitteille / kapeille näytöille. ---------- */
@media (pointer:coarse){
  .brand{padding:8px;margin:-8px;box-sizing:content-box}
  .foot-cols a{padding:9px 0}
  .foot-bar .ylos{display:inline-block;padding:11px 0;margin:-11px 0}
  .esittely-linkki{padding-top:10px;margin-top:18px}
  .more a,a.takaisin{height:44px}
  .esittely-myos a{display:inline-block;padding:10px 0}
}
@media (max-width:600px){
  .tag{font-size:11px}
}