/* Kotibuukkaus Oy — sivuston tyylit
   Lämmin toimituksellinen järjestelmä: Instrument Serif otsikoissa, Instrument Sans
   leipätekstissä, kaurainen paperitausta ja hiusviivat laatikoiden sijaan.
   Kuvitus on piirretty tänne CSS-maskeina; valokuvia ei ole ennen kuin asiakas
   lataa omansa kuvakenttiin. */

/* ------------------------------------------------------------------ fontit */
/* Itse isännöity: julkaistun sivun CSP on font-src 'self', joten ulkopuolista
   fonttipalvelua ei voi käyttää. Molemmat OFL-lisensoituja, ks. fonts/OFL.txt. */
@font-face {
  font-family: "Instrument Sans";
  src: url("fonts/instrument-sans.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

/* ------------------------------------------------------------------ tokens */
:root {
  --paperi:    #EFECE5;
  --paperi-2:  #F7F5F0;
  --valko:     #FFFFFF;
  --muste:     #1C1B18;
  --muste-2:   #2A2823;
  --utu:       #635E55;
  --utu-vaalea:#A9A296;
  --viiva:     #DCD6C9;
  --viiva-tumma: rgba(255, 255, 255, .14);

  --vihrea:      #6DA544;
  --vihrea-syva: #3F6B27;
  --vihrea-tumma:#2F5220;
  --vihrea-kirkas:#9BD46E;
  --vihrea-usva: #E3EDD7;

  --leveys: 1120px;
  --kapea: 720px;
  --reuna: clamp(1.25rem, 5vw, 3.5rem);
  --osio-pysty: clamp(4.5rem, 8vw, 8rem);
  --pyoristys: 20px;
  --pyoristys-s: 12px;

  --nosto: 0 1px 2px rgba(28, 27, 24, .04), 0 16px 40px rgba(28, 27, 24, .07);
  --nosto-iso: 0 2px 6px rgba(28, 27, 24, .05), 0 30px 70px rgba(28, 27, 24, .11);

  --kaari: cubic-bezier(.22, .7, .3, 1);

  --sans: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;
}

/* -------------------------------------------------------------------- base */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paperi);
  color: var(--muste);
  font-family: var(--sans);
  font-size: clamp(1rem, .98rem + .12vw, 1.06rem);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Otsikot ovat samaa groteskia kuin logo ja leipäteksti — asiakas ei halunnut
   antiikvaa (16.9.2026). Paino ja tiukka välistys tekevät hierarkian. */
h1, h2 {
  margin: 0;
  font-family: var(--sans);
  font-weight: 600;
  letter-spacing: -.03em;
  line-height: 1.04;
  text-wrap: balance;
}
h1 { font-size: clamp(2.3rem, 1.4rem + 3.6vw, 4.2rem); }
h2 { font-size: clamp(1.75rem, 1.25rem + 2vw, 2.8rem); }
h3 {
  margin: 0;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 1.06rem;
  letter-spacing: -.01em;
  line-height: 1.35;
}
p { margin: 0; }
img { max-width: 100%; height: auto; display: block; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; }

[hidden] { display: none !important; }

:focus-visible {
  outline: 2px solid var(--muste);
  outline-offset: 3px;
  border-radius: 3px;
}
.osio-tumma :focus-visible,
.kutsu :focus-visible,
.alatunniste :focus-visible { outline-color: var(--vihrea-kirkas); }

.ohita {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--muste); color: #fff;
  padding: .8rem 1.2rem; font-weight: 600;
}
.ohita:focus { left: 0; }

.vain-ruudunlukija {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ------------------------------------------------------------- typografia */
.ylaotsikko {
  font-size: .73rem;
  font-weight: 600;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--utu);
  margin-bottom: 1.4rem;
}
.lede {
  font-size: clamp(1.04rem, 1rem + .34vw, 1.18rem);
  line-height: 1.6;
  color: var(--utu);
  max-width: 44ch;
}
.osio-lede {
  font-size: clamp(1rem, .98rem + .22vw, 1.1rem);
  color: var(--utu);
  max-width: 54ch;
}

/* ----------------------------------------------------------------- layout */
.osio { padding: var(--osio-pysty) var(--reuna); position: relative; }
.osio > * { max-width: var(--leveys); margin-inline: auto; }
.osio-vaalea { background: var(--paperi-2); }

/* Osion otsake on keskitetty ja kapea — sama rytmi joka osiossa. */
.osio-otsake {
  max-width: var(--kapea);
  margin: 0 auto clamp(2.6rem, 5vw, 4.2rem);
  text-align: center;
}
.osio-otsake .osio-lede { margin: 1.1rem auto 0; }
h2 + .osio-lede, h2 + .lede { margin-top: 1.1rem; }

.osio-tumma { background: var(--muste); color: #fff; }
.osio-tumma .osio-lede, .osio-tumma .lede { color: var(--utu-vaalea); }
.osio-tumma .ylaotsikko { color: var(--utu-vaalea); }

/* ---------------------------------------------------------------- napit */
.nappi {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .92rem 1.6rem;
  border-radius: 999px;
  background: var(--muste);
  color: #fff;
  font-family: var(--sans);
  font-weight: 600;
  font-size: .94rem;
  letter-spacing: -.005em;
  text-decoration: none;
  white-space: nowrap;
  transition: transform .3s var(--kaari), background-color .25s ease,
              box-shadow .3s var(--kaari), border-color .25s ease;
}
.nappi:hover { background: #000; transform: translateY(-2px); box-shadow: var(--nosto); }
.nappi-iso { padding: 1.05rem 1.9rem; font-size: 1rem; }
.nappi-levea { width: 100%; justify-content: center; }

.nappi-reunus {
  background: transparent;
  color: var(--muste);
  border: 1px solid var(--viiva);
}
.nappi-reunus:hover { background: transparent; border-color: var(--muste); }

.nappi-vaalea { background: var(--valko); color: var(--muste); }
.nappi-vaalea:hover { background: var(--valko); }

.nuoli {
  width: .82em; height: .82em; flex: none;
  background: currentColor;
  transition: transform .3s var(--kaari);
  -webkit-mask: var(--nuoli-kuva) center / contain no-repeat;
          mask: var(--nuoli-kuva) center / contain no-repeat;
  --nuoli-kuva: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13M12.5 5.5L19 12l-6.5 6.5'/%3E%3C/svg%3E");
}
.nappi:hover .nuoli, .tekstilinkki:hover .nuoli { transform: translateX(3px); }
.nuoli-alas { transform: rotate(90deg); }
.nappi:hover .nuoli-alas { transform: rotate(90deg) translateX(3px); }

.tekstilinkki {
  display: inline-flex; align-items: center; gap: .45rem;
  color: var(--muste);
  font-weight: 600; font-size: .95rem;
  text-decoration: none;
  margin-top: auto;
  padding-top: 1.6rem;
}
.tekstilinkki:hover { color: var(--vihrea-syva); }

/* --------------------------------------------------------------- ylapalkki */
.ylapalkki {
  position: sticky; top: 0; z-index: 50;
  background: var(--paperi);
  border-bottom: 1px solid transparent;
  transition: border-color .3s ease, box-shadow .3s ease;
}
.ylapalkki[data-kiinni] { border-bottom-color: var(--viiva); }
.ylapalkki-sisalto {
  max-width: var(--leveys); margin-inline: auto;
  display: flex; align-items: center; gap: clamp(1rem, 3vw, 2.5rem);
  padding: 1.1rem var(--reuna);
  transition: padding .3s var(--kaari);
}
.ylapalkki[data-kiinni] .ylapalkki-sisalto { padding-block: .8rem; }

/* Tunnus on nyt asiakkaan oikea logo (sähköposti Konsta 9.9.2026), ei tekstiä.
   Logo ladotaan sloganin päälle samaan pystysuuntaiseen pinoon. */
.tunnus { display: flex; flex-direction: column; align-items: flex-start; gap: .2rem;
          text-decoration: none; margin-right: auto; }
.tunnus-logo { display: block; width: auto; height: clamp(26px, 2.4vw, 32px); }
.alatunniste-logo { display: block; width: auto; height: 34px; margin-bottom: 1rem; }
.tunnus-slogan {
  font-size: .7rem; color: var(--utu); letter-spacing: .01em; margin-top: .1rem;
}

.paavalikko { display: flex; gap: clamp(1.1rem, 2vw, 2rem); }
.paavalikko a {
  text-decoration: none; font-weight: 500; font-size: .92rem;
  color: var(--utu); padding: .3rem 0; position: relative;
  transition: color .2s ease;
}
.paavalikko a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--muste);
  transform: scaleX(0); transform-origin: left;
  transition: transform .3s var(--kaari);
}
.paavalikko a:hover { color: var(--muste); }
.paavalikko a:hover::after, .paavalikko a[aria-current]::after { transform: scaleX(1); }
.paavalikko a[aria-current] { color: var(--muste); }

.valikkonappi {
  display: none; width: 40px; height: 40px; flex: none;
  border: 1px solid var(--viiva); border-radius: 999px;
  background: transparent; cursor: pointer; padding: 0; position: relative;
}
.valikkonappi-viiva {
  position: absolute; left: 11px; right: 11px; height: 1.5px;
  background: var(--muste);
  transition: transform .3s var(--kaari);
}
.valikkonappi-viiva:nth-child(1) { top: 15px; }
.valikkonappi-viiva:nth-child(2) { top: 23px; }
.valikkonappi[aria-expanded="true"] .valikkonappi-viiva:nth-child(1) { transform: translateY(4px) rotate(45deg); }
.valikkonappi[aria-expanded="true"] .valikkonappi-viiva:nth-child(2) { transform: translateY(-4px) rotate(-45deg); }

.mobiilivalikko {
  display: flex; flex-direction: column;
  padding: .4rem var(--reuna) 1.4rem;
  border-top: 1px solid var(--viiva);
  background: var(--paperi);
}
.mobiilivalikko a {
  padding: .85rem 0; text-decoration: none; font-weight: 500; font-size: 1.05rem;
  border-bottom: 1px solid var(--viiva);
}
.mobiilivalikko a:last-child { border-bottom: 0; }

/* ------------------------------------------------------------------- hero */
/* Reunasta reunaan, kuva parallaksina tekstin takana. */
.hero {
  position: relative;
  min-height: min(92vh, 860px);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--muste);
  isolation: isolate;
}
.hero-tausta {
  /* Ylimitoitus kattaa parallaksin liikkeen myös korkeilla näytöillä. */
  position: absolute; inset: -34% 0; z-index: 0;
  will-change: transform;
}
.hero-tausta img { width: 100%; height: 100%; object-fit: cover; }
.hero-varjo {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(to top, rgba(10, 12, 10, .86) 0%, rgba(10, 12, 10, .5) 38%, rgba(10, 12, 10, .12) 72%),
    linear-gradient(to right, rgba(10, 12, 10, .9) 0%, rgba(10, 12, 10, .66) 32%, rgba(10, 12, 10, .2) 68%, transparent 88%);
}
.hero-sisalto {
  position: relative; z-index: 2;
  width: 100%;
  max-width: var(--leveys); margin-inline: auto;
  /* Alareunaan tilaa, koska arvolupauspaneeli nousee heron päälle. */
  padding: clamp(6rem, 13vw, 9rem) var(--reuna) clamp(8rem, 13vw, 11rem);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: end;
}
.hero-teksti { color: #fff; max-width: 20ch; }
.hero .ylaotsikko { color: rgba(255, 255, 255, .72); }
.hero-otsikko { color: #fff; }
.hero-otsikko .rivi { display: block; }
.hero-otsikko .korostus { color: var(--vihrea-kirkas); }
.hero .lede { color: rgba(255, 255, 255, .84); margin-top: 1.6rem; max-width: 42ch; }
.nappirivi { display: flex; flex-wrap: wrap; gap: .8rem; }
.hero .nappirivi { margin-top: 2.4rem; }
.hero-teksti { max-width: none; }

/* lasinen toissijainen nappi kuvan päällä */
.nappi-lasi {
  background: rgba(255, 255, 255, .1);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .34);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.nappi-lasi:hover { background: rgba(255, 255, 255, .18); }

/* hiljainen huomautus nappien alla — ei lippuja eikä keksittyjä ilmoituksia */
.hero-huomio { margin-top: 1.5rem; font-size: .9rem; color: rgba(255, 255, 255, .78); }
.leiju-merkki {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--vihrea); margin-right: .45rem; vertical-align: .08em;
}

/* ------------------------------------------------------------------ arvot */
.arvot {
  position: relative; z-index: 3;
  margin-top: clamp(-7rem, -5vw, -3.5rem);
  padding: 0 var(--reuna) clamp(3rem, 6vw, 5rem);
  background: transparent;
}
.arvot-ruudukko {
  max-width: var(--leveys); margin-inline: auto;
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.6rem, 3vw, 2.6rem);
  background: var(--paperi-2);
  border-radius: var(--pyoristys);
  padding: clamp(1.8rem, 3.5vw, 3rem);
  box-shadow: var(--nosto-iso);
}
/* Hiusviiva erottaa sarakkeet — ei laatikoita, ei varjoja. */
.arvo { padding-left: clamp(1.2rem, 2.2vw, 2rem); border-left: 1px solid var(--viiva); }
.arvo:first-child { padding-left: 0; border-left: 0; }
.arvo-ikoni {
  display: block; width: 22px; height: 22px; margin-bottom: 1.1rem;
  background: var(--vihrea-syva);
  -webkit-mask: var(--ikoni) center / contain no-repeat;
          mask: var(--ikoni) center / contain no-repeat;
  --ikoni: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
}
.arvo:nth-child(1) .arvo-ikoni { --ikoni: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4M9 15l2 2 4-4'/%3E%3C/svg%3E"); }
.arvo:nth-child(2) .arvo-ikoni { --ikoni: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11l9-7 9 7'/%3E%3Cpath d='M6 10v10h12V10'/%3E%3Cpath d='M10 20v-6h4v6'/%3E%3C/svg%3E"); }
.arvo:nth-child(3) .arvo-ikoni { --ikoni: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Ccircle cx='12' cy='12' r='4.5'/%3E%3Ccircle cx='12' cy='12' r='1'/%3E%3C/svg%3E"); }
.arvo:nth-child(4) .arvo-ikoni { --ikoni: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18.5 6.2A8 8 0 1 0 18.5 17.8'/%3E%3Cpath d='M4 10.2h9M4 13.8h9'/%3E%3C/svg%3E"); }
.arvo-kuvaus { margin-top: .55rem; font-size: .93rem; color: var(--utu); line-height: 1.55; }

/* --------------------------------------------------------------- prosessi */
.vaiheet {
  position: relative;
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.6rem, 3vw, 2.6rem);
}
.vaiheet-viiva { display: none; }
.vaihe { padding-top: 1.5rem; border-top: 1px solid var(--viiva); position: relative; }
/* Numero on antiikvaa ja iso — toimituksellinen elementti, ei ympyrä. */
.vaihe-numero {
  display: block;
  font-family: var(--sans); font-weight: 600;
  font-size: 2.4rem;
  line-height: 1;
  color: var(--vihrea-syva);
  margin-bottom: 1.1rem;
  transition: color .5s var(--kaari);
}
.vaihe[data-nakyvissa] .vaihe-numero { color: var(--vihrea-syva); }
.vaihe-kuvaus { margin-top: .55rem; color: var(--utu); font-size: .93rem; line-height: 1.55; }

/* ----------------------------------------------------------------- luvut */
/* Palvelut ovat kaksi koko leveyden lukua, joissa kummassakin oma parallaksi. */
.luvut { padding: var(--osio-pysty) 0 0; }
.luvut .osio-otsake { padding-inline: var(--reuna); }

.luku {
  position: relative;
  min-height: min(84vh, 780px);
  display: flex; align-items: center;
  overflow: hidden;
  background: var(--muste);
  isolation: isolate;
}
.luku-tausta { position: absolute; inset: -32% 0; z-index: 0; will-change: transform; }
.luku-tausta img { width: 100%; height: 100%; object-fit: cover; }
.luku-varjo {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to right, rgba(10, 12, 10, .9) 0%, rgba(10, 12, 10, .6) 38%, rgba(10, 12, 10, .15) 74%, transparent 100%);
}
/* Toinen luku peilataan, jotta rytmi ei toistu. */
.luku:nth-of-type(even) .luku-varjo {
  background: linear-gradient(to left, rgba(10, 12, 10, .9) 0%, rgba(10, 12, 10, .6) 38%, rgba(10, 12, 10, .15) 74%, transparent 100%);
}
.luku-sisalto {
  position: relative; z-index: 2;
  width: 100%; max-width: var(--leveys); margin-inline: auto;
  padding: clamp(3rem, 6vw, 5rem) var(--reuna);
  color: #fff;
}
.luku:nth-of-type(even) .luku-sisalto { text-align: right; }
.luku-sisalto > * { max-width: 40ch; }
.luku:nth-of-type(even) .luku-sisalto > * { margin-left: auto; }
.luku .jarjestysluku { color: var(--vihrea-kirkas); margin-bottom: 1.1rem; }
.luku-otsikko {
  font-family: var(--sans); font-weight: 600;
  font-size: clamp(2rem, 1.5rem + 2.2vw, 3.2rem);
  line-height: 1.03; letter-spacing: -.015em;
}
.luku-kuvaus { margin-top: 1.1rem; color: rgba(255, 255, 255, .85); font-size: clamp(1rem, .98rem + .25vw, 1.12rem); }
.tekstilinkki-vaalea { color: #fff; padding-top: 1.5rem; }
.tekstilinkki-vaalea:hover { color: var(--vihrea-kirkas); }

/* ------------------------------------------------------------------ kaista */
/* Koko leveyden kuvakaista, joka liikkuu hitaammin kuin sivu. */
.kaista {
  position: relative;
  min-height: min(66vh, 560px);
  display: flex; align-items: center;
  overflow: hidden;
  background: var(--muste);
  isolation: isolate;
}
.kaista-tausta { position: absolute; inset: -50% 0; z-index: 0; will-change: transform; }
.kaista-tausta img { width: 100%; height: 100%; object-fit: cover; }
.kaista-varjo {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to right, rgba(12, 14, 12, .86) 0%, rgba(12, 14, 12, .55) 52%, rgba(12, 14, 12, .25) 100%);
}
.kaista-sisalto {
  position: relative; z-index: 2;
  width: 100%; max-width: var(--leveys); margin-inline: auto;
  padding: clamp(3rem, 7vw, 5rem) var(--reuna);
  color: #fff;
}
.kaista-sisalto h2 { max-width: 18ch; }
.kaista-kuvaus { margin-top: 1.2rem; color: rgba(255, 255, 255, .82); max-width: 48ch; font-size: clamp(1rem, .98rem + .22vw, 1.1rem); }

/* ------------------------------------------------------------------- edut */
.etukortit {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 0;
}
.etukortti {
  padding: clamp(1.8rem, 3.2vw, 2.8rem);
  border-top: 1px solid var(--viiva);
  border-right: 1px solid var(--viiva);
}
.etukortti:nth-child(even) { border-right: 0; }
.etukortti:nth-last-child(-n+2) { border-bottom: 1px solid var(--viiva); }
.etukortti-numero {
  display: block; font-family: var(--sans); font-weight: 600; font-size: 1.3rem; line-height: 1;
  color: var(--vihrea-syva); margin-bottom: 1rem;
}
.etukortti-otsikko { font-size: 1.12rem; }
.etukortti-kuvaus { margin-top: .7rem; color: var(--utu); font-size: .96rem; }

/* ------------------------------------------------------------------ hinta */
.hinta-sisalto { max-width: var(--kapea); margin-inline: auto; text-align: center; }
.hintakortti { margin-top: 2.6rem; }
/* Kärki on lause, ei luku — mitoitus kestää sekä "Hinta sovitaan kartoituksessa"
   että lyhyen summan, jos asiakas myöhemmin haluaa näyttää hinnan. */
.hintakortti-malli {
  font-family: var(--sans); font-weight: 600;
  font-size: clamp(1.9rem, 1.3rem + 2.1vw, 2.9rem);
  line-height: 1.1; letter-spacing: -.02em;
  max-width: 15ch; margin-inline: auto;
  color: var(--muste);
}
.hintakortti-yksikko { margin-top: .6rem; color: var(--utu); font-size: 1.02rem; }
.hintakortti .nappi { margin-top: 2.2rem; }
.ehdot {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: .7rem 2rem; margin-top: 2.4rem;
  padding-top: 2rem; border-top: 1px solid var(--viiva);
}
.ehto { display: flex; gap: .55rem; align-items: flex-start; font-size: .93rem; color: var(--utu); text-align: left; }
.ehto-merkki {
  width: 15px; height: 15px; flex: none; margin-top: .3em;
  background: var(--vihrea-syva);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E") center / contain no-repeat;
}
.ehdot-isot { justify-content: flex-start; border-top: 0; padding-top: 0; margin-top: 0; gap: 1rem 2.5rem; }
.ehdot-isot .ehto { font-size: 1rem; color: var(--muste); }

/* -------------------------------------------------------------- toimialat */
/* Ladottu rivi antiikvaa, ei nappuloita: toimialat luetaan kuin tekstiä. */
.toimiala-ruudukko {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: .9rem clamp(1.6rem, 3.5vw, 3rem);
  max-width: 62ch; margin-inline: auto;
}
.toimiala { display: inline-flex; align-items: center; gap: .65rem; }
.toimiala-nimi {
  font-family: var(--sans); font-weight: 500; font-size: clamp(1.15rem, 1rem + .6vw, 1.5rem);
  line-height: 1.1; letter-spacing: -.01em; white-space: nowrap;
}
.toimiala-ikoni {
  width: 22px; height: 22px; flex: none;
  background: var(--vihrea-syva);
  -webkit-mask: var(--ikoni) center / contain no-repeat;
          mask: var(--ikoni) center / contain no-repeat;
  --ikoni: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11l9-7 9 7'/%3E%3Cpath d='M6 10v10h12V10'/%3E%3Cpath d='M10 20v-6h4v6'/%3E%3C/svg%3E");
}
.toimiala[data-ikoni="aurinko"] .toimiala-ikoni { --ikoni: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 20h17l-2.4-9H5.9z'/%3E%3Cpath d='M8.6 11l-1 9M15.4 11l1 9M4.6 15.5h14.8'/%3E%3Ccircle cx='12' cy='5' r='2.6'/%3E%3C/svg%3E"); }
.toimiala[data-ikoni="lampopumppu"] .toimiala-ikoni { --ikoni: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='5.5' width='19' height='13' rx='2'/%3E%3Ccircle cx='9' cy='12' r='3.4'/%3E%3Cpath d='M15 9.5c1.6 1 1.6 4 0 5M18 8.6c2.4 1.7 2.4 5.1 0 6.8'/%3E%3C/svg%3E"); }
.toimiala[data-ikoni="katto"] .toimiala-ikoni { --ikoni: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1.5 13.5L12 4.5l10.5 9'/%3E%3Cpath d='M5 12.6v7.9h14v-7.9'/%3E%3Cpath d='M16.5 7.4V4.6h2.6v5'/%3E%3C/svg%3E"); }
.toimiala[data-ikoni="ikkuna"] .toimiala-ikoni { --ikoni: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='3' width='17' height='18' rx='1.6'/%3E%3Cpath d='M12 3v18M3.5 12h17'/%3E%3C/svg%3E"); }
.toimiala[data-ikoni="lataus"] .toimiala-ikoni { --ikoni: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='11' height='18' rx='2'/%3E%3Cpath d='M9.4 8.2L7 12.6h3l-1.4 3.6'/%3E%3Cpath d='M14 9h3.4a2 2 0 0 1 2 2v5.6a1.6 1.6 0 0 0 3.2 0V12l-1.8-1.8'/%3E%3C/svg%3E"); }
.toimiala[data-ikoni="remontti"] .toimiala-ikoni { --ikoni: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='4' width='11' height='4.6' rx='1'/%3E%3Cpath d='M13.5 6.3h4.4a2 2 0 0 1 2 2v2a2 2 0 0 1-2 2H11a1.6 1.6 0 0 0-1.6 1.6v1.4'/%3E%3Crect x='7.7' y='15.6' width='3.4' height='5.4' rx='1'/%3E%3C/svg%3E"); }
.toimiala[data-ikoni="koti"] .toimiala-ikoni { --ikoni: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11l9-7 9 7'/%3E%3Cpath d='M6 10v10h12V10'/%3E%3Cpath d='M10 20v-6h4v6'/%3E%3C/svg%3E"); }

/* ------------------------------------------------------------------ kutsu */
.kutsu { background: var(--vihrea-tumma); color: #fff; padding: clamp(4rem, 8vw, 7rem) var(--reuna); }
.kutsu-sisalto {
  max-width: var(--kapea); margin-inline: auto; text-align: center;
}
.kutsu-kuvaus { margin-top: 1.1rem; color: rgba(255, 255, 255, .82); max-width: 46ch; margin-inline: auto; }
.kutsu .nappi { margin-top: 2.2rem; }

/* ------------------------------------------------------------- sivuotsake */
.sivuotsake {
  padding: clamp(3.5rem, 7vw, 6rem) var(--reuna) clamp(2.5rem, 5vw, 4rem);
  display: grid; gap: clamp(2rem, 4vw, 3.5rem);
  border-bottom: 1px solid var(--viiva);
}
.sivuotsake-sisalto { max-width: var(--leveys); margin-inline: auto; width: 100%; }
.sivuotsake .lede { margin-top: 1.4rem; }
.sivuotsake .nappirivi { margin-top: 2rem; }
.sivuotsake-kuva {
  position: relative; margin: 0;
  max-width: var(--leveys); margin-inline: auto; width: 100%;
  border-radius: var(--pyoristys); overflow: hidden;
}
.sivuotsake-kuva img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.sivuotsake-tiivis { padding-bottom: clamp(2rem, 4vw, 3rem); }

/* ------------------------------------------------------------ palveluosio */
.palveluosio { padding: var(--osio-pysty) var(--reuna); }
.palveluosio:nth-of-type(even) { background: var(--paperi-2); }
.palveluosio-sisalto {
  max-width: var(--leveys); margin-inline: auto;
  display: grid; grid-template-columns: 1.05fr .95fr;
  gap: clamp(2.5rem, 5vw, 4.5rem); align-items: center;
}
.palveluosio:nth-of-type(even) .palveluosio-kuva { order: -1; }
.jarjestysluku {
  font-family: var(--sans); font-weight: 600; font-size: 1.2rem; line-height: 1;
  color: var(--vihrea-syva); margin-bottom: 1rem;
}
.palveluosio-otsikko { font-family: var(--sans); font-weight: 600; font-size: clamp(2rem, 1.5rem + 2vw, 3rem); line-height: 1.04; letter-spacing: -.015em; }
.palveluosio-lede { margin-top: 1.2rem; font-size: 1.12rem; color: var(--muste); }
.palveluosio-kuvaus { margin-top: 1.1rem; color: var(--utu); }
.sopii { margin-top: 2rem; padding-top: 1.4rem; border-top: 1px solid var(--viiva); }
.sopii-otsikko {
  font-size: .7rem; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--utu);
}
.sopii-teksti { margin-top: .6rem; font-size: .96rem; color: var(--utu); }

.kuvakehys { margin: 0; border-radius: var(--pyoristys); overflow: hidden; }
.kuvakehys img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }

/* piirretty korvike kuvalle */
.taidekehys {
  position: relative; aspect-ratio: 3 / 2;
  border-radius: var(--pyoristys);
  background: var(--vihrea-usva);
  display: flex; align-items: flex-end; justify-content: center;
  gap: clamp(.9rem, 2.5vw, 1.7rem);
  padding: 0 clamp(1.5rem, 4vw, 2.6rem);
  overflow: hidden;
}
.taide-hehku {
  position: absolute; inset: auto -10% -35% -10%; height: 75%;
  background: radial-gradient(55% 75% at 50% 100%, rgba(109, 165, 68, .3), transparent 72%);
}
.taidekehys::after {
  content: ""; position: absolute; inset: 14% auto auto 50%;
  width: 38%; aspect-ratio: 1; transform: translateX(-50%);
  background: rgba(47, 82, 32, .09);
  -webkit-mask: var(--vesileima) center / contain no-repeat;
          mask: var(--vesileima) center / contain no-repeat;
  --vesileima: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 21V6a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v15'/%3E%3Cpath d='M2 21h18'/%3E%3Ccircle cx='13.5' cy='13' r='1.1'/%3E%3C/svg%3E");
}
.palveluosio:nth-child(odd) .taidekehys::after {
  --vesileima: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 3h3l1.5 4-2 1.5a12 12 0 0 0 5.5 5.5L16 12l4 1.5v3a2 2 0 0 1-2.2 2A16.5 16.5 0 0 1 4 6.2 2 2 0 0 1 6.5 3z'/%3E%3C/svg%3E");
}
.taide-ovi {
  position: relative; width: clamp(42px, 13%, 68px); height: 60%;
  margin-bottom: 18%;
  border-radius: 7px 7px 0 0;
  background: rgba(255, 255, 255, .55);
  overflow: hidden;
}
.taide-ovi::before {
  content: ""; position: absolute; right: 16%; top: 52%; z-index: 2;
  width: 4px; height: 4px; border-radius: 50%; background: rgba(47, 82, 32, .45);
}
.taide-ovi::after {
  content: ""; position: absolute; inset: 0;
  background: var(--vihrea-syva); opacity: 0;
  animation: syty 5.4s ease-in-out infinite;
}
.taide-ovi:nth-child(2)::after { animation-delay: 0s; }
.taide-ovi:nth-child(3)::after { animation-delay: 1.8s; }
.taide-ovi:nth-child(4)::after { animation-delay: 3.6s; }
@keyframes syty {
  0%, 12%   { opacity: 0; }
  22%, 46%  { opacity: .9; }
  60%, 100% { opacity: 0; }
}

/* --------------------------------------------------------------- projekti */
.projekti-sisalto { max-width: var(--kapea); margin-inline: auto; text-align: center; }
.projekti-kuvaus { margin-top: 1.6rem; color: var(--utu); font-size: clamp(1rem, .98rem + .22vw, 1.1rem); }

/* ----------------------------------------------------------------- tiimit */
.tiimikortit { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1rem, 2vw, 1.6rem); }
.tiimikortti {
  background: var(--valko); border-radius: var(--pyoristys);
  padding: clamp(1.8rem, 3.2vw, 2.8rem);
  transition: transform .4s var(--kaari), box-shadow .4s var(--kaari);
}

/* Tiimikortit jäivät ilman tyylejä kun etusivun palvelukortit korvattiin
   kuvalaatoilla — nämä säännöt olivat jaettuja. */
.tiimikortti-merkki {
  display: block; width: 26px; height: 26px; margin-bottom: 1.3rem;
  background: var(--vihrea-syva);
  -webkit-mask: var(--ikoni) center / contain no-repeat;
          mask: var(--ikoni) center / contain no-repeat;
  --ikoni: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 21V6a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v15'/%3E%3Cpath d='M2 21h18'/%3E%3Ccircle cx='13.5' cy='13' r='1.1' fill='%23000'/%3E%3C/svg%3E");
}
.tiimikortti:nth-child(2) .tiimikortti-merkki {
  --ikoni: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 3h3l1.5 4-2 1.5a12 12 0 0 0 5.5 5.5L16 12l4 1.5v3a2 2 0 0 1-2.2 2A16.5 16.5 0 0 1 4 6.2 2 2 0 0 1 6.5 3z'/%3E%3C/svg%3E");
}
.tiimikortti-otsikko {
  font-family: var(--sans); font-weight: 600;
  font-size: clamp(1.5rem, 1.3rem + .7vw, 1.9rem);
  line-height: 1.1; letter-spacing: -.015em;
}
.tiimikortti-kuvaus { margin-top: .8rem; color: var(--utu); }

/* --------------------------------------------------------------- urapolku */
.polku { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.8rem, 3.5vw, 3rem); }
.polku-viiva { display: none; }
.polku-askel { padding-top: 1.5rem; border-top: 1px solid var(--viiva); }
.polku-merkki {
  display: block; font-family: var(--sans); font-weight: 600; font-size: 2.2rem; letter-spacing: -.03em; line-height: 1;
  color: var(--vihrea-syva); margin-bottom: 1.2rem;
}
.polku-otsikko { font-family: var(--sans); font-weight: 600; font-size: 1.7rem; line-height: 1.1; }
.polku-kuvaus { margin-top: .7rem; color: var(--utu); font-size: .95rem; }

/* ------------------------------------------------------------- lomakeosio */
.lomakeosio { padding: var(--osio-pysty) var(--reuna); background: var(--paperi-2); }
.lomakeosio-sisalto {
  max-width: var(--leveys); margin-inline: auto;
  display: grid; grid-template-columns: .78fr 1.22fr;
  gap: clamp(2rem, 4vw, 3.5rem); align-items: start;
}
.lomakeosio-yksi .lomakeosio-sisalto { grid-template-columns: minmax(0, 760px); justify-content: center; }
.lomake-vieri { position: sticky; top: 7rem; }
.vieri-otsikko {
  font-family: var(--sans);
  font-size: .7rem; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--utu); margin-bottom: 1.6rem;
}
.seuraavaksi { display: grid; gap: 1.6rem; }
.seuraavaksi-vaihe { display: grid; grid-template-columns: 1.9rem 1fr; gap: .8rem; align-items: start; }
.seuraavaksi-numero { font-family: var(--sans); font-weight: 600; font-size: 1.2rem; line-height: 1.1; color: var(--vihrea-syva); }
.seuraavaksi-teksti { display: grid; gap: .3rem; }
.seuraavaksi-otsikko { font-weight: 600; }
.seuraavaksi-kuvaus { color: var(--utu); font-size: .93rem; line-height: 1.55; }
.vieri-yhteys { margin-top: 2rem; padding-top: 1.6rem; border-top: 1px solid var(--viiva); display: grid; gap: .5rem; font-size: .93rem; }
.vieri-yhteys a { color: var(--vihrea-syva); font-weight: 600; }

.lomake-kortti {
  background: var(--valko);
  border-radius: var(--pyoristys);
  padding: clamp(1.6rem, 3.5vw, 2.8rem);
  box-shadow: var(--nosto);
}
.lomake-otsikko {
  font-family: var(--sans); font-weight: 600;
  font-size: clamp(1.6rem, 1.3rem + 1vw, 2.1rem);
  line-height: 1.05; margin-bottom: 1.6rem;
}
.lomake-ankkuri { min-height: 320px; }

/* ------------------------------------------------------------- tietosuoja */
.paivitetty { margin-top: 1.8rem; font-size: .85rem; color: var(--utu); }
.paivitetty span {
  text-transform: uppercase; letter-spacing: .14em; font-size: .7rem;
  font-weight: 600; color: var(--utu); margin-right: .55rem;
}
.seloste-sivu {
  max-width: var(--leveys); margin-inline: auto;
  padding: clamp(2.5rem, 5vw, 4rem) var(--reuna) var(--osio-pysty);
  display: grid; grid-template-columns: 260px minmax(0, 1fr);
  align-items: start; gap: clamp(2rem, 4vw, 4rem);
}
.seloste-vieri { position: sticky; top: 7rem; display: grid; gap: clamp(1.6rem, 3vw, 2.4rem); }
.rekisteri { background: var(--valko); border-radius: var(--pyoristys-s); padding: 1.4rem; }
.rekisteri-otsikko {
  font-family: var(--sans);
  font-size: .7rem; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--utu); margin-bottom: 1.2rem;
}
.rekisteri-tiedot { margin: 0; display: grid; gap: .95rem; }
.rekisteri-rivi { display: grid; gap: .15rem; }
.rekisteri-rivi dt { font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--utu); font-weight: 600; }
.rekisteri-rivi dd { margin: 0; font-weight: 500; overflow-wrap: anywhere; }
.rekisteri-rivi dd a { color: var(--vihrea-syva); }
.sisallys-otsikko {
  font-family: var(--sans);
  font-size: .7rem; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--utu); margin-bottom: 1rem;
}
.sisallys-lista { display: grid; gap: .05rem; }
.sisallys-lista a {
  display: grid; grid-template-columns: 1.7rem 1fr; gap: .3rem;
  padding: .4rem 0; text-decoration: none; font-size: .9rem; color: var(--utu);
  transition: color .2s ease;
}
.sisallys-lista a:hover { color: var(--muste); }
.sisallys-numero { font-family: var(--sans); font-weight: 600; color: var(--vihrea-syva); font-size: .95rem; }
.seloste { display: grid; gap: clamp(2.4rem, 4vw, 3.4rem); }
.seloste-osio { scroll-margin-top: 7rem; }
.seloste-otsikko {
  display: grid; grid-template-columns: 2.6rem 1fr; align-items: baseline;
  font-family: var(--sans); font-weight: 600;
  font-size: clamp(1.5rem, 1.3rem + .9vw, 2rem); line-height: 1.1;
  padding-bottom: 1rem; border-bottom: 1px solid var(--viiva); margin-bottom: 1.3rem;
}
.seloste-numero { font-size: 1.1rem; color: var(--vihrea-syva); }
.seloste-teksti { color: var(--utu); max-width: 66ch; }
.seloste-teksti p { margin-bottom: .95rem; }
.seloste-teksti p:last-child { margin-bottom: 0; }
.seloste-teksti strong { color: var(--muste); font-weight: 600; }
.seloste-teksti a { color: var(--vihrea-syva); font-weight: 500; }
.seloste-teksti ul, .seloste-teksti ol { display: grid; gap: .5rem; margin: 0 0 1.1rem; padding-left: 0; }
.seloste-teksti li { position: relative; padding-left: 1.4rem; }
.seloste-teksti ul li::before {
  content: ""; position: absolute; left: .3rem; top: .68em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--vihrea);
}
.seloste-teksti ol { counter-reset: seloste-lista; }
.seloste-teksti ol li { counter-increment: seloste-lista; }
.seloste-teksti ol li::before {
  content: counter(seloste-lista) "."; position: absolute; left: 0;
  color: var(--vihrea-syva); font-family: var(--sans); font-weight: 600;
}

/* ------------------------------------------------------------ alatunniste */
.alatunniste { background: var(--muste); color: #fff; padding: clamp(3.5rem, 6vw, 5rem) var(--reuna) 2rem; }
.alatunniste-ylaosa {
  max-width: var(--leveys); margin: 0 auto clamp(2.5rem, 5vw, 3.5rem);
  padding-bottom: clamp(2.5rem, 5vw, 3.5rem); border-bottom: 1px solid rgba(255, 255, 255, .12);
  display: flex; justify-content: space-between; align-items: flex-end; gap: 2rem; flex-wrap: wrap;
}
.alatunniste-iskulause {
  font-family: var(--sans); font-weight: 600; font-size: clamp(1.9rem, 1.3rem + 2.4vw, 3.4rem);
  line-height: 1.02; letter-spacing: -.015em; max-width: 16ch; text-wrap: balance;
}
.alatunniste .nappi-iso { background: var(--paperi); color: var(--muste); }
.alatunniste .nappi-iso:hover { background: #fff; }
.alatunniste-sisalto {
  max-width: var(--leveys); margin-inline: auto;
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 2.5rem;
}
.alatunniste-kuvaus { margin-top: .4rem; color: var(--utu-vaalea); font-size: .93rem; max-width: 32ch; }
.alatunniste-otsikko {
  font-size: .68rem; letter-spacing: .14em; text-transform: uppercase;
  color: #8C857A; font-weight: 600; margin-bottom: 1rem;
}
.alatunniste-valikko, .alatunniste-palvelut { display: grid; gap: .75rem; align-content: start; }
.alatunniste-valikko a, .alatunniste-palvelut a, .alatunniste-yhteys a { color: var(--utu-vaalea); text-decoration: none; font-size: .93rem; }
.alatunniste-valikko a:hover, .alatunniste-palvelut a:hover, .alatunniste-yhteys a:hover { color: #fff; }
.alatunniste-yhteys { display: grid; gap: .75rem; align-content: start; font-size: .93rem; }
.alatunniste-yhteys span { color: #8C857A; display: block; font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; }
.alatunniste-legal {
  max-width: var(--leveys); margin: clamp(2.5rem, 5vw, 3.5rem) auto 0;
  padding-top: 1.6rem; border-top: 1px solid rgba(255, 255, 255, .12);
  color: #948D82; font-size: .85rem;
}

/* -------------------------------------------------------------- animaatio */
[data-paljasta] {
  opacity: 0; transform: translateY(16px);
  transition: opacity .8s var(--kaari), transform .8s var(--kaari);
}
[data-paljasta][data-nakyvissa] { opacity: 1; transform: none; }
.arvo[data-paljasta]:nth-child(2), .palvelukortti[data-paljasta]:nth-child(2),
.etukortti[data-paljasta]:nth-child(2), .vaihe[data-paljasta]:nth-child(2),
.tiimikortti[data-paljasta]:nth-child(2), .polku-askel[data-paljasta]:nth-child(2) { transition-delay: .08s; }
.arvo[data-paljasta]:nth-child(3), .etukortti[data-paljasta]:nth-child(3),
.vaihe[data-paljasta]:nth-child(3), .polku-askel[data-paljasta]:nth-child(3) { transition-delay: .16s; }
.arvo[data-paljasta]:nth-child(4), .etukortti[data-paljasta]:nth-child(4),
.vaihe[data-paljasta]:nth-child(4) { transition-delay: .24s; }
.toimiala[data-paljasta]:nth-child(2) { transition-delay: .04s; }
.toimiala[data-paljasta]:nth-child(3) { transition-delay: .08s; }
.toimiala[data-paljasta]:nth-child(4) { transition-delay: .12s; }
.toimiala[data-paljasta]:nth-child(5) { transition-delay: .16s; }
.toimiala[data-paljasta]:nth-child(6) { transition-delay: .20s; }
.toimiala[data-paljasta]:nth-child(7) { transition-delay: .24s; }

/* ------------------------------------------------------------- responsive */
@media (max-width: 980px) {
  .hero-sisalto, .palveluosio-sisalto { grid-template-columns: 1fr; }
  .hero-taide { order: 0; max-width: 460px; margin-inline: auto; width: 100%; }
  .palveluosio:nth-of-type(even) .palveluosio-kuva { order: 0; }
  .arvot-ruudukko { grid-template-columns: repeat(2, 1fr); row-gap: 2.2rem; }
  .arvo:nth-child(odd) { padding-left: 0; border-left: 0; }
  .vaiheet { grid-template-columns: repeat(2, 1fr); }
  .lomakeosio-sisalto { grid-template-columns: 1fr; }
  .lomake-vieri { position: static; }
  .seloste-sivu { grid-template-columns: 1fr; }
  .seloste-vieri { position: static; }
  .sisallys-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .alatunniste-sisalto { grid-template-columns: 1fr 1fr; }
  .alatunniste-brandi { grid-column: 1 / -1; }
  .alatunniste-ylaosa { align-items: flex-start; flex-direction: column; }
}
@media (max-width: 820px) {
  .paavalikko, .ylapalkki-nappi { display: none; }
  .valikkonappi { display: block; }
}
@media (max-width: 680px) {
  /* Puhelimella kuva pysyy tekstin takana (asiakkaan toive), mutta osiot ovat
     matalampia eikä parallaksin ylimitoitusta ole — kumpikin vähentää skaalausta. */
  .hero { min-height: min(82vh, 640px); }
  .luku { min-height: min(64vh, 540px); }
  .kaista { min-height: min(50vh, 420px); }
  .hero-tausta, .luku-tausta, .kaista-tausta { inset: 0; }
  /* Puhelimella lomake saa kasvaa sisältönsä mukaan: kiinteä varaus + widgetin
     pohjaan ankkuroitu Jatka-nappi ajoi vaihtoehtojen päälle. */
  .kysely-kortti .lomake-ankkuri, .lomake-ankkuri { min-height: 0; }
  .arvot-ruudukko, .etukortit, .palvelukortit, .tiimikortit,
  .vaiheet, .polku, .sisallys-lista { grid-template-columns: 1fr; }
  .arvo { padding-left: 0; border-left: 0; }
  .etukortti { border-right: 0; }
  .etukortti:nth-last-child(-n+2) { border-bottom: 0; }
  .etukortti:last-child { border-bottom: 1px solid var(--viiva); }
  .ehdot { justify-content: flex-start; }
  .alatunniste-sisalto { grid-template-columns: 1fr; }
  .toimiala-ruudukko { justify-content: flex-start; gap: .7rem 1.6rem; }
}

/* --------------------------------------------------- liikkeen vähentäminen */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  [data-paljasta] { opacity: 1; transform: none; }
  .taide-ovi::after { opacity: .5; }
}

/* Yläpalkki pysyy paperilla myös kuvahero-sivuilla. Läpinäkyvä palkki kokeiltiin ja
   hylättiin: navin kontrasti taivasta vasten mitattiin 1.94:1, ja koska heron kuva on
   asiakkaan vaihdettavissa oleva kenttä, vaaleampi kuva rikkoisi sen uudelleen
   huomaamatta. Luettavuus ei saa riippua sisällöstä jota asiakas voi vaihtaa. */

/* Töihin-sivun hero on hieman matalampi kuin etusivun. */
.hero-tyot { min-height: min(78vh, 700px); }
.hero-tyot .hero-sisalto { grid-template-columns: minmax(0, 1fr); }

/* ==========================================================================
   TUMMA ILME  —  data-teema="tumma"
   Sama toimituksellinen järjestelmä kuin vaalea ilme, käännettynä: pohja on
   vaalean ilmeen musteen sävy ja muste sen paperin sävy. Antiikva, hiusviivat
   ja koko leveyden valokuvat pysyvät — vain pohja vaihtuu.
   Lomakeosiot ovat paperia tummalla pöydällä: Priimon lomake piirtyy aina
   vaalealle, joten osio lainaa vaalean ilmeen värit sen ympärille sen sijaan
   että valkoinen kortti riitelisi tumman kortin sisällä.
   ========================================================================== */
[data-teema="tumma"] {
  --paperi:    #171614;
  --paperi-2:  #1F1E1B;
  --valko:     #262521;
  --syva:      #0F0F0D;
  --muste:     #EFECE5;
  --muste-2:   #DDD9D0;
  --utu:       #A9A296;
  --utu-vaalea:#A9A296;
  --viiva:     rgba(239, 236, 229, .14);

  --vihrea-syva: #8FCB63;
  --vihrea-usva: rgba(143, 203, 99, .12);

  --nosto: 0 1px 2px rgba(0, 0, 0, .4), 0 16px 40px rgba(0, 0, 0, .45);
  --nosto-iso: 0 2px 6px rgba(0, 0, 0, .45), 0 30px 70px rgba(0, 0, 0, .55);
}

/* Kaikki mikä vaaleassa seisoo musteella seisoo täällä syvimmällä sävyllä,
   jotta valokuvaosiot ja alatunniste erottuvat pohjasta. */
[data-teema="tumma"] .hero,
[data-teema="tumma"] .luku,
[data-teema="tumma"] .kaista,
[data-teema="tumma"] .osio-tumma { background: var(--syva); }
[data-teema="tumma"] .alatunniste { background: var(--syva); border-top: 1px solid var(--viiva); }
[data-teema="tumma"] .alatunniste-yhteys span { color: #8E8C85; }
[data-teema="tumma"] .alatunniste .nappi-iso { background: var(--muste); color: var(--paperi); }
[data-teema="tumma"] .alatunniste .nappi-iso:hover { background: #FFFFFF; }

/* Yläpalkki: paperia ylhäällä, vieritettäessä lasia — sisältö kuultaa läpi
   sumennettuna. Peitto pidetään tummana (78 %), jotta vaalea teksti lukee myös
   vaaleiden paperikaistojen päällä (n. 6:1). */
[data-teema="tumma"] .ylapalkki { transition: background-color .35s ease, border-color .3s ease, box-shadow .3s ease; }
[data-teema="tumma"] .ylapalkki[data-kiinni] {
  background: rgba(23, 22, 20, .78);
  -webkit-backdrop-filter: saturate(160%) blur(18px);
          backdrop-filter: saturate(160%) blur(18px);
  border-bottom-color: rgba(255, 255, 255, .1);
}
[data-teema="tumma"] .mobiilivalikko { background: var(--paperi); }

/* Napit: vaalean ilmeen musta nappi on täällä paperinvärinen. */
[data-teema="tumma"] .ohita { color: var(--paperi); }
[data-teema="tumma"] .nappi { color: var(--paperi); }
[data-teema="tumma"] .nappi:hover { background: #FFFFFF; }
[data-teema="tumma"] .nappi-reunus { background: transparent; color: var(--muste); }
[data-teema="tumma"] .nappi-reunus:hover { border-color: var(--muste); }
[data-teema="tumma"] .nappi-vaalea { background: var(--muste); color: var(--paperi); }
[data-teema="tumma"] .nappi-vaalea:hover { background: #FFFFFF; }
[data-teema="tumma"] .nappi-lasi { background: rgba(255, 255, 255, .08); color: #FFFFFF; border-color: rgba(255, 255, 255, .38); }
[data-teema="tumma"] .nappi-lasi:hover { background: rgba(255, 255, 255, .16); }
[data-teema="tumma"] :focus-visible { outline-color: var(--vihrea-syva); }

/* Pinnat, jotka vaaleassa ovat valkoisia: askel ylöspäin pohjasta ja hiusviiva. */
[data-teema="tumma"] .arvot-ruudukko,
[data-teema="tumma"] .tiimikortti,
[data-teema="tumma"] .rekisteri { border: 1px solid var(--viiva); }
[data-teema="tumma"] .taidekehys { background: var(--valko); }

/* Kuvat tummalla pohjalla saavat hieman voimakkaamman verhon. */
[data-teema="tumma"] .luku-varjo {
  background: linear-gradient(to right, rgba(10, 10, 12, .94) 0%, rgba(10, 10, 12, .7) 40%, rgba(10, 10, 12, .3) 76%, rgba(10, 10, 12, .12) 100%);
}
[data-teema="tumma"] .luku:nth-of-type(even) .luku-varjo {
  background: linear-gradient(to left, rgba(10, 10, 12, .94) 0%, rgba(10, 10, 12, .7) 40%, rgba(10, 10, 12, .3) 76%, rgba(10, 10, 12, .12) 100%);
}
[data-teema="tumma"] .kaista-varjo {
  background: linear-gradient(to right, rgba(10, 10, 12, .92) 0%, rgba(10, 10, 12, .68) 52%, rgba(10, 10, 12, .34) 100%);
}

/* --- rytmi -----------------------------------------------------------------
   Tumma pohja ei vuorottele taustoja, joten kahden taustattoman osion väliin
   jäisi kaksinkertainen pystypehmuste. Kavennetaan se; taustallinen osio
   (paperikaista, vaalea kaista) ja sitä seuraava säilyttävät täyden ilmavuuden. */
[data-teema="tumma"] .osio + .osio:not(.kysely):not(.osio-vaalea) { padding-top: calc(var(--osio-pysty) * .34); }
[data-teema="tumma"] .kysely + .osio,
[data-teema="tumma"] .osio-vaalea + .osio { padding-top: var(--osio-pysty); }

/* --- lomakkeet: paperi tummalla pöydällä, ilman korttia ----------------------
   Priimon lomake piirtyy aina tummalla musteella (pimeää tilaa ei ole), joten
   lomakeosiot lainaavat vaalean ilmeen paletin. Kortti on poistettu: bespoke-
   kielioppi (konsolin design-adopt) piirtää lomakkeen ilman omaa pohjaa, kentät
   alleviivauksina, joten se istuu suoraan paperille kuten muu sivun typografia. */
[data-teema="tumma"] .lomakeosio,
[data-teema="tumma"] .kysely {
  --paperi:    #EFECE5;
  --paperi-2:  #F7F5F0;
  --valko:     #FFFFFF;
  --muste:     #1C1B18;
  --muste-2:   #2A2823;
  --utu:       #635E55;
  --utu-vaalea:#A9A296;
  --viiva:     #DCD6C9;
  --vihrea-syva: #3F6B27;
  --vihrea-usva: #E3EDD7;
  background: var(--paperi);
  color: var(--muste);
}
[data-teema="tumma"] .lomake-kortti { background: transparent; box-shadow: none; padding: 0; border-radius: 0; }
[data-teema="tumma"] .lomake-otsikko { margin-bottom: 1.8rem; padding-bottom: 1.2rem; border-bottom: 1px solid var(--viiva); }

/* ------------------------------------------------------------------ kysely */
/* Sopivuuskysely: teksti vasemmalla, Priimon lomake oikealla samassa kortissa
   kuin yhteydenottosivulla. */
.kysely-sisalto {
  max-width: var(--leveys); margin-inline: auto;
  display: grid; grid-template-columns: .9fr 1.1fr;
  gap: clamp(2rem, 5vw, 4.5rem); align-items: start;
}
.kysely-teksti { position: sticky; top: 7rem; }
.kysely-teksti .ehdot { margin-top: 1.8rem; }
.kysely-kortti .lomake-ankkuri { min-height: 680px; }

/* --------------------------------------------------------------------- ukk */
.ukk-sisalto {
  max-width: var(--leveys); margin-inline: auto;
  display: grid; grid-template-columns: .85fr 1.15fr;
  gap: clamp(2rem, 5vw, 4rem); align-items: start;
}
.ukk-otsake { position: sticky; top: 7rem; }
.ukk-otsake .osio-lede { margin: 1.1rem 0 1.8rem; }
.ukk-lista { display: grid; }
.ukk-kohta { border-top: 1px solid var(--viiva); }
.ukk-kohta:last-child { border-bottom: 1px solid var(--viiva); }
.ukk-kysymys {
  display: flex; align-items: center; justify-content: space-between; gap: 1.2rem;
  padding: 1.25rem 0; cursor: pointer; list-style: none;
  font-weight: 600; font-size: 1.02rem;
  transition: color .2s ease;
}
.ukk-kysymys::-webkit-details-marker { display: none; }
.ukk-kysymys:hover { color: var(--vihrea-syva); }
.ukk-merkki { position: relative; width: 14px; height: 14px; flex: none; }
.ukk-merkki::before, .ukk-merkki::after {
  content: ""; position: absolute; inset: 50% 0 auto 0; height: 2px;
  background: var(--vihrea-syva); transform: translateY(-50%);
  transition: transform .3s var(--kaari);
}
.ukk-merkki::after { transform: translateY(-50%) rotate(90deg); }
.ukk-kohta[open] .ukk-merkki::after { transform: translateY(-50%) rotate(0deg); }
.ukk-vastaus { padding: 0 2.4rem 1.5rem 0; color: var(--utu); max-width: 68ch; }

.rivi { display: block; }

@media (max-width: 980px) {
  .kysely-sisalto, .ukk-sisalto { grid-template-columns: 1fr; }
  .kysely-teksti, .ukk-otsake { position: static; }
}