/* ==========================================================================
   Venehuolto Turku, tyylit
   Yksi tiedosto, jarjestetty osioittain. Ei esikaantajaa, ei riippuvuuksia.
   Arvot on poimittu alkuperaisen Webflow-sivuston lasketuista tyyleista,
   joten ulkoasun pitaa vastata sita pikselintarkasti.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Muuttujat
   -------------------------------------------------------------------------- */
:root {
  /* Varit */
  --meri:            #0b2c3d;  /* otsikot, leipateksti, tumma nappi, alatunniste */
  --yo:              #0b1a2e;  /* UKK-viivat, navin linkki, tummin sininen */
  --yo-syva:         #0a1a2d;  /* tahdet, ohuet rajat */
  --kupari:          #df9921;  /* paavari: display-otsikko, oranssi nappi, linkit */
  --kupari-kirkas:   #ffb729;  /* hover */
  --valkoinen:       #fff;
  --savu:            #f4f6f8;  /* vaalea osiotausta */
  --savu-tumma:      #f5f5f5;  /* UKK-ryhman nappula */
  --hiili:           #2c2c2c;  /* navin linkki vieritettyna */
  --alapalkki:       #0b2a3a;  /* alatunnisteen alin palkki */

  /* Kirjasimet */
  --otsikkofontti: Montserrat, system-ui, sans-serif;
  --leipafontti:   Inter, system-ui, -apple-system, sans-serif;
  --vaihtofontti:  'Google Sans Flex', Inter, system-ui, sans-serif;

  /* Mitat. Webflow kayttaa reunuksissa nelja porrasta: 4rem, 2rem, 5 %, 5 % */
  --reunus:      4rem;
  --navi-korkeus: 5rem;

  /* Sisallon suurin leveys. Isolla naytolla sisalto ei leviä laidasta laitaan
     vaan pysyy tassa kaistassa keskella. Osioiden taustat ovat edelleen koko
     ruudun levyiset, samoin hero- ja esittelykuvat. */
  --sisalto-leveys: 1400px;

  /* Osioiden sivureunus. Pienilla naytoilla tama on tasan --reunus, joten
     mikaan ei muutu. Kun naytto on leveampi kuin --sisalto-leveys, reunus
     kasvaa niin etta sisalto keskittyy kaistaan. */
  --sivureunus: max(var(--reunus), calc((100% - var(--sisalto-leveys)) / 2));
}

/* --------------------------------------------------------------------------
   2. Perusta
   -------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  height: 100%;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Kiinteä navi ei saa peittaa ankkurikohteita */
  scroll-padding-top: 6rem;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

body {
  margin: 0;
  min-height: 100%;
  background-color: var(--valkoinen);
  color: var(--meri);
  font-family: var(--leipafontti);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img,
svg,
video { display: block; max-width: 100%; }

img { border: 0; height: auto; }

a { color: inherit; }

button { font: inherit; color: inherit; }

h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 500; }

p { margin: 0; }

ul, ol { margin: 0; }

:focus-visible {
  outline: 2px solid var(--kupari);
  outline-offset: 3px;
}

/* Ruudunlukijoille, ei nakyville */
.vain-ruudunlukijalle {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Ohita navigaatio -linkki */
.ohitalinkki {
  position: absolute;
  top: -100%;
  left: 1rem;
  z-index: 10000;
  padding: .75rem 1.25rem;
  background: var(--meri);
  color: var(--valkoinen);
  font-family: var(--otsikkofontti);
  font-size: .95rem;
  text-decoration: none;
  transition: top .2s;
}
.ohitalinkki:focus { top: 1rem; }

/* --------------------------------------------------------------------------
   3. Typografia
   -------------------------------------------------------------------------- */
.display {
  margin: 0;
  color: var(--kupari);
  font-family: var(--otsikkofontti);
  font-size: 3.6rem;
  font-weight: 500;
  line-height: 110%;
  letter-spacing: 0;
}
.display--koti { font-size: 4rem; }

.otsikko {
  margin: 0;
  color: var(--meri);
  font-family: var(--otsikkofontti);
  font-size: 2.6rem;
  font-weight: 600;
  line-height: 120%;
}

.leipa {
  color: var(--meri);
  font-family: var(--leipafontti);
  font-size: 1rem;
  font-weight: 400;
  line-height: 160%;
}
.leipa--iso {
  font-size: 1.2rem;
  font-weight: 300;
  letter-spacing: .1px;
}
.leipa--iso.leipa--lihava {
  font-family: var(--otsikkofontti);
  font-weight: 500;
}
/* Leipatyylisena naytettavat h2-otsikot hieman paksumpina */
h2.leipa--iso.leipa--lihava { font-weight: 600; }
.leipa--lihava { font-weight: 600; }
.leipa--pieni  { font-size: .9rem; font-weight: 400; }
.leipa--huomio { font-size: .8rem; font-weight: 200; }
.leipa--kevyt  { font-weight: 300; }
.leipa--valkoinen {
  color: var(--valkoinen);
  letter-spacing: .1px;
  font-weight: 300;
}
.leipa--valkoinen.leipa--iso {
  opacity: .9;
  font-size: 1.2rem;
}
.leipa--kupari { color: var(--kupari); font-weight: 500; }

.leipa strong { font-weight: 600; }

.merkki {
  margin: 0;
  color: var(--valkoinen);
  font-family: var(--vaihtofontti);
  font-size: 1rem;
  font-weight: 100;
  line-height: 100%;
}

/* Tekstilinkki leipatekstin seassa */
.tekstilinkki {
  color: var(--kupari);
  text-decoration: none;
}
.tekstilinkki:hover { text-decoration: underline; }

/* --------------------------------------------------------------------------
   4. Napit
   -------------------------------------------------------------------------- */
.nappi {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .8rem 2.4rem;
  border: 0;
  border-radius: 0;
  font-family: var(--otsikkofontti);
  font-size: 1rem;
  font-weight: 500;
  line-height: 100%;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .2s, color .2s, opacity .2s;
}

.nappi--oranssi {
  background-color: var(--kupari);
  color: var(--valkoinen);
}
.nappi--oranssi:hover { background-color: var(--kupari-kirkas); }

.nappi--valkoinen {
  background-color: var(--valkoinen);
  color: var(--yo);
}
.nappi--valkoinen:hover { background-color: rgba(255, 255, 255, .8); }

.nappi--tumma {
  background-color: var(--meri);
  color: var(--valkoinen);
  text-shadow: 0 1px 10px rgba(0, 0, 0, .23);
}
.nappi--tumma:hover { background-color: #1e395e; }

.nappi--tyhja {
  padding: 0 2rem 0 1rem;
  background-color: transparent;
  color: var(--valkoinen);
  font-weight: 400;
}
.nappi--tyhja:hover { color: var(--kupari-kirkas); }

/* --------------------------------------------------------------------------
   5. Navigaatio
   -------------------------------------------------------------------------- */
.navi {
  position: fixed;
  inset: 0 0 auto;
  z-index: 9999;
  display: flex;
  align-items: center;
  width: 100%;
  height: var(--navi-korkeus);
  padding: 0 var(--sivureunus);
  background-color: transparent;
  transition: background-color .4s ease, box-shadow .4s ease;
}
/* Vieritettaessa navi muuttuu valkoiseksi ja tekstit tummiksi */
.navi.on-kiinni { background-color: var(--valkoinen); }

/* Sivuilla joilla ei ole tummaa heroa navi on heti valkoinen, muuten
   valkoiset linkit jaisivat nakymattomiin vaaleaa taustaa vasten. */
.sivu-vaalea .navi { background-color: var(--valkoinen); }

.navi__sisus {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 100%;
}

.navi__logo-linkki {
  display: flex;
  align-items: center;
  height: auto;
  padding-left: 0;
}
.navi__logo {
  height: 4rem;
  width: auto;
  margin-top: -4px;
}

.navi__valikko {
  display: flex;
  align-items: center;
}

.navi__linkit {
  display: flex;
  align-items: center;
}

.navi__linkki,
.navi__pudotus-nappi {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem 1rem;
  color: var(--valkoinen);
  font-family: var(--otsikkofontti);
  font-size: 1rem;
  font-weight: 500;
  /* Webflow perii rungosta 20 px rivivalin */
  line-height: 1.25rem;
  text-decoration: none;
  text-transform: none;
  background: none;
  border: 0;
  cursor: pointer;
  transition: color .4s ease;
}
.navi__pudotus-nappi { line-height: 160%; }
.navi.on-kiinni .navi__linkki,
.navi.on-kiinni .navi__pudotus-nappi,
.sivu-vaalea .navi__linkki,
.sivu-vaalea .navi__pudotus-nappi { color: var(--hiili); }

@media (min-width: 992px) {
  .navi__linkki:hover,
  .navi__pudotus-nappi:hover,
  .navi__pudotus-nappi[aria-expanded='true'],
  .navi.on-kiinni .navi__linkki:hover,
  .navi.on-kiinni .navi__pudotus-nappi:hover,
  .navi.on-kiinni .navi__pudotus-nappi[aria-expanded='true'] { color: var(--kupari); }
}

.navi__kärki {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1rem;
  height: 1rem;
  transition: transform .2s;
}
.navi__pudotus-nappi[aria-expanded='true'] .navi__kärki { transform: rotate(180deg); }

.navi__pudotus { position: relative; }

.navi__pudotus-lista {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 9;
  display: none;
  grid-template-columns: 1fr;
  grid-auto-rows: max-content;
  row-gap: 1rem;
  width: 22rem;
  padding: 1.5rem;
  background-color: var(--valkoinen);
  border-radius: 4px;
  box-shadow: 0 2px 17px -3px rgba(0, 0, 0, .07);
}
.navi__pudotus-lista.on-auki { display: grid; }

.navi__pudotus-linkki {
  display: flex;
  align-items: flex-start;
  padding: .25rem 0;
  color: #000;
  font-family: var(--vaihtofontti);
  font-size: 1rem;
  text-decoration: none;
  transition: color .2s;
}
.navi__pudotus-linkki:hover { color: var(--kupari); }

.navi__napit {
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-left: 1rem;
}

.navi__hampurilainen {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin-right: -.5rem;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
}
.navi__hampurilainen span {
  display: block;
  width: 24px;
  height: 2px;
  background-color: var(--valkoinen);
  transition: background-color .4s ease, transform .3s ease, opacity .2s ease;
}
.navi__hampurilainen span + span { margin-top: 6px; }
.navi.on-kiinni .navi__hampurilainen span,
.navi.valikko-auki .navi__hampurilainen span,
.sivu-vaalea .navi__hampurilainen span { background-color: var(--hiili); }

.navi.valikko-auki .navi__hampurilainen span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.navi.valikko-auki .navi__hampurilainen span:nth-child(2) { opacity: 0; }
.navi.valikko-auki .navi__hampurilainen span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* --------------------------------------------------------------------------
   6. Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  height: 100vh;
  overflow: hidden;
}

.hero__kuva {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Vastaa alkuperaisen taustakuvan background-position-arvoja */
  object-position: 0 0;
}

/* Parallaksi: script.js siirtaa kuvaa alaspain 30 % vierityksen matkasta.
   Kuvaa ei tarvitse suurentaa, koska kuvan ylareunaan syntyva rako jaa aina
   nayton ylareunan ylapuolelle. Siirtymaa ei anneta CSS:ssa, jotta kuva
   seuraa vieritysta viiveetta. */
.js .hero__kuva { will-change: transform; }

.hero__peite {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: var(--reunus) var(--sivureunus) 0;
  background-image: linear-gradient(113deg, rgba(0, 0, 0, .24), rgba(252, 252, 252, 0) 99%, #fff);
}

.hero__otsikkoalue {
  width: 80%;
  max-width: 840px;
  margin-bottom: 1.25rem;
}

.hero__ingressi {
  width: 60%;
  margin-top: .75rem;
}

.hero__napit {
  display: flex;
  gap: .5rem;
  margin-top: 2rem;
}

/* --------------------------------------------------------------------------
   7. Palvelut, ruudukko
   -------------------------------------------------------------------------- */
.palvelut {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 4rem var(--sivureunus);
  background-color: var(--valkoinen);
}
.palvelut--koti {
  margin-top: -2rem;
  padding-bottom: 6rem;
}

.osion-otsikko { width: 100%; }

.palvelut__ruudukko {
  display: grid;
  /* 12 saraketta, jotta ylarivi jakautuu kolmeen ja alarivi neljaan osaan */
  grid-template-columns: repeat(12, 1fr);
  gap: 1rem;
  width: 100%;
  margin-top: 2rem;
  /* Korttien korkeus lasketaan ruudukon omasta leveydesta, katso .palvelukortti */
  container-type: inline-size;
}

/* Kolme ensimmaista korttia ylariville, loput alariville */
.palvelut__ruudukko > .palvelukortti { grid-column: span 4; }
.palvelut__ruudukko > .palvelukortti:nth-child(n+4) { grid-column: span 3; }

/* Palvelusivuilla korttia on kuusi, koska sivun oma palvelu jatetaan pois.
   Silloin 12 sarakkeen jakoa ei tarvita: kolme saraketta ja kaksi rivia.
   Kortin korkeus tulee edelleen samasta cqw-laskusta, joten kortit sailyvat
   3/2-muotoisina. */
.palvelut__ruudukko--kuusi { grid-template-columns: repeat(3, 1fr); }
.palvelut__ruudukko--kuusi > .palvelukortti,
.palvelut__ruudukko--kuusi > .palvelukortti:nth-child(n+4) { grid-column: auto; }

.palvelukortti {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  /* Varalta jos selain ei tue cqw-yksikkoa: kortit jaavat 3/2-muotoon,
     jolloin alarivi on ylarivia matalampi mutta taitto ei hajoa */
  aspect-ratio: 3 / 2;
  /* Ylarivin kortin leveys on (ruudukko - 2 rakoa) / 3 ja kuvasuhde 3/2, eli
     korkeus siita kaksi kolmasosaa. Sama korkeus annetaan kaikille korteille,
     jolloin molemmat rivit ovat samankorkuisia vaikka leveys eroaa. */
  height: calc((100cqw - 2rem) * 2 / 9);
  overflow: hidden;
  background-color: var(--valkoinen);
  border: 1px solid rgba(0, 0, 0, .16);
  text-decoration: none;
  box-shadow: 6px 2px 30px -6px rgba(0, 0, 0, .18);
}

.palvelukortti__kuva {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Hidas zoomaus hoverissa, sama kesto molempiin suuntiin */
  transition: transform 1.2s cubic-bezier(.22, .61, .36, 1);
}
.palvelukortti:hover .palvelukortti__kuva,
.palvelukortti:focus-visible .palvelukortti__kuva { transform: scale(1.08); }

.palvelukortti__peite {
  position: absolute;
  inset: 0;
  z-index: 1;
  padding: 2rem 1.5rem;
  color: var(--valkoinen);
  background-color: rgba(11, 30, 53, .4);
  background-image: linear-gradient(rgba(3, 12, 24, .75), rgba(5, 11, 20, .4) 36%, rgba(255, 255, 255, 0));
  backdrop-filter: saturate(78%);
  -webkit-backdrop-filter: saturate(78%);
  transition: background-color .2s, backdrop-filter .2s;
}
.palvelukortti:hover .palvelukortti__peite {
  background-color: rgba(0, 0, 0, .13);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.palvelukortti__nimi {
  margin: 0;
  font-family: var(--otsikkofontti);
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 160%;
}
.palvelukortti:hover .palvelukortti__nimi { text-shadow: 0 1px 5px rgba(0, 0, 0, .55); }

.palvelukortti__nuoli {
  position: absolute;
  right: 1rem;
  bottom: 1rem;
  display: none;
  width: 3.4rem;
  align-items: center;
  justify-content: center;
}

.palvelut__nappirivi {
  display: flex;
  width: 100%;
  margin-top: 2rem;
}

/* --------------------------------------------------------------------------
   8. Esittely, teksti ja puolikas kuva
   -------------------------------------------------------------------------- */
.esittely {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 5rem var(--sivureunus);
  background-color: var(--savu);
  box-shadow: inset 0 0 20px rgba(0, 0, 0, .04);
}

.esittely__ruudukko {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  align-items: start;
}

.esittely__teksti { padding-right: 2rem; }
.esittely__leipa  { max-width: 640px; }

.esittely__otsikkoalue {
  max-width: 500px;
  margin-bottom: 2rem;
}

.esittely__nappi { display: flex; align-items: center; margin-top: 2rem; }
.esittely__nappi--mobiili { display: none; }
.esittely__nappi--tyopoyta { margin-top: 0; }

.tahdet {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin: 2rem 0;
}
.tahdet svg { color: var(--yo-syva); }
.tahdet__teksti { margin-left: .5rem; }

.esittely__kuvapuoli {
  position: absolute;
  inset: 0 0 0 auto;
  width: 50%;
  overflow: hidden;
}
.esittely__kuva {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(46%) contrast(109%) brightness(95%);
}

/* --------------------------------------------------------------------------
   9. Prosessi, neljä askelta
   -------------------------------------------------------------------------- */
.askeleet {
  position: relative;
  display: flex;
  width: 100%;
  margin-top: 4rem;
  padding: 2rem 0;
  background-color: var(--valkoinen);
  border-radius: 8px;
}
.askeleet--kiinni { margin-top: 0; }

.askeleet__sisus {
  position: relative;
  width: 100%;
  max-width: var(--sisalto-leveys);
  margin: 0 auto;
}

.askeleet__rata {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 70px;
  align-items: flex-start;
  justify-content: space-between;
  padding: 0 15px;
}

/* Ohut viiva pisteiden lapi */
.askeleet__viiva {
  position: absolute;
  inset: 11px 0 auto;
  height: 1px;
  background-color: #ececec;
}

.askel {
  position: relative;
  z-index: 1;
}

.askel__ympyra {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background-color: var(--valkoinen);
  border: 1px solid #ececec;
  border-radius: 50%;
}
.askel__piste {
  width: 12px;
  height: 12px;
  background-color: var(--yo-syva);
  border-radius: 50%;
}

.askel__nimi {
  margin: 1rem 0 .5rem;
  color: var(--yo);
  font-family: var(--leipafontti);
  font-size: 1.2rem;
  font-weight: 500;
  line-height: 160%;
}

/* --------------------------------------------------------------------------
   10. Usein kysyttya
   -------------------------------------------------------------------------- */
.ukk {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 6rem var(--sivureunus);
}
.ukk--palvelu { padding-bottom: 6rem; }

.ukk__sisus {
  display: grid;
  grid-template-columns: 1fr;
  align-items: start;
  width: 100%;
}

.ukk__otsikkoalue { margin-bottom: 2rem; }

/* Kaksi saraketta rinnakkain */
.ukk__palstat {
  display: flex;
  gap: 2rem;
  align-items: flex-start;
  justify-content: space-between;
  width: 100%;
}

.ukk__palsta {
  display: grid;
  grid-template-columns: 100%;
  gap: 1rem;
  flex: 1;
}

.ukk__kohta {
  width: 100%;
  border-bottom: 1px solid var(--yo);
  transition: opacity .2s;
}
.ukk__kohta:hover { opacity: .9; }

.ukk__kysymys {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 1.5rem 0;
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
}

.ukk__merkki {
  position: relative;
  flex: none;
  align-self: flex-start;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  color: var(--yo);
  border: 2px solid var(--yo);
  border-radius: 50%;
}
.ukk__merkki::before,
.ukk__merkki::after {
  content: '';
  position: absolute;
  background-color: var(--yo);
  border-radius: 1px;
  transition: transform .2s, opacity .2s;
}
.ukk__merkki::before { width: .75rem; height: 2px; }
.ukk__merkki::after  { width: 2px; height: .75rem; }
/* Auki oleva kohta nayttaa miinusta: pystyviiva katoaa. Sama merkki on
   kaytossa seka UKK:ssa etta palvelusivujen osa-alueiden haitarissa. */
.ukk__kysymys[aria-expanded='true'] .ukk__merkki::after,
.osa-haitari__nappi[aria-expanded='true'] .ukk__merkki::after { transform: scaleY(0); opacity: 0; }

.ukk__vastaus {
  display: grid;
  grid-template-rows: 0fr;
  padding-right: 4rem;
  overflow: hidden;
  transition: grid-template-rows .3s ease;
}
.ukk__vastaus[data-auki='kylla'] { grid-template-rows: 1fr; }
.ukk__vastaus > div { min-height: 0; overflow: hidden; }

.ukk__vastausteksti {
  width: 100%;
  max-width: 48rem;
  padding-bottom: 1.5rem;
}

/* Palvelukohtaiset UKK-ryhmat, harmaa nappula */
.ukk__ryhmat {
  display: flex;
  gap: 2rem;
  align-items: flex-start;
  justify-content: space-between;
  width: 100%;
  margin-top: 2rem;
}

.ukk-ryhma { width: 100%; }

.ukk-ryhma__nappi {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin-bottom: 1rem;
  padding: 1.5rem 1rem;
  background-color: var(--savu-tumma);
  border: 0;
  border-radius: 6px;
  text-align: left;
  cursor: pointer;
  transition: background-color .2s;
}
.ukk-ryhma__nappi:hover { background-color: #eee; }

.ukk-ryhma__kärki {
  flex: none;
  display: flex;
  align-self: flex-start;
  width: 2rem;
  height: 2rem;
  transition: transform .2s;
}
.ukk-ryhma__nappi[aria-expanded='true'] .ukk-ryhma__kärki { transform: rotate(180deg); }

.ukk-ryhma__sisalto {
  display: grid;
  grid-template-rows: 0fr;
  padding: 0 1rem;
  overflow: hidden;
  transition: grid-template-rows .3s ease;
}
.ukk-ryhma__sisalto[data-auki='kylla'] { grid-template-rows: 1fr; }
.ukk-ryhma__sisalto > div { min-height: 0; overflow: hidden; }

.ukk__cta { display: none; }
.ukk__cta .nappi { flex: none; }

/* --------------------------------------------------------------------------
   11. Kuvakaruselli
   -------------------------------------------------------------------------- */
.karuselli-osio {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 0 var(--sivureunus) 2rem;
  overflow: hidden;
}

.karuselli {
  position: relative;
  width: 100%;
  padding-bottom: 5rem;
}

.karuselli__ikkuna {
  width: 50%;
  overflow: visible;
}

.karuselli__rata {
  display: flex;
  transition: transform .5s ease;
}

.karuselli__dia {
  flex: 0 0 100%;
  padding-right: 1rem;
}

.karuselli__kuva {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.karuselli__nuoli {
  position: absolute;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  background-color: transparent;
  border: 1.5px solid var(--yo);
  border-radius: 100%;
  color: var(--yo-syva);
  cursor: pointer;
  transition: background-color .3s;
}
.karuselli__nuoli:hover { background-color: #f9fafb; }
.karuselli__nuoli--vasen { right: 3rem; }

.karuselli__pisteet {
  position: absolute;
  left: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: .5rem;
  height: 1.75rem;
}
.karuselli__piste {
  width: .5rem;
  height: .5rem;
  padding: 0;
  background-color: rgba(11, 26, 46, .25);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  transition: background-color .2s;
}
.karuselli__piste[aria-current='true'] { background-color: var(--yo); }

/* --------------------------------------------------------------------------
   12. Artikkelinostot
   -------------------------------------------------------------------------- */
.artikkelinostot {
  padding: 4rem var(--sivureunus);
  background-color: var(--savu);
}

.artikkelinostot__sisus {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.artikkelinostot__ylaosa {
  display: grid;
  grid-template-columns: 1fr max-content;
  gap: 1rem 5rem;
  align-items: start;
  justify-content: space-between;
  width: 100%;
  margin-bottom: 4rem;
}

.artikkelinostot__teksti {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
  width: 100%;
  max-width: 48rem;
}

.artikkelinostot__nappirivi {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
}

.artikkelilista {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0 1rem;
  align-items: start;
  width: 100%;
}

.artikkelikortti { width: 100%; }

.artikkelikortti__kuvalinkki {
  display: block;
  width: 100%;
  margin-bottom: 2rem;
  transition: opacity .3s;
}
.artikkelikortti__kuvalinkki:hover { opacity: .92; }

.artikkelikortti__kuvakehys {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  overflow: hidden;
}
.artikkelikortti__kuva {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.artikkelikortti__otsikkolinkki {
  display: flex;
  justify-content: space-between;
  width: 90%;
  margin-bottom: .5rem;
  color: #101828;
  text-decoration: none;
}

.artikkelikortti__nuoli {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 1.5rem;
  height: 1.5rem;
  margin-top: .25rem;
  margin-left: .5rem;
}

/* --------------------------------------------------------------------------
   13. Yhteystiedot ja kartta
   -------------------------------------------------------------------------- */
.yhteys {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 4rem max(4rem, calc((100% - var(--sisalto-leveys)) / 2));
}

.yhteys__sisus {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4rem;
  align-items: start;
  width: 100%;
}

.yhteys__ruudukko {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: end;
}

.yhteys__vasen {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  height: 100%;
}

.yhteys__tiedot {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
}

.yhteys__otsikkoalue { margin-bottom: 2rem; }
.yhteys__ingressi    { margin-top: 2rem; }

.yhteys__rivi {
  display: flex;
  align-items: center;
  gap: .5rem;
  text-decoration: none;
  transition: filter .2s, color .2s;
}
.yhteys__rivi:hover { filter: brightness(120%); color: var(--kupari-kirkas); }

.yhteys__kuvake {
  display: flex;
  align-items: center;
  flex: none;
  width: 1.5rem;
}

.yhteys__some {
  display: flex;
  gap: 1rem;
  width: 70%;
  margin-top: 2rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(11, 26, 46, .2);
}
.yhteys__some a {
  display: block;
  width: 3rem;
  height: 3rem;
  transition: filter .2s;
}
.yhteys__some a:hover { filter: brightness(120%); }

.yhteys__lomake { width: 100%; }

.kartta {
  width: 100%;
  height: 360px;
  margin-top: 2rem;
  overflow: hidden;
}
.kartta iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

/* --------------------------------------------------------------------------
   14. Lomakkeet

   Sama ilme molemmilla lomakkeilla: tarjouspyynto ja sivuston jaettu
   yhteydenotto. Kaksi periaatetta:
     1. Kentat ovat laatikoita, eivat alleviivauksia. Laatikko kestaa
        kosketusnaytolla paremmin ja erottuu taustasta. Kulmat ovat teravat
        ja tausta puhdas valkoinen, kuten muuallakin sivustolla.
     2. Nimio kelluu laatikon SISALLA: tyhjassa kentassa se on placeholderin
        paikalla ja nousee laatikon ylaosaan kun kentta saa fokuksen tai
        sisaltoa. Kentta ei siis vie kahden rivin tilaa, mutta nimio nakyy
        myos taytettyna, toisin kuin oikeassa placeholderissa.

   HTML:ssa syote on ENNEN nimiota, koska kelluva nimio tarvitsee
   sisarusvalitsimen (+). Alaa kaanna jarjestysta.
   -------------------------------------------------------------------------- */
.lomake {
  width: 100%;
  font-family: var(--otsikkofontti);
}

.lomake__rivi {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 1.25rem;
}

.lomake__kentta {
  position: relative;
  margin-bottom: 1.15rem;
}
.lomake__kentta--piilossa { display: none; }

/* Nimio placeholderin paikalla. Nostettu asento on omassa saannossaan
   alempana, jotta molemmat tilat ovat yhdessa kohdassa luettavissa. */
.lomake__nimio {
  position: absolute;
  top: 1.15rem;
  left: .9rem;
  color: #8a97a2;
  font-size: .95rem;
  font-weight: 400;
  line-height: 1.2;
  pointer-events: none;
  transform-origin: 0 0;
  transition: transform .16s ease, color .16s ease;
}

/* Nostettu asento: laatikon ylaosassa, pienennettyna. Valinnalle tarvitaan
   luokka, koska :placeholder-shown ei koske selectia. */
.lomake__syote:focus + .lomake__nimio,
.lomake__syote:not(:placeholder-shown) + .lomake__nimio,
.lomake__alue:focus + .lomake__nimio,
.lomake__alue:not(:placeholder-shown) + .lomake__nimio,
.lomake__valinta:focus + .lomake__nimio,
.lomake__valinta.on-valittu + .lomake__nimio {
  transform: translateY(-.7rem) scale(.75);
  color: #55636e;
}
.lomake__syote:focus + .lomake__nimio,
.lomake__alue:focus + .lomake__nimio,
.lomake__valinta:focus + .lomake__nimio { color: var(--kupari); }

.lomake__syote,
.lomake__valinta,
.lomake__alue {
  width: 100%;
  min-height: 3.5rem;
  /* Ylapadding jattaa tilan nostetulle nimiolle. */
  padding: 1.45rem .9rem .5rem;
  border: 1px solid #d3dae1;
  border-radius: 0;
  background-color: var(--valkoinen);
  color: var(--meri);
  font-family: var(--otsikkofontti);
  font-size: 1rem;
  line-height: 1.45;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.lomake__syote:hover,
.lomake__valinta:hover,
.lomake__alue:hover { border-color: #c6cfd8; }

.lomake__syote:focus,
.lomake__valinta:focus,
.lomake__alue:focus {
  outline: none;
  border-color: var(--kupari);
  box-shadow: 0 0 0 3px rgba(223, 153, 33, .15);
}

.lomake__alue {
  min-height: 8rem;
  padding-top: 1.6rem;
  resize: vertical;
  line-height: 1.6;
}

/* Valinnan tyhja vaihtoehto on tyhja, joten nimio toimii placeholderina
   siihen asti kun palvelu on valittu. */
.lomake__valinta {
  appearance: none;
  padding-right: 2.6rem;
  cursor: pointer;
}
.lomake__valinta option { color: var(--meri); }

/* Karki keskitetaan laatikkoon. */
.lomake__karki {
  position: absolute;
  top: 0;
  right: .95rem;
  display: flex;
  align-items: center;
  height: 3.5rem;
  color: #6b7883;
  pointer-events: none;
}

/* -- Kuvakentta --
   Vapaaehtoinen kentta, joka pitaa silti huomata: alue on tarkoituksella
   isompi ja valjempi kuin syotelaatikot ja teksti on sen sisalla, joten
   ylapuolelle ei jaa irrallista nimiota rikkomaan kenttien rytmia. */
.lomake__kentta--kuvat { margin-bottom: 1.5rem; }

.lomake__pudotusalue {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 2.5rem 1.5rem;
  border: 1.5px dashed #ccd5dd;
  border-radius: 0;
  background-color: var(--valkoinen);
  text-align: center;
  cursor: pointer;
  transition: border-color .2s ease, background-color .2s ease;
}
.lomake__pudotusalue:hover { border-color: var(--kupari); background-color: #fdf8ee; }
.lomake__pudotusalue:focus-visible {
  outline: none;
  border-color: var(--kupari);
  box-shadow: 0 0 0 3px rgba(223, 153, 33, .15);
}

.lomake__pilvi {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 0;
  background-color: #fdf1dc;
  color: var(--kupari);
}
.lomake__pilvi svg { width: 26px; height: 26px; }

.lomake__pudotustekstit {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .3rem;
  min-width: 0;
}
.lomake__pudotusteksti {
  color: var(--meri);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.35;
}
.lomake__tiedostotyypit {
  color: #6b7883;
  font-size: .85rem;
  line-height: 1.4;
}

/* Esikatselut. Jokainen ruutu kertoo tilansa: lataus kesken, valmis tai
   epaonnistunut. Epaonnistunut jaa nakyviin, jotta kavija tietaa mika kuva
   jai pois, mutta se ei varaa paikkaa viiden rajasta eika lahde mukaan. */
.lomake__esikatselut {
  display: flex;
  flex-wrap: wrap;
  gap: .65rem;
  margin-top: .85rem;
}
.lomake__esikatselut:empty { display: none; }

.lomake__ruutu {
  position: relative;
  width: 88px;
  height: 88px;
  overflow: hidden;
  border: 1px solid #d3dae1;
  border-radius: 0;
  background-color: #f1f4f6;
}
.lomake__ruutu-kuva {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .5;
  transition: opacity .25s ease;
}
.lomake__ruutu[data-tila='valmis'] .lomake__ruutu-kuva { opacity: 1; }
.lomake__ruutu[data-tila='virhe'] { border-color: #c0392b; }
.lomake__ruutu[data-tila='virhe'] .lomake__ruutu-kuva { opacity: .3; }

.lomake__ruutu-tila {
  position: absolute;
  left: 4px;
  bottom: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background-color: rgba(11, 44, 61, .55);
  color: var(--valkoinen);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}
.lomake__ruutu-tila svg { width: 11px; height: 11px; }
.lomake__ruutu[data-tila='valmis'] .lomake__ruutu-tila { background-color: var(--kupari); }
.lomake__ruutu[data-tila='virhe'] .lomake__ruutu-tila { background-color: #c0392b; }
/* Latauksen ajan tilamerkki on pyoriva keha, ei kuvaketta. */
.lomake__ruutu[data-tila='lataa'] .lomake__ruutu-tila {
  box-sizing: border-box;
  background-color: rgba(11, 44, 61, .45);
  border: 2px solid rgba(255, 255, 255, .35);
  border-top-color: var(--valkoinen);
  animation: lomakePyorii .7s linear infinite;
}
@keyframes lomakePyorii { to { transform: rotate(360deg); } }

.lomake__ruutu-poista {
  position: absolute;
  top: 3px;
  right: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background-color: rgba(11, 44, 61, .55);
  color: var(--valkoinen);
  cursor: pointer;
  transition: background-color .2s ease;
  -webkit-tap-highlight-color: transparent;
}
.lomake__ruutu-poista:hover { background-color: rgba(11, 44, 61, .88); }
.lomake__ruutu-poista svg { width: 10px; height: 10px; }

/* -- Ehdot ja nappi -- */
.lomake__ehdot {
  margin: 1.35rem 0 1rem;
  color: #55636e;
  font-size: .85rem;
  line-height: 1.5;
}
.lomake__ehdot a {
  color: var(--meri);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color .2s ease;
}
.lomake__ehdot a:hover { color: var(--kupari); }
.lomake__ehdot--keskella { text-align: center; margin: 1.25rem 0 0; }

.lomake__laheta {
  width: 100%;
  padding: .95rem 1rem;
  border: 0;
  border-radius: 0;
  color: var(--valkoinen);
  font-family: var(--otsikkofontti);
  font-size: .92rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color .2s ease, box-shadow .2s ease;
}
.lomake__laheta:disabled { opacity: .55; cursor: default; box-shadow: none; }

/* Varjo napin omassa varissa, muuten tumma nappi nayttaisi kuparin varjon. */
.lomake__laheta--oranssi {
  background-color: var(--kupari);
  box-shadow: 0 8px 20px -10px rgba(223, 153, 33, .95);
}
.lomake__laheta--oranssi:hover {
  background-color: var(--kupari-kirkas);
  box-shadow: 0 10px 26px -10px rgba(223, 153, 33, 1);
}
.lomake__laheta--tumma {
  background-color: var(--meri);
  box-shadow: 0 8px 20px -10px rgba(11, 44, 61, .75);
}
.lomake__laheta--tumma:hover {
  background-color: #1e395e;
  box-shadow: 0 10px 26px -10px rgba(11, 44, 61, .9);
}

/* --------------------------------------------------------------------------
   15. Alatunniste
   -------------------------------------------------------------------------- */
.alatunniste {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 4rem var(--sivureunus) 5rem;
  background-color: var(--meri);
  box-shadow: 0 -2px 20px -3px rgba(11, 26, 46, .1);
}

.alatunniste__ylaosa {
  display: grid;
  grid-template-columns: .5fr .5fr;
  gap: 0 4vw;
  align-items: start;
  width: 100%;
}

.alatunniste__logo-linkki {
  display: flex;
  width: 16rem;
  padding-left: 0;
}
.alatunniste__logo { width: 100%; height: auto; }

.alatunniste__yhteystiedot { margin-top: 2rem; }

.alatunniste__valikot {
  display: flex;
  gap: 1rem 4rem;
  align-items: start;
  justify-content: flex-end;
}

.alatunniste__lista {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1rem;
}

.alatunniste__listaotsikko {
  margin-bottom: .5rem;
  color: var(--valkoinen);
  font-family: var(--otsikkofontti);
  font-size: 1rem;
  font-weight: 600;
  text-align: right;
  text-transform: uppercase;
}

.alatunniste__linkki {
  color: var(--valkoinen);
  font-family: var(--vaihtofontti);
  font-size: 1rem;
  font-weight: 200;
  /* Webflow perii rungosta 20 px rivivalin. Sidotaan se remiin, jottei
     riviväli muutu vaikka kirjasinkoko vaihtelisi. */
  line-height: 1.25rem;
  letter-spacing: .4px;
  text-align: right;
  text-decoration: none;
  transition: color .2s;
}
.alatunniste__linkki:hover { color: var(--kupari); }

.alatunniste__keskiosa {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  width: 100%;
  margin-top: 4rem;
}

.alatunniste__lakilinkit {
  display: flex;
  gap: 2rem;
  justify-content: flex-end;
}

.lakilinkki {
  color: var(--valkoinen);
  font-family: var(--leipafontti);
  font-size: .9rem;
  font-weight: 300;
  line-height: 1.25rem;
  text-decoration: none;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  transition: color .2s;
}
.lakilinkki:hover { color: var(--kupari); }

.alatunniste__oikeudet {
  color: var(--valkoinen);
  font-family: var(--leipafontti);
  font-size: .9rem;
  font-weight: 300;
}

.alatunniste__some {
  display: flex;
  gap: 1rem;
  margin-top: 2rem;
}
.alatunniste__some a {
  display: block;
  width: 2rem;
  height: 2rem;
  transition: filter .2s;
}
.alatunniste__some a:hover { filter: brightness(120%); }

.alatunniste__tekija {
  position: absolute;
  inset: auto 0 0;
  display: flex;
  width: 100%;
  padding: 1rem var(--sivureunus);
  background-color: var(--alapalkki);
  border-top: 1px solid rgba(255, 255, 255, .1);
}
.alatunniste__tekija a {
  padding: .5rem 0;
  color: var(--valkoinen);
  font-family: var(--otsikkofontti);
  font-size: .9rem;
  font-weight: 300;
  line-height: 160%;
  text-decoration: none;
}

/* --------------------------------------------------------------------------
   16. Palvelusivut ja muut alasivut
   -------------------------------------------------------------------------- */
/* Matala hero. Korkeus vaihtelee sivutyypeittain. */
.alahero {
  position: relative;
  height: 440px;
  overflow: hidden;
}
.alahero--artikkeli { height: 500px; }

.alahero__kuva {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 0 -120px;
}

.alahero__peite {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  padding: 0 var(--sivureunus) 2rem;
  background-image: linear-gradient(113deg, rgba(0, 0, 0, .24), rgba(252, 252, 252, 0) 99%, #fff);
}
.alahero__peite--ylhaalla {
  justify-content: flex-start;
  padding: 14rem var(--sivureunus) 2rem;
}

.alahero__otsikkoalue {
  width: 100%;
  max-width: 800px;
  margin-bottom: 2rem;
}
.alahero__otsikkoalue--levea { max-width: 740px; }

/* Ingressi hero-osion alla */
.ingressi {
  padding: 4rem var(--sivureunus) 3rem;
}
.ingressi__nappi {
  display: flex;
  margin-top: 4rem;
}

.ingressi__teksti {
  max-width: 900px;
  color: var(--yo);
  font-family: var(--leipafontti);
  font-size: 1.8rem;
  font-weight: 400;
  line-height: 150%;
}

/* Palvelun sisaltoosio: leipateksti vasemmalla, tiivistelmakortti oikealla.
   Kaytossa palvelusivulla jolla ei ole valilehtia. */
.palvelusisalto {
  padding: 2.5rem var(--sivureunus) 5rem;
  background-color: var(--valkoinen);
}

.palvelusisalto__sisus {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: 4rem;
  align-items: start;
  width: 100%;
  max-width: var(--sisalto-leveys);
  margin: 0 auto;
}

.palvelusisalto__teksti { max-width: 44rem; }

/* Osion otsikko ja vaiheiden otsikko ovat tarkoituksella samannakoiset:
   sama koko, paino ja vari, vain sijainti erottaa ne. */
.palvelusisalto__otsikko,
.palvelusisalto__vaiheotsikko {
  color: var(--meri);
  font-family: var(--otsikkofontti);
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 140%;
}

.palvelusisalto__otsikko { margin: 0 0 1.75rem; }

/* Yksi tiivis karkikappale. Muu tieto on numeroituna listana ja kortissa,
   jottei osioon tule pitkaa leipatekstiputkea. */
.palvelusisalto__karki {
  margin: 0;
  color: var(--yo);
  font-family: var(--leipafontti);
  font-size: 1.15rem;
  font-weight: 300;
  line-height: 180%;
}

/* Toimintakehote kortin lopussa: pitaa palstat samankorkuisina ja
   kokoaa palvelulistan, palvelualueen ja tarjouspyynnon samaan paneeliin. */
.palvelusisalto__nappirivi {
  display: flex;
  margin-top: 2rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(11, 26, 46, .1);
}
.palvelusisalto__nappirivi .nappi { width: 100%; text-align: center; }

/* Oikean palstan kortti: mita palveluun kuuluu ja missa palvelemme */
.palvelusisalto__kortti {
  padding: 2.25rem 2rem;
  background-color: var(--savu);
  border-top: 3px solid var(--kupari);
}

.palvelusisalto__kortti-otsikko {
  margin: 0 0 1rem;
  color: var(--meri);
  font-family: var(--otsikkofontti);
  font-size: 1.15rem;
  font-weight: 600;
  line-height: 140%;
}
.palvelusisalto__kortti-otsikko + .palvelusisalto__lista { margin-bottom: 2rem; }

.palvelusisalto__lista {
  margin: 0;
  padding: 0;
  list-style: none;
}
.palvelusisalto__lista li {
  position: relative;
  padding: .6rem 0 .6rem 1.75rem;
  border-bottom: 1px solid rgba(11, 26, 46, .1);
  color: var(--yo);
  font-family: var(--leipafontti);
  font-size: 1.05rem;
  font-weight: 300;
  line-height: 150%;
}
.palvelusisalto__lista li:last-child { border-bottom: 0; }
/* Kupariviiva luettelomerkin tilalla, samaa kielta kuin kortin ylareuna */
.palvelusisalto__lista li::before {
  content: '';
  position: absolute;
  top: 1.15rem;
  left: 0;
  width: .8rem;
  height: 2px;
  background-color: var(--kupari);
}

.palvelusisalto__alue {
  margin: 0;
  color: var(--yo);
  font-family: var(--leipafontti);
  font-size: 1.05rem;
  font-weight: 300;
  line-height: 160%;
}

/* Pohjakasittelyn vaiheet numeroituna pystylistana tekstipalstassa.
   Pystylista tayttaa vasemman palstan oikean palstan kortin rinnalla,
   joten osioon ei jaa tyhjaa aukkoa eika pitkaa leipatekstia. */
.palvelusisalto__vaiheotsikko {
  margin: 4rem 0 2.5rem;
  padding-top: 3.5rem;
  border-top: 1px solid rgba(11, 26, 46, .12);
}

.palvelusisalto__vaiheet {
  margin: 0;
  padding: 0;
  list-style: none;
}

.palvelusisalto__vaihe {
  position: relative;
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  column-gap: 1.25rem;
  padding-bottom: 1.6rem;
}
.palvelusisalto__vaihe:last-child { padding-bottom: 0; }

/* Ohut kupariviiva numerosta seuraavaan, samaa kielta kuin askelpolku */
.palvelusisalto__vaihe:not(:last-child)::before {
  content: '';
  position: absolute;
  top: 2.4rem;
  left: 1rem;
  width: 1px;
  height: calc(100% - 2.4rem);
  background-color: rgba(223, 153, 33, .4);
}

.palvelusisalto__numero {
  grid-row: 1 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border: 1px solid var(--kupari);
  border-radius: 50%;
  color: var(--kupari);
  font-family: var(--otsikkofontti);
  font-size: .95rem;
  font-weight: 600;
  line-height: 1;
}

.palvelusisalto__vaihe h4 {
  grid-column: 2;
  margin: .25rem 0 .35rem;
  color: var(--meri);
  font-family: var(--otsikkofontti);
  font-size: 1.15rem;
  font-weight: 600;
  line-height: 140%;
}
.palvelusisalto__vaihe p {
  grid-column: 2;
  margin: 0;
  color: var(--yo);
  font-family: var(--leipafontti);
  font-size: 1.05rem;
  font-weight: 300;
  line-height: 160%;
}

/* Loppuhuomio kupariviivan takana, erottuu vaiheista mutta ei huuda */
.palvelusisalto__huomio {
  margin: 2rem 0 0;
  padding-left: 1.25rem;
  border-left: 2px solid var(--kupari);
  color: var(--yo);
  font-family: var(--leipafontti);
  font-size: 1rem;
  font-weight: 300;
  line-height: 165%;
  opacity: .85;
}

/* Palvelun osa-alueet: valilehdet tyopoydalla, haitari mobiilissa */
.osa-alueet {
  padding: 2rem var(--sivureunus);
  background-color: var(--valkoinen);
  border-top: 1px solid rgba(11, 26, 46, .12);
}

.valilehdet__sisus {
  width: 100%;
  max-width: var(--sisalto-leveys);
  margin: 0 auto;
}

.valilehdet {
  display: flex;
  align-items: flex-start;
}

/* Sarakkeiden yhteisleveys on tasan 100 %, jotta ne eivat vuoda sisaltoalueen
   reunojen yli. Valikon negatiivinen vasen marginaali on saman verran kuin
   napin vasen padding: nain napin teksti asettuu tasan samaan linjaan muun
   sisallon kanssa ja vain korostuslaatikko ulottuu hieman sen vasemmalle. */
.valilehdet__valikko {
  display: flex;
  flex: 0 0 calc(40% + 1rem);
  flex-direction: column;
  align-self: stretch;
  margin-left: -1rem;
  padding-right: 50px;
  border-right: 1px solid rgba(11, 25, 45, .12);
}

.valilehdet__linkki {
  padding: 1rem 2rem 1rem 1rem;
  background-color: transparent;
  border: 0;
  border-bottom: 1px solid rgba(0, 0, 0, .1);
  color: #150438;
  font-family: var(--leipafontti);
  font-size: 1.3125rem;
  font-weight: 400;
  line-height: 100%;
  text-align: left;
  cursor: pointer;
  transition: background-color .2s;
}
.valilehdet__linkki:hover { background-color: rgba(11, 26, 46, .02); }
.valilehdet__linkki[aria-selected='true'] {
  padding-left: 1.5rem;
  background-color: rgba(11, 26, 46, .06);
  border-bottom-color: rgba(11, 26, 46, .4);
}

.valilehdet__sisalto {
  flex: 0 0 60%;
  padding-left: 60px;
}

.valilehdet__paneeli[hidden] { display: none; }

.valilehdet__paneeli-sisus { max-width: 640px; }
.valilehdet__paneeli-otsikko { margin-bottom: 1rem; }

/* Osa-alueiden nimet paksummalla kuin muu lihavoitu leipateksti, silla ne ovat
   klikattavia otsikoita. Kolmiosainen valitsin voittaa .leipa--iso.leipa--lihava
   painon myos mediakyselyissa, jotka tulevat tiedostossa myohemmin. */
.valilehdet__linkki .leipa--iso.leipa--lihava,
.valilehdet__paneeli-otsikko.leipa--iso.leipa--lihava,
.osa-haitari__nappi .leipa--iso.leipa--lihava {
  font-weight: 600;
}
.valilehdet__nappirivi { display: flex; margin-top: 2rem; }

/* Mobiilihaitari samalle sisallolle */
.osa-haitari { display: none; }

.osa-haitari__kohta {
  /* Lapinakyva ylareuna pitaa korkeuden samana kuin alkuperaisella sivustolla */
  border-top: 1px solid transparent;
  border-bottom: 1px solid var(--yo);
  transition: opacity .2s;
}
.osa-haitari__nappi {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 1rem 0;
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
}

/* Kuvaruudukot palvelusivuilla */
.kuvaruudukko {
  padding: 0 var(--sivureunus);
}
.kuvaruudukko__ruudukko {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.kuvaruudukko__ruudukko--3 { grid-template-columns: repeat(3, 1fr); }
.kuvaruudukko__ruudukko--2 { grid-template-columns: repeat(2, 1fr); }

.kuvaruudukko__kuva { width: 100%; height: auto; }
.kuvaruudukko__kuva--vaaka {
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

/* --------------------------------------------------------------------------
   17. Hinnasto
   -------------------------------------------------------------------------- */
.hinnasto { padding: 4rem var(--sivureunus); }

.hinnasto__ryhmat {
  display: flex;
  flex-direction: column;
  gap: 4rem;
}

.hinnasto__ryhma { border-bottom: 1px solid rgba(0, 0, 0, .1); }

.hinnasto__ryhmaotsikko {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-bottom: 1rem;
}

.hinnasto__rivi {
  display: grid;
  grid-template-columns: .5fr 1fr;
  border-top: 1px solid rgba(0, 0, 0, .1);
}

.hinnasto__nimi {
  padding: 1rem 1rem 1rem 0;
  font-weight: 400;
}
.hinnasto__hinta {
  padding: 1rem;
  border-left: 1px solid rgba(0, 0, 0, .1);
}

.hinnasto__cta { display: flex; margin-top: 4rem; }

/* --------------------------------------------------------------------------
   18. Vinkit ja artikkelit
   -------------------------------------------------------------------------- */
.vinkkisivu {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 4rem max(6rem, calc((100% - var(--sisalto-leveys)) / 2));
}

.vinkkilista {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  width: 100%;
}

/* Artikkelisivu */
.artikkeli { padding: 4rem var(--sivureunus); }

.artikkeli__ingressi {
  color: var(--yo);
  font-family: var(--vaihtofontti);
  font-size: 1.6rem;
  line-height: 150%;
}

.artikkeli__cta { display: flex; margin-top: 2rem; }

.artikkeliteksti {
  color: var(--yo);
  font-family: var(--leipafontti);
  font-size: 1.2rem;
  font-weight: 300;
  line-height: 160%;
}
.artikkeliteksti h2,
.artikkeliteksti h3 {
  margin: 20px 0 10px;
  font-family: var(--leipafontti);
  font-size: 24px;
  font-weight: 700;
  line-height: 30px;
}
.artikkeliteksti p { margin: 0 0 10px; }
.artikkeliteksti ul,
.artikkeliteksti ol { margin: 0 0 10px; padding-left: 40px; }
.artikkeliteksti strong { font-weight: 600; }
.artikkeliteksti a { color: var(--kupari); }


/* --------------------------------------------------------------------------
   19. Lakisivut ja lomakesivu
   -------------------------------------------------------------------------- */
.lakisivu { padding: 4rem max(4rem, calc((100% - var(--sisalto-leveys)) / 2)); }
.lakisivu__otsikko { margin-bottom: 1rem; }
.lakisivu__lohko { margin-bottom: 1rem; }

.lakiteksti {
  /* flow-root pitaa lasten reunukset lohkon sisalla, kuten Webflown
     rikastetun tekstin lohko teki pseudoelementeillaan. */
  display: flow-root;
  width: 100%;
  color: var(--meri);
  font-family: var(--leipafontti);
  font-size: 1rem;
  font-weight: 400;
  line-height: 160%;
}
.lakiteksti h2,
.lakiteksti h3 {
  margin: 20px 0 10px;
  font-family: var(--leipafontti);
  font-size: 24px;
  font-weight: 700;
  line-height: 30px;
}
.lakiteksti p  { margin: 0 0 10px; }
.lakiteksti ul,
.lakiteksti ol { margin: 0 0 10px; padding-left: 40px; }
.lakiteksti a  { color: var(--kupari); }

/* Tarjouspyyntosivun hero. Tekstit vasemmalla, lomakekortti oikealla samassa
   ruudukossa, joten kortin ylareuna on tasan H1:n ylareunan kohdalla.
   Kortti on tavallisessa virrassa, joten osio kasvaa lomakkeen mukana myos
   silloin kun ehdolliset kentat tulevat nakyviin. Kuva ja liukuvari pysyvat
   omassa korkeudessaan (--herokuva), joten kortin alaosa valuu kuvan alta
   alkavalle valkoiselle taustalle. */
.alahero.alahero--lomake {
  --herokuva: 500px;
  height: auto;
  overflow: visible;
  padding: 14rem var(--sivureunus) 6rem;
  background-color: var(--valkoinen);
}
.alahero--lomake .alahero__kuva,
.alahero--lomake .alahero__peite {
  height: var(--herokuva);
  bottom: auto;
}
.alahero--lomake .alahero__peite { padding: 0; }

.tarjoushero {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(400px, 48%, 640px);
  align-items: start;
  gap: 4rem;
}

.tarjouskortti {
  container-type: inline-size;
  padding: 2.25rem;
  background-color: var(--valkoinen);
  border: 1px solid rgba(11, 44, 61, .07);
  border-radius: 0;
  box-shadow: 0 1px 2px rgba(11, 44, 61, .04), 0 18px 40px -20px rgba(11, 44, 61, .28);
}
/* Kahden palstan asettelussa kortti voi jaada kapeaksi. Silloin nimi ja
   puhelinnumero menevat allekkain, jottei puhelinkentan nimio leikkaudu. */
@container (max-width: 460px) {
  .lomake__rivi { grid-template-columns: 1fr; gap: 0; }
}

.tarjoussivu__esittely { padding: 4rem var(--sivureunus); }
.tarjoussivu__leipa    { width: 60%; }

/* --------------------------------------------------------------------------
   20. Virhesivu
   -------------------------------------------------------------------------- */
.virhesivu {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 100vh;
  padding: 6rem 2rem;
}
.virhesivu__sisus {
  display: flex;
  flex-direction: column;
  width: 400px;
  max-width: 100%;
  text-align: center;
}
.virhesivu__napit { display: flex; justify-content: center; margin-top: 2rem; }

/* --------------------------------------------------------------------------
   21. Paljastuva sisalto vieritettaessa
   -------------------------------------------------------------------------- */
.js .paljastu {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .6s ease, transform .6s ease;
}
.js .paljastu.nakyvissa {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .js .paljastu { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   22. Lomakkeen tilat
   -------------------------------------------------------------------------- */
/* Virhe nakyy koko reunuksessa, koska kentta on laatikko eika alleviivaus. */
.lomake__kentta.on-virhe .lomake__syote,
.lomake__kentta.on-virhe .lomake__valinta,
.lomake__kentta.on-virhe .lomake__alue { border-color: #c0392b; }
.lomake__kentta.on-virhe .lomake__nimio { color: #c0392b; }

.lomake__pudotusalue.on-yli { border-color: var(--kupari); background-color: #fdf8ee; }

/* Kuvien laskuri esikatselujen alla. */
.lomake__tiedostolista {
  margin: .55rem 0 0;
  color: #6b7883;
  font-size: .8rem;
}
.lomake__tiedostolista:empty { display: none; }

.lomake__tila {
  margin: .9rem 0 0;
  color: var(--meri);
  font-family: var(--otsikkofontti);
  font-size: .9rem;
  line-height: 1.5;
}
.lomake__tila:empty { margin: 0; }

/* --------------------------------------------------------------------------
   23. Alaheron sisus ja ingressi
   -------------------------------------------------------------------------- */
.alahero__sisus { width: 100%; }
.alahero__sisus--puolikas { width: 50%; }

.alahero__ingressi--kolme-viidesosaa { width: 60%; }

/* --------------------------------------------------------------------------
   24. Artikkelisivun asettelu
   Kolme aluetta: ingressi, kuva ja leipateksti. Alkuperaisella sivustolla
   sama sisalto oli kahdesti HTML:ssa (tyopoyta ja mobiili). Tassa se on
   kerran ja alueet siirtyvat ruudukon avulla.
   -------------------------------------------------------------------------- */
.artikkeli__ruudukko {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
    'ingressi kuva'
    'teksti   kuva';
  align-items: start;
  width: 100%;
  padding-bottom: 2rem;
}

.artikkeli__ingressilohko {
  grid-area: ingressi;
  padding-bottom: 2rem;
  border-bottom: 1px solid rgba(10, 26, 45, .2);
}

.artikkeli__kuvapuoli {
  grid-area: kuva;
  display: flex;
  justify-content: flex-end;
}
.artikkeli__kuva { width: 80%; height: auto; }

.artikkeli__teksti {
  grid-area: teksti;
  width: 100%;
  max-width: 840px;
  margin-top: 2rem;
}

/* ==========================================================================
   25. Responsiivisuus
   Katkaisukohdat ovat samat kuin alkuperaisella sivustolla: 991, 767 ja 479.
   ========================================================================== */

/* --- Tabletti, alle 992 px ------------------------------------------------ */

/* --- Tabletti, alle 992 px ------------------------------------------------ */

@media screen and (max-width: 991px) {
  :root { --reunus: 2rem; }

  /* Navigaatio avautuu paneelina */
  .navi__hampurilainen { display: flex; }

  .navi__valikko {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: none;
    flex-direction: column;
    align-items: flex-start;
    max-height: calc(100vh - var(--navi-korkeus));
    padding: 1rem 5% 2rem;
    background-color: var(--valkoinen);
    border-bottom: 1px solid rgba(0, 0, 0, .1);
    overflow: auto;
  }
  .navi.valikko-auki .navi__valikko { display: flex; }

  .navi__linkit {
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
  }

  .navi__linkki,
  .navi__pudotus-nappi,
  .navi.on-kiinni .navi__linkki,
  .navi.on-kiinni .navi__pudotus-nappi {
    padding: .75rem 0;
    color: var(--hiili);
    font-size: 1.125rem;
    text-align: left;
  }
  .navi__pudotus-nappi { width: 100%; padding-right: 1rem; }

  .navi__pudotus { width: 100%; }
  /* Karki on tekstin perassa, ei rivin oikeassa reunassa */
  .navi__kärki { margin-left: 0; }

  .navi__pudotus-lista {
    position: static;
    width: 100%;
    max-width: none;
    padding: .75rem 0;
    border-radius: 0;
    box-shadow: none;
    row-gap: .5rem;
  }
  .navi__pudotus-linkki {
    padding: .5rem 0;
    font-size: 1.125rem;
    line-height: 160%;
  }

  .navi__napit {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    margin: 1.5rem 0 0;
  }

  .display          { font-size: 2.8rem; }
  .display--koti    { font-size: 2.8rem; }
  .otsikko          { font-size: 2rem; }
  .leipa--valkoinen.leipa--iso { font-size: 1.1rem; }

  .hero__kuva   { object-position: -170px 0; }
  .alahero__kuva { object-position: 0 0; }

  .hero__otsikkoalue { width: 90%; }
  .hero__ingressi    { width: 70%; }
  .hero__napit       { margin-left: 0; }

  .palvelukortti     { aspect-ratio: auto; height: auto; }
  .palvelut__ruudukko { grid-template-columns: 1fr 1fr 1fr; justify-items: start; }
  /* Ei 12 sarakkeen jakoa enaa: kortit takaisin tavalliseen ruudukkoon.
     Seitsemas jaisi yksin riville, joten se levitetaan koko rivin levyiseksi. */
  .palvelut__ruudukko > .palvelukortti,
  .palvelut__ruudukko > .palvelukortti:nth-child(n+4) { grid-column: auto; }
  .palvelut__ruudukko > .palvelukortti:nth-child(7) { grid-column: 1 / -1; aspect-ratio: 3 / 1; }

  .palvelusisalto__sisus  { grid-template-columns: 1fr; gap: 2.5rem; }
  .palvelusisalto__teksti { max-width: none; }
  .palvelukortti__nimi { font-size: 1.2rem; }
  .palvelukortti__peite {
    padding: 1.5rem .5rem 2rem;
    backdrop-filter: saturate(51%);
    -webkit-backdrop-filter: saturate(51%);
  }

  .esittely__ruudukko { grid-template-columns: 1fr; gap: 2rem 3rem; }
  .esittely__teksti   { width: 50%; padding: 0; }
  .esittely__leipa    { width: 100%; }
  .esittely__nappi--mobiili  { display: flex; }
  .esittely__nappi--tyopoyta { display: none; }

  .askeleet { margin-top: 2rem; padding-left: 0; padding-right: 0; }
  .askeleet__rata { gap: 30px; }

  .ukk { padding: 4rem var(--reunus); }
  .ukk--palvelu { padding-bottom: 6rem; }
  .ukk__sisus { grid-template-columns: 1fr; }
  .ukk__palstat { margin-top: 0; }
  .ukk__palsta { margin-top: 2rem; }
  .ukk__ryhmat { margin-top: 0; }

  .yhteys__sisus { gap: 3rem; }

  .alatunniste__ylaosa {
    display: flex;
    flex-direction: column;
    gap: 4rem;
    justify-content: space-between;
  }

  .artikkelinostot__ylaosa { gap: 1rem 3rem; }
  .artikkelinostot__nappirivi { flex: none; }

  .karuselli-osio { padding-top: 0; }
  .karuselli__ikkuna { width: 50%; }

  .valilehdet__valikko { flex-basis: calc(40% + .8rem); margin-left: -.8rem; padding-right: 1rem; }
  .valilehdet__sisalto { padding-left: 1.5rem; }
  .valilehdet__paneeli-sisus { padding-top: 2rem; }
  .valilehdet__linkki  { padding-left: .8rem; padding-right: 1rem; }
  .valilehdet__linkki[aria-selected='true'] { padding-left: 1rem; padding-right: 1rem; }

  .alahero.alahero--lomake { --herokuva: 70vh; padding-left: var(--reunus); padding-right: var(--reunus); }
  .tarjoushero { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
  .tarjouskortti { width: 100%; max-width: 540px; }
  .alahero__peite--ylhaalla { padding-left: var(--reunus); padding-right: var(--reunus); }
  .tarjoussivu__leipa { width: 70%; }

  .vinkkisivu { padding: 4rem var(--reunus); }
  .vinkkilista { gap: 2rem; }
  .hinnasto__rivi { grid-template-columns: 1fr 1fr; }
  .alahero__sisus--puolikas { width: 70%; }
  .alahero__otsikkoalue     { width: 90%; }
  .alahero__ingressi--kolme-viidesosaa { width: 100%; }
  .artikkeli__ruudukko {
    grid-template-areas:
      'ingressi kuva'
      'teksti   teksti';
    padding-bottom: 0;
    border-bottom: 1px solid rgba(10, 26, 45, .2);
  }
  .artikkeli__ingressilohko { border-bottom: 0; }
}

/* --- Mobiili vaakatasossa ja iso puhelin, alle 768 px --------------------- */

/* Kuuden kortin ruudukossa molemmat rivit ovat kolmen kortin mittaisia. Tassa
   valissa kortin korkeus tulisi muuten kuvan omasta kuvasuhteesta, jolloin yksi
   pystykuva venyttaisi toisen rivin korkeammaksi. Lukitaan siis kuvasuhde. */
@media screen and (min-width: 768px) and (max-width: 991px) {
  .palvelut__ruudukko--kuusi > .palvelukortti { aspect-ratio: 4 / 3; height: auto; }
}

@media screen and (max-width: 767px) {
  .navi { min-height: 4rem; }

  .display       { font-size: 2.4rem; }
  .display--koti { font-size: 2.4rem; }

  .hero__kuva { object-position: -300px 90px; }

  .hero__otsikkoalue,
  .hero__ingressi { width: 100%; }

  .palvelut__ruudukko { grid-template-columns: 1fr 1fr; }
  .palvelukortti      { aspect-ratio: 1; }
  .palvelut__ruudukko > .palvelukortti:nth-child(7) { aspect-ratio: 2 / 1; }

  /* Etusivulla kortit ovat puhelimessa koko rivin levyisia ja matalampia.
     Koskee vain .palvelut--koti-osiota, joten palvelusivujen
     "Tutustu muihin palveluihimme" pysyy kahdessa sarakkeessa. */
  .palvelut--koti .palvelut__ruudukko { grid-template-columns: 1fr; }
  .palvelut--koti .palvelut__ruudukko > .palvelukortti,
  .palvelut--koti .palvelut__ruudukko > .palvelukortti:nth-child(7) {
    aspect-ratio: 5 / 2;
    height: auto;
  }

  .palvelusisalto { padding-top: 1.5rem; }
  .palvelusisalto__otsikko,
  .palvelusisalto__vaiheotsikko { font-size: 1.35rem; }
  .palvelusisalto__karki        { font-size: 1.1rem; }
  .palvelusisalto__vaiheotsikko { margin: 3rem 0 2rem; padding-top: 2.75rem; }

  .esittely { padding: 4rem 0 0; }
  .esittely__ruudukko { grid-template-columns: 1fr; gap: 1.25rem; }
  .esittely__teksti { width: 100%; padding: 0 2rem; }
  .esittely__leipa  { padding: 0; }
  .esittely__kuvapuoli {
    position: relative;
    inset: auto;
    width: 100%;
    height: auto;
    margin-top: 4rem;
  }

  .askeleet { margin-top: 0; padding-bottom: 0; }
  .askeleet__viiva { display: none; }
  .askeleet__rata {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    gap: 30px;
    padding: 0;
  }
  .askel { display: flex; align-items: center; gap: 8px; }
  .askel__nimi { margin-top: .5rem; margin-bottom: 0; }

  .ukk__palstat { flex-direction: column; gap: 1rem; }
  .ukk__palsta  { grid-template-columns: 100%; margin-top: 0; }
  .ukk__kysymys { padding: 1rem 0; }
  .ukk__vastaus { padding-right: 0; }
  .ukk__ryhmat  { flex-direction: column; gap: 1rem; margin-top: 2rem; }
  .ukk-ryhma__nappi { padding: 1rem; }
  .ukk-ryhma__kärki { width: 1.75rem; }

  .yhteys__sisus   { grid-template-columns: 1fr; gap: 3rem; }
  .yhteys__ruudukko {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
  }
  .yhteys__vasen { margin-bottom: 1rem; }
  .yhteys__some  { gap: 1rem; }

  .alatunniste__ylaosa   { flex-direction: column; align-items: flex-start; gap: 3rem; }
  .alatunniste__valikot  { flex-direction: column; gap: 1.5rem; }
  .alatunniste__lista    { align-items: flex-start; }
  .alatunniste__listaotsikko,
  .alatunniste__linkki   { text-align: left; }
  .alatunniste__keskiosa { flex-direction: column-reverse; gap: 1rem; margin-top: 2rem; }
  .alatunniste__lakilinkit { justify-content: flex-start; }

  .artikkelinostot__ylaosa {
    grid-template-columns: 1fr;
    flex-direction: column;
    align-items: flex-start;
    gap: 2rem;
    margin-bottom: 2rem;
  }
  .artikkelinostot__nappirivi { justify-content: flex-start; width: 100%; }
  .artikkelinostot__teksti { gap: 2rem; }
  .artikkelilista {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    /* Alkuperaisella sivustolla Webflowin rivikaari lisaa listan ylle ja alle
       yhden valin verran tilaa. Toistetaan se, jotta pystysuunta tasmaa. */
    padding: 2rem 0;
  }
  .artikkelikortti__otsikkolinkki { width: 100%; }
  .artikkelikortti__kuvalinkki { margin-bottom: 1.5rem; }

  .karuselli { margin-top: 3rem; }
  .karuselli__ikkuna { width: 80%; }
  .karuselli__dia { padding-right: 1.5rem; }
  .karuselli__nuoli--vasen { right: 3.5rem; }

  .ingressi__teksti { font-size: 1.6rem; font-weight: 400; }

  .valilehdet__sisus { display: none; }
  .osa-haitari { display: block; }
  .osa-haitari__nappi { padding: 1rem 0; }

  .kuvaruudukko__ruudukko,
  .kuvaruudukko__ruudukko--3,
  .kuvaruudukko__ruudukko--2 { grid-template-columns: 1fr 1fr; }

  .alahero.alahero--lomake { padding-top: 12rem; padding-bottom: 4rem; }
  .tarjoussivu__leipa { width: 100%; }

  .artikkeli__ingressi { font-size: 1.6rem; font-weight: 400; }
  .artikkeli__kuvapuoli { width: 100%; }
  .artikkeli__kuva     { width: 100%; margin-top: 2rem; }

  .hinnasto__rivi { grid-template-columns: 1.5fr 1fr; }
  .vinkkilista { grid-template-columns: 1fr; }
  .alahero__otsikkoalue { width: 100%; }
  .artikkeli__ruudukko {
    grid-template-columns: 1fr;
    grid-template-areas:
      'ingressi'
      'kuva'
      'teksti';
  }
  .artikkeli__kuvapuoli { width: 100%; }
  .artikkeli__kuva { width: 100%; margin-top: 2rem; }
}

/* --- Puhelin, alle 480 px ------------------------------------------------- */

@media screen and (max-width: 479px) {
  :root { --reunus: 5%; --navi-korkeus: 4rem; }

  .navi { height: 4rem; padding: 0 5%; }
  .navi__logo { height: 3rem; }
  .navi__valikko { height: 100vh; max-height: none; }
  .navi__pudotus-lista { padding-left: 1rem; }

  .hero { height: 100vh; }
  .hero__kuva    { object-position: -40px 0; }
  .alahero__kuva { object-position: 0 -60px; }
  .hero__peite {
    justify-content: center;
    padding: 6rem 5% 4rem;
    background-image:
      linear-gradient(208deg, rgba(0, 0, 0, .24), rgba(255, 255, 255, 0)),
      linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .65)),
      linear-gradient(113deg, rgba(0, 0, 0, .24), rgba(252, 252, 252, 0) 99%, #fff);
  }
  .hero__otsikkoalue { width: 100%; margin-bottom: 1rem; }
  .hero__napit { flex-direction: row; align-items: flex-start; margin-top: 2rem; }

  .display,
  .display--koti {
    font-size: 2.2rem;
    font-weight: 600;
    letter-spacing: .5px;
  }
  .otsikko { font-size: 2rem; }

  .nappi--valkoinen { padding-left: 1.5rem; padding-right: 1.5rem; font-weight: 400; }
  .nappi--tyhja     { padding: 1rem .5rem; }
  .nappi--tyhja.nappi--hero { display: none; }
  .nappi--tumma     { padding-left: 2rem; padding-right: 2rem; }

  .leipa--valkoinen.leipa--iso { opacity: .9; font-size: 1.05rem; letter-spacing: 0; font-weight: 300; }
  .leipa--iso       { font-size: 1.05rem; font-weight: 300; margin-bottom: 0; }
  .leipa--iso.leipa--lihava { font-size: 1.1rem; font-weight: 500; }
  h2.leipa--iso.leipa--lihava { font-weight: 600; }
  .leipa--huomio    { font-size: .75rem; font-weight: 200; }

  .palvelut--koti { margin-top: -2rem; padding: 3rem 5% 4rem; }
  .palvelut       { margin-top: -2rem; padding: 3rem 5% 4rem; }
  .palvelut__ruudukko {
    grid-template-columns: 1fr 1fr;
    gap: .5rem;
    justify-items: center;
    width: 100%;
    margin-top: 2rem;
  }
  .palvelukortti { aspect-ratio: 3 / 4; width: 100%; }
  .palvelut__ruudukko > .palvelukortti:nth-child(7) { aspect-ratio: 3 / 2; }

  /* Kapealla naytolla etusivun koko rivin levyinen kortti saa hieman
     enemman korkeutta, jotta kuva ja nimi mahtuvat mukavasti. */
  .palvelut--koti .palvelut__ruudukko { gap: .75rem; justify-items: stretch; }
  .palvelut--koti .palvelut__ruudukko > .palvelukortti,
  .palvelut--koti .palvelut__ruudukko > .palvelukortti:nth-child(7) {
    aspect-ratio: 16 / 9;
  }

  .palvelusisalto__kortti { padding: 2rem 1.5rem; }
  .palvelukortti__peite {
    padding: 2rem .5rem 1rem .7rem;
    background-image: linear-gradient(rgba(3, 10, 19, .87), rgba(5, 11, 20, .54) 36%, rgba(255, 255, 255, 0));
    backdrop-filter: saturate(72%);
    -webkit-backdrop-filter: saturate(72%);
  }
  .palvelukortti__nimi { font-size: 1.1rem; font-weight: 500; line-height: 140%; }

  .esittely { padding: 3rem 0 0; overflow: hidden; }
  .esittely__teksti { padding: 0 5%; }
  .esittely__otsikkoalue { width: 110%; max-width: none; }
  /* Napin ja alla olevan kuvan valiin ilmaa puhelimessa */
  .esittely__kuvapuoli { margin-top: 2.5rem; }
  .esittely__kuva { width: 100%; }

  /* Prosessipolku piilotetaan puhelimessa, kuten alkuperaisella sivustolla */
  .askeleet { display: none; }

  .ukk { padding: 4rem 5%; }
  .ukk--palvelu { padding-bottom: 6rem; }
  /* Puhelimessa UKK-osion loppuun tulee yhteydenottonappi */
  .ukk__cta {
    display: flex;
    justify-content: flex-start;
    width: 100%;
    margin-top: 2rem;
  }
  .ukk__palstat { gap: 0; }
  .ukk__ryhmat  { gap: .5rem; }
  .ukk__palsta { gap: .5rem; }
  .ukk-ryhma__nappi { padding-left: 1rem; padding-right: 1rem; }

  .karuselli-osio { padding: 0 5% 4rem; }
  .karuselli { margin-top: 0; }
  .karuselli__ikkuna { width: 100%; }
  .karuselli__dia { padding-right: 1rem; }
  .karuselli__nuoli { border: 0; }
  .karuselli__nuoli--vasen { right: 3rem; }
  .karuselli__pisteet { height: 3rem; }

  .artikkelinostot { background-color: var(--valkoinen); padding: 0 5% 2rem; }
  .artikkelinostot__ylaosa { margin-bottom: 0; }
  .artikkelinostot__teksti { flex-direction: column; align-items: flex-start; }

  .yhteys { padding: 1rem 5% 0; }
  /* Yhteystietorivit ovat puhelimessa kiinni toisissaan */
  .yhteys__tiedot { gap: 0; }
  .yhteys__ruudukko { width: 100%; }
  .yhteys__vasen    { width: 100%; }
  .yhteys__some     { gap: 1.5rem; width: 100%; margin-top: 3rem; }
  .yhteys__some a   { width: 2.5rem; height: 2.5rem; }
  .kartta { width: 100vw; margin-top: 2rem; }

  .alatunniste { padding-left: 5%; padding-right: 5%; }
  /* Etusivulla alatunnisteen logo on kapeampi, kuten alkuperaisella sivustolla */
  .sivu-etusivu .alatunniste__logo-linkki { width: 12rem; }
  .alatunniste__valikot { grid-template-columns: 1fr; gap: 2.5rem; }
  .alatunniste__ylaosa  { gap: 4rem; }
  .alatunniste__yhteystiedot { margin-top: 3rem; }
  .alatunniste__some { gap: 1.5rem; margin-top: 3rem; }
  .alatunniste__some a { width: 2.5rem; height: 2.5rem; }
  .alatunniste__keskiosa { margin-top: 3rem; }
  .alatunniste__tekija { padding-left: 5%; padding-right: 5%; }
  .lakilinkki,
  .alatunniste__oikeudet { font-size: .8rem; }

  .alahero          { height: 50vh; }
  .alahero--artikkeli { height: 70vh; }
  .alahero__peite {
    justify-content: flex-end;
    padding: 0 5% 2rem;
    background-image:
      linear-gradient(208deg, rgba(0, 0, 0, .24), rgba(255, 255, 255, 0)),
      linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .65)),
      linear-gradient(113deg, rgba(0, 0, 0, .24), rgba(252, 252, 252, 0) 99%, #fff);
  }
  .alahero__peite--ylhaalla { justify-content: flex-end; padding: 12rem 5% 10rem; }
  .alahero__otsikkoalue { margin-bottom: 1rem; }

  .ingressi { padding: 4rem 5% 2rem; }
  .ingressi__teksti { font-size: 1.4rem; }

  .osa-alueet { padding: 2rem 5%; }
  .kuvaruudukko { padding: 0 5%; }
  .valilehdet__paneeli-sisus { padding-top: 0; }
  .osa-haitari { margin-bottom: 2rem; }
  .osa-haitari__nappi { padding: 1.25rem 0; }
  .kuvaruudukko__ruudukko { grid-template-columns: 1fr 1fr; }
  .kuvaruudukko__ruudukko--3,
  .kuvaruudukko__ruudukko--2 { grid-template-columns: 1fr; }

  .alahero.alahero--lomake {
    --herokuva: 60vh;
    padding: 12rem 5% 3rem;
  }
  .tarjoushero { gap: 2rem; }
  .tarjouskortti { padding: 1.5rem 1.15rem; }
  .tarjoussivu__esittely { padding: 2rem 5%; }

  .hinnasto  { padding: 4rem 5%; }
  .lakisivu  { padding: 4rem 5%; }
  .artikkeli { padding: 2rem 5%; }
  .artikkeli__ingressi { font-size: 1.4rem; }
  .artikkeli__ingressilohko { padding-bottom: 1rem; }
  .vinkkisivu { padding: 2rem 5%; }
  .vinkkilista { grid-template-columns: 1fr; gap: 4rem; }

  .lomake__rivi { grid-template-columns: 1fr; gap: 0; }
  .alahero__sisus--puolikas { width: 100%; }
  .alahero__ingressi--kapea { width: 100%; }
}

/* --- Isot naytot ---------------------------------------------------------- */

@media screen and (min-width: 1280px) {
  .alahero__peite--ylhaalla { padding-top: 14rem; }
  .askeleet__rata { gap: 160px; justify-content: flex-start; }
}

@media screen and (min-width: 1440px) {
  .alahero__kuva { object-position: 0 -160px; }
  .hero__otsikkoalue { max-width: 840px; }
  .alahero__ingressi--kapea { width: 80%; }
}

@media screen and (min-width: 1920px) {
  .alahero__kuva { object-position: 0 -260px; }
  .valilehdet__valikko { flex-basis: calc(35% + 1rem); }
  .valilehdet__sisalto { flex-basis: 65%; }
  .valilehdet__linkki  { font-size: 1.5625rem; }
}

/* --- Osioiden hengitystila ------------------------------------------------ */
/* Osioiden yla- ja alapaddingit yhdessa paikassa, jotta sama osio hengittaa
   samalla tavalla joka sivulla. Tanne kootut arvot voittavat aiemmat, koska
   tama lohko on tiedoston viimeinen.

   Vain isoilla naytoilla. Pienten naytonleveyksien tiiviimmat arvot
   maaritellaan omissa media-lohkoissaan, eika niihin kosketa tassa. */

@media screen and (min-width: 992px) {

  /* Ensimmainen lohko heron alla. Ylhaalla vahemman, koska hero on jo iso. */
  .ingressi   { padding-top: 6rem; padding-bottom: 4rem; }
  .hinnasto   { padding-top: 6rem; padding-bottom: 6.5rem; }
  .vinkkisivu { padding-top: 6rem; padding-bottom: 6.5rem; }
  .artikkeli  { padding-top: 6rem; padding-bottom: 6.5rem; }
  .lakisivu   { padding-top: 6rem; padding-bottom: 6.5rem; }

  /* Palvelusivun keskiosa. Ingressi, valilehdet ja kuvaruudukko ovat samaa
     valkoista kokonaisuutta, joten niiden valit pysyvat tiiviimpina kuin
     osioiden valit. Kuvaruudukon alapadding taas erottaa koko lohkon UKK:sta. */
  .palvelusisalto { padding-bottom: 6rem; }
  .osa-alueet     { padding-top: 3rem; padding-bottom: 3rem; }
  .kuvaruudukko   { padding-top: 3rem; padding-bottom: 6.5rem; }

  /* Sivulta toiselle toistuvat osiot. Nama arvot ovat etusivulta, ja samat
     arvot patevat nyt myos palvelu-, hinnasto-, vinkki-, artikkeli-,
     tarjous- ja lakisivuilla. */
  .ukk             { padding-top: 7.5rem; padding-bottom: 7.5rem; }
  .esittely        { padding-top: 6.5rem; padding-bottom: 6.5rem; }
  .palvelut        { padding-top: 6.5rem; padding-bottom: 7.5rem; }
  .karuselli-osio  { padding-bottom: 4.5rem; }
  .artikkelinostot { padding-top: 6rem; padding-bottom: 6rem; }
  /* Alapadding pysyy 4rem:ssa, koska alatunniste tuo oman ylapaddinginsa. */
  .yhteys          { padding-top: 6rem; }

  /* Etusivun palveluruudukko limittyy heron alle, joten sen ylapadding on
     pienempi kuin muiden sivujen vastaavan osion. */
  .palvelut--koti  { padding-top: 4rem; padding-bottom: 7.5rem; }
}