/* =============================================================================
   Kohmansalon Metsäkuljetus Oy — sivuston tyylit
   Kaikki tyylit ovat tässä yhdessä tiedostossa. Älä luo uusia CSS-tiedostoja.

   Ulkoasu perustuu Claude Designilla tehtyyn luonnokseen:
   tumma ylä- ja alatunniste, musta-valkoinen korostus, klassiset serif-fontit.

   Sisältö:
   1. Fontit (itse hostatut)
   2. Muuttujat
   3. Perusasetukset
   4. Apuluokat
   5. Ylätunniste ja navigaatio
   6. Sisältölohkot ja komponentit
   7. Lomakkeet
   8. Alatunniste
   9. Isot näytöt
   ========================================================================== */

/* 1. Fontit ------------------------------------------------------------------
   Fontit hostataan itse (ei Google Fonts CDN:ää, GDPR). Muuttuvat fontit
   kattavat leikkaukset 400–600. */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('/assets/fonts/cormorant-garamond-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('/assets/fonts/lora-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Lora';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/lora-italic-latin.woff2') format('woff2');
}

/* 2. Muuttujat ----------------------------------------------------------------
   Muuta värit ja fontit TÄSTÄ. Älä kirjoita värikoodeja muualle tiedostoon. */
:root {
  /* Etusivun sävyt: huurteinen metsä, aamuvalo ja aluskasvillisuus. */
  --vari-metsa-yo: #202a29;
  --vari-metsa-muste: #26332c;
  --vari-metsa-teksti: #455047;
  --vari-metsa-paperi: #f1eee6;
  --vari-metsa-usva: #e2e0d6;
  --vari-metsa-sumu: #e0e4d7;
  --vari-metsa-reuna: rgba(38, 51, 44, 0.24);
  --vari-metsa-reuna-vaalea: rgba(241, 238, 230, 0.24);
  --vari-metsa-varjo-vahva: rgba(32, 42, 41, 0.94);
  --vari-metsa-varjo-keski: rgba(32, 42, 41, 0.72);
  --vari-metsa-varjo-mobiili: rgba(32, 42, 41, 0.76);
  --vari-metsa-varjo-kevyt: rgba(32, 42, 41, 0.54);
  --vari-metsa-varjo-hento: rgba(32, 42, 41, 0.12);
  --vari-metsa-sumu-peite: rgba(224, 228, 215, 0.94);
  --vari-metsa-paperi-92: rgba(241, 238, 230, 0.92);
  --vari-metsa-paperi-88: rgba(241, 238, 230, 0.88);
  --vari-metsa-paperi-48: rgba(241, 238, 230, 0.48);
  --vari-metsa-paperi-38: rgba(241, 238, 230, 0.38);
  --fontti-kayttoliittyma: 'Segoe UI', Arial, sans-serif;

  /* Vaalea perus */
  --vari-tausta:        #f3f2f2;
  --vari-pinta:         #eae9e9;
  --vari-teksti:        #201f1d;
  --vari-teksti-tumma:  #34322f;
  --vari-teksti-haalea: #4d4b47;
  --vari-teksti-hiljainen: #6b6a67;
  --vari-jakaja:        rgba(32, 31, 29, 0.16);

  /* Tumma ylä- ja alatunniste */
  --vari-tumma:         #141416;
  --vari-tumma-jakaja:  #2e2e33;
  --vari-tumma-reuna:   #3a3a40;
  --vari-tumma-teksti:  #e8e6e2;
  --vari-tumma-haalea:  #b5b2ac;
  --vari-tumma-hiljainen: #9c9a95;

  /* Korostus: musta-valkoinen (aiemmin keltainen/kulta — vaihdettu 2026-08-25) */
  --vari-korostus-tumma: #ffffff;  /* logo ja tumman taustan korostus */
  --vari-korostus:      #201f1d;   /* pääkorostus vaalealla taustalla */
  --vari-korostus-300:  #c9c7c3;
  --vari-korostus-600:  #4d4b47;
  --vari-korostus-700:  #141416;   /* linkit ja tekstikorostus vaalealla */

  --fontti-otsikko: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --fontti-leipa:   'Lora', Georgia, 'Times New Roman', serif;

  --leveys-max:   1120px;
  --leveys-kapea: 760px;

  --vali-xs: 0.5rem;
  --vali-s:  1rem;
  --vali-m:  2rem;
  --vali-l:  4rem;

  --pyoristys: 4px;
}

/* 3. Perusasetukset --------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--fontti-leipa);
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--vari-teksti);
  background: var(--vari-tausta);
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--fontti-otsikko);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.01em;
  margin: 0 0 var(--vali-s);
}

h1 { font-size: clamp(2rem, 6.5vw, 3.5rem); font-weight: 400; }
h2 { font-size: clamp(1.5rem, 4vw, 2.25rem); }
h3 { font-size: clamp(1.2rem, 3vw, 1.5rem); }

p { margin: 0 0 var(--vali-s); }

a { color: var(--vari-korostus-700); text-underline-offset: 3px; }
a:hover { color: var(--vari-korostus-600); }

img { display: block; max-width: 100%; height: auto; }

figure { margin: 0; }

:focus { outline: none; }
:focus-visible { outline: 2px solid var(--vari-korostus); outline-offset: 2px; }
::selection { background: var(--vari-korostus-300); }

/* 4. Apuluokat --------------------------------------------------------------- */
.rajaus {
  max-width: var(--leveys-max);
  margin: 0 auto;
  padding: 0 20px;
}
.rajaus--kapea { max-width: var(--leveys-kapea); }

.piiloteksti {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

.ohita-linkki {
  position: absolute;
  left: -999px; top: 0;
  z-index: 100;
  padding: var(--vali-xs) var(--vali-s);
  background: var(--vari-korostus-tumma);
  color: var(--vari-tumma);
}
.ohita-linkki:focus { left: 0; }

/* Yliotsikko: pieni harvennettu rivi otsikon yllä */
.yliotsikko {
  margin: 0 0 0.75rem;
  font-size: 0.75rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--vari-korostus-700);
}

.johdanto {
  max-width: 64ch;
  margin-bottom: clamp(1.6rem, 4vw, 2.75rem);
  color: var(--vari-teksti-tumma);
  text-wrap: pretty;
}

.kuvateksti {
  margin: 0.6rem 0 0;
  font-size: 0.8125rem;
  font-style: italic;
  color: var(--vari-teksti-hiljainen);
}

/* 5. Ylätunniste ja navigaatio ---------------------------------------------- */
.ylatunniste {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--vari-tumma);
  border-bottom: 3px solid var(--vari-korostus-tumma);
}

.ylatunniste__sisalto {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding-top: 14px;
  padding-bottom: 14px;
}

.logo {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  text-decoration: none;
}
.logo__kuva { width: 46px; height: auto; flex: 0 0 auto; }
.logo__tekstit { display: flex; flex-direction: column; min-width: 0; }
.logo__nimi {
  font-family: var(--fontti-otsikko);
  font-size: clamp(0.92rem, 2.95vw, 1.25rem);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--vari-korostus-tumma);
  line-height: 1.15;
  overflow-wrap: break-word;
}
.logo__iskulause {
  font-size: 0.69rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--vari-tumma-hiljainen);
}

.ylatunniste__ohjaimet {
  display: flex;
  align-items: center;
  gap: 14px;
}

/* Päävalikko: mobiilissa avattava paneeli, isolla näytöllä rivi (luku 9) */
.paavalikko {
  display: none;
  position: absolute;
  left: 0; right: 0;
  top: 100%;
  background: var(--vari-tumma);
  border-top: 1px solid var(--vari-tumma-jakaja);
  border-bottom: 3px solid var(--vari-korostus-tumma);
}
.paavalikko.on-auki { display: block; }

.paavalikko__lista {
  list-style: none;
  margin: 0;
  padding: 8px 20px 18px;
  display: flex;
  flex-direction: column;
}
.paavalikko__linkki {
  display: block;
  padding: 14px 0;
  font-size: 1.12rem;
  text-decoration: none;
  color: var(--vari-tumma-teksti);
  border-bottom: 1px solid var(--vari-tumma-jakaja);
}
.paavalikko__linkki:hover { color: var(--vari-korostus-tumma); }
.paavalikko__linkki.on-aktiivinen { color: var(--vari-korostus-tumma); }

.kielivalinta {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  border: 1px solid var(--vari-tumma-reuna);
  border-radius: var(--pyoristys);
  overflow: hidden;
}
.kielivalinta a {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 8px 10px;
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  text-decoration: none;
  color: var(--vari-tumma-hiljainen);
}
.kielivalinta a:hover { color: var(--vari-tumma-teksti); }
.kielivalinta a.on-aktiivinen {
  background: var(--vari-korostus-tumma);
  color: var(--vari-tumma);
}

.valikkonappi {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 44px;
  height: 40px;
  padding: 0 10px;
  background: transparent;
  border: 1px solid var(--vari-tumma-reuna);
  border-radius: var(--pyoristys);
  cursor: pointer;
}
.valikkonappi__viiva {
  display: block;
  height: 1px;
  background: var(--vari-korostus-tumma);
}

/* 6. Sisältölohkot ja komponentit -------------------------------------------- */
.osio {
  padding: clamp(2.25rem, 6vw, 4.5rem) 0;
}
.osio--tumma {
  background: var(--vari-tumma);
  color: var(--vari-tausta);
}
.osio--jakaja { border-top: 1px solid var(--vari-jakaja); }

/* Hero (etusivun tumma yläosio) */
.hero {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1.5rem, 5vw, 3.5rem);
  align-items: flex-start;
}
.hero__teksti { flex: 1 1 340px; min-width: 0; }
.hero__kuva { flex: 1 1 380px; min-width: 0; }
.hero .yliotsikko { color: var(--vari-korostus-tumma); }
.hero h1 { color: var(--vari-korostus-tumma); }
.hero__johdanto {
  max-width: 52ch;
  margin-bottom: 1.6rem;
  color: #cfccc6;
  text-wrap: pretty;
}
.hero__painikkeet {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* Etusivun luontoteema. Muut sivut säilyttävät oman taittonsa. */
.sivu-etusivu {
  font-family: var(--fontti-kayttoliittyma);
  background: var(--vari-metsa-paperi);
  color: var(--vari-metsa-muste);
}
.sivu-etusivu .rajaus { max-width: 1280px; padding-inline: clamp(24px, 5vw, 72px); }
.sivu-etusivu .ylatunniste {
  background: var(--vari-metsa-yo);
  border-bottom: 1px solid var(--vari-metsa-reuna-vaalea);
}
.sivu-etusivu .ylatunniste__sisalto { padding-block: 18px; }
.sivu-etusivu .logo__nimi { font-size: clamp(0.95rem, 2.5vw, 1.15rem); }
.logo__iskulause {
  font-family: var(--fontti-leipa);
  font-size: 0.76rem;
  font-style: italic;
  letter-spacing: 0.06em;
  text-transform: none;
  color: var(--vari-metsa-usva);
}
.sivu-etusivu .paavalikko { background: var(--vari-metsa-yo); }
.sivu-etusivu .kielivalinta { border-radius: 0; }
.sivu-etusivu .kielivalinta a { min-height: 44px; }
.sivu-etusivu .valikkonappi { height: 44px; border-radius: 0; }
.sivu-etusivu .yliotsikko {
  font-family: var(--fontti-kayttoliittyma);
  font-size: 0.69rem;
  font-weight: 600;
  letter-spacing: 0.19em;
}
.sivu-etusivu .osio { padding-block: clamp(4rem, 9vw, 7rem); }
.sivu-etusivu main h2 {
  font-size: clamp(2.5rem, 4.6vw, 3.8rem);
  line-height: 1.06;
  text-wrap: balance;
}
.sivu-etusivu .otsikko-jatko { font-size: 0.82em; }
.sivu-etusivu .johdanto { font-size: 1.15rem; line-height: 1.75; }
.sivu-etusivu .painike {
  min-height: 48px;
  padding: 0.85rem 1.2rem;
  font-family: var(--fontti-kayttoliittyma);
  font-size: 0.86rem;
  font-weight: 500;
  border-radius: 0;
  gap: 1.5rem;
}
.sivu-etusivu :is(section, article)[id] { scroll-margin-top: 110px; }
.sivu-etusivu :focus-visible { outline-color: var(--vari-metsa-muste); outline-offset: 5px; }
.sivu-etusivu :is(.ylatunniste, .etusivu-hero, .alatunniste) :focus-visible {
  outline-color: var(--vari-metsa-paperi);
}

/* Kuva ulottuu tekstin alle; tummennus varmistaa luettavuuden myös ilman kuvaa. */
.etusivu-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 680px;
  display: flex;
  align-items: center;
  color: var(--vari-metsa-paperi);
  background: var(--vari-metsa-yo);
}
.etusivu-hero__tausta,
.etusivu-hero__varjostus,
.etusivu-vastuu__tausta,
.etusivu-vastuu__varjostus {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.etusivu-hero__tausta {
  z-index: -2;
  object-fit: cover;
  object-position: 60% 40%;
  /* Hienovarainen lämpö vain pääkuvaan; alkuperäinen kuva säilyy ennallaan. */
  filter: saturate(0.72) brightness(1.05) sepia(0.1);
}
.etusivu-hero__varjostus {
  z-index: -1;
  background: linear-gradient(90deg, var(--vari-metsa-varjo-keski), var(--vari-metsa-varjo-kevyt)),
    linear-gradient(0deg, var(--vari-metsa-varjo-kevyt), transparent 42%);
}
.etusivu-hero__sisalto { width: 100%; padding-block: 4.5rem 1.6rem; }
.etusivu-hero__teksti { max-width: 600px; }
.etusivu-hero .yliotsikko { color: var(--vari-metsa-usva); margin-bottom: 1.6rem; }
.etusivu-hero h1 {
  max-width: 13ch;
  margin-bottom: 1.5rem;
  font-size: clamp(3.3rem, 6.6vw, 5.6rem);
  font-weight: 500;
  line-height: 0.99;
  letter-spacing: -0.025em;
  text-wrap: balance;
  color: var(--vari-metsa-paperi);
}
.etusivu-hero__johdanto {
  max-width: 43ch;
  font-size: 1.04rem;
  color: var(--vari-metsa-usva);
  margin-bottom: 2rem;
  line-height: 1.8;
}
.etusivu-hero__painikkeet { display: flex; flex-wrap: wrap; gap: 10px; }
.etusivu-hero .painike--korostus-tumma {
  color: var(--vari-metsa-paperi);
  border-color: var(--vari-metsa-usva);
}
.etusivu-hero .painike--haalea { color: var(--vari-metsa-paperi); }
.etusivu-hero__alarivi {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem 2rem;
  margin-top: 4.5rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--vari-metsa-reuna-vaalea);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  color: var(--vari-metsa-usva);
}

/* Nuori mänty kertoo jatkuvuudesta ja uudistumisesta. Kuva häipyy tekstin alle. */
.etusivu-toiminta {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--vari-metsa-paperi);
}
.etusivu-toiminta__tausta,
.etusivu-toiminta__varjostus {
  position: absolute;
  inset: 0 0 auto auto;
  width: 100%;
  height: 64%;
  pointer-events: none;
}
.etusivu-toiminta__tausta {
  z-index: -2;
  object-fit: cover;
  object-position: 58% 38%;
  filter: saturate(0.58);
  opacity: 0.28;
}
.etusivu-toiminta__varjostus {
  z-index: -1;
  background: linear-gradient(0deg, var(--vari-metsa-paperi) 0%, transparent 42%),
    linear-gradient(90deg, var(--vari-metsa-paperi) 0%, var(--vari-metsa-paperi-88) 58%, var(--vari-metsa-paperi-48) 100%);
}
.etusivu-johdanto { display: grid; gap: 1.5rem; margin-bottom: 3.5rem; }
.etusivu-johdanto__teksti { max-width: 58ch; color: var(--vari-metsa-teksti); }
.etusivu-johdanto__teksti .johdanto { margin-bottom: 1.25rem; color: var(--vari-metsa-muste); }
.etusivu-tekstilinkki {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: 0.5rem;
  gap: 2rem;
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--vari-metsa-muste);
  text-decoration: underline;
  text-underline-offset: 6px;
}
.sivu-etusivu .kortit { grid-template-columns: 1fr; gap: 2rem; }
.sivu-etusivu .kortti {
  padding: 1.5rem 0 0;
  border: 0;
  border-top: 1px solid var(--vari-metsa-reuna);
  border-radius: 0;
  gap: 0.9rem;
}
.sivu-etusivu .kortti .kortti__yliotsikko {
  flex: none;
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.13em;
  color: var(--vari-metsa-teksti);
}
.sivu-etusivu .kortti h3 { font-size: 2rem; }
.sivu-etusivu .kortti p { font-size: 0.98rem; line-height: 1.8; color: var(--vari-metsa-teksti); }

/* Sammal 3 sulautuu vihreään pintaan, ei erillistä kuvakorttia. */
.etusivu-vastuu {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--vari-metsa-sumu);
}
.etusivu-vastuu__tausta {
  z-index: -2;
  object-fit: cover;
  object-position: center 38%;
  filter: saturate(0.62);
}
.etusivu-vastuu__varjostus {
  z-index: -1;
  background: linear-gradient(0deg, var(--vari-metsa-sumu), var(--vari-metsa-sumu-peite));
}
.etusivu-vastuu__sisalto { max-width: 580px; }
.etusivu-vastuu .johdanto { max-width: 45ch; color: var(--vari-metsa-teksti); margin-bottom: 2rem; }
.etusivu-periaatteet { display: grid; gap: 1.3rem; }
.etusivu-periaatteet article { padding-top: 1.15rem; border-top: 1px solid var(--vari-metsa-reuna); }
.etusivu-periaatteet h3 {
  font-family: var(--fontti-kayttoliittyma);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.4;
  margin-bottom: 0.45rem;
}
.etusivu-periaatteet p { font-size: 0.98rem; line-height: 1.8; margin: 0; color: var(--vari-metsa-teksti); }

.etusivu-yhteys { background: var(--vari-metsa-paperi); }
.etusivu-yhteys__sisalto { display: flex; align-items: flex-start; flex-direction: column; gap: 1.25rem; }
.etusivu-yhteys h2 { font-size: clamp(2.2rem, 4vw, 3.25rem); }
.etusivu-yhteys p:not(.yliotsikko) { color: var(--vari-metsa-teksti); margin: 0; }
.etusivu-yhteys .painike { flex: 0 0 auto; border-color: var(--vari-metsa-muste); }
.sivu-etusivu .alatunniste { background: var(--vari-metsa-yo); border-top: 1px solid var(--vari-metsa-reuna-vaalea); }
.sivu-etusivu .alatunniste__sisalto { gap: 2rem; }
.sivu-etusivu .alatunniste__otsikko { font-family: var(--fontti-kayttoliittyma); }
.sivu-etusivu .alatunniste__alarivi { border-color: var(--vari-metsa-reuna-vaalea); }

@media (min-width: 760px) {
  .etusivu-hero { min-height: min(790px, 90svh); }
  .etusivu-hero__sisalto { padding-top: 5rem; }
  .etusivu-hero__varjostus {
    background: linear-gradient(90deg, var(--vari-metsa-varjo-keski) 0%, var(--vari-metsa-varjo-kevyt) 42%, var(--vari-metsa-varjo-hento) 100%),
      linear-gradient(0deg, var(--vari-metsa-varjo-kevyt), transparent 35%);
  }
  .etusivu-hero__alarivi { margin-top: 4rem; }
  .etusivu-johdanto { grid-template-columns: 1fr 1.15fr; gap: 4rem; }
  .etusivu-toiminta__tausta,
  .etusivu-toiminta__varjostus { width: 58%; height: 72%; }
  .etusivu-toiminta__tausta { opacity: 0.58; object-position: 62% 42%; }
  .etusivu-toiminta__varjostus {
    background: linear-gradient(0deg, var(--vari-metsa-paperi) 0%, transparent 36%),
      linear-gradient(90deg, var(--vari-metsa-paperi) 0%, var(--vari-metsa-paperi-92) 34%, var(--vari-metsa-paperi-38) 100%);
  }
  .sivu-etusivu .kortit { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.5rem; }
  .etusivu-vastuu__tausta { width: 65%; left: 35%; object-position: center 45%; }
  .etusivu-vastuu__varjostus {
    background: linear-gradient(90deg, var(--vari-metsa-sumu) 0%, var(--vari-metsa-sumu) 35%, var(--vari-metsa-sumu-peite) 55%, transparent 85%),
      linear-gradient(0deg, var(--vari-metsa-sumu), transparent 25%, transparent 80%, var(--vari-metsa-sumu));
  }
  .etusivu-vastuu__sisalto { max-width: 52%; }
  .etusivu-yhteys__sisalto { flex-direction: row; align-items: center; justify-content: space-between; gap: 3rem; }
}
@media (min-width: 1040px) {
  .sivu-etusivu .paavalikko { background: transparent; }
  .sivu-etusivu .paavalikko__lista { gap: 20px; }
  .sivu-etusivu .paavalikko__linkki { font-size: 0.85rem; min-height: 44px; display: flex; align-items: center; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* Yrityssivu jatkaa etusivun rauhallista, kuvallista metsälinjaa. */
.sivu-yritys {
  font-family: var(--fontti-kayttoliittyma);
  color: var(--vari-metsa-muste);
  background: var(--vari-metsa-paperi);
}
.sivu-yritys .rajaus { max-width: 1280px; padding-inline: clamp(24px, 5vw, 72px); }
.sivu-yritys .ylatunniste {
  background: var(--vari-metsa-yo);
  border-bottom: 1px solid var(--vari-metsa-reuna-vaalea);
}
.sivu-yritys .paavalikko { background: var(--vari-metsa-yo); }
.yritys-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 330px;
  display: flex;
  align-items: flex-end;
  color: var(--vari-metsa-paperi);
  background: var(--vari-metsa-yo);
}
.yritys-hero__tausta,
.yritys-hero__varjostus {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.yritys-hero__tausta {
  z-index: -2;
  object-fit: cover;
  object-position: center 58%;
  filter: saturate(0.76) brightness(1.08);
}
.yritys-hero__varjostus {
  z-index: -1;
  background: var(--vari-metsa-varjo-kevyt);
}
.yritys-hero__sisalto { width: 100%; padding-block: 4rem 2.6rem; }
.yritys-hero .yliotsikko { color: var(--vari-metsa-usva); }
.yritys-hero h1 {
  max-width: 17ch;
  margin: 0;
  color: var(--vari-metsa-paperi);
  font-size: clamp(2.8rem, 6vw, 5rem);
  line-height: 1;
  text-wrap: balance;
}
.yritys-hero .otsikko-jatko {
  display: block;
  margin-top: 0.28em;
  font-size: 0.56em;
  line-height: 1.08;
}
.yritys-sisalto { background: var(--vari-metsa-paperi); }
.yritys-johdanto { display: grid; gap: 1.25rem; margin-bottom: clamp(3rem, 7vw, 5.5rem); }
.yritys-johdanto .johdanto { margin: 0; font-size: 1.12rem; line-height: 1.8; }
.yritys-johdanto__nykytila { max-width: 58ch; color: var(--vari-metsa-teksti); }
.yritys-johdanto__nykytila p { line-height: 1.8; }
.yritys-historia { max-width: 820px; }
.yritys-historia h2 { margin-bottom: 1.5rem; }
.sivu-yritys .aikajana { gap: 0; }
.sivu-yritys .aikajana li {
  grid-template-columns: 78px minmax(0, 1fr);
  gap: 1.25rem;
  padding-block: 1.15rem;
  border-color: var(--vari-metsa-reuna);
}
.sivu-yritys .aikajana__vuosi { color: var(--vari-metsa-muste); }
.sivu-yritys .kortti {
  padding: 1.5rem 0 0;
  border: 0;
  border-top: 1px solid var(--vari-metsa-reuna);
  border-radius: 0;
}
.sivu-yritys .kortti p { color: var(--vari-metsa-teksti); line-height: 1.8; }
.sivu-yritys .alatunniste {
  background: var(--vari-metsa-yo);
  border-top: 1px solid var(--vari-metsa-reuna-vaalea);
}

@media (min-width: 760px) {
  .yritys-hero { min-height: 450px; }
  .yritys-hero__varjostus {
    background: linear-gradient(90deg, var(--vari-metsa-varjo-keski) 0%, var(--vari-metsa-varjo-kevyt) 46%, var(--vari-metsa-varjo-hento) 100%);
  }
  .yritys-johdanto { grid-template-columns: 1fr 1fr; gap: clamp(3rem, 7vw, 6rem); }
  .sivu-yritys .aikajana li { grid-template-columns: 112px minmax(0, 1fr); }
}

/* Vastuullisuussivu: vaalea, kuvaan sulautuva kokonaisuus erotuksena yrityssivun
   tummalle yläkuvalle. */
.sivu-vastuullisuus {
  font-family: var(--fontti-kayttoliittyma);
  color: var(--vari-metsa-muste);
  background: var(--vari-metsa-paperi);
}
.sivu-vastuullisuus .rajaus { max-width: 1280px; padding-inline: clamp(24px, 5vw, 72px); }
.sivu-vastuullisuus .ylatunniste {
  background: var(--vari-metsa-yo);
  border-bottom: 1px solid var(--vari-metsa-reuna-vaalea);
}
.sivu-vastuullisuus .paavalikko { background: var(--vari-metsa-yo); }
.sivu-vastuullisuus :is(section, article)[id] { scroll-margin-top: 110px; }

.vastuu-hero-sivu {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 500px;
  display: flex;
  align-items: center;
  background: var(--vari-metsa-paperi);
}
.vastuu-hero-sivu__tausta,
.vastuu-hero-sivu__varjostus {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.vastuu-hero-sivu__tausta {
  object-fit: cover;
  object-position: center 58%;
  filter: saturate(0.68) brightness(1.03);
}
.vastuu-hero-sivu__varjostus {
  z-index: -1;
  background: linear-gradient(90deg, var(--vari-metsa-paperi-92), var(--vari-metsa-paperi-88));
}
.vastuu-hero-sivu__sisalto { width: 100%; padding-block: clamp(4rem, 9vw, 7rem); }
.vastuu-hero-sivu .yliotsikko { color: var(--vari-metsa-teksti); }
.vastuu-hero-sivu h1 {
  max-width: 15ch;
  margin-bottom: 1.4rem;
  color: var(--vari-metsa-muste);
  font-size: clamp(2.8rem, 6vw, 5.2rem);
  line-height: 0.98;
  text-wrap: balance;
}
.vastuu-hero-sivu__sisalto > p:last-child {
  max-width: 43ch;
  margin: 0;
  color: var(--vari-metsa-teksti);
  font-size: 1rem;
  line-height: 1.7;
}

.vastuu-sisalto { padding-block: clamp(4rem, 9vw, 7rem); background: var(--vari-metsa-paperi); }
.vastuu-johdanto { display: grid; gap: 1.5rem; margin-bottom: clamp(3.5rem, 8vw, 6rem); }
.vastuu-johdanto h2 { max-width: 14ch; font-size: clamp(2.3rem, 4.5vw, 3.6rem); }
.vastuu-johdanto .johdanto { margin-bottom: 1rem; font-size: 1.12rem; line-height: 1.8; }
.vastuu-johdanto > div:last-child { max-width: 60ch; color: var(--vari-metsa-teksti); }
.vastuu-johdanto > div:last-child > p:last-child { line-height: 1.8; }

.vastuu-teemat { display: grid; gap: 2.5rem; }
.vastuu-teemat article { padding-top: 1.25rem; border-top: 1px solid var(--vari-metsa-reuna); }
.vastuu-teemat__numero {
  margin-bottom: 1.6rem;
  color: var(--vari-metsa-teksti);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.18em;
}
.vastuu-teemat h2 { font-size: clamp(1.7rem, 3vw, 2.25rem); }
.vastuu-teemat article > p:last-child { margin: 0; color: var(--vari-metsa-teksti); line-height: 1.8; }

.vastuu-arviointi { background: var(--vari-metsa-sumu); color: var(--vari-metsa-muste); }
.vastuu-arviointi__johdanto {
  background: linear-gradient(135deg, var(--vari-metsa-sumu) 0%, var(--vari-metsa-paperi) 100%);
}
.vastuu-arviointi__otsikko {
  display: grid;
  gap: 2rem;
  max-width: 56rem;
  padding-left: clamp(1rem, 2.5vw, 1.75rem);
  border-left: 3px solid var(--vari-metsa-muste);
}
.vastuu-arviointi__otsikko h2 { max-width: 18ch; color: var(--vari-metsa-muste); }
.vastuu-arviointi__johdanto .yliotsikko { color: var(--vari-metsa-teksti); }
.vastuu-arviointi__aiheet {
  display: grid;
  gap: 0.65rem;
  margin: 0;
  color: var(--vari-metsa-teksti);
  font-family: var(--fontti-kayttoliittyma);
  font-size: 0.68rem;
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.vastuu-arviointi__aiheet span { display: flex; align-items: center; gap: 0.7rem; }
.vastuu-arviointi__aiheet span::before {
  content: '';
  width: 1.5rem;
  height: 1px;
  flex: 0 0 auto;
  background: var(--vari-metsa-reuna);
}
.vastuu-arviointi__kortit { background: var(--vari-metsa-muste); color: var(--vari-metsa-paperi); }
.vastuu-arviointi__ruudukko { display: grid; gap: 3rem; }
.vastuu-arviointi__kortti {
  padding-top: 1.5rem;
  border-top: 1px solid var(--vari-metsa-reuna-vaalea);
}
.vastuu-arviointi__tulos { display: flex; align-items: flex-end; gap: 1.1rem; }
.vastuu-arviointi__tulos strong {
  font-family: var(--fontti-otsikko);
  font-size: clamp(4.5rem, 14vw, 7.5rem);
  font-weight: 400;
  line-height: 0.78;
}
.vastuu-arviointi__tulos span {
  color: var(--vari-metsa-usva);
  font-size: 0.75rem;
  line-height: 1.5;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.vastuu-arviointi h2 { font-size: clamp(2.2rem, 4vw, 3.25rem); }
.vastuu-arviointi__kortti h3 {
  margin-top: 2.25rem;
  font-family: var(--fontti-otsikko);
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  font-weight: 400;
}
.vastuu-arviointi__kortti > p { max-width: 58ch; margin-bottom: 0; color: var(--vari-metsa-usva); line-height: 1.8; }

.vastuu-yhteys { background: var(--vari-metsa-sumu); }
.vastuu-yhteys__sisalto { display: flex; flex-direction: column; align-items: flex-start; gap: 1.5rem; }
.vastuu-yhteys h2 { margin: 0; font-size: clamp(2.2rem, 4vw, 3.25rem); }
.vastuu-yhteys .painike { flex: 0 0 auto; border-color: var(--vari-metsa-muste); }
.sivu-vastuullisuus .alatunniste {
  background: var(--vari-metsa-yo);
  border-top: 1px solid var(--vari-metsa-reuna-vaalea);
}

@media (min-width: 760px) {
  .vastuu-hero-sivu { min-height: 620px; }
  .vastuu-hero-sivu__tausta { left: 42%; width: 58%; object-position: 54% 58%; }
  .vastuu-hero-sivu__varjostus {
    background: linear-gradient(90deg, var(--vari-metsa-paperi) 0%, var(--vari-metsa-paperi) 32%, var(--vari-metsa-paperi-92) 48%, transparent 84%),
      linear-gradient(0deg, var(--vari-metsa-paperi-48), transparent 25%, transparent 78%, var(--vari-metsa-paperi-38));
  }
  .vastuu-hero-sivu__sisalto > p:last-child { font-size: 1.08rem; }
  .vastuu-johdanto { grid-template-columns: 0.85fr 1.15fr; gap: clamp(3rem, 8vw, 7rem); }
  .vastuu-teemat { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .vastuu-arviointi__otsikko { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
  .vastuu-arviointi__aiheet { padding-bottom: 0.45rem; }
  .vastuu-arviointi__ruudukko { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(3rem, 8vw, 7rem); }
  .vastuu-yhteys__sisalto { flex-direction: row; align-items: center; justify-content: space-between; gap: 3rem; }
}

@media (max-width: 520px) {
  .ylatunniste__sisalto { gap: 8px; padding-inline: 16px; }
  .logo { gap: 7px; }
  .logo__kuva { width: 36px; }
  .logo__nimi {
    font-size: 0.72rem;
    letter-spacing: 0.025em;
    line-height: 1.1;
    overflow-wrap: normal;
  }
  .logo__iskulause { font-size: 0.56rem; letter-spacing: 0.12em; }
  .ylatunniste__ohjaimet { gap: 8px; }
  .kielivalinta a { min-height: 40px; padding: 6px 8px; font-size: 0.72rem; }
  .valikkonappi { width: 40px; height: 40px; }
}

/* Faktarivi heron alla */
.faktarivi {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: clamp(1rem, 3vw, 2.25rem);
  padding: clamp(1.25rem, 3vw, 1.875rem) 0;
  border-bottom: 1px solid var(--vari-jakaja);
}
.fakta__luku {
  font-family: var(--fontti-otsikko);
  font-size: clamp(1.5rem, 4vw, 2.125rem);
  color: var(--vari-korostus-700);
}
.fakta__selite {
  font-size: 0.875rem;
  color: var(--vari-teksti-haalea);
}

/* Kortit */
.kortit {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(1rem, 3vw, 1.75rem);
}
.kortti {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 1rem;
  border: 1px solid var(--vari-jakaja);
  border-radius: var(--pyoristys);
}
.kortti--korostus { border-color: var(--vari-korostus); }
.kortti__yliotsikko {
  font-size: 0.625rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--vari-korostus);
}
.kortti h3 { font-size: 1.1875rem; margin: 0; }
.kortti p { margin: 0; font-size: 0.9375rem; color: var(--vari-teksti-haalea); flex: 1; }

/* Painikkeet */
.painike {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0.6rem 1.1rem;
  font-family: var(--fontti-otsikko);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.02em;
  color: var(--vari-teksti);
  text-decoration: none;
  background: transparent;
  border: 1px solid var(--vari-jakaja);
  border-radius: var(--pyoristys);
  cursor: pointer;
}
.painike:hover { background: rgba(32, 31, 29, 0.07); color: var(--vari-teksti); }

.painike--korostus {
  color: var(--vari-korostus-700);
  border-color: var(--vari-korostus);
}
.painike--korostus:hover {
  background: rgba(32, 31, 29, 0.08);
  color: var(--vari-korostus-700);
}

/* Tumman taustan painikkeet */
.painike--korostus-tumma {
  color: var(--vari-korostus-tumma);
  border-color: var(--vari-korostus-tumma);
}
.painike--korostus-tumma:hover {
  background: rgba(255, 255, 255, 0.12);
  color: var(--vari-korostus-tumma);
}
.painike--haalea {
  color: var(--vari-tausta);
  border-color: transparent;
}
.painike--haalea:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--vari-tausta);
}

/* Kuvapaikat: kehystetty paikka, johon oikea valokuva lisätään myöhemmin.
   Kun kuva on olemassa, laita <img> .levy-elementin sisään ja poista
   .kuvapaikka-elementti. */
.levy {
  width: 100%;
  border: 6px solid var(--vari-pinta);
  outline: 1px solid var(--vari-jakaja);
}
.levy img { width: 100%; height: 100%; object-fit: cover; }
.sisaltokuva--3-4 { aspect-ratio: 3 / 4; }
.sisaltokuva--4-3 { aspect-ratio: 4 / 3; }

.kuvapaikka {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: var(--vali-s);
  background:
    repeating-linear-gradient(45deg, var(--vari-pinta) 0 12px, var(--vari-tausta) 12px 24px);
  color: var(--vari-teksti-hiljainen);
  font-size: 0.8125rem;
  font-style: italic;
  text-align: center;
}
.kuvapaikka--4-3  { aspect-ratio: 4 / 3; }
.kuvapaikka--3-2  { aspect-ratio: 3 / 2; }
.kuvapaikka--3-4  { aspect-ratio: 3 / 4; }
.kuvapaikka--21-9 { aspect-ratio: 21 / 9; }

/* Kaksi palstaa (esim. yritys-sivun historia + kuvat) */
.palstat {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1.5rem, 5vw, 3.5rem);
}
.palsta--levea  { flex: 1 1 380px; min-width: 0; }
.palsta--kapea  { flex: 1 1 280px; min-width: 0; display: flex; flex-direction: column; gap: 1.1rem; }

/* Aikajana */
.aikajana {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}
.aikajana li {
  display: grid;
  grid-template-columns: 84px 1fr;
  gap: 1rem;
  border-top: 1px solid var(--vari-jakaja);
  padding-top: 0.9rem;
}
.aikajana__vuosi {
  font-family: var(--fontti-otsikko);
  font-size: 1.25rem;
  color: var(--vari-korostus-700);
}

/* Palvelulista (palvelut-sivu) */
.palvelulista {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(1.1rem, 3vw, 2rem);
}
.palvelu {
  border-top: 1px solid var(--vari-korostus-300);
  padding-top: 1.1rem;
}
.palvelu h2 { font-size: clamp(1.25rem, 3vw, 1.625rem); margin-bottom: 0.6rem; }
.palvelu p { color: var(--vari-teksti-tumma); }

.tunniste {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  font-size: 0.6875rem;
  letter-spacing: 0.02em;
  border: 1px solid var(--vari-korostus);
  border-radius: 3px;
  color: var(--vari-korostus-700);
}

/* Kuvagalleria */
.galleria {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(1.1rem, 3vw, 1.875rem);
}
.galleria figcaption {
  margin-top: 0.5rem;
  font-size: 0.84375rem;
  color: var(--vari-teksti-haalea);
}

/* Yhteystietolistat */
.yhteystietolista {
  list-style: none;
  margin: 0 0 var(--vali-m);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.yhteystietolista li {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  justify-content: space-between;
  border-top: 1px solid var(--vari-jakaja);
  padding-top: 0.6rem;
}
.yhteystietolista__henkilo { display: grid; gap: 0.1rem; }
.yhteystietolista__rooli {
  color: var(--vari-teksti-hiljainen);
  font-size: 0.75rem;
  line-height: 1.4;
}
.yhteystietolista a { text-decoration: none; border-bottom: 1px solid var(--vari-korostus-300); }

/* Yhteystietosivu: kaksi samankokoista yläosiota ja leveä lomake niiden alla. */
.yhteystiedot-ruudukko {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.25rem, 3vw, 2rem);
  margin-top: clamp(2rem, 5vw, 3.5rem);
}
.yhteystiedot-kortti,
.yhteystiedot-lomake {
  padding: clamp(1.5rem, 4vw, 2.5rem);
  border: 1px solid var(--vari-jakaja);
  background: var(--vari-pinta);
}
.yhteystiedot-kortti {
  display: flex;
  flex-direction: column;
}
.yhteystiedot-kortti .yhteystietolista { margin-bottom: 0; }
.yhteystiedot-kuva,
.yhteystiedot-kuva .levy,
.yhteystiedot-kuva .kuvapaikka {
  height: 100%;
}
.yhteystiedot-kuva .levy {
  position: relative;
  overflow: hidden;
  border-width: 0;
  background: var(--vari-tausta);
}
.yhteystiedot-kuva img {
  object-position: center 52%;
  filter: saturate(0.76) contrast(0.94) brightness(1.02);
}
.yhteystiedot-kuva .kuvapaikka {
  min-height: 320px;
  aspect-ratio: auto;
}
.yhteystiedot-lomake { grid-column: 1 / -1; }
.yhteystiedot-palaute {
  background: var(--vari-metsa-sumu);
  border-color: var(--vari-metsa-reuna);
}
.lomake-huomautus {
  margin-bottom: 1.5rem;
  padding-left: 0.9rem;
  border-left: 2px solid var(--vari-jakaja);
  font-size: 0.9rem;
  color: var(--vari-teksti-haalea);
}
.lomake-tietosuoja {
  max-width: 72ch;
  margin-bottom: 1.5rem;
  font-size: 0.875rem;
  color: var(--vari-teksti-haalea);
}
.lomake-tietosuoja a { font-weight: 600; }
.lomake.lomake--vaaka { display: grid; grid-template-columns: 1fr; }
.lomake--vaaka .kentta--levea,
.lomake--vaaka .lomake__toiminnot { grid-column: 1 / -1; }
.lomake--vaaka .lomake__toiminnot { margin: 0; }

@media (min-width: 760px) {
  .yhteystiedot-ruudukko { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lomake.lomake--vaaka { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 1.5rem; }
}

/* 7. Lomakkeet ---------------------------------------------------------------- */
.lomake {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.kentta label {
  display: block;
  margin-bottom: 5px;
  font-size: 0.78125rem;
  color: var(--vari-teksti-haalea);
}
.syote {
  width: 100%;
  min-height: 42px;
  padding: 8px 10px;
  font: inherit;
  font-size: 0.9375rem;
  color: var(--vari-teksti);
  caret-color: var(--vari-korostus);
  background: transparent;
  border: 1px solid var(--vari-jakaja);
  border-radius: var(--pyoristys);
}
.syote:hover { border-color: var(--vari-teksti-hiljainen); }
.syote:focus-visible { border-color: var(--vari-korostus); outline-offset: 0; }
textarea.syote { min-height: 140px; resize: vertical; }

/* Roskapostisuoja: kenttä piilotetaan ihmisiltä, botit täyttävät sen */
.hunajapurkki {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  overflow: hidden;
}

.lomake-ilmoitus {
  padding: 1rem;
  border: 1px solid var(--vari-korostus);
  border-radius: var(--pyoristys);
}
.lomake-ilmoitus--virhe { border-color: #a03c26; color: #7c2d1b; }
.lomake-ilmoitus h2 { font-size: 1.1875rem; margin-bottom: 0.4rem; }
.lomake-ilmoitus p { margin: 0; font-size: 0.9375rem; }

/* 8. Alatunniste --------------------------------------------------------------- */
.alatunniste {
  margin-top: var(--vali-l);
  background: var(--vari-tumma);
  border-top: 3px solid var(--vari-korostus-tumma);
  color: var(--vari-tumma-teksti);
}
.sivu-etusivu .alatunniste { margin-top: 0; }

.alatunniste__sisalto {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: clamp(1.5rem, 4vw, 2.75rem);
  padding-top: clamp(2rem, 5vw, 3.5rem);
  padding-bottom: clamp(1.25rem, 3vw, 1.75rem);
}

.alatunniste__brandi {
  display: flex;
  align-items: center;
  gap: 12px;
}
.alatunniste__nimi {
  font-family: var(--fontti-otsikko);
  font-size: 1.1875rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--vari-korostus-tumma);
}
.alatunniste__kuvaus {
  margin: 12px 0 0;
  max-width: 34ch;
  font-size: 0.875rem;
  color: var(--vari-tumma-haalea);
}

.alatunniste__otsikko {
  margin: 0 0 12px;
  font-family: var(--fontti-leipa);
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--vari-tumma-hiljainen);
}

.alatunniste__valikko {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.alatunniste__valikko a {
  font-size: 0.90625rem;
  text-decoration: none;
  color: var(--vari-tumma-teksti);
  border-bottom: 1px solid transparent;
  width: fit-content;
}
.alatunniste__valikko a:hover { border-bottom-color: var(--vari-korostus-tumma); color: var(--vari-tumma-teksti); }

.alatunniste__yhteys {
  margin: 0;
  font-size: 0.90625rem;
  line-height: 1.9;
  color: var(--vari-tumma-haalea);
}
.alatunniste__yhteys a {
  color: var(--vari-korostus-tumma);
  text-decoration: none;
  border-bottom: 1px solid var(--vari-korostus-700);
}
.alatunniste__yhteys a:hover { color: var(--vari-korostus-tumma); border-bottom-color: var(--vari-korostus-tumma); }

.alatunniste__ytunnus {
  margin: 0.6rem 0 0;
  font-size: 0.8125rem;
  color: var(--vari-tumma-hiljainen);
}

.sertifikaatit {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.sertifikaatit li {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border: 1px solid #4a4a50;
  border-radius: var(--pyoristys);
  font-size: 0.78125rem;
  letter-spacing: 0.08em;
  color: var(--vari-korostus-tumma);
}

.alatunniste__alarivi { border-top: 1px solid var(--vari-tumma-jakaja); }
.alatunniste__alarivi-sisalto {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
  justify-content: space-between;
  padding-top: 16px;
  padding-bottom: 16px;
  font-size: 0.8125rem;
  color: var(--vari-tumma-hiljainen);
}
.alatunniste__alarivi-sisalto p { margin: 0; }
.alatunniste__alarivi-sisalto a {
  color: inherit;
  text-underline-offset: 3px;
}
.alatunniste__alarivi-sisalto a:hover { color: var(--vari-tumma-teksti); }

/* Tietosuojaseloste ----------------------------------------------------------- */
.tietosuoja-sivu { padding-top: clamp(3rem, 8vw, 6rem); }
.tietosuoja-sisalto h1 { margin-bottom: 1.25rem; }
.tietosuoja-sisalto h2 {
  margin-top: clamp(2rem, 5vw, 3rem);
  font-size: clamp(1.4rem, 3vw, 1.9rem);
}
.tietosuoja-sisalto ul {
  margin: 0 0 1rem;
  padding-left: 1.25rem;
}
.tietosuoja-sisalto li + li { margin-top: 0.6rem; }
.tietosuoja-paivitetty {
  margin-top: 1.5rem;
  font-size: 0.875rem;
  color: var(--vari-teksti-hiljainen);
}

/* 9. Isot näytöt --------------------------------------------------------------- */
@media (min-width: 1040px) {
  .valikkonappi { display: none; }

  .paavalikko {
    display: block;
    position: static;
    background: transparent;
    border: 0;
  }
  .paavalikko__lista {
    flex-direction: row;
    align-items: center;
    gap: 22px;
    padding: 0;
  }
  .paavalikko__linkki {
    padding: 0 0 3px;
    font-size: 0.95rem;
    letter-spacing: 0.04em;
    white-space: nowrap;
    border-bottom: 2px solid transparent;
  }
  .paavalikko__linkki.on-aktiivinen {
    border-bottom-color: var(--vari-korostus-tumma);
  }

  .etusivu-hero__tausta { object-position: center 52%; }
}