/* Norbert by LS: yhteinen tyyli kaikille sivuille (vaalea toimituksellinen ilme, 2026-09-30) */
:root{
  --musta:#0a0a0a; --turkoosi:#17cdce; --lime:#ccff5e; --valkoinen:#fff;
  --tausta:#fafaf8; --harmaa:#f1f1f1; --harmaa-teksti:#6b6b6b; --viiva:#e2e2e2;
  --display:'Fraunces',Georgia,serif; --leipa:'Inter',system-ui,sans-serif; --mono:'JetBrains Mono',monospace;
  --pad:24px;
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--tausta);color:var(--musta);font-family:var(--leipa);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
.page{max-width:1320px;margin:0 auto;border-left:1px solid var(--viiva);border-right:1px solid var(--viiva);position:relative}

/* näkyvä neljän sarakkeen ruudukko */
.g4{display:grid;grid-template-columns:repeat(4,1fr);position:relative}
.g4>*{padding:var(--pad)}
.rivi{border-bottom:1px solid var(--viiva)}
.mono{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--harmaa-teksti);line-height:1.5}

/* painikkeet */
.btn{display:inline-flex;align-items:center;gap:10px;background:var(--musta);color:#fff;padding:12px 18px;font-size:13px;font-weight:500;white-space:nowrap}
.btn .ar{color:var(--lime);transition:transform .18s}
/* hover: limenvärinen kehys liukuu napin takaa esiin (vanhan sivun tunnusmerkki).
   Tehty kahdella varjolla: taustan värinen varjo peittää limevarjon sisäosan, joten jäljelle jää ohut kehys napin takana. */
.btn{position:relative;transition:transform .15s,box-shadow .18s;box-shadow:0 0 0 -1.5px var(--tausta),0 0 0 0 var(--lime)}
.btn:hover{transform:translateY(-2px);box-shadow:6px 6px 0 -1.5px var(--tausta),6px 6px 0 0 var(--lime)}
.btn:hover .ar{transform:translateX(4px)}
@media (prefers-reduced-motion:reduce){.btn,.btn .ar{transition:none}}
.link{font-size:13px;border-bottom:1px solid var(--musta);padding:12px 0 2px}

/* pystyviivat ovat solujen reunoja (JH-malli): viiva piirtyy vain solujen väliin, ei usean sarakkeen levyisen solun läpi */
.g4>*:not(:last-child),.hero .meta>div:not(:last-child),.hero-low>*:not(:last-child),.nrivi>*:not(:last-child){border-right:1px solid var(--viiva)}
.loppu>*{border-right:0!important}

/* valikko */
.site-header{position:sticky;top:0;z-index:20;background:rgba(250,250,248,.94);backdrop-filter:blur(6px);display:grid;grid-template-columns:repeat(4,1fr);border-bottom:1px solid var(--viiva);font-size:13px}
.site-header>*{padding:18px var(--pad)}
/* logo (Laura, 2026-09-30): JetBrains Mono, turkoosi pallo vaalealla kehällä, "·by LS" harmaalla */
.logo{font-family:var(--mono);font-size:16px;font-weight:500;letter-spacing:-0.02em;display:flex;align-items:center;gap:9px}
.logo .dot{width:10px;height:10px;border-radius:50%;background:var(--turkoosi);box-shadow:0 0 0 5px rgba(23,205,206,.2);margin:0 5px}
.logo small{font-family:var(--mono);font-size:16px;font-weight:500;letter-spacing:-0.02em;color:var(--harmaa-teksti)}
.logo small::before{content:"·"}
.nav{grid-column:span 2;display:flex;gap:28px;align-items:center}
.nav a[aria-current="page"]{border-bottom:1px solid var(--musta)}
.nav-cta{justify-self:end;display:flex;align-items:center;gap:14px}
/* .dd ulottuu headerin alareunaan asti, joten hiiri pysyy sen päällä matkalla valikkoon */
.dd{position:relative;padding:18px 0;margin:-18px 0}
.dd-trigger{background:none;border:0;font:inherit;cursor:pointer;display:flex;gap:6px;align-items:center;color:inherit}
.dd-trigger .car{font-size:10px;transition:transform .2s}
.dd-menu{position:absolute;top:100%;left:-18px;min-width:330px;background:#fff;border:1px solid var(--viiva);padding:8px 0;display:none}
/* näkymätön silta sanan ja valikon välissä, ettei valikko sulkeudu hiiren siirtyessä */
.dd-menu::before{content:"";position:absolute;left:0;right:0;top:-16px;height:16px}
.dd:hover .dd-menu,.dd:focus-within .dd-menu,.dd.open .dd-menu{display:block}
.dd:hover .car,.dd.open .car{transform:rotate(180deg)}
.dd-menu a{display:grid;grid-template-columns:34px 1fr;padding:11px 18px;line-height:1.35}
.dd-menu a:hover{background:var(--tausta)}
.dd-menu a span:first-child{font-family:var(--mono);font-size:11px;color:var(--harmaa-teksti);padding-top:2px}
.nav-toggle{display:none;background:none;border:0;cursor:pointer;width:28px;height:20px;position:relative}
.nav-toggle span{position:absolute;left:0;right:0;height:1.5px;background:var(--musta)}
.nav-toggle span:nth-child(1){top:2px}.nav-toggle span:nth-child(2){top:9px}.nav-toggle span:nth-child(3){top:16px}

/* etusivun otsikko */
.hero{position:relative;padding:56px var(--pad) 0;border-bottom:1px solid var(--viiva)}
.hero .meta{display:grid;grid-template-columns:repeat(4,1fr);margin:0 calc(-1*var(--pad)) 36px}
.hero .meta div{padding:0 var(--pad)}
h1.iso{font-family:var(--display);font-weight:300;font-size:clamp(52px,8.4vw,124px);line-height:.98;letter-spacing:-.035em;position:relative;z-index:1}
h1.iso .row{display:grid;grid-template-columns:repeat(4,1fr)}
h1.iso .r1 span{grid-column:1/5;white-space:nowrap}
h1.iso .r2 span:first-child{grid-column:1/2;font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--harmaa-teksti);line-height:1.5;align-self:center;padding-right:var(--pad);font-weight:400}
h1.iso .r2 span:last-child{grid-column:2/5;white-space:nowrap}
em.kyna{font-style:italic;font-weight:300;background:linear-gradient(transparent 62%,var(--lime) 62%,var(--lime) 90%,transparent 90%)}
.hero-low{display:grid;grid-template-columns:repeat(4,1fr);margin:48px calc(-1*var(--pad)) 0;border-top:1px solid var(--viiva)}
.hero-low>*{padding:28px var(--pad) 36px}
.lead{grid-column:1/4;font-size:18px;line-height:1.55}
.hero-low .act{grid-column:4/5;display:flex;align-items:flex-start;gap:20px;justify-content:flex-end}

/* alasivun otsikko */
.sivu-hero{position:relative;border-bottom:1px solid var(--viiva)}
.sivu-hero .meta{padding-top:48px}
.sivu-hero h1{grid-column:1/5;font-family:var(--display);font-weight:300;font-size:clamp(44px,6.6vw,96px);line-height:1;letter-spacing:-.03em;padding-top:8px;padding-bottom:40px}
.sivu-hero h1 .sisennys{display:block;padding-left:25%}
.lupaus-rivi{border-top:1px solid var(--viiva)}
.lupaus-rivi .lupaus{grid-column:2/4;font-family:var(--display);font-size:26px;line-height:1.3;font-weight:400;padding-top:32px;padding-bottom:36px}
.lupaus-rivi .act{grid-column:4/5;display:flex;align-items:flex-start;justify-content:flex-end;padding-top:32px}

/* alasivun kaksisävyinen otsikko (JH-malli): sanat levittyvät rivin leveydelle */
.kaksisavy{grid-column:1/3;padding-top:28px;padding-bottom:40px}
.kaksisavy h1{font-family:var(--display);font-weight:300;font-size:clamp(36px,4.2vw,62px);line-height:1.02;letter-spacing:-.03em}
.kaksisavy h1>span{display:flex;flex-wrap:wrap;gap:0 .25em}
.kaksisavy h1 .h{color:#9a9a9a}
.esittely{grid-column:3/5;padding-top:34px;padding-bottom:40px;display:flex;flex-direction:column;gap:18px}
.esittely .lupaus{font-size:15px;line-height:1.5;font-weight:600;max-width:30em}
.esittely p{font-size:13.5px;line-height:1.6;color:#333;max-width:30em}

/* vaiheet 2×2, ääriviivanumerot (JH-malli) */
.ruudut{display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid var(--viiva)}
.ruutu{display:grid;grid-template-columns:25% 1fr 1fr;align-items:end;min-height:230px;border-top:1px solid var(--viiva);position:relative}
.ruutu:nth-child(odd){border-right:1px solid var(--viiva)}
.ruutu>*{padding:28px var(--pad)}
.ruutu .ovnum{font-family:var(--leipa);font-weight:500;font-size:56px;letter-spacing:-.04em;line-height:.8;color:transparent;-webkit-text-stroke:1px #9a9a9a;text-align:right}
.ruutu h3{font-family:var(--leipa);font-weight:500;font-size:22px;line-height:1.1;letter-spacing:-.02em;margin-bottom:12px}
.ruutu .teksti{grid-column:2/4}
.ruutu .teksti p{font-size:13.5px;line-height:1.55;color:#333;max-width:28em}
.ruutu .saat{margin-top:12px;font-size:13px;line-height:1.5}
.ruutu .saat b{font-family:var(--mono);font-size:10.5px;font-weight:400;letter-spacing:.06em;text-transform:uppercase;color:var(--harmaa-teksti);margin-right:6px}
.ruutu .aika{margin:0 0 10px}

/* osio: otsikko vasemmalla, sisältö oikealla */
.osio{border-bottom:1px solid var(--viiva)}
/* osion otsikko solun alareunaan, kuten taulukoiden solut */
.osio-otsikko{grid-column:1/2;padding-top:40px;padding-bottom:40px;display:flex;flex-direction:column;justify-content:flex-end}
.osio-otsikko>*{align-self:flex-start}
.osio-otsikko h2{font-family:var(--display);font-weight:300;font-size:34px;line-height:1.08;letter-spacing:-.02em;margin-top:14px}
.osio-sisalto{grid-column:2/5;padding-top:40px;padding-bottom:40px}
.iso-teksti{font-family:var(--display);font-weight:300;font-size:clamp(24px,2.6vw,36px);line-height:1.25;letter-spacing:-.01em;max-width:26em}
.iso-teksti em{font-style:italic}

/* numeroidut rivit (lohkot, vaiheet) */
.nrivi{display:grid;grid-template-columns:repeat(4,1fr);border-bottom:1px solid var(--viiva);transition:background .2s;position:relative}
a.nrivi:hover{background:#fff}
.nrivi>*{padding:34px var(--pad)}
.num{font-family:var(--display);font-weight:300;font-size:64px;line-height:.8;color:#cfcfcf}
a.nrivi:hover .num,.nrivi.aktiivinen .num{color:var(--turkoosi)}
.nrivi h3{font-family:var(--display);font-weight:400;font-size:28px;line-height:1.1;letter-spacing:-.015em}
.nrivi .lupaus{font-size:15px;line-height:1.55;font-weight:500}
.nrivi .kuvaus{font-size:14px;line-height:1.6;color:#444}
.nrivi .kuvaus b{display:block;margin-top:14px;font-family:var(--mono);font-size:11px;font-weight:400;letter-spacing:.06em;text-transform:uppercase;color:var(--musta)}
.aika{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;margin-top:12px;color:var(--harmaa-teksti)}

/* merkintä avoimelle kohdalle luonnoksessa: näkyy selvästi, ettei päädy julki huomaamatta */
.auki{display:inline-block;font-family:var(--mono);font-size:11px;letter-spacing:.04em;text-transform:none;color:#8a5a00;background:#fff4d6;border:1px dashed #d9a300;padding:2px 6px}

/* tuotos-kehys (esimerkkiraportti tai demo) */
.tuotos{border:1px solid var(--musta);background:#fff;position:relative}
.tuotos-palkki{display:flex;justify-content:space-between;border-bottom:1px solid var(--musta);padding:10px 16px}
.tuotos-sisalto{padding:28px;display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--viiva)}
.tuotos-sisalto>div{background:#fff;padding:20px}
.tuotos-sisalto .luku{font-family:var(--display);font-size:44px;font-weight:300;letter-spacing:-.02em;margin:8px 0 6px}
.tuotos-sisalto p{font-size:13px;line-height:1.5;color:#444}

/* taulukko (kuten JH:n "track record") */
.taulu{width:100%;border-collapse:collapse;font-size:14px}
.taulu th{font-family:var(--mono);font-size:11px;font-weight:400;letter-spacing:.06em;text-transform:uppercase;color:var(--harmaa-teksti);text-align:left;padding:0 16px 12px 0;border-bottom:1px solid var(--musta)}
.taulu td{padding:16px 16px 16px 0;border-bottom:1px solid var(--viiva);vertical-align:top;line-height:1.5}
.taulu td:first-child{font-weight:500;width:28%}

/* sopii / ei sovi */
.kaksi{display:grid;grid-template-columns:1fr 1fr;gap:0}
.kaksi>div{padding-right:32px}
.kaksi>div+div{border-left:1px solid var(--viiva);padding-left:32px}
.lista{list-style:none;margin-top:18px}
.lista li{padding:12px 0 12px 26px;border-bottom:1px solid var(--viiva);position:relative;font-size:15px;line-height:1.5}
.lista li::before{content:"";position:absolute;left:0;top:19px;width:9px;height:9px;border-radius:50%;border:1px solid var(--musta)}
.lista.kylla li::before{background:var(--turkoosi);border-color:var(--turkoosi)}

/* hinnasto (JH-malli): neljä solua kahdella rivillä, tuplaseinämät, sisältö solun alareunassa */
.hinnasto{display:grid;grid-template-columns:repeat(4,1fr)}
.hinnasto>div{position:relative;min-height:170px;padding:28px var(--pad) 26px calc(var(--pad) + 16px);display:flex;flex-direction:column;justify-content:flex-end}
.hinnasto>div:not(.h-otsikko){border-left:1px solid var(--viiva)}
.hinnasto>div:not(.h-otsikko)::before{content:"";position:absolute;top:0;bottom:0;left:16px;border-left:1px solid var(--viiva)}
.hinnasto .h-otsikko{grid-row:1/4;padding-left:var(--pad)}
.hinnasto .h-otsikko h2{font-family:var(--display);font-weight:300;font-size:34px;line-height:1.08;letter-spacing:-.02em;margin-top:14px}
.hinnasto>div:nth-child(n+5){border-top:1px solid var(--viiva)}
.hinnasto .h-kuvaus p{font-size:14px;line-height:1.55;color:#333;max-width:24em}
.hinnasto .h-hinta b{font-family:var(--leipa);font-weight:400;font-size:28px;letter-spacing:-.015em;line-height:1.2;margin-top:8px}
.hinnasto .h-lause{grid-column:2/5;min-height:0}
.hinnasto .h-lause p{font-size:15px;line-height:1.6}

/* hinta */
.hinta{font-family:var(--leipa);font-weight:400;font-size:28px;letter-spacing:-.015em;line-height:1.35}
/* hinta samalle linjalle vasemman solun otsikon kanssa */
.hintasolu{display:flex;align-items:flex-end}
.hinta small{font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--harmaa-teksti);margin-left:8px}

/* etusivu: miten pääset alkuun */
.askeleet{border-top:1px solid var(--viiva)}
.askeleet>div{padding-top:30px;padding-bottom:34px}
.askeleet h3{font-family:var(--leipa);font-weight:500;font-size:22px;letter-spacing:-.02em;margin:14px 0 10px}
.askeleet p{font-size:13.5px;line-height:1.6;color:#333}
/* kolmen solun yhteinen rivi kysymysten alla; otsikkosolu jatkuu molempien rivien ohi */
.askeleet .osio-otsikko{grid-row:span 2}
.askeleet>div:has(+ .yhteenveto){border-right:0}
.askeleet .yhteenveto{grid-column:2/5;border-top:1px solid var(--viiva);padding-top:24px;padding-bottom:26px}
.askeleet .yhteenveto p{font-size:15px;line-height:1.6;color:var(--musta);max-width:52em}
.hintarivi{border-top:1px solid var(--viiva)}
.hintarivi>*{padding-top:18px;padding-bottom:18px}
.hintarivi p{grid-column:2/4;font-size:14px;line-height:1.5}
.hintarivi .act{display:flex;justify-content:flex-end}
.hintarivi .link{padding-top:0}

/* etusivu: asiakaspalaute */
.lainaus blockquote{grid-column:1/4;padding-top:56px;padding-bottom:56px}
.lainaus blockquote p{font-family:var(--display);font-weight:300;font-size:clamp(24px,2.5vw,34px);line-height:1.28;letter-spacing:-.01em;max-width:30em}
.lainaus blockquote p:first-child::before{content:"“";color:var(--turkoosi)}
.lainaus blockquote .pieni{font-size:18px;line-height:1.5;margin-top:22px;color:#444}
.lainaus .kuka{padding-top:60px}
.lainaus .kuka p{font-size:13.5px;line-height:1.55;margin-top:8px}

/* etusivu: Laura */
.laura .kuva{padding:0!important}
.laura .kuva img{display:block;width:100%;height:100%;object-fit:cover;filter:grayscale(1)}
.laura .teksti{grid-column:2/4;padding-top:40px;padding-bottom:44px}
.laura h2{font-family:var(--display);font-weight:300;font-size:34px;letter-spacing:-.02em;margin:14px 0 16px}
.laura .teksti p{font-size:15px;line-height:1.65;max-width:38em;margin-bottom:14px}

/* JH-taulukko ("track record"): iso nimi vasemmalla, pieni teksti keskellä, iso sana oikealla */
.jh-taulu{width:100%;border-collapse:collapse;border-top:1px solid var(--viiva)}
.jh-taulu th{font-family:var(--mono);font-size:11px;font-weight:400;letter-spacing:.06em;text-transform:uppercase;color:var(--harmaa-teksti);text-align:left;vertical-align:bottom;padding:14px var(--pad);border-bottom:1px solid var(--viiva)}
.jh-taulu th:last-child,.jh-taulu td:last-child{text-align:right}
.jh-taulu td{padding:34px var(--pad) 18px;border-bottom:1px solid var(--viiva);vertical-align:bottom;font-size:13px;line-height:1.5;color:#333}
.jh-taulu td+td,.jh-taulu th+th{border-left:1px solid var(--viiva)}
.jh-taulu{table-layout:fixed}
.jh-taulu th,.jh-taulu td{width:25%}
/* kun solu ulottuu kahden sarakkeen yli, sarakeleveydet tulevat colgroupista, jotta viivat osuvat ruudukkoon */
.jh-taulu col{width:25%}
.jh-taulu:has(colgroup) th,.jh-taulu:has(colgroup) td{width:auto}
.jh-taulu td:first-child{font-family:var(--leipa);font-weight:500;font-size:22px;letter-spacing:-.02em;line-height:1.1;color:var(--musta)}
.jh-taulu td:first-child .mono{display:block;margin-top:6px;letter-spacing:.06em}
.jh-taulu td:last-child b{display:block;font-family:var(--leipa);font-weight:500;font-size:22px;letter-spacing:-.02em;line-height:1.1;color:var(--musta);margin-bottom:4px}
.jh-taulu tbody tr:hover td{background:#fff}

/* JH-taulukko solun sisällä (hinnasto): solulla ei sisennystä, joten viivat ulottuvat solun seiniin asti */
.osio-sisalto.tayte{padding:0}
.jh-taulu.sisalla{border-top:0}
.jh-taulu.sisalla .lisarivi td{font-family:var(--leipa);font-weight:400;font-size:14px;letter-spacing:0;color:#333;text-align:left;padding:16px var(--pad) 28px}
.jh-taulu.sisalla th:nth-child(1),.jh-taulu.sisalla td:nth-child(1){width:26%}
.jh-taulu.sisalla th:nth-child(2),.jh-taulu.sisalla td:nth-child(2){width:38%}
.jh-taulu.sisalla th:nth-child(3),.jh-taulu.sisalla td:nth-child(3){width:16%}
.jh-taulu.sisalla th:nth-child(4),.jh-taulu.sisalla td:nth-child(4){width:20%}
/* kolmen sarakkeen versio (tietosuoja) */
.jh-taulu.sisalla.kolme th:nth-child(1),.jh-taulu.sisalla.kolme td:nth-child(1){width:30%}
.jh-taulu.sisalla.kolme th:nth-child(2),.jh-taulu.sisalla.kolme td:nth-child(2){width:46%}
.jh-taulu.sisalla.kolme th:nth-child(3),.jh-taulu.sisalla.kolme td:nth-child(3){width:24%}
.jh-taulu.sisalla td{padding-top:26px;padding-bottom:16px}
.jh-taulu.sisalla tbody tr:last-child td{border-bottom:0}

/* tyhjä väli osioiden välissä, ettei sivu näytä yhdeltä pötköltä */
.tauko{height:88px;border-bottom:1px solid var(--viiva)}

/* musta osio (JH-malli): esimerkki raportista, ei reunaviivoja */
.musta{background:var(--musta);color:#fff;margin:0 -1px}
.musta>*{border-right:0!important}
.musta .mono{color:#fff}
.musta .mono.lime{color:var(--lime)}
.musta .osio-otsikko{padding-top:56px;padding-bottom:56px}
.musta .osio-otsikko h2{color:#fff}
.musta .rytmi{font-size:14px;line-height:1.6;color:#fff;margin-top:16px;max-width:22em}
.musta .merkki{margin-top:18px;display:inline-block;border:1px solid #fff;padding:3px 8px}
.havainto{grid-column:2/5;padding-top:56px;padding-bottom:56px}
/* löydös on ote raportista, ei otsikko: Inter erottaa sen vieressä olevasta Fraunces-otsikosta */
.havainto .iso{font-family:var(--leipa);font-weight:400;font-size:28px;line-height:1.35;letter-spacing:-.015em;max-width:30em}
.havainto .rivit{display:grid;grid-template-columns:1fr 1fr;gap:32px;margin-top:40px;max-width:52em}
.havainto .rivit p{font-size:14px;line-height:1.6;color:#fff;margin-top:8px}
.havainto .huom{margin-top:40px;font-size:13px;color:#fff}

/* loppukehotus ja footer */
.loppu{border-bottom:1px solid var(--viiva)}
.loppu h2{grid-column:1/4;font-family:var(--display);font-weight:300;font-size:clamp(34px,4.4vw,64px);line-height:1.04;letter-spacing:-.025em;padding-top:64px;padding-bottom:28px}
.loppu p{grid-column:1/3;font-size:16px;line-height:1.6;padding-top:0;padding-bottom:64px}
.loppu .act{grid-column:3/5;display:flex;justify-content:flex-end;align-items:flex-start;padding-top:0}
.site-footer{font-size:13px;line-height:1.9}
.site-footer h5{font-family:var(--mono);font-size:11px;font-weight:400;letter-spacing:.06em;text-transform:uppercase;color:var(--harmaa-teksti);margin-bottom:10px}
.site-footer .g4{border-bottom:1px solid var(--viiva)}
.site-footer .g4>div{padding-top:36px;padding-bottom:36px}
.site-footer a{display:block}
.site-footer a:hover{text-decoration:underline}
.site-footer .tarina{font-size:13px;line-height:1.6;color:#444}
.sananmerkki{font-family:var(--display);font-weight:300;font-size:clamp(80px,17vw,240px);letter-spacing:-.05em;line-height:.8;padding:40px var(--pad) 20px;display:flex;align-items:flex-end;gap:.08em;overflow:hidden}
.sananmerkki .dot{width:.13em;height:.13em;border-radius:50%;background:var(--turkoosi);margin-bottom:.12em;flex:none}
.pohja{display:flex;flex-wrap:wrap;gap:8px 28px;padding:16px var(--pad) 28px;border-top:1px solid var(--viiva)}

/* mobiili */
@media (max-width:860px){
  :root{--pad:16px}
  .site-header{grid-template-columns:1fr auto}
  .nav-cta .btn{display:none}
  .nav-toggle{display:block}
  .nav{display:none;grid-column:1/-1;flex-direction:column;align-items:flex-start;gap:0;padding-top:0}
  .nav.open{display:flex}
  .nav>*{padding:12px 0;margin:0;width:100%;border-top:1px solid var(--viiva)}
  .dd-menu{position:static;display:block;border:0;min-width:0;background:none;padding:4px 0 0}
  .dd-menu a{padding:8px 0}
  .dd-trigger .car{display:none}
  .hero .meta div:nth-child(n+2){display:none}
  .g4,.nrivi,.hero-low,h1.iso .row,.kaksi,.tuotos-sisalto,.ruudut{grid-template-columns:1fr}
  .ruutu{grid-template-columns:64px 1fr;min-height:0;border-right:0!important}
  .ruutu .teksti{grid-column:2/3}
  .ruutu .ovnum{font-size:40px;text-align:left}
  .g4>*,.hero-low>*,h1.iso .row span,.nrivi>*{grid-column:1/-1!important}
  h1.iso .row span{text-align:left!important;white-space:normal!important}
  .hero-low .act,.lupaus-rivi .act,.loppu .act{justify-content:flex-start}
  .nrivi>*{padding:14px var(--pad)}
  .sivu-hero h1 .sisennys{padding-left:0}
  .kaksi>div{padding-right:0}
  .kaksi>div+div{border-left:0;padding-left:0;margin-top:28px}
  .osio-otsikko{padding-bottom:0}
  .osio-sisalto{padding-top:16px}
  .osio-sisalto>p[style*="padding-top"]{padding-top:0!important}
  .askeleet .osio-otsikko{grid-row:auto;padding-bottom:0}
  .havainto .rivit{grid-template-columns:1fr}
  .havainto .iso{font-size:22px}
  .hinnasto{grid-template-columns:1fr}
  .hinnasto>div{grid-column:1/-1!important;grid-row:auto!important;min-height:0;padding:14px var(--pad);border-left:0!important}
  .hinnasto>div::before{display:none}
  .jh-taulu thead{display:none}
  .jh-taulu,.jh-taulu tbody,.jh-taulu tr{display:block;width:100%}
  .jh-taulu tr{border-bottom:1px solid var(--viiva);padding:18px 0}
  .jh-taulu.sisalla tbody tr:last-child{border-bottom:0}
  .jh-taulu td,.jh-taulu.sisalla td,.jh-taulu.sisalla .lisarivi td{display:block;width:auto!important;border:0!important;padding:4px var(--pad);text-align:left!important}
  .jh-taulu td:first-child{font-size:20px;padding-bottom:8px}
  .jh-taulu td:last-child{padding-top:10px;font-size:13px}
  .jh-taulu td:last-child b{display:inline;font-size:16px;margin:0 6px 0 0}
  .jh-taulu tbody tr:hover td{background:none}
  .jh-taulu.hinnat td:nth-child(3)::before,.jh-taulu.hinnat td:nth-child(4)::before{display:block;font-family:var(--mono);font-size:11px;font-weight:400;letter-spacing:.06em;text-transform:uppercase;color:var(--harmaa-teksti);margin-bottom:2px}
  .jh-taulu.hinnat td:nth-child(3)::before{content:"Käyttöönotto"}
  .jh-taulu.hinnat td:nth-child(4)::before{content:"Kuukausi"}
  .jh-taulu.hinnat td:nth-child(3){padding-top:10px}
  .site-footer .g4>div{padding-top:18px;padding-bottom:18px}
  .sananmerkki:empty{display:none}
  .musta .osio-otsikko{padding-bottom:0}
  .havainto{padding-top:24px}
  .hintarivi p,.lainaus blockquote,.laura .teksti{grid-column:1/-1}
  .lainaus .kuka{padding-top:0}
  .laura .kuva img{height:auto;max-height:420px}
  .g4>*,.hero .meta>div,.hero-low>*,.nrivi>*{border-right:0!important}
}

/* ajanvaraussivu: otsikko ylös, koska kalenteri on korkea */
#ajanvaraus .osio-otsikko{justify-content:flex-start}
.kalenteri{padding-top:24px;padding-bottom:24px}

/* etusivun palvelurivit: kehä numeron ympärillä, kaari kertoo kohdan paikan kierrossa */
#palvelut .nrivi>.num{padding-top:24px;padding-bottom:24px}
.num .nro{position:relative;display:flex;align-items:center;justify-content:center;width:124px;height:124px}
.num .keha{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.keha circle{fill:none}
.keha .pohja{stroke:var(--viiva);stroke-width:1}
.keha .kaari{stroke:var(--turkoosi);stroke-width:2;stroke-dasharray:0 300;transition:stroke-dasharray .9s cubic-bezier(.4,0,.2,1)}
.nrivi.nakyy .keha .kaari{stroke-dasharray:96 204}
.nrivi.nakyy .keha.koko .kaari{stroke-dasharray:300 0}
a.nrivi:hover .keha .kaari{stroke-width:3}
@media (prefers-reduced-motion:reduce){.keha .kaari{transition:none}}
@media (max-width:860px){
  #palvelut .nrivi>.num{padding-top:20px;padding-bottom:6px;font-size:48px}
  .num .nro{width:92px;height:92px}
}

/* tietosuojaseloste: pitkä leipäteksti osion sisällä */
.seloste{max-width:46em}
.seloste p,.seloste li{font-size:15px;line-height:1.65;color:#222}
.seloste p{margin-bottom:14px}
.seloste p:last-child{margin-bottom:0}
.seloste h3{font-family:var(--leipa);font-weight:600;font-size:15px;margin:22px 0 6px}
.seloste h3:first-child{margin-top:0}
.seloste ul{list-style:none;margin:0 0 14px;padding:0}
.seloste li{padding:10px 0;border-bottom:1px solid var(--viiva)}
.seloste li:first-child{border-top:1px solid var(--viiva)}
.seloste a{text-decoration:underline;text-underline-offset:3px}
.seloste .korostus{border-left:3px solid var(--turkoosi);padding-left:16px}
#evasteet{scroll-margin-top:72px}
/* kuuden solun periaateruudukko (norbertista): viiva rivien väliin */
.askeleet.kuusi>div:nth-child(n+5){border-top:1px solid var(--viiva)}
.askeleet p a{white-space:nowrap}
.askeleet.kuusi .osio-otsikko{grid-row:span 3}
/* norbertista: nimen tausta tekijäosion neljännessä sarakkeessa */
.laura .nimi{padding-top:40px;padding-bottom:44px;scroll-margin-top:72px}
.laura .nimi p{font-size:13.5px;line-height:1.6;color:#333;margin-top:14px}
/* alatunniste kolmessa sarakkeessa (neljäs sarake poistettu 2026-10-08) */
@media (min-width:861px){.site-footer .g4{grid-template-columns:repeat(3,1fr)}}