/* VMSV.fi
   Varit ja typografia VMSV:n brandimanuaalista (Ad Kiivi 10/2017).
   Tama tiedosto on kasin yllapidettava, build.py ei koske siihen. */

:root {
  --navy: #0C2340;
  --navy-800: #16325a;
  --pinta: #f4f6f9;
  --vihrea: #00B140;
  --vihrea-700: #009134;
  --sininen: #00A3E0;
  --musta: #111418;
  --harmaa: #5b6572;
  --viiva: #dfe3e9;

  --leveys: 1160px;
  --kapea: 760px;
  --reuna: clamp(20px, 5vw, 48px);
  --pyoristys: 4px;

  --otsikko: "Eczar", Georgia, serif;
  --leipa: "Work Sans", Arial, Helvetica, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--leipa);
  font-size: 17px;
  line-height: 1.65;
  color: var(--musta);
  background: #fff;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--navy); text-underline-offset: 3px; }
a:hover { color: var(--vihrea-700); }

h1, h2, h3 {
  font-family: var(--otsikko);
  font-weight: 700;
  line-height: 1.15;
  color: var(--navy);
  margin: 0 0 .5em;
  letter-spacing: -0.01em;
}
h1 { font-size: clamp(2.1rem, 5vw, 3.3rem); }
h2 { font-size: clamp(1.6rem, 3.2vw, 2.2rem); }
h3 { font-size: clamp(1.1rem, 2vw, 1.35rem); }
h4 { font-family: var(--leipa); font-size: .8rem; font-weight: 600;
     letter-spacing: .12em; text-transform: uppercase; margin: 0 0 .8rem; }

p { margin: 0 0 1.1em; }
ul, ol { margin: 0 0 1.2em; padding-left: 1.25em; }
li { margin-bottom: .4em; }

.skip { position: absolute; left: -9999px; }
.skip:focus { left: 12px; top: 12px; background: #fff; padding: .6em 1em; z-index: 300; }

.wrap { width: 100%; max-width: var(--leveys); margin-inline: auto; padding-inline: var(--reuna); }
.wrap.kapea { max-width: var(--kapea); }

section { padding-block: clamp(48px, 7vw, 84px); }
section.pinta { background: var(--pinta); }
section.tumma { background: var(--navy); color: rgba(255,255,255,.86); }
section.tumma h2, section.tumma h3 { color: #fff; }
section.tumma a { color: #fff; }
section.tumma .kicker { color: var(--sininen); }

.kicker {
  font-size: .78rem; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--vihrea-700); margin: 0 0 .9rem;
}
.ingressi { font-size: 1.15rem; color: var(--harmaa); max-width: 62ch; }
section.tumma .ingressi, .hero .ingressi { color: rgba(255,255,255,.82); }
.osio-otsikko { max-width: 68ch; margin-bottom: 2rem; }
.osio-otsikko p:last-child { color: var(--harmaa); margin-bottom: 0; }
section.tumma .osio-otsikko p:last-child { color: rgba(255,255,255,.75); }
.iso { font-size: 1.08rem; }
.viiva { border: 0; border-top: 2px solid var(--vihrea); width: 64px; margin: 0 0 1.4rem; }

/* ---------------------------------------------------------- Painikkeet */
.btn, .kevyt {
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 600; font-size: .95rem; text-decoration: none;
  padding: .8em 1.5em; border-radius: var(--pyoristys);
  border: 2px solid transparent; cursor: pointer; font-family: var(--leipa);
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.btn { background: var(--vihrea); color: #fff; }
.btn:hover { background: var(--vihrea-700); color: #fff; }
.btn.ghost { background: transparent; border-color: currentColor; color: var(--navy); }
.btn.ghost:hover { background: var(--navy); color: #fff; border-color: var(--navy); }
section.tumma .btn.ghost, .hero .btn.ghost { color: #fff; }
section.tumma .btn.ghost:hover, .hero .btn.ghost:hover { background: #fff; color: var(--navy); border-color: #fff; }
.btn.small { padding: .6em 1.1em; font-size: .9rem; }
/* Kevyt linkki .btn-rivissa. Ei vaakapehmustetta eika vaakareunusta,
   jotta sen vasen reuna asettuu samaan linjaan painikkeen kanssa myos
   silloin kun rivi katkeaa kahdelle riville kapealla naytolla.
   Painikkeen ja linkin valin hoitaa .btn-rivin gap. */
.kevyt { background: none; color: var(--navy); text-decoration: underline;
  padding-inline: 0; border-inline-width: 0; }
.hero .kevyt, section.tumma .kevyt { color: #fff; }
.btn-rivi { display: flex; flex-wrap: wrap; gap: .75rem; margin: 1.6rem 0 0; }

/* ---------------------------------------------------------- Ylatunniste */
header.site {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.96);
  backdrop-filter: saturate(140%) blur(6px);
  border-bottom: 1px solid var(--viiva);
}
header.site .bar { display: flex; align-items: center; gap: 1.5rem; min-height: 94px; }
.brand img { height: 48px; width: auto; }
nav.main { margin-left: auto; display: flex; align-items: center; gap: .15rem; }
nav.main > a, .ryhma-nappi {
  display: inline-flex; align-items: center; gap: .4em;
  padding: .55em .8em; font: inherit; font-size: .95rem; font-weight: 500;
  color: var(--navy); text-decoration: none; background: none; border: 0;
  border-radius: var(--pyoristys); cursor: pointer;
}
nav.main > a:hover, .ryhma-nappi:hover { background: var(--pinta); }
nav.main > a[aria-current="page"], .ryhma-nappi[data-aktiivinen] {
  box-shadow: inset 0 -2px 0 var(--vihrea);
}
.ryhma { position: relative; }
.nuoli { width: 0; height: 0; border: 4px solid transparent; border-top-color: currentColor; margin-top: 4px; }
.ryhma-lista {
  position: absolute; top: 100%; left: 0; min-width: 280px; list-style: none;
  margin: 0; padding: .4rem; background: #fff;
  border: 1px solid var(--viiva); border-radius: var(--pyoristys);
  box-shadow: 0 16px 40px rgba(12,35,64,.12);
}
.ryhma-lista li { margin: 0; }
.ryhma-lista a { display: block; padding: .55em .8em; font-size: .93rem; text-decoration: none; border-radius: var(--pyoristys); }
.ryhma-lista a:hover { background: var(--pinta); }
.valikko-nappi {
  display: none; align-items: center; gap: .5em; margin-left: auto;
  background: none; border: 0; font: inherit; font-weight: 500; color: var(--navy); cursor: pointer; padding: .5em;
}
.viivat { display: inline-grid; gap: 3px; }
.viivat i { display: block; width: 20px; height: 2px; background: currentColor; }
#mobiilivalikko { border-top: 1px solid var(--viiva); background: #fff; }
#mobiilivalikko ul { list-style: none; margin: 0; padding: .8rem 0 1.2rem; }
#mobiilivalikko li { margin: 0; }
#mobiilivalikko a { display: block; padding: .5em 0; text-decoration: none; }
.mob-otsikko { font-size: .78rem; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--harmaa); margin-top: 1rem !important; }

/* ---------------------------------------------------------- Hero */
.hero {
  background: var(--navy); color: #fff; position: relative; overflow: hidden;
  padding-block: clamp(60px, 9vw, 120px);
}
.hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(900px 420px at 85% 15%, rgba(0,163,224,.20), transparent 70%);
}

/* Etusivun hero-kuva. Tiedosto kuvat/hero.jpg. Jos sita ei ole, hero jaa
   tummansiniseksi eika mikaan rikkoudu. Paalla on tummennus, jotta valkoinen
   teksti pysyy luettavana kuvasta riippumatta.

   Kuva on rajattu horisontin alapuolelta jo tiedostossa. Alkuperaisessa
   otoksessa nakyi rannan takana teollisuuslaitos, jota ei saa julkaista.
   Rajaus on tehty tiedostoon eika tanne, koska CSS:n rajaus muuttuu
   naytto- ja ikkunakoon mukana eika siihen voi luottaa. Alkuperainen
   kuva on _turva/hero_alkuperainen.jpg. Ala kayta sita sivustolla. */
.hero:not(.pieni) {
  background-image: url("kuvat/hero.jpg");
  background-size: cover;
  background-position: center center;
  padding-block: clamp(80px, 12vw, 170px);
}
.hero:not(.pieni)::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(100deg, rgba(12,35,64,.88) 0%, rgba(12,35,64,.74) 34%, rgba(12,35,64,.46) 62%, rgba(12,35,64,.34) 100%),
    linear-gradient(to top, rgba(12,35,64,.55), transparent 40%);
}
@media (max-width: 760px) {
  .hero:not(.pieni) { background-image: url("kuvat/hero-800.jpg"); }
  .hero:not(.pieni)::before {
    background: linear-gradient(180deg, rgba(12,35,64,.82) 0%, rgba(12,35,64,.7) 55%, rgba(12,35,64,.88) 100%);
  }
}
.hero .wrap { position: relative; z-index: 1; }
.hero:not(.pieni) h1, .hero:not(.pieni) .ingressi, .hero:not(.pieni) .kicker { text-shadow: 0 1px 14px rgba(12,35,64,.45); }
.hero h1 { color: #fff; max-width: 18ch; }
.hero.pieni { padding-block: clamp(44px, 6vw, 76px); }
.hero.pieni h1 { max-width: 22ch; }
.hero .kicker { color: var(--sininen); }

/* Alasivujen kuvalliset hero-osiot. Taustakuva kuvat/<sivu>.jpg, kapealle
   naytolle kuvat/<sivu>-800.jpg. Jos tiedostoa ei ole, hero jaa
   tummansiniseksi eika mikaan rikkoudu. */
.hero.kuvallinen {
  background-size: cover;
  background-position: center;
  padding-block: clamp(56px, 8vw, 104px);
}
.hero.kuvallinen::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(100deg, rgba(12,35,64,.92) 0%, rgba(12,35,64,.80) 36%, rgba(12,35,64,.52) 66%, rgba(12,35,64,.40) 100%),
    linear-gradient(to top, rgba(12,35,64,.55), transparent 45%);
}
.hero.kuvallinen h1,
.hero.kuvallinen .ingressi,
.hero.kuvallinen .kicker { text-shadow: 0 1px 14px rgba(12,35,64,.45); }

.hero--palvelut              { background-image: url("kuvat/kuvituskuva-hitsaus.jpg"); }
.hero--referenssit           { background-image: url("kuvat/referenssit.jpg"); }
.hero--kalusto               { background-image: url("kuvat/kalusto.jpg"); }
.hero--vesistokalusto        { background-image: url("kuvat/kelluvat-kaivinkoneet.jpg"); }
.hero--tyokoneet             { background-image: url("kuvat/tyokoneet.jpg"); }
.hero--alitukset             { background-image: url("kuvat/alitukset.jpg"); }
.hero--putkityo              { background-image: url("kuvat/putkityo.jpg"); }
.hero--sulatus               { background-image: url("kuvat/sulatus.jpg"); }
.hero--yritystarinat         { background-image: url("kuvat/yritystarinat.jpg"); }
.hero--toihin                { background-image: url("kuvat/toihin-meille.jpg"); }
.hero--yhteys                { background-image: url("kuvat/yhteystiedot.jpg"); }
.hero--vesihuoltolaitoksille { background-image: url("kuvat/vesihuoltolaitoksille.jpg"); }
.hero--kunnille              { background-image: url("kuvat/kunnille.jpg"); }
.hero--valtiolle             { background-image: url("kuvat/valtiolle.jpg"); }
.hero--teollisuudelle        { background-image: url("kuvat/teollisuudelle.jpg"); }
.hero--rakennusliikkeille    { background-image: url("kuvat/rakennusliikkeille.jpg"); }
.hero--datakeskuksille       { background-image: url("kuvat/datakeskuksille.jpg"); }
.hero--suunnittelijoille     { background-image: url("kuvat/suunnittelijoille.jpg"); }

@media (max-width: 760px) {
  .hero.kuvallinen::before {
    background: linear-gradient(180deg, rgba(12,35,64,.80) 0%, rgba(12,35,64,.62) 52%, rgba(12,35,64,.88) 100%);
  }
  .hero--palvelut              { background-image: url("kuvat/kuvituskuva-hitsaus-800.jpg"); }
  .hero--referenssit           { background-image: url("kuvat/referenssit-800.jpg"); }
  .hero--vesistokalusto        { background-image: url("kuvat/kelluvat-kaivinkoneet-800.jpg"); }
  .hero--tyokoneet             { background-image: url("kuvat/tyokoneet-800.jpg"); }
  .hero--alitukset             { background-image: url("kuvat/alitukset-800.jpg"); }
  .hero--putkityo              { background-image: url("kuvat/putkityo-800.jpg"); }
  .hero--sulatus               { background-image: url("kuvat/sulatus-800.jpg"); }
  .hero--yritystarinat         { background-image: url("kuvat/yritystarinat-800.jpg"); }
  .hero--toihin                { background-image: url("kuvat/toihin-meille-800.jpg"); }
  .hero--yhteys                { background-image: url("kuvat/yhteystiedot-800.jpg"); }
  .hero--vesihuoltolaitoksille { background-image: url("kuvat/vesihuoltolaitoksille-800.jpg"); }
  .hero--kunnille              { background-image: url("kuvat/kunnille-800.jpg"); }
  .hero--valtiolle             { background-image: url("kuvat/valtiolle-800.jpg"); }
  .hero--rakennusliikkeille    { background-image: url("kuvat/rakennusliikkeille-800.jpg"); }
  .hero--datakeskuksille       { background-image: url("kuvat/datakeskuksille-800.jpg"); }
  .hero--suunnittelijoille     { background-image: url("kuvat/suunnittelijoille-800.jpg"); }
}

/* Leveaksi vedetty kuvakaista osioiden valissa. */
.kuvakaista {
  display: block; width: 100%; height: clamp(220px, 30vw, 420px);
  object-fit: cover; object-position: center 55%; background: var(--navy);
}

/* ---------------------------------------------------------- Paneelit */
/* Kaksi palvelualuetta vierekkain. Taustakuvat kuvat/paneeli-*.jpg;
   jos niita ei ole, paneeli jaa tummansiniseksi eika mikaan rikkoudu. */
.paneelit {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px;
  padding: 0; background: var(--viiva);
}
.paneeli {
  position: relative; display: flex; text-decoration: none; color: #fff;
  background-color: var(--navy); background-size: cover; background-position: center;
  min-height: clamp(300px, 26vw, 380px); overflow: hidden;
}
.paneeli::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(12,35,64,.55) 0%, rgba(12,35,64,.78) 55%, rgba(12,35,64,.92) 100%);
  transition: background .2s ease;
}
.paneeli:hover::before {
  background: linear-gradient(180deg, rgba(12,35,64,.45) 0%, rgba(12,35,64,.7) 55%, rgba(12,35,64,.9) 100%);
}
.paneeli-sisus {
  position: relative; z-index: 1; width: 100%;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: clamp(28px, 4vw, 52px);
}
.paneeli h2 { color: #fff; margin-bottom: .5rem; }
.paneeli p { color: rgba(255,255,255,.88); max-width: 32ch; margin-bottom: 1rem; }
.paneeli .kicker { color: var(--sininen); }
.paneeli-linkki {
  font-weight: 600; font-size: .95rem; color: #fff;
  border-bottom: 2px solid var(--vihrea); padding-bottom: 3px; align-self: flex-start;
}
.paneeli--vesisto { background-image: url("kuvat/paneeli-vesistotyot.jpg"); }
.paneeli--verkosto { background-image: url("kuvat/paneeli-verkostot.jpg"); }
.paneeli--poraus { background-image: url("kuvat/paneeli-suuntaporaus.jpg"); }

@media (max-width: 1040px) {
  .paneelit { grid-template-columns: 1fr; }
  .paneeli { min-height: 300px; }
  .paneeli p { max-width: 46ch; }
  .paneeli--poraus { background-image: url("kuvat/paneeli-suuntaporaus-800.jpg"); }
}

.lupaus-jatko { margin-top: 1.1rem; color: var(--harmaa); max-width: 46ch; }
/* Kalustosivujen johdanto: teksti kapeana, mutta samassa vasemmassa
   reunassa kuin sen alla oleva leveä sisalto. */
.johdanto-leveys { max-width: 56ch; }

/* Kuva tekstipalstan vierella. Sama korkeus ei ole tavoite: kuva asettuu
   ylareunaan ja saa oman mittasuhteensa. */
.palsta-kuva { margin: 0; }
.palsta-kuva img {
  display: block; width: 100%; height: auto;
  border-radius: var(--pyoristys);
}

/* ---------------------------------------------------------- Palvelualueet */
/* Asiakasryhmasivun palvelut esiteltyna vuorollaan: otsikko ja johdanto
   vasemmalla, sisalto oikealla. Kortti mahtuu kolmeen riviin, lohkoon
   mahtuu se mika oikeasti myy. Kaytossa niilla ryhmilla, joilla on
   'alueet'; muut kayttavat edelleen .ruudukko kolme -kortteja. */
.alueet { display: grid; gap: 0; }
.alue {
  display: grid; grid-template-columns: minmax(200px, 1fr) 2fr;
  gap: clamp(1.5rem, 4vw, 3rem);
  padding-block: clamp(1.8rem, 3.5vw, 2.8rem);
  border-top: 1px solid var(--viiva);
}
.alue:first-child { border-top: 0; padding-top: 0; }
.alue-otsikko h3 { margin-bottom: .5rem; }
.alue-otsikko p { color: var(--harmaa); max-width: 30ch; }
.alue-sisus > *:first-child { margin-top: 0; }
.alue-alaotsikko {
  font-family: var(--leipa); font-size: .8rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--harmaa);
  margin: 1.4rem 0 .5rem;
}
.alue-sisus > .alue-alaotsikko:first-child { margin-top: 0; }
.alue-huomio { font-size: .9rem; color: var(--harmaa); margin-top: 1rem; }
.alue .btn-rivi { margin-top: 1.2rem; }

@media (max-width: 760px) {
  .alue { grid-template-columns: 1fr; gap: 1rem; }
}

/* Huolehdimme myos naista. Ei valittava palvelu vaan toimituksen sisaltoa,
   joten oma laatikkonsa alueiden alla eika kuudes alue. */
.mukana {
  background: #fff; border: 1px solid var(--viiva);
  border-radius: var(--pyoristys);
  padding: clamp(1.4rem, 3vw, 2rem);
  margin-top: clamp(1.8rem, 3.5vw, 2.8rem);
}
.mukana h3 { margin-bottom: .4rem; }
.mukana > p { color: var(--harmaa); margin-bottom: 1.1rem; max-width: 60ch; }
.kaksipalstaa { columns: 2; column-gap: clamp(1.5rem, 4vw, 3rem); }
.kaksipalstaa li { break-inside: avoid; }
@media (max-width: 700px) { .kaksipalstaa { columns: 1; } }

/* ---------------------------------------------------------- Ruudukot */
.ruudukko { display: grid; gap: 1.25rem; }
.ruudukko.kaksi { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.ruudukko.kolme { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.ruudukko.nelja { grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); }
.kaksi { display: grid; gap: 2.5rem; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }

.kortti {
  background: #fff; border: 1px solid var(--viiva); border-radius: var(--pyoristys);
  padding: 1.5rem; display: flex; flex-direction: column;
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
a.kortti { text-decoration: none; color: inherit; }
a.kortti:hover { border-color: var(--vihrea); transform: translateY(-2px); box-shadow: 0 12px 28px rgba(12,35,64,.08); }
.kortti h3 { margin-bottom: .4rem; }
.kortti p { color: var(--harmaa); font-size: .97rem; margin-bottom: 1rem; }
.kortti > :last-child { margin-bottom: 0; margin-top: auto; }
.lisaa { font-weight: 600; font-size: .92rem; color: var(--vihrea-700); }
.pvm { font-size: .82rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--harmaa) !important; font-weight: 600; margin-bottom: .4rem !important; }

.lippu {
  display: inline-block; font-size: .75rem; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; background: #fff4d6; color: #7a5600;
  padding: .25em .7em; border-radius: 100px; margin-bottom: .8rem;
}
.laatikko { border-left: 3px solid var(--vihrea); background: var(--pinta);
  padding: 1.3rem 1.4rem; border-radius: var(--pyoristys); }
.laatikko > :last-child { margin-bottom: 0; }
.laatikko h3 { margin-top: 0; }
.taydenna { border: 1px dashed var(--vihrea); background: #fff; padding: 1.2rem 1.4rem;
  border-radius: var(--pyoristys); color: var(--harmaa); }
.taydenna b { color: var(--navy); }

.merkitty { list-style: none; padding: 0; }
.merkitty li { position: relative; padding-left: 1.4em; }
.merkitty li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 8px; height: 8px; background: var(--vihrea); border-radius: 2px;
}

/* ---------------------------------------------------------- Luvut */
.luvut { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1.6rem; align-items: start; }
/* Kuusi lukua asettuu 3 x 2 -ruudukkoon. Ilman tata auto-fit tekee viisi
   saraketta ja kuudes jaa yksin omalle rivilleen. */
@media (min-width: 900px) { .luvut:not(.pienet) { grid-template-columns: repeat(3, 1fr); } }
.luvut > div { display: grid; }
.luku { font-family: var(--otsikko); font-size: clamp(2rem, 4vw, 2.8rem); color: #fff; line-height: 1.05; }
.luku-teksti { font-size: .95rem; color: rgba(255,255,255,.72); margin-top: .4rem; }
.luku-huom { font-size: .8rem; color: var(--sininen); margin-top: .2rem; }

/* Asiakastyytyvaisyysluvut. Selite kertoo mita luku tarkoittaa ja
   lahdemerkinta mihin se perustuu. Lahdemerkinta on pakollinen: vastaajia
   on 24, joten luku on uskottava vain silloin kun lukija nakee lahteen. */
.luku-selite {
  display: block; font-size: .92rem; line-height: 1.45;
  color: rgba(255,255,255,.80); margin-top: .45rem; max-width: 34ch;
}
.luku-lahde {
  display: block; font-size: .76rem; line-height: 1.4;
  color: rgba(255,255,255,.55); margin-top: .3rem; max-width: 36ch;
}
/* Erotinviiva vain silloin kun valissa on selite. */
.luku-selite + .luku-lahde {
  margin-top: .5rem; padding-top: .45rem;
  border-top: 1px solid rgba(255,255,255,.14);
}
section:not(.tumma) .luku-selite { color: var(--harmaa); }
section:not(.tumma) .luku-lahde { color: var(--harmaa); }
section:not(.tumma) .luku-selite + .luku-lahde { border-top-color: var(--viiva); }

/* Korostettu luku: strategian kannalta keskeinen mittari.
   Korostus on vihrea viiva ja hieman isompi numero, ei eri vari,
   jotta palkki pysyy yhtenaisena. */
.luku-korostettu { border-left: 3px solid var(--vihrea); padding-left: 1.1rem; }
.luku-korostettu .luku { font-size: clamp(2.3rem, 4.6vw, 3.2rem); }
.luvut.pienet .luku-korostettu .luku { font-size: clamp(1.5rem, 3vw, 2rem); }
@media (max-width: 760px) {
  .luku-korostettu { padding-left: .9rem; }
}
/* Sama lukupalkki toimii myos vaalealla pohjalla, pienempana. */
section:not(.tumma) .luku { color: var(--navy); }
section:not(.tumma) .luku-teksti { color: var(--harmaa); }
section:not(.tumma) .luku-huom { color: var(--vihrea-700); }
.luvut.pienet { gap: 1.2rem; margin: 1.4rem 0; }
.luvut.pienet .luku { font-size: clamp(1.4rem, 3vw, 1.9rem); }
.luvut.pienet .luku-teksti { font-size: .88rem; }

/* ---------------------------------------------------------- Henkilo */
.henkilo { display: flex; gap: 1rem; align-items: center; margin-bottom: 1rem; }
.henkilo-kuva {
  width: 64px; height: 64px; border-radius: 50%; flex: none;
  background: rgba(255,255,255,.12); display: grid; place-items: center;
  font-family: var(--otsikko); font-size: 1rem; color: inherit;
}
section:not(.tumma) .henkilo-kuva { background: var(--pinta); color: var(--navy); }

/* Henkilokortti: rintakuva kortin vasemmassa laidassa, tiedot oikealla.
   Ruudukko on kaksipalstainen, jotta kortti on riittavan leveä eika kuva
   jaa kapeaksi kaistaleeksi. Kuvasuhde 4:5 ja kortin vahimmaiskorkeus on
   mitoitettu niin, ettei kuvaa tarvitse rajata kortissa uudelleen. */
.ruudukko.ihmiset {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
}
.henkilokortti { padding: 0; min-height: 260px; }
.henkilokortti .henkilo-sisus {
  padding: 1.75rem; margin-top: 0; flex: 1 1 auto;
  display: flex; flex-direction: column; justify-content: center;
}
.henkilokortti.kuvallinen {
  flex-direction: row; align-items: stretch; gap: 0; overflow: hidden;
}
.henkilokortti.kuvallinen > .henkilo-kasvot {
  flex: 0 0 40%; max-width: 230px;
  position: relative; overflow: hidden; background: #e6e6e6;
}
.henkilokortti.kuvallinen > .henkilo-kasvot img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 0%;
}
/* Ilman valokuvaa vasempaan laitaan tulee sama paneeli VMSV-merkilla,
   jotta kortit pysyvat samanrytmisina kunnes kuvat on kuvattu. */
.henkilokortti.kuvallinen > .henkilo-kasvot.tyhja {
  background: var(--pinta); display: grid; place-items: center;
}
.henkilokortti.kuvallinen > .henkilo-kasvot.tyhja img {
  position: static; width: 52px; height: 52px; opacity: .35;
  object-fit: contain;
}
}
}
.henkilo-nimi { font-weight: 600; }
.henkilo-rooli { font-size: .9rem; opacity: .75; }

/* ---------------------------------------------------------- Kysymykset */
details {
  border-bottom: 1px solid var(--viiva); padding: .9rem 0;
}
summary { font-weight: 600; cursor: pointer; list-style: none; }
summary::-webkit-details-marker { display: none; }
summary::before { content: "+ "; color: var(--vihrea-700); font-weight: 700; }
details[open] summary::before { content: "\2212 "; }
details > div { padding-top: .5rem; color: var(--harmaa); }
details > div p:last-child { margin-bottom: 0; }

/* ---------------------------------------------------------- Taulukko */
.taulukko-kaari { overflow-x: auto; }
.taulukko { width: 100%; border-collapse: collapse; font-size: .95rem; }
.taulukko th, .taulukko td { text-align: left; padding: .75em .8em; border-bottom: 1px solid var(--viiva); vertical-align: top; }
.taulukko th { color: var(--navy); font-weight: 600; white-space: nowrap; }
.taulukko-kaari + h2, .taulukko-kaari + h3, .taulukko-kaari + p { margin-top: 1.7rem; }

/* ---------------------------------------------------------- Lomake */
.lomake { display: grid; gap: 1rem; max-width: 640px; }
.kentta { display: grid; gap: .35rem; }
.kentta label { font-weight: 600; font-size: .92rem; }
.kentta input, .kentta select, .kentta textarea {
  font: inherit; font-size: .97rem; padding: .7em .85em; width: 100%;
  border: 1px solid var(--viiva); border-radius: var(--pyoristys); background: #fff;
}
.kentta input:focus, .kentta select:focus, .kentta textarea:focus {
  outline: 2px solid var(--sininen); outline-offset: 1px; border-color: var(--sininen);
}
.kentta textarea { min-height: 130px; resize: vertical; }
.pari { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.vihje { font-size: .88rem; color: var(--harmaa); }
.piilo { position: absolute; left: -9999px; }

/* ---------------------------------------------------------- Polku ja paatos */
.polku { font-size: .87rem; color: var(--harmaa); padding-block: 1.1rem 0; }
.polku a { color: var(--harmaa); }
.polku span { margin-inline: .45em; }
.paatos { background: var(--navy); color: rgba(255,255,255,.86); text-align: center; }
.paatos h2 { color: #fff; }
.paatos p { max-width: 58ch; margin-inline: auto; }
.paatos .btn-rivi { justify-content: center; }
.paatos .btn.ghost { color: #fff; }
.paatos .btn.ghost:hover { background: #fff; color: var(--navy); border-color: #fff; }

/* ---------------------------------------------------------- Artikkeli */
.artikkeli h2 { margin-top: 2rem; }
.artikkeli h3 { margin-top: 1.6rem; }
.kirjoittaja { margin-top: 2rem; font-size: .92rem; color: var(--harmaa, #5a6472); }

/* Artikkelin kuvagalleria. Kuvat ovat kuvat/artikkelit/. */
.galleria { display: grid; gap: 1.6rem; margin: 2.4rem 0 0;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.gallerian-kuva { margin: 0; }
.gallerian-kuva img { display: block; width: 100%; height: auto;
  aspect-ratio: 4 / 3; object-fit: cover; background: var(--viiva, #e3e7ec); }
.gallerian-kuva figcaption { margin-top: .55rem; font-size: .88rem; line-height: 1.45;
  color: var(--harmaa, #5a6472); }
.galleria:has(.gallerian-kuva:only-child) { grid-template-columns: 1fr; }
.galleria .gallerian-kuva:only-child img { aspect-ratio: auto; }

/* Leipatekstin kuva ja videoupotus */
.sisakuva { margin: 2rem 0; }
.sisakuva img { display: block; width: 100%; height: auto; }
.sisakuva figcaption { margin-top: .55rem; font-size: .88rem; color: var(--harmaa); }
.upotus { position: relative; margin: 2rem 0; aspect-ratio: 16 / 9; background: var(--navy); }
.upotus iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* hidden-attribuutti on voitettava display-saannot. Ilman tata esimerkiksi
   .referenssi-kortit jaavat nakyviin vaikka skripti piilottaa ne, koska
   niilla on display: flex. */
[hidden] { display: none !important; }

/* ---------------------------------------------------------- Referenssihaku */
.suodattimet { display: grid; gap: 1rem 1.4rem; margin-bottom: 1.6rem;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); align-items: end; }
.suodattimet .haku { grid-column: span 2; }
@media (max-width: 720px) { .suodattimet .haku { grid-column: auto; } }

.osumat { display: flex; align-items: baseline; gap: .6rem; margin: 0 0 1.8rem;
  padding-bottom: 1.2rem; border-bottom: 1px solid var(--viiva);
  font-size: .95rem; color: var(--harmaa); }
.osumat b { font-family: var(--otsikko); font-size: 1.5rem; color: var(--navy); }
.osumat button { margin-left: auto; }

.referenssit { display: grid; gap: 1.4rem;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); }

.referenssi { border: 1px solid var(--viiva); border-radius: var(--pyoristys);
  padding: 1.3rem 1.4rem 1.1rem; background: #fff;
  display: flex; flex-direction: column; gap: .6rem; }
.referenssi .kohdevuosi { margin: 0; font-size: .8rem; font-weight: 600;
  letter-spacing: .08em; color: var(--sininen); }
.referenssi h3 { margin: 0; font-size: 1.08rem; line-height: 1.25; }
.referenssi .kuvaus { margin: 0; font-size: .93rem; color: var(--harmaa); }
.referenssi dl { margin: 0; display: grid; grid-template-columns: auto 1fr;
  gap: .2rem .8rem; font-size: .9rem; }
.referenssi dt { color: var(--harmaa); }
.referenssi dd { margin: 0; }
.referenssi .tagit { margin-top: auto; padding-top: .7rem;
  display: flex; flex-wrap: wrap; gap: .35rem; }
.tagi { font-size: .76rem; letter-spacing: .03em; padding: .2rem .55rem;
  border-radius: 999px; background: var(--pinta); color: var(--navy);
  border: 1px solid var(--viiva); }

/* ---------------------------------------------------------- Kuvaajat */
/* Putkikokemus ja referenssikartta. SVG:n build.py kirjoittaa itse, tassa
   vain ulkoasu. Tekstien varit ovat luokissa, koska CSS voittaa SVG:n
   esitysattribuutin. */
.kaavio svg, .kehat svg, .kartta svg {
  display: block; width: 100%; height: auto; overflow: visible; }
.kartta svg { max-height: min(78vh, 720px); width: auto; margin-inline: auto; }
.kehat { margin: 0; }
.mitta { fill: var(--harmaa); font-size: 11px; font-family: var(--leipa); }
.mitta-tumma { fill: var(--navy); font-size: 11px; font-weight: 600;
  font-family: var(--leipa); }
.ristikko { stroke: var(--viiva); stroke-width: 1; }
.osoita { cursor: default; }
.kuvateksti { font-size: .88rem; color: var(--harmaa); margin-top: .9rem;
  max-width: 60ch; }

/* Laitteen tekniset tiedot nimi-arvo-pareina. Kaytossa kalustosivuilla. */
.tiedot { margin: 0; }
.tiedot > div {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 1.25rem; padding: .5rem 0; border-top: 1px solid var(--viiva);
}
.tiedot > div:first-of-type { border-top: 0; padding-top: 0; }
.tiedot dt { color: var(--harmaa); font-size: .92rem; }
.tiedot dd { margin: 0; font-weight: 600; font-size: .95rem; text-align: right; }

/* Laiterivi: kuva ja tietolaatikko rinnakkain, mobiilissa allekkain. */
.laiterivi {
  display: grid; gap: clamp(1.25rem, 3vw, 2.5rem); align-items: start;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
}
.laiterivi + .laiterivi { margin-top: clamp(2rem, 4vw, 3rem); }

.vihjelaatikko { position: fixed; pointer-events: none; z-index: 60;
  background: var(--navy); color: #fff; padding: .5rem .7rem;
  border-radius: var(--pyoristys); font-size: .85rem; line-height: 1.45;
  max-width: 260px; box-shadow: 0 6px 24px rgba(12,35,64,.28);
  opacity: 0; transition: opacity .12s; }
.vihjelaatikko.nakyy { opacity: 1; }

.taulukko { border-collapse: collapse; width: 100%; font-size: .92rem; }
.taulukko th, .taulukko td { text-align: left; padding: .5rem .7rem;
  border-bottom: 1px solid var(--viiva); }
.taulukko th { font-size: .78rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--navy); }
.taulukko .num, .taulukko th.num { text-align: right;
  font-variant-numeric: tabular-nums; }
.taulukko .vaalea { color: var(--harmaa); }

.lisatiedot { margin-top: 2rem; border-top: 1px solid var(--viiva);
  padding-top: 1rem; }
.lisatiedot summary { cursor: pointer; font-weight: 500; color: var(--navy);
  font-size: .95rem; }
.lisatiedot summary:hover { text-decoration: underline; }
.lisatiedot .taulukko { margin-top: 1.2rem; }

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

/* ---------------------------------------------------------- Alatunniste */
footer.site { background: var(--navy); color: rgba(255,255,255,.72); padding-block: clamp(40px, 6vw, 68px) 26px; }
footer.site a { color: rgba(255,255,255,.85); text-decoration: none; }
footer.site a:hover { color: #fff; text-decoration: underline; }
footer.site h4 { color: #fff; }
footer.site ul { list-style: none; padding: 0; margin: 0; }
footer.site li { margin-bottom: .45em; font-size: .95rem; }
/* width: auto on pakollinen: img-elementissa on width="150" height="50",
   ja pelkka korkeuden asettaminen jattaisi leveyden 150 pikseliin, jolloin
   logo venyisi. Sama syy kuin .brand img -saannossa. */
.footlogo { height: 36px; width: auto; margin-bottom: 1rem; }
.footgrid { display: grid; gap: 2.5rem; grid-template-columns: 1.4fr repeat(calc(var(--sarakkeet) - 1), 1fr); }
.footbrand p { font-size: .95rem; }
.laki { margin: 2.4rem 0 0; padding-top: 1.3rem; border-top: 1px solid rgba(255,255,255,.14); font-size: .86rem; }

/* ---------------------------------------------------------- Kapea naytto */
@media (max-width: 960px) {
  nav.main { display: none; }
  header.site .btn.small { display: none; }
  .valikko-nappi { display: inline-flex; }
  .footgrid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .footgrid { grid-template-columns: 1fr; }
  .pari { grid-template-columns: 1fr; }
}