/* v14 kierros 23 alasivut (12.10.2026): paperityypit. Linkitetään floor.css:n jälkeen; samat muuttujat (--fl-*) ja
   sama perhe kuin kerrossivuilla: eyebrow, GT Super -otsikko pisteellä, osiot tummalla hiusviivalla ja versaaliotsakkeella.
   Fragmentit: tools/v14content.py (pages/<polku>.html). Otsikkotasot vaihtelevat (haettu fragmentti h2/h3/h4, oma sivu
   h1/h2/h3), joten tyylit ovat luokissa (.pg_h2 = markdownin ##, .pg_h3 = ###) eivätkä tagissa. */

.pg{--sl:var(--fl-line);--sk:var(--fl-ink);--sk2:var(--fl-ink-2);--accent:var(--fl-accent);--out:var(--fl-out)}

/* ---------- otsikko: alasivuilla pidemmät otsikot, joten pienempi kuin kerroksen nimi (max 3 riviä) ---------- */
.pg .flp_title{font-size:clamp(2.75rem,min(6.4vw,12.5cqi,10.5vh),6.25rem);line-height:.96;text-wrap:balance;margin-bottom:24px}
.pg-artikkeli .flp_title{font-size:clamp(2.1rem,min(4.3vw,8.2cqi,7.4vh),3.75rem);line-height:1.04;letter-spacing:-.016em;margin-left:-.02em}
.pg-termi .flp_title{font-size:clamp(2.75rem,min(6.4vw,12cqi,10.5vh),6rem)}
.pg .flp_lead{max-width:22em;text-wrap:pretty}
.flp_eye a{color:inherit;background:linear-gradient(currentColor,currentColor) 0 100%/100% 1px no-repeat;padding-bottom:1px;transition:color .3s ease}
.flp_eye a:hover,.flp_eye a:focus-visible{color:var(--fl-accent)}
.pg [tabindex="-1"]:focus{outline:0}
.pg :is(.pg_h2,.pg_h3,.flp_sec){scroll-margin-top:calc(var(--fl-bar) + 1rem)}

/* ---------- leipäteksti (artikkelit, termit, tekstisivut, kirjoittajat) ---------- */
.pg_prose{max-width:62ch;font-size:1.0625rem;line-height:1.65;color:var(--fl-ink)}
.pg_prose > * + *{margin-top:1em}
.pg_prose p{text-wrap:pretty}
.pg_prose .pg_h2{font-family:var(--fl-serif);font-weight:300;font-size:1.6rem;line-height:1.15;letter-spacing:-.012em;margin-top:2.4em;color:var(--fl-ink);text-wrap:balance}
.pg_prose .pg_h3{font-family:var(--fl-sans);font-weight:500;font-size:1.125rem;line-height:1.35;letter-spacing:-.005em;margin-top:1.9em}
.pg_prose :is(.pg_h2,.pg_h3) + *{margin-top:.6em}
.pg_prose > :first-child{margin-top:0}
.pg_prose :is(ul,ol){padding-left:1.3em}
.pg_prose ul{list-style:none;padding-left:1.15em}
.pg_prose ul > li{position:relative}
.pg_prose ul > li::before{content:"";position:absolute;left:-1.05em;top:.72em;width:.36em;height:.36em;border-radius:50%;background:var(--fl-accent)}
.pg_prose ol{list-style:decimal}
.pg_prose ol > li::marker{font-variant-numeric:tabular-nums;color:var(--fl-ink-2)}
.pg_prose li + li{margin-top:.45em}
.pg_prose strong{font-weight:600}
.pg_prose em{font-style:italic}
.pg_prose a{color:var(--fl-ink);background:linear-gradient(var(--fl-accent),var(--fl-accent)) 0 100%/100% 1px no-repeat;padding-bottom:1px;transition:color .25s ease,background-size .35s var(--fl-out)}
.pg_prose a:hover,.pg_prose a:focus-visible{color:var(--fl-accent);background-size:100% 2px}
.pg_prose code{font-family:ui-monospace,Consolas,monospace;font-size:.84em;padding:.1em .35em;border-radius:4px;background:rgba(17,17,17,.06);word-break:break-word}
.pg_prose blockquote{padding-left:1.1rem;border-left:1px solid var(--fl-ink);font-family:var(--fl-serif);font-weight:300;font-size:1.3rem;line-height:1.3}
.pg_prose figure img{width:100%;height:auto;border-radius:6px}
.pg_prose figcaption{margin-top:.5rem;font-size:.8125rem;color:var(--fl-ink-2)}
.pg_intro{max-width:40rem;font-size:1.0625rem}
.pg_intro p + p{margin-top:.85em}
.pg_legal .pg_h2{font-size:1.45rem}
.pg_note{margin-top:1.75rem;max-width:36rem;font-size:.9375rem;line-height:1.55;color:var(--fl-ink-2)}
.pg_note a{color:var(--fl-ink);background:linear-gradient(currentColor,currentColor) 0 100%/100% 1px no-repeat}
.pg_note a:hover{color:var(--fl-accent)}

/* ---------- palvelusivu ---------- */
/* palvelulistan rivit linkkeinä (Palvelut-kerros): koko rivi klikattava, nuoli nimen perässä */
.flp_list li.is-link .flp_go{display:inline-flex;align-items:center;gap:.5rem;color:inherit;transition:color .3s ease}
.flp_list li.is-link .flp_go::after{content:"";position:absolute;inset:0}
.flp_list li.is-link .flp_go svg{flex:none;width:.85rem;height:.85rem;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;opacity:.45;transition:transform .4s var(--fl-out),opacity .3s ease}
.flp_list li.is-link:hover .flp_go,.flp_list li.is-link .flp_go:focus-visible{color:var(--fl-accent)}
.flp_list li.is-link:hover .flp_go svg{transform:translateX(3px);opacity:1}
.flp_alt a svg[viewBox="0 0 16 16"]{width:.8rem;height:.8rem}
.flp_alt + .flp_alt{margin-top:.5rem}
.flp_end .flp_alt{margin-top:1.5rem}
.pg_saat.flp_list p{color:var(--fl-ink-2)}

/* 2×2-ruudut (sama kieli kuin tornin palveluruudut: hiusviivat, ei laatikoita) */
.pg_grid{display:grid;grid-template-columns:minmax(0,1fr);border-bottom:1px solid var(--fl-line)}
.pg_grid > li{padding:1.15rem 0 1.25rem;border-top:1px solid var(--fl-line)}
.pg_grid > li:first-child{border-top:0;padding-top:.35rem}
.pg_grid h4,.pg_grid h3{font-size:1.25rem;line-height:1.2;font-weight:500;letter-spacing:-.018em}
.pg_grid p{margin-top:.5rem;font-size:.9375rem;line-height:1.5;color:var(--fl-ink-2);max-width:22rem}
@container (min-width:520px){
  .pg_grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pg_grid > li{padding:1.3rem 1.6rem 1.45rem 0}
  .pg_grid > li:nth-child(2){border-top:0;padding-top:.35rem}
  .pg_grid > li:nth-child(2n){padding-left:1.6rem;padding-right:0;border-left:1px solid var(--fl-line)}
}

/* prosessi: numero vasemmalla serifillä, otsikko ja lause oikealla */
.pg_steps{counter-reset:none}
.pg_steps > li{display:grid;grid-template-columns:2.75rem minmax(0,1fr);column-gap:1rem;padding:1.05rem 0 1.15rem;border-top:1px solid var(--fl-line)}
.pg_steps > li:first-child{border-top:0;padding-top:.25rem}
.pg_steps b{font-family:var(--fl-serif);font-weight:300;font-size:2.25rem;line-height:.9;letter-spacing:-.02em;color:var(--fl-ink);font-variant-numeric:lining-nums}
.pg_steps :is(h3,h4){font-size:1.125rem;line-height:1.25;font-weight:500;letter-spacing:-.01em}
.pg_steps p{margin-top:.3rem;font-size:.9375rem;line-height:1.5;color:var(--fl-ink-2);max-width:32rem}

/* asiakaslainaukset vaalealla lasilla paperin päällä */
.pg_q{display:block;padding:1.5rem 1.6rem 1.4rem;border-radius:14px;background:rgba(255,255,255,.62);box-shadow:inset 0 0 0 1px rgba(255,255,255,.85),0 1px 0 rgba(17,17,17,.04),0 18px 40px -28px rgba(30,24,14,.35)}
.pg_q + .pg_q{margin-top:1rem}
.pg_q blockquote p{font-size:clamp(1.3rem,4cqi,1.7rem);max-width:24em}
.pg_q.is-lead blockquote p{font-size:clamp(1.6rem,5.4cqi,2.4rem)}
.pg_q figcaption a{color:inherit;background:linear-gradient(currentColor,currentColor) 0 100%/100% 1px no-repeat}
.pg_q figcaption a:hover{color:var(--fl-accent)}
.pg_qs .pg_full{margin-top:.75rem}

/* napit ja lisälinkit */
.pg_btns{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.75rem;margin-top:28px}
.flp_end > .pg_btns:first-child,.flp_end .flp_sh + .pg_btns{margin-top:0}
.pg_more{display:inline-flex;align-items:center;gap:.45rem;padding:.4rem 0;font:inherit;font-size:.9375rem;font-weight:500;color:var(--fl-ink);background:linear-gradient(var(--fl-accent),var(--fl-accent)) 0 100%/0 1.5px no-repeat;transition:background-size .4s var(--fl-out),color .3s ease;cursor:pointer}
.pg_more svg{width:.8rem;height:.8rem;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:transform .4s var(--fl-out)}
.pg_more:hover,.pg_more:focus-visible{background-size:100% 1.5px;color:var(--fl-accent)}
.pg_more:hover svg{transform:translateX(3px)}
button.pg_more{border:0;border-radius:0}

/* linkkilistat (muut palvelut, liittyvät termit, projektitarinat) */
.pg_links{border-bottom:1px solid var(--fl-line)}
.pg_links li{border-top:1px solid var(--fl-line)}
.pg_links li:first-child{border-top:0}
.pg_links a{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.95rem 0;font-size:1.25rem;line-height:1.25;letter-spacing:-.012em;transition:color .3s ease}
.pg_links li:first-child a{padding-top:.3rem}
.pg_links svg{flex:none;width:.9rem;height:.9rem;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;opacity:.5;transition:transform .4s var(--fl-out),opacity .3s ease}
.pg_links a:hover,.pg_links a:focus-visible{color:var(--fl-accent)}
.pg_links a:hover svg{transform:translateX(4px);opacity:1}

/* usein kysytyt: haitari */
.pg_faqs{border-bottom:1px solid var(--fl-line)}
.pg_faq{border-top:1px solid var(--fl-line)}
.pg_faqs > .pg_faq:first-child{border-top:0}
.pg_faq summary{display:flex;align-items:flex-start;justify-content:space-between;gap:1.25rem;padding:1.05rem 0;cursor:pointer;list-style:none;font-size:1.125rem;line-height:1.35;font-weight:500;letter-spacing:-.008em;transition:color .3s ease}
.pg_faqs > .pg_faq:first-child summary{padding-top:.3rem}
.pg_faq summary::-webkit-details-marker{display:none}
.pg_faq summary:hover,.pg_faq summary:focus-visible{color:var(--fl-accent)}
.pg_faq summary i{position:relative;flex:none;width:1.6rem;height:1.6rem;margin-top:-.05rem;border-radius:50%;box-shadow:inset 0 0 0 1px var(--fl-line);transition:transform .45s var(--fl-out),background-color .3s ease}
.pg_faq summary i::before,.pg_faq summary i::after{content:"";position:absolute;left:50%;top:50%;width:.6rem;height:1.5px;margin:-.75px 0 0 -.3rem;background:currentColor;border-radius:1px}
.pg_faq summary i::after{transform:rotate(90deg);transition:transform .45s var(--fl-out)}
.pg_faq[open] summary i{background:var(--fl-ink);color:var(--fl-paper);box-shadow:none}
.pg_faq[open] summary i::after{transform:rotate(0)}
.pg_faq_a{padding:0 2.6rem 1.25rem 0;max-width:40rem;font-size:1rem;line-height:1.6;color:var(--fl-ink-2)}
.pg_faq_a p + p{margin-top:.75em}
.pg_faq_a a{color:var(--fl-ink);background:linear-gradient(var(--fl-accent),var(--fl-accent)) 0 100%/100% 1px no-repeat}
.pg_faq_a a:hover{color:var(--fl-accent)}
.pg_full{border:0}
.pg_full summary{display:inline-flex;align-items:center;gap:.6rem;padding:.4rem 0;font-size:.9375rem}
.pg_full summary i{width:1.35rem;height:1.35rem}
.pg_full .pg_faq_a{padding:.4rem 0 0;font-size:.9688rem}

/* ---------- projektisivu ---------- */
.pg_cover{margin-top:clamp(1.75rem,4vh,2.5rem);aspect-ratio:16/10;border-radius:6px;overflow:hidden;background:#ddd7cd}
.pg_cover img{width:100%;height:100%;object-fit:cover}
.pg_facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.1rem 1.5rem}
.pg_facts dt{font-size:.6875rem;line-height:1.3;letter-spacing:.14em;text-transform:uppercase;font-weight:500;color:var(--fl-ink-2)}
.pg_facts dd{margin:.35rem 0 0;font-size:1.0625rem;line-height:1.35}
.pg_facts dd a{background:linear-gradient(var(--fl-accent),var(--fl-accent)) 0 100%/100% 1px no-repeat;transition:color .3s ease}
.pg_facts dd a:hover{color:var(--fl-accent)}
@container (min-width:560px){.pg_facts{grid-template-columns:repeat(4,minmax(0,auto));justify-content:start;column-gap:2.5rem}}
.pg_tags{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:1.5rem}
.pg_tags li{display:inline-flex;align-items:center;height:1.9rem;padding:0 .8rem;border-radius:100px;box-shadow:inset 0 0 0 1px var(--fl-line);font-size:.8125rem;color:var(--fl-ink)}
.pg_trio > li{padding:1.1rem 0 1.25rem;border-top:1px solid var(--fl-line)}
.pg_trio > li:first-child{border-top:0;padding-top:.3rem}
.pg_trio h4,.pg_trio h3{color:var(--fl-ink-2);margin-bottom:.5rem}
.pg_trio p{font-size:1.0625rem;line-height:1.6;max-width:38rem}
@container (min-width:560px){
  .pg_trio > li{display:grid;grid-template-columns:9rem minmax(0,1fr);column-gap:1.5rem}
  .pg_trio h4,.pg_trio h3{margin:0;padding-top:.3rem}
}
.pg_gal{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem}
.pg_gal figure{border-radius:6px;overflow:hidden;background:#ddd7cd;aspect-ratio:4/5}
.pg_gal img{width:100%;height:100%;object-fit:cover}
.pg_gal.is-3 figure:first-child{grid-column:1 / -1;aspect-ratio:16/10}
.pg_gal.is-1 figure{grid-column:1 / -1;aspect-ratio:16/10}
.pg_next{display:flex;align-items:flex-end;justify-content:space-between;gap:1.5rem;margin-top:clamp(2.5rem,6vh,3.5rem);padding-top:1.4rem;border-top:1px solid var(--fl-ink);transition:color .3s ease}
.pg_next .cap{display:block;color:var(--fl-ink-2);margin-bottom:12px}
.pg_next b{display:block;font-family:var(--fl-serif);font-weight:300;font-size:clamp(2rem,6.4cqi,2.75rem);line-height:1;letter-spacing:-.015em}
.pg_next svg{flex:none;width:2.6rem;height:2.6rem;padding:.7rem;border-radius:50%;border:1.5px solid rgba(17,17,17,.5);fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;transition:background-color .35s ease,color .35s ease,transform .4s var(--fl-out)}
.pg_next:hover,.pg_next:focus-visible{color:var(--fl-accent)}
.pg_next:hover svg{background:var(--fl-ink);border-color:var(--fl-ink);color:var(--fl-paper);transform:translateX(3px)}
/* Referenssit-kerroksen lista: linkki projektisivulle */
.flw_pg{display:inline-flex;align-items:center;gap:.4rem;padding:.35rem 0;font-size:.875rem;font-weight:500;color:var(--fl-ink);background:linear-gradient(var(--fl-accent),var(--fl-accent)) 0 100%/0 1.5px no-repeat;transition:background-size .4s var(--fl-out),color .3s ease}
.flw_pg svg{width:.8rem;height:.8rem;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:transform .4s var(--fl-out)}
.flw_pg:hover,.flw_pg:focus-visible{background-size:100% 1.5px;color:var(--fl-accent)}
.flw_pg:hover svg{transform:translateX(2px)}
.fl_lb_as{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:.5rem 1.5rem}
.fl_lb_page{display:inline-flex;align-items:center;gap:.45rem;font-size:.9375rem;font-weight:500;color:#fff;white-space:nowrap}
.fl_lb_page svg{width:.85rem;height:.85rem;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:transform .4s var(--fl-out)}
.fl_lb_page:hover svg{transform:translateX(3px)}
.fl_lb_page[hidden]{display:none}

/* ---------- artikkeli ---------- */
.pg_meta{display:flex;flex-wrap:wrap;align-items:center;gap:.35rem 0;margin-top:2px;font-size:.875rem;line-height:1.4;color:var(--fl-ink-2)}
.pg_meta > * + *::before{content:"";display:inline-block;width:3px;height:3px;margin:0 .7rem;border-radius:50%;background:currentColor;vertical-align:middle;opacity:.7}
.pg_meta a{color:var(--fl-ink);font-weight:500;background:linear-gradient(currentColor,currentColor) 0 100%/100% 1px no-repeat}
.pg_meta a:hover{color:var(--fl-accent)}
.pg_hero{margin-top:clamp(1.75rem,4vh,2.5rem);aspect-ratio:16/9;border-radius:6px;overflow:hidden;background:#ddd7cd}
.pg_hero img{width:100%;height:100%;object-fit:cover}
.pg_toc{margin-top:clamp(2.25rem,5vh,3rem);padding-top:14px;border-top:1px solid var(--fl-ink);max-width:62ch}
.pg_toc .cap{color:var(--fl-ink)}
.pg_toc ol{margin-top:.85rem;counter-reset:toc}
.pg_toc li{counter-increment:toc;border-top:1px solid var(--fl-line)}
.pg_toc li:first-child{border-top:0}
.pg_toc a{display:grid;grid-template-columns:2rem minmax(0,1fr);padding:.55rem 0;font-size:.9688rem;line-height:1.4;transition:color .3s ease}
.pg_toc a::before{content:counter(toc,decimal-leading-zero);font-size:.75rem;letter-spacing:.06em;color:var(--fl-ink-2);padding-top:.15rem;font-variant-numeric:tabular-nums}
.pg_toc a:hover,.pg_toc a:focus-visible{color:var(--fl-accent)}
.pg_art{margin-top:clamp(2.25rem,5vh,3rem)}
.pg_author{margin-top:clamp(2.75rem,6vh,3.75rem);max-width:62ch}
.pg_author a{display:grid;grid-template-columns:4.25rem minmax(0,1fr) auto;align-items:center;column-gap:1rem;padding:1rem 0;border-top:1px solid var(--fl-ink);border-bottom:1px solid var(--fl-line);transition:color .3s ease}
.pg_author img{width:4.25rem;height:4.25rem;border-radius:50%;object-fit:cover;object-position:50% 20%;background:#ddd7cd}
.pg_author .cap{display:block;color:var(--fl-ink-2);margin-bottom:4px}
.pg_author b{display:block;font-weight:500;font-size:1.125rem;line-height:1.25}
.pg_author b + span{display:block;font-size:.875rem;color:var(--fl-ink-2)}
.pg_author svg{width:.9rem;height:.9rem;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;transition:transform .4s var(--fl-out)}
.pg_author a:hover{color:var(--fl-accent)}
.pg_author a:hover svg{transform:translateX(3px)}

/* kortit (blogi, Lue myös, kirjoittajan artikkelit) */
.pg_cards{display:grid;grid-template-columns:minmax(0,1fr);gap:2rem 1.5rem}
@container (min-width:520px){.pg_cards:not(.is-small){grid-template-columns:repeat(2,minmax(0,1fr))}}
.pgc a{display:flex;flex-direction:column;height:100%}
.pgc_m{display:block;aspect-ratio:16/9;border-radius:6px;overflow:hidden;background:#ddd7cd;margin-bottom:1rem}
.pgc_m img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--fl-out)}
.pgc a:hover .pgc_m img{transform:scale(1.035)}
.pgc_k{color:var(--fl-ink-2);font-variant-numeric:tabular-nums}
.pgc :is(h3,h4){margin-top:.55rem;font-size:1.3125rem;line-height:1.22;font-weight:400;letter-spacing:-.014em;text-wrap:pretty;transition:color .3s ease}
.pgc p{margin-top:.55rem;font-size:.9375rem;line-height:1.5;color:var(--fl-ink-2)}
.pgc_go{display:inline-flex;align-items:center;gap:.4rem;margin-top:auto;padding-top:.85rem;font-size:.875rem;font-weight:500}
.pgc_go svg{width:.8rem;height:.8rem;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:transform .4s var(--fl-out)}
.pgc a:hover :is(h3,h4),.pgc a:focus-visible :is(h3,h4),.pgc a:hover .pgc_go{color:var(--fl-accent)}
.pgc a:hover .pgc_go svg{transform:translateX(3px)}
.pg_cards.is-small{gap:0;border-bottom:1px solid var(--fl-line)}
.pg_cards.is-small .pgc{border-top:1px solid var(--fl-line)}
.pg_cards.is-small .pgc:first-child{border-top:0}
.pg_cards.is-small .pgc a{display:grid;grid-template-columns:clamp(6.5rem,26cqi,9.5rem) minmax(0,1fr);grid-template-rows:auto auto 1fr;column-gap:1.1rem;padding:1rem 0}
.pg_cards.is-small .pgc:first-child a{padding-top:.3rem}
.pg_cards.is-small .pgc_m{grid-row:1 / span 3;margin:0;aspect-ratio:4/3}
.pg_cards.is-small .pgc p{display:none}
.pg_cards.is-small .pgc :is(h3,h4){font-size:1.0625rem;line-height:1.28;margin-top:.35rem}
.pg_cards.is-small .pgc_go{padding-top:.5rem}

/* Kirjaston välilehdet (Blogi / Sanasto) */
.pg_tabs{display:flex;gap:.35rem;margin:0 0 22px}
.pg_tabs a{display:inline-flex;align-items:center;height:2.25rem;padding:0 1rem;border-radius:100px;box-shadow:inset 0 0 0 1px var(--fl-line);font-size:.875rem;font-weight:500;color:var(--fl-ink-2);transition:color .3s ease,box-shadow .3s ease,background-color .3s ease}
.pg_tabs a:hover{color:var(--fl-ink);box-shadow:inset 0 0 0 1px rgba(17,17,17,.4)}
.pg_tabs a[aria-current="page"]{background:var(--fl-ink);color:var(--fl-paper);box-shadow:none}
.pg_tabs + .flp_lead{margin-top:0}

/* kirjoittajat blogissa */
.pg_people{display:grid;grid-template-columns:minmax(0,1fr);border-bottom:1px solid var(--fl-line)}
.pg_people li{border-top:1px solid var(--fl-line)}
.pg_people li:first-child{border-top:0}
.pg_people a{display:grid;grid-template-columns:3.25rem minmax(0,1fr);align-items:center;column-gap:.9rem;padding:.75rem 0;transition:color .3s ease}
.pg_people li:first-child a{padding-top:.2rem}
.pg_people img{width:3.25rem;height:3.25rem;border-radius:50%;object-fit:cover;object-position:50% 20%;background:#ddd7cd}
.pg_people b{display:block;font-weight:500;font-size:1.0625rem}
.pg_people b + span{display:block;font-size:.875rem;color:var(--fl-ink-2)}
.pg_people a:hover{color:var(--fl-accent)}

/* ---------- sanasto ---------- */
.pg_def{max-width:30em;font-size:clamp(1.2rem,1.7vw,1.45rem);line-height:1.42;letter-spacing:-.008em;text-wrap:pretty}
.pg_def strong{font-weight:500}
.pg-termi .pg_prose{margin-top:clamp(2.25rem,5vh,3rem)}
.pg_terms{border-bottom:1px solid var(--fl-line)}
.pg_terms li{border-top:1px solid var(--fl-line)}
.pg_terms li:first-child{border-top:0}
.pg_terms a{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:1.25rem;row-gap:.3rem;padding:1rem 0 1.1rem;transition:color .3s ease}
.pg_terms li:first-child a{padding-top:.3rem}
.pg_terms :is(h3,h4){grid-column:1;font-size:1.375rem;line-height:1.2;font-weight:400;letter-spacing:-.012em}
.pg_terms p{grid-column:1;font-size:.9375rem;line-height:1.5;color:var(--fl-ink-2);max-width:34rem}
.pg_terms svg{grid-column:2;grid-row:1 / span 2;align-self:center;width:.9rem;height:.9rem;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;opacity:.5;transition:transform .4s var(--fl-out),opacity .3s ease}
.pg_terms a:hover,.pg_terms a:focus-visible{color:var(--fl-accent)}
.pg_terms a:hover svg{transform:translateX(4px);opacity:1}

/* ---------- kirjoittaja ---------- */
.pg_portrait{width:min(9rem,34%);aspect-ratio:4/5;border-radius:6px;overflow:hidden;background:#ddd7cd;margin:0 0 22px}
.pg_portrait img{width:100%;height:100%;object-fit:cover;object-position:50% 20%}
.pg_role{color:var(--fl-ink);margin:-8px 0 22px}
@media (min-width:1200px){.pg_ahead > .pg_portrait{grid-column:1}}

/* ---------- lomakkeet (sama kieli kuin aulan standissa: versaalilabel, viiva, pillerit) ---------- */
.pg_form,.pg_calc{max-width:40rem}
.pg_fields{display:grid;grid-template-columns:minmax(0,1fr);gap:1.25rem 1.5rem}
@container (min-width:520px){.pg_fields{grid-template-columns:repeat(2,minmax(0,1fr))}.pg_fields > .pf:has(textarea){grid-column:1 / -1}}
.pf{display:grid;gap:.2rem}
.pf label{font-size:.6875rem;line-height:1.2;letter-spacing:.14em;text-transform:uppercase;font-weight:500;color:var(--fl-ink-2)}
.pf label span{letter-spacing:.02em;text-transform:none;font-weight:400}
.pf label .pf_req{color:var(--fl-accent);font-weight:500}
.pf input,.pf textarea{display:block;width:100%;font:inherit;font-size:1.0625rem;line-height:1.35;color:var(--fl-ink);caret-color:var(--fl-accent);background:transparent;border:0;border-bottom:1px solid rgba(17,17,17,.28);border-radius:0;padding:.45rem 0 .5rem;outline:none;resize:vertical;appearance:none;-webkit-appearance:none;transition:border-color .35s ease,box-shadow .35s ease}
.pf textarea{min-height:5.5rem}
.pf input::placeholder{color:rgba(17,17,17,.38)}
.pf input:focus,.pf textarea:focus{border-bottom-color:var(--fl-accent);box-shadow:0 1px 0 var(--fl-accent)}
.pf.is-bad input,.pf.is-bad textarea{border-bottom-color:#a8461f;box-shadow:0 1px 0 #a8461f}
.pg_form > .pf,.pg_form > .sf_need{margin-top:1.4rem}
.pg .sf_need legend{font-size:.6875rem;line-height:1.2;letter-spacing:.14em;text-transform:uppercase;font-weight:500;color:var(--fl-ink-2);padding:0}
.pg .sp span{height:2.25rem;padding:0 .95rem;font-size:.875rem}
.pf_end{display:flex;align-items:center;flex-wrap:wrap;gap:.75rem 1.25rem;margin-top:1.75rem}
.pf_note{font-size:.875rem;line-height:1.35;color:#8a3412}
.pf_note:empty{display:none}
.pg_form.is-sending .pf_send,.pg_calc.is-sending .pf_send{opacity:.6;pointer-events:none}
.pg_done{max-width:36rem;padding:1.5rem 1.6rem;border-radius:14px;background:rgba(255,255,255,.62);box-shadow:inset 0 0 0 1px rgba(255,255,255,.85),0 18px 40px -28px rgba(30,24,14,.35)}
.pg_done_h{font-family:var(--fl-serif);font-weight:300;font-size:2.25rem;line-height:1;letter-spacing:-.015em;margin-bottom:.6rem}
.pg_done p:not(.pg_done_h){color:var(--fl-ink-2)}
.pg_done[hidden]{display:none}
.flp_contact .pg_facts{margin-top:1.75rem}

/* hintalaskuri */
.lc_prog{height:2px;background:var(--fl-line);border-radius:2px;overflow:hidden;margin-bottom:1.5rem}
.lc_prog i{display:block;height:100%;width:var(--p,16%);background:var(--fl-accent);transition:width .5s var(--fl-out)}
.lc_step[hidden]{display:none}
.lc_step.is-in{animation:lcIn .45s var(--fl-out) both}
@keyframes lcIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.lc_k{color:var(--fl-ink-2);font-variant-numeric:tabular-nums}
.lc_h{margin-top:.6rem;font-family:var(--fl-serif);font-weight:300;font-size:clamp(1.75rem,5cqi,2.4rem);line-height:1.05;letter-spacing:-.015em}
.lc_p{margin-top:.6rem;max-width:34rem;font-size:.9688rem;line-height:1.5;color:var(--fl-ink-2)}
.lc_g{border:0;margin:1.5rem 0 0;padding:0;min-width:0}
.lc_g legend{color:var(--fl-ink);margin-bottom:.7rem;padding:0}
.lc_g legend.sr-legend{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.lc_opts{display:grid;grid-template-columns:minmax(0,1fr);gap:.5rem}
@container (min-width:520px){.lc_opts.is-3,.lc_opts.is-2,.lc_opts.is-4{grid-template-columns:repeat(2,minmax(0,1fr))}.lc_opts.is-3{grid-template-columns:repeat(3,minmax(0,1fr))}.lc_opts.is-5{grid-template-columns:repeat(3,minmax(0,1fr))}}
.lc_opt{position:relative;display:block;cursor:pointer}
.lc_opt input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.lc_o{display:flex;flex-direction:column;gap:.25rem;height:100%;padding:.85rem 1rem .9rem;border-radius:10px;background:rgba(255,255,255,.5);box-shadow:inset 0 0 0 1px var(--fl-line);transition:box-shadow .3s ease,background-color .3s ease}
.lc_o b{font-weight:500;font-size:1rem;line-height:1.25}
.lc_o small{font-size:.8125rem;line-height:1.35;color:var(--fl-ink-2)}
.lc_pr{margin-top:auto;padding-top:.45rem;font-size:.9375rem;font-weight:500;line-height:1.2;font-variant-numeric:tabular-nums;white-space:nowrap}
.lc_gd{margin:-.3rem 0 .8rem;font-size:.875rem;line-height:1.4;color:var(--fl-ink-2)}
.lc_opt:hover .lc_o{box-shadow:inset 0 0 0 1px rgba(17,17,17,.4)}
.lc_opt input:checked + .lc_o{background:#fff;box-shadow:inset 0 0 0 1.5px var(--fl-accent),0 10px 24px -18px rgba(29,78,216,.6)}
.lc_opt input:checked + .lc_o b{color:var(--fl-accent)}
.lc_opt input:focus-visible + .lc_o{outline:2px solid var(--fl-accent);outline-offset:2px}
.lc_g.is-bad .lc_o{box-shadow:inset 0 0 0 1px #a8461f}
.lc_sum{display:grid;grid-template-columns:minmax(0,auto) minmax(0,1fr);gap:.4rem 1.25rem;margin:1.25rem 0 1.5rem;padding:1rem 0;border-top:1px solid var(--fl-line);border-bottom:1px solid var(--fl-line);font-size:.9375rem}
.lc_sum dt{color:var(--fl-ink-2)}
.lc_sum dd{margin:0}
.lc_sumn{margin:-.5rem 0 1.75rem;max-width:34rem;font-size:.875rem;line-height:1.45;color:var(--fl-ink-2)}
.lc_bar{position:sticky;bottom:0;z-index:2;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.75rem 1.25rem;margin-top:1.75rem;padding:.9rem 0 1rem;border-top:1px solid var(--fl-ink);background:var(--fl-paper);box-shadow:0 -14px 18px -6px var(--fl-paper)}
.lc_tot{display:flex;flex-direction:column}
.lc_tot .cap{color:var(--fl-ink-2)}
.lc_tot b{font-family:var(--fl-sans);font-weight:500;font-size:clamp(1.6rem,5cqi,2.1rem);line-height:1.1;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.lc_mo{font-size:.875rem;color:var(--fl-ink-2);font-variant-numeric:tabular-nums}
.lc_mo:empty{display:none}
.lc_nav{display:flex;align-items:center;gap:1rem}
.lc_back{font:inherit;font-size:.9375rem;font-weight:500;color:var(--fl-ink-2);padding:.6rem .2rem;background:none;border:0;cursor:pointer}
.lc_back:hover{color:var(--fl-ink)}
.lc_back[hidden],.pg_calc .btn[hidden]{display:none}
.lc_fine{margin-top:.75rem;font-size:.8125rem;color:var(--fl-ink-2)}
.pg_calcsec{margin-top:clamp(2.5rem,6vh,4rem)}

/* alalaidan "Takaisin kerrokseen" -linkki alasivuilla */
.fl_next.is-up svg{transform:none}
.fl_next.is-up:hover svg{transform:translateY(-3px)}

/* ---------- mobiili (huone ylhäällä, paperi alla; floor.css < 900 px) ---------- */
@media (max-width:899px){
  .pg .flp_title{font-size:clamp(2.35rem,10.5vw,3.25rem);line-height:1;margin-bottom:18px}
  .pg-artikkeli .flp_title{font-size:clamp(1.8rem,7.8vw,2.3rem);line-height:1.08}
  .pg .flp_lead{font-size:1.25rem}
  .pg_prose{font-size:1rem;line-height:1.62}
  .pg_prose .pg_h2{font-size:1.4rem}
  .pg_q{padding:1.2rem 1.15rem 1.1rem;border-radius:12px}
  .pg_q blockquote p{font-size:1.2rem}
  .pg_q.is-lead blockquote p{font-size:clamp(1.4rem,6.6vw,1.75rem)}
  .pg_links a{font-size:1.125rem;padding:.85rem 0}
  .pg_steps b{font-size:1.9rem}
  .pg_btns{gap:.85rem 1.4rem}
  .pg_def{font-size:1.15rem}
  .pg_tabs{margin-bottom:18px}
  .lc_bar{padding:.85rem 0 1rem}
  .pg_cover,.pg_hero{margin-top:1.5rem}
}
@media (prefers-reduced-motion:reduce){
  .lc_step.is-in{animation:none}
  .pg_faq summary i,.pg_faq summary i::after,.pgc_m img{transition:none}
}

/* kerrosnavi: Kirjaston myötä 7 kohdetta; kapealla paperilla pisteet tiiviimmin, jotta rivi ei katkea (390 ja 360 px) */
@container flbar (max-width:480px){
  .fl_nav a:not([aria-current="page"]){min-width:2.1rem;padding:0 .3rem}
  .fl_nav ol{flex-wrap:nowrap}
}

/* ---------- kierros R2 (12.10.2026): alasivujen näyttökokokierros 360…3840 ----------
   1. Pitkä artikkeliotsikko oli 4 riviä joka koolla (360: 29 px, 1366: 47 px, 3840: 112 px). tools/v14content.py jakaa yli
      60 merkin otsikon ensimmäisestä ?:sta tai :sta: pääosa pysyy isona, loppu pienempänä alaotsikkona saman h1:n sisällä. */
.pg .flp_title .pg_tsub{display:block;margin-top:.34em;font-size:max(.56em,1.25rem);line-height:1.16;letter-spacing:-.008em;color:var(--fl-ink-2);text-wrap:balance}
/* 2. Artikkelin metarivi: kapealla rivi katkesi niin, että toinen rivi alkoi erotinpisteellä ("· Verkkokehitys").
      Jokaisella osalla on piste edessään ja rivien alun pisteet leikataan pois (clip-path), joten katkos on siisti. */
.pg_meta{margin-left:calc(-1.4rem - 3px);clip-path:inset(-.5rem -.5rem -.5rem calc(.7rem + 7px))}
.pg_meta > :first-child::before{content:"";display:inline-block;width:3px;height:3px;margin:0 .7rem;border-radius:50%;background:currentColor;vertical-align:middle;opacity:.7}
.pg_meta > a:first-child{background-position:calc(1.4rem + 3px) 100%;background-size:calc(100% - 1.4rem - 3px) 1px}
/* 3. Hintalaskuri: laskuri 40 rem ja osion viiva 46 rem, joten leveällä paperilla (≥ 1440) edistymispalkki ja summarivi
      loppuivat eri kohtaan kuin osion otsakeviiva. Laskuri koko osion levyiseksi (vaihtoehdot ovat ruudukossa). */
.pg_calc{max-width:none}
/* 4. Projektin kuvat omassa kuvasuhteessaan (ennen 4:5-rajaus leikkasi vaakakuvien reunat): rivin sarakkeet
      kuvasuhteiden mukaan (--gc, tools/v14content.py), jolloin parin kuvat ovat yhtä korkeat ilman rajausta. */
.pg_gal{grid-template-columns:var(--gc,repeat(2,minmax(0,1fr)))}
.pg_gal.is-3 figure:first-child,.pg_gal.is-1 figure{grid-column:1 / -1}
/* 5. Alasivun paluulinkki ("Kerros 32 · Takaisin Referenssit", aulasivuilla "Hissillä alas · Aulaan") pienenä cap-rivinä
      kaikissa sivutyypeissä; ennen iso GT Super -rivi, joka projektisivulla näytti samalta kuin "Seuraava projekti". */
.fl_next.is-back{display:flex;align-items:center;justify-content:flex-start;gap:.75rem;padding:1.1rem 0 0;border-top:1px solid var(--fl-line);color:var(--fl-ink-2);transition:color .3s ease}
.fl_next.is-back .cap{margin:0;color:inherit}
.fl_next.is-back .cap b{display:inline;font:inherit;letter-spacing:inherit;color:var(--fl-ink);transition:color .3s ease}
.fl_next.is-back svg{width:2rem;height:2rem;padding:.5rem;border-width:1px;border-color:rgba(17,17,17,.3)}
.fl_next.is-back:hover,.fl_next.is-back:focus-visible{color:var(--fl-ink)}
.fl_next.is-back:hover .cap b,.fl_next.is-back:focus-visible .cap b{color:var(--fl-accent)}
.fl_next.is-back:hover svg,.fl_next.is-back:focus-visible svg{transform:translateY(2px)}
.fl_next.is-back.is-up:hover svg,.fl_next.is-back.is-up:focus-visible svg{transform:translateY(-2px)}

/* ===== kierros 26 blogikortit (12.10.2026) =====
   Alex: blogipostauksen korteille enemmän tilaa. Isommat välit korttien välissä (rivi 2 → 3rem, palsta 1.5 → 2rem),
   kortin sisällä kuva → tunniste → otsikko → ingressi → linkki väljemmin, ja kaksipalstaisena hieman ilmaa paperin
   oikeaan reunaan. Koskee kaikkia isoja kortteja (blogi, artikkelin lisälukemistot, kirjoittajat); pienet (.is-small) ennallaan. */
.pg_cards:not(.is-small){gap:3rem 2rem}
.pg_cards:not(.is-small) .pgc_m{margin-bottom:1.2rem}
.pg_cards:not(.is-small) .pgc :is(h3,h4){margin-top:.75rem}
.pg_cards:not(.is-small) .pgc p{margin-top:.75rem}
.pg_cards:not(.is-small) .pgc_go{padding-top:1.15rem}
@container (min-width:520px){.pg_cards:not(.is-small){gap:3.5rem 2.25rem;padding-right:.75rem}}

/* ===== kierros 26 Asiakas kertoo (12.10.2026) =====
   Projektisivun lainauskortilta puuttui sisäväli: floor.css:n .flq.is-lead (padding .35rem 0 2.25rem) voitti .pg_q:n
   paddingin, joten lainaus, viiva, nimi ja titteli alkoivat kortin vasemmasta reunasta ja alla oli 36 px tyhjää.
   Kortille tasainen sisäväli kuten Tulokset-kerroksen palautelaatikoissa; "Lue koko kommentti" avautuu pehmeästi
   (korkeus ja häivytys, tukevissa selaimissa; muissa avautuu heti kuten ennen). */
.flq.pg_q,.flq.is-lead.pg_q{padding:1.6rem 1.75rem 1.55rem}
.pg_q + .pg_full{margin-top:.75rem}
.pg_full{interpolate-size:allow-keywords}
.pg_full::details-content{block-size:0;overflow:hidden;opacity:0;transition:block-size .5s var(--fl-out),opacity .4s ease,content-visibility .5s allow-discrete}
.pg_full[open]::details-content{block-size:auto;opacity:1}
@media (max-width:899px){.flq.pg_q,.flq.is-lead.pg_q{padding:1.2rem 1.2rem 1.15rem}}
@media (prefers-reduced-motion:reduce){.pg_full::details-content{transition:none}}

/* ---------- kierros 31 (12.10.2026): mobiilin kiinteä alarivi (Takaisin ulos + hissi, floor.css) ----------
   Hintalaskurin sticky-summarivi nousee alarivin yläpuolelle, jotta Seuraava / Lähetä arvio ei jää hissikapselin alle.
   --fl-mbar = alarivin korkeus + safe-area + väli (floor.css). */
@media (max-width:899px){
  .fl .lc_bar{bottom:var(--fl-mbar,0px)}
}

/* kierros 37 (Alex 13.10.2026): alasivujen nappirivit (.pg_btns): tekstilinkit samalle pystytasolle napin tekstin kanssa */
.pg_btns{align-items:center}
.pg_btns .tbtn{align-self:center;padding-top:0;padding-bottom:0;line-height:1;display:inline-flex;align-items:center}
.pg_btns .tbtn .btn_t{line-height:1;padding-bottom:0;background-position:0 calc(100% + 3px)}
/* kierros 37 tarkennus: rivit käyttävät .pg_more-linkkejä, ja floor.css:n .flp_end .btn{margin-top:28px} laski napin 28 px linkkien alle
   (keskikohdat erosivat 14 px). Marginaali siirretään napilta riville, joten nappi pysyy paikallaan ja linkit keskittyvät sen kanssa. */
.flp_end .pg_btns .btn{margin-top:0}
.flp_end .pg_btns:has(> .btn){padding-top:28px}

/* 14.10.2026: blogin vertailutaulukko (ensimmäinen <table> artikkelissa, verkkosivualustat-ai-koodaus-vertailu-2026).
   Kuusi saraketta ei mahdu leipätekstin 62ch-palstaan: taulukko vierii vaakasuunnassa omassa laatikossaan, sivu ei.
   Rivin ensimmäinen solu on rivin otsikko (th scope=row). */
.pg_table{overflow-x:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;border-top:1px solid var(--fl-ink)}
.pg_table table{width:100%;min-width:52rem;border-collapse:collapse;font-size:.875rem;line-height:1.45}
.pg_table :is(th,td){padding:.7rem 1rem .7rem 0;text-align:left;vertical-align:top;border-bottom:1px solid var(--fl-line)}
.pg_table thead th{font-size:.75rem;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--fl-ink-2);white-space:nowrap}
.pg_table tbody th{font-weight:600;min-width:9rem}
.pg_table + p{font-size:.8125rem;color:var(--fl-ink-2)}