/* Purettu Webflow-exportin global-styles-embedista (Relume/Client-First apuluokat). */
/* Ensure all elements inherit the color from its parent */
a,
.w-input,
.w-select,
.w-tab-link,
.w-nav-link,
.w-nav-brand,
.w-dropdown-btn,
.w-dropdown-toggle,
.w-slider-arrow-left,
.w-slider-arrow-right,
.w-dropdown-link {
  color: inherit;
  text-decoration: inherit;
  font-size: inherit;
}
/* Focus state style for keyboard navigation for the focusable elements */
*[tabindex]:focus-visible,
  input[type="file"]:focus-visible {
   outline: 0.125rem solid #4d65ff;
   outline-offset: 0.125rem;
}
/* Get rid of top margin on first element in any rich text element */
.w-richtext > :not(div):first-child, .w-richtext > div:first-child > :first-child {
  margin-top: 0 !important;
}
/* Get rid of bottom margin on last element in any rich text element */
.w-richtext>:last-child, .w-richtext ol li:last-child, .w-richtext ul li:last-child {
	margin-bottom: 0 !important;
}
/* Prevent all click and hover interaction with an element */
.pointer-events-off {
	pointer-events: none;
}
/* Enables all click and hover interaction with an element */
.pointer-events-on {
  pointer-events: auto;
}
/* Create a class of .div-square which maintains a 1:1 dimension of a div */
.div-square::after {
	content: "";
	display: block;
	padding-bottom: 100%;
}
/* Make sure containers never lose their center alignment */
.container-medium,.container-small, .container-large {
	margin-right: auto !important;
  margin-left: auto !important;
}
/* Apply "..." after 3 lines of text */
.text-style-3lines {
	display: -webkit-box;
	overflow: hidden;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
}
/* Apply "..." after 2 lines of text */
.text-style-2lines {
	display: -webkit-box;
	overflow: hidden;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}
/* Adds inline flex display */
.display-inlineflex {
  display: inline-flex;
}
/* These classes are never overwritten */
.hide {
  display: none !important;
}
/* Remove default Webflow chevron from form select */
select{
  -webkit-appearance:none;
}
@media screen and (max-width: 991px) {
    .hide, .hide-tablet {
        display: none !important;
    }
}
  @media screen and (max-width: 767px) {
    .hide-mobile-landscape{
      display: none !important;
    }
}
  @media screen and (max-width: 479px) {
    .hide-mobile{
      display: none !important;
    }
}
.margin-0 {
  margin: 0rem !important;
}
.padding-0 {
  padding: 0rem !important;
}
.spacing-clean {
padding: 0rem !important;
margin: 0rem !important;
}
.margin-top {
  margin-right: 0rem !important;
  margin-bottom: 0rem !important;
  margin-left: 0rem !important;
}
.padding-top {
  padding-right: 0rem !important;
  padding-bottom: 0rem !important;
  padding-left: 0rem !important;
}
.margin-right {
  margin-top: 0rem !important;
  margin-bottom: 0rem !important;
  margin-left: 0rem !important;
}
.padding-right {
  padding-top: 0rem !important;
  padding-bottom: 0rem !important;
  padding-left: 0rem !important;
}
.margin-bottom {
  margin-top: 0rem !important;
  margin-right: 0rem !important;
  margin-left: 0rem !important;
}
.padding-bottom {
  padding-top: 0rem !important;
  padding-right: 0rem !important;
  padding-left: 0rem !important;
}
.margin-left {
  margin-top: 0rem !important;
  margin-right: 0rem !important;
  margin-bottom: 0rem !important;
}
.padding-left {
  padding-top: 0rem !important;
  padding-right: 0rem !important;
  padding-bottom: 0rem !important;
}
.margin-horizontal {
  margin-top: 0rem !important;
  margin-bottom: 0rem !important;
}
.padding-horizontal {
  padding-top: 0rem !important;
  padding-bottom: 0rem !important;
}
.margin-vertical {
  margin-right: 0rem !important;
  margin-left: 0rem !important;
}
.padding-vertical {
  padding-right: 0rem !important;
  padding-left: 0rem !important;
}
/* Apply "..." at 100% width */
.truncate-width { 
		width: 100%; 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
}
/* Removes native scrollbar */
.no-scrollbar {
    -ms-overflow-style: none;
    overflow: -moz-scrollbars-none; 
}
.no-scrollbar::-webkit-scrollbar {
    display: none;
}

/* Color Schemes Controls*/

  .color-scheme-1 {
/*All sections should point to Color Scheme 1*/
  }
  .color-scheme-2 {
    --color-scheme-1--text: var(--color-scheme-2--text);
    --color-scheme-1--background: var(--color-scheme-2--background);
    --color-scheme-1--foreground: var(--color-scheme-2--foreground);
    --color-scheme-1--border: var(--color-scheme-2--border);
    --color-scheme-1--accent: var(--color-scheme-2--accent);
  }
  .color-scheme-3 {
    --color-scheme-1--text: var(--color-scheme-3--text);
    --color-scheme-1--background: var(--color-scheme-3--background);
    --color-scheme-1--foreground: var(--color-scheme-3--foreground);
    --color-scheme-1--border: var(--color-scheme-3--border);
    --color-scheme-1--accent: var(--color-scheme-3--accent);
  }
  .color-scheme-4 {
    --color-scheme-1--text: var(--color-scheme-4--text);
    --color-scheme-1--background: var(--color-scheme-4--background);
    --color-scheme-1--foreground: var(--color-scheme-4--foreground);
    --color-scheme-1--border: var(--color-scheme-4--border);
    --color-scheme-1--accent: var(--color-scheme-4--accent);
  }
  .color-scheme-5 {
    --color-scheme-1--text: var(--color-scheme-5--text);
    --color-scheme-1--background: var(--color-scheme-5--background);
    --color-scheme-1--foreground: var(--color-scheme-5--foreground);
    --color-scheme-1--border: var(--color-scheme-5--border);
    --color-scheme-1--accent: var(--color-scheme-5--accent);
  }
  .color-scheme-6 {
    --color-scheme-1--text: var(--color-scheme-6--text);
    --color-scheme-1--background: var(--color-scheme-6--background);
    --color-scheme-1--foreground: var(--color-scheme-6--foreground);
    --color-scheme-1--border: var(--color-scheme-6--border);
    --color-scheme-1--accent: var(--color-scheme-6--accent);
  }
  .color-scheme-7 {
    --color-scheme-1--text: var(--color-scheme-7--text);
    --color-scheme-1--background: var(--color-scheme-7--background);
    --color-scheme-1--foreground: var(--color-scheme-7--foreground);
    --color-scheme-1--border: var(--color-scheme-7--border);
    --color-scheme-1--accent: var(--color-scheme-7--accent);
  }
  .color-scheme-8 {
    --color-scheme-1--text: var(--color-scheme-8--text);
    --color-scheme-1--background: var(--color-scheme-8--background);
    --color-scheme-1--foreground: var(--color-scheme-8--foreground);
    --color-scheme-1--border: var(--color-scheme-8--border);
    --color-scheme-1--accent: var(--color-scheme-8--accent);
  }
  .color-scheme-9 {
    --color-scheme-1--text: var(--color-scheme-9--text);
    --color-scheme-1--background: var(--color-scheme-9--background);
    --color-scheme-1--foreground: var(--color-scheme-9--foreground);
    --color-scheme-1--border: var(--color-scheme-9--border);
    --color-scheme-1--accent: var(--color-scheme-9--accent);
  }
  .color-scheme-10 {
    --color-scheme-1--text: var(--color-scheme-10--text);
    --color-scheme-1--background: var(--color-scheme-10--background);
    --color-scheme-1--foreground: var(--color-scheme-10--foreground);
    --color-scheme-1--border: var(--color-scheme-10--border);
    --color-scheme-1--accent: var(--color-scheme-10--accent);
  }
/* Inherit slider dot colors */
.w-slider-dot {
  background-color: var(--color-scheme-1--text);
  opacity: 0.20;
}
.w-slider-dot.w-active {
  background-color: var(--color-scheme-1--text);
  opacity: 1;
}
/* Override .w-slider-nav-invert styles */
.w-slider-nav-invert .w-slider-dot {
  background-color: var(--color-scheme-1--text) !important;
  opacity: 0.20 !important;
}
.w-slider-nav-invert .w-slider-dot.w-active {
  background-color: var(--color-scheme-1--text) !important;
  opacity: 1 !important;
}


/* --------------------------------------------------------------------------
   Mobiilivalikon ikoni

   Oma toteutus Webflow'n menu-icon2:n tilalle: sen viivat eivat muutu ristiksi,
   koska animaatiota ei ole koskaan maaritelty.

   Tila luetaan luokasta .w--open, jonka webflow.js lisaa nappiin valikon
   avautuessa. Vari asetetaan nimenomaisesti, koska webflow.css sisaltaa
   saannon .w-nav-button.w--open { color: white }.
   -------------------------------------------------------------------------- */

.menu-icon {
  position: relative;
  width: 48px;
  height: 48px;
  margin-right: -0.5rem;
}

.navbar2_menu-button .menu-icon {
  color: var(--color-scheme-1--text);
}

.menu-icon__line {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 30px;
  height: 2px;
  /* Siirretaan viiva omaan keskipisteeseensa, jotta rotate() kaantaa sen
     ympari eika paasta. */
  margin: -1px 0 0 -15px;
  background-color: currentColor;
  transition: transform 0.3s ease;
}

/* Kiinni: viivat 8 px erillaan */
.menu-icon__line:first-child { transform: translateY(-4px); }
.menu-icon__line:last-child { transform: translateY(4px); }

/* Auki: molemmat keskelle ja ristiin */
.w--open .menu-icon__line:first-child { transform: rotate(45deg); }
.w--open .menu-icon__line:last-child { transform: rotate(-45deg); }

@media (prefers-reduced-motion: reduce) {
  .menu-icon__line { transition: none; }
}

/* --------------------------------------------------------------------------
   Korttilinkin hover: otsikko alleviivataan

   text-decoration valitaan border-bottomin sijaan, koska otsikko on
   lohkoelementti ja voi rivittya — reunaviiva venyisi koko rivin levyiseksi ja
   jaisi monirivisessa otsikossa vain viimeisen rivin alle.

   Alleviivaus on aina paikallaan lapinakyvana, ja hoverissa vaihtuu vain sen
   vari. Nain siirtyma on pehmea eika teksti hyppaa.
   -------------------------------------------------------------------------- */

.blog61_item-link h3 {
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
  transition: text-decoration-color 0.3s ease;
}

.blog61_item-link:hover h3,
.blog61_item-link:focus-visible h3 {
  text-decoration-color: currentColor;
}

@media (prefers-reduced-motion: reduce) {
  .blog61_item-link h3 { transition: none; }
}

/* --------------------------------------------------------------------------
   Referenssin tiedot kansikuvan alla

   Toimituksen sisalto ja linkki asiakkaan sivulle samassa lohkossa heti
   kansikuvan alapuolella. Ei ikoneita — pelkka lista ja tekstilinkki.
   Vaakaviivat ja typografia tulevat sivuston omista luokista
   (.divider-horizontal, .custom-tag, .custom-link).
   -------------------------------------------------------------------------- */

.reference-meta__grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 2rem;
}

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

.reference-meta__list li {
  padding: 0.35rem 0;
}

.reference-meta p {
  margin: 0;
}

@media screen and (max-width: 767px) {
  .reference-meta__grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
}

/* --------------------------------------------------------------------------
   Referenssit-sivun suodattimet

   Sama kolmen palstan ruudukko ja palstavali kuin korttiruudukossa
   (.blog61_list), jotta suodatinrivi linjautuu korttien kanssa. Kentat ovat
   kehyksettomia: pelkka ohut alaviiva, ja otsikot ovat paikkatekstit.
   -------------------------------------------------------------------------- */

.reference-filters {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  column-gap: 3rem;
  align-items: end;
  padding-bottom: 3rem;
}

.reference-filters__input,
.reference-filters__select {
  width: 100%;
  margin: 0;
  padding: 0 0 0.75rem;
  border: 0;
  border-radius: 0;
  background-color: transparent;
  color: inherit;
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.5;
}

.reference-filters__input::placeholder {
  color: currentColor;
  opacity: 0.55;
}

.reference-filters__input:focus,
.reference-filters__select:focus {
  outline: none;
}

/* Kentissa ei ole reunaa, joten nappaimistofokus tarvitsee oman merkkinsa.
   :focus-visible rajaa sen nappaimistokayttoon: hiiriklikkaus ei piirra
   kehysta, joten ulkoasu pysyy siistina. */
.reference-filters__input:focus-visible,
.reference-filters__select:focus-visible {
  outline: 2px solid var(--color-scheme-1--brand-blue);
  outline-offset: 4px;
}

/* Oma nuoli, jotta valikko nayttaa samalta selaimesta riippumatta */
.reference-filters__select {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 2rem;
  cursor: pointer;
}

.reference-filters__select-wrap {
  position: relative;
  display: flex;
  align-items: flex-end;
}

.reference-filters__chevron {
  position: absolute;
  right: 0;
  bottom: 0.75rem;
  display: flex;
  pointer-events: none;
  opacity: 0.55;
}

.reference-filters__count {
  margin: 0;
  padding-bottom: 0.75rem;
  text-align: right;
  opacity: 0.55;
  white-space: nowrap;
}

.reference-filters__empty {
  padding: 3rem 0;
}

@media screen and (max-width: 991px) {
  .reference-filters {
    grid-template-columns: 1fr 1fr;
    column-gap: 2rem;
    row-gap: 1.5rem;
  }

  .reference-filters__count {
    grid-column: 1 / -1;
    text-align: left;
    padding-bottom: 0;
  }
}

@media screen and (max-width: 767px) {
  .reference-filters {
    grid-template-columns: 1fr;
    row-gap: 1.25rem;
  }
}

/* --------------------------------------------------------------------------
   Artikkelin tunniste ja julkaisupaiva herossa

   Samalla rivilla otsikon ylla, erottimena piste. Molemmat kayttavat
   .custom-tag -tyylia, joten rivi lukeutuu yhtena metatietona.
   -------------------------------------------------------------------------- */

.article-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.75rem;
}

/* Erotinpiste vain kun paivays on olemassa */
.article-meta__date::before {
  content: '·';
  margin-right: 0.75rem;
  opacity: 0.5;
}

.article-meta__date {
  opacity: 0.7;
}

/* --------------------------------------------------------------------------
   Hero-osion saapumisanimaatio

   Kaytossa vain elementissa jolla on [data-hero-reveal] — talla hetkella
   etusivun hero. Tarkoitus on rauhallinen, elokuvamainen asettuminen: tausta
   tarkentuu paikalleen ja sisalto nousee portaittain nakyviin.

   Toteutettu pelkalla CSS:lla ilman JavaScriptia, jotta sisalto on piilossa jo
   ensimmaisesta piirrosta lahtien eika valahda ensin nakyviin. `both`-taytto
   pitaa alkutilan voimassa ennen viivetta.

   Tummennuskerros (.image-overlay-layer) jatetaan tarkoituksella animoimatta:
   se on tumma suodin videon paalla, joten sen haivyttaminen nollasta nakyy
   kirkkautena joka tummenee — se lukeutuu valahdyksena eika saapumisena.

   Skaalaus vaatii leikkauksen: .section_header111 on position: relative ilman
   overflow-maaritysta, joten ilman tata taustakuva tyontaisi sivulle
   vaakavierityksen.
   -------------------------------------------------------------------------- */

/* Leikkaus vain videoherolle: vain siina skaalataan taustaa. */
.section_header111[data-hero-reveal] {
  overflow: hidden;
}

@keyframes hero-tarkennu {
  from {
    opacity: 0;
    transform: scale(1.08);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes hero-nouse {
  from {
    opacity: 0;
    transform: translateY(2rem);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* Pehmea ulostulo: nopea alku, pitka rauhoittuminen */
[data-hero-reveal] .header111_background-image {
  animation: hero-tarkennu 2.4s cubic-bezier(0.16, 1, 0.3, 1) both;
}

[data-hero-reveal] .header111_content-left {
  animation: hero-nouse 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.35s both;
}

[data-hero-reveal] .header111_content-right {
  animation: hero-nouse 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.55s both;
}

/* Liikeherkkyys: sisalto nakyviin heti ilman liiketta */
@media (prefers-reduced-motion: reduce) {
  [data-hero-reveal] .header111_background-image,
  [data-hero-reveal] .header111_content-left,
  [data-hero-reveal] .header111_content-right {
    animation: none;
  }
}

/* --------------------------------------------------------------------------
   Sama saapuminen muille sivuille

   Naissa heroissa ei ole taustavideota, joten liike koskee vain tekstia.
   Tempo on nopeampi kuin etusivulla — ilman taustan tarkentumista pitka
   viive tuntuisi vain hitaalta.

   Porrastus tehdaan lapsijarjestyksen mukaan, joten sama saanto toimii
   riippumatta siita onko herossa tunniste, otsikko, kappale vai painike.
   -------------------------------------------------------------------------- */

/* header46: tunniste / otsikko / kappale */
[data-hero-reveal] .max-width-large > *,
/* header1 (kiitos-sivut): otsikko / kappale / painike */
[data-hero-reveal] .header1_content-left > *,
[data-hero-reveal] .layout7_image-wrapper {
  animation: hero-nouse 0.9s cubic-bezier(0.16, 1, 0.3, 1) both;
}

[data-hero-reveal] .max-width-large > *:nth-child(1),
[data-hero-reveal] .header1_content-left > *:nth-child(1) {
  animation-delay: 0.1s;
}

[data-hero-reveal] .max-width-large > *:nth-child(2),
[data-hero-reveal] .header1_content-left > *:nth-child(2) {
  animation-delay: 0.2s;
}

[data-hero-reveal] .max-width-large > *:nth-child(3),
[data-hero-reveal] .header1_content-left > *:nth-child(3) {
  animation-delay: 0.3s;
}

[data-hero-reveal] .max-width-large > *:nth-child(n + 4),
[data-hero-reveal] .header1_content-left > *:nth-child(n + 4) {
  animation-delay: 0.4s;
}

/* Kuva saapuu tekstin jalkeen */
[data-hero-reveal] .layout7_image-wrapper {
  animation-delay: 0.35s;
}

@media (prefers-reduced-motion: reduce) {
  [data-hero-reveal] .max-width-large > *,
  [data-hero-reveal] .header1_content-left > *,
  [data-hero-reveal] .layout7_image-wrapper {
    animation: none;
  }
}

/* --------------------------------------------------------------------------
   Sisaltoosioiden saapuminen

   Hero animoituu heti sivun avautuessa; taman alapuolella olevat osiot
   saapuvat kun ne tulevat nakyviin. Naytolla jo valmiiksi nakyvat osiot
   animoituvat heti latauksessa, joten koko ensinaytto saapuu yhtenaisesti.

   Alkutila sidotaan .w-mod-js -luokkaan, jonka Webflow'n skripti asettaa
   <head>:ssa ennen ensimmaista piirtoa. Nain sisalto ei ehdi valahtaa
   nakyviin ennen piilotusta. Jos JavaScript on pois kaytosta, luokkaa ei ole
   eika mitaan piiloteta.

   Animoidaan osiokaaretta, ei sisaelementteja: FAQ-haitarit ja korttien
   hover-efektit ovat Webflow'n IX2:n hallinnassa eivatka saa haiskahtaa.
   -------------------------------------------------------------------------- */

.w-mod-js .main-wrapper > section,
.w-mod-js .main-wrapper > .reveal-block {
  opacity: 0;
  transform: translateY(1.5rem);
}

.w-mod-js .main-wrapper > section.on-nakyvissa,
.w-mod-js .main-wrapper > .reveal-block.on-nakyvissa {
  opacity: 1;
  transform: none;
  transition:
    opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

@media (prefers-reduced-motion: reduce) {
  .w-mod-js .main-wrapper > section,
  .w-mod-js .main-wrapper > .reveal-block {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* --------------------------------------------------------------------------
   Asiakkaan kommentti referenssisivulla

   Ei korttia eika taustaa: hiusviiva, runsaasti tilaa ja iso kevyt ladonta.
   Cabinet Groteskissa on oma Light-leikkaus (300), joten paino on aito eika
   selaimen ohentama — se on koko ilmeen kannalta olennaista.
   -------------------------------------------------------------------------- */
.reference-testimonial {
  margin: 5rem 0 0;
}

.reference-testimonial__quote {
  margin: 3.5rem 0 0;
  padding: 0;
  border: 0;
  font-family: var(--_typography---font-styles--heading);
  font-size: 2rem;
  font-weight: 300;
  line-height: 1.3;
  /* Isossa koossa hieman tiukempi valistys nayttaa harkitulta; leipatekstin
     valistys jaisi loysaksi. */
  letter-spacing: -0.015em;
  /* Tasaa rivit, ettei viimeiselle jaa yksinaista sanaa. */
  text-wrap: balance;
}

/* Nimi, titteli ja yritys alkavat sitaatin vasemmasta reunasta: kuva on
   omalla rivillaan, jottei se tyonna tekstia sisennykseen. */
.reference-testimonial__by {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
  margin-top: 2.5rem;
  text-align: left;
}

.reference-testimonial__avatar {
  flex: none;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 100%;
  overflow: hidden;
}

.reference-testimonial__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.reference-testimonial__name {
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.reference-testimonial__role {
  margin-top: 0.15rem;
  font-size: 0.875rem;
  opacity: 0.55;
}

@media screen and (max-width: 767px) {
  .reference-testimonial {
    margin-top: 3.5rem;
  }

  .reference-testimonial__quote {
    margin-top: 2.5rem;
    font-size: 1.5rem;
  }
}

/* --------------------------------------------------------------------------
   Etusivun hero-laatikko: viimeisimmat referenssit

   Otsikot pinotaan samaan ruudukkoruutuun, jotta laatikon korkeus maaraytyy
   pisimman otsikon mukaan eika hyppaa vaihdon yhteydessa. Piilotettu otsikko
   on visibility: hidden, joten sita ei voi klikata eika ruudunlukija lue sita.
   -------------------------------------------------------------------------- */
.hero-referenssit__slides {
  display: grid;
}

.hero-referenssit__slide {
  grid-area: 1 / 1;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease;
}

.hero-referenssit__slide.on-aktiivinen {
  opacity: 1;
  visibility: visible;
}

.hero-referenssit__link {
  color: inherit;
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0 1px;
  transition: background-size 0.3s ease;
}

.hero-referenssit__link:hover,
.hero-referenssit__link:focus-visible {
  background-size: 100% 1px;
}

/* Neliot ovat painikkeita, jotta niita voi kayttaa myos nappaimistolla. */
button.navigation-dot {
  appearance: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  transition: opacity 0.3s ease;
}

@media (prefers-reduced-motion: reduce) {
  .hero-referenssit__slide,
  .hero-referenssit__link,
  button.navigation-dot {
    transition: none;
  }
}

/* --------------------------------------------------------------------------
   Tyhja listasivu: pelkka rivi, ei kehysta
   -------------------------------------------------------------------------- */
.listing-empty {
  margin: 0;
  padding: 1rem 0 4rem;
}

/* --------------------------------------------------------------------------
   Listasivujen korttikuvat: koko kuva neliossa

   Kansikuvat ovat laite-mockupeja (3:2), joista neliorajaus leikkaisi laidat
   pois. object-fit: contain mahduttaa kuvan kokonaan neliolaatikkoon, ja
   Sanitysta pyydetaan rajaamaton kuva (ks. imageAt, contain).
   -------------------------------------------------------------------------- */
.blog61_image--sovita {
  object-fit: contain;
  /* Pystysuunnassa keskelle, jotta mockup istuu neliossa tasapainoisesti. */
  object-position: center;
}

/* --------------------------------------------------------------------------
   Artikkelin lukupalkki

   Kiinnitetty nayton ylareunaan navigaation paalle (navigaatio on sticky,
   z-index 99999). scaleX leveyden sijaan, jotta selain ei joudu laskemaan
   asettelua uudelleen jokaisella vierityksella.
   -------------------------------------------------------------------------- */
.lukupalkki {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100000;
  height: 3px;
  pointer-events: none;
}

.lukupalkki__tayte {
  width: 100%;
  height: 100%;
  transform: scaleX(0);
  transform-origin: left center;
  background-color: var(--color-scheme-1--brand-blue);
}

/* --------------------------------------------------------------------------
   Artikkelien ja referenssien leipatekstin ladonta

   Webflow'n perusotsikot on mitoitettu sivun paaotsikoiksi (h2 = 3rem), mika
   on kohtuuton n. 640 px levean tekstipalstan sisalla. Tassa oma asteikko,
   joka suhteutuu leipatekstiin ja pitaa otsikkohierarkian silti selvana.
   -------------------------------------------------------------------------- */
.text-rich-text h2 {
  font-size: 2rem;
  line-height: 1.25;
  /* Pienempi otsikko tarvitsee enemman ilmaa ylleen erottuakseen jaksona. */
  margin-top: 2.5rem;
}

.text-rich-text h3 {
  font-size: 1.5rem;
  line-height: 1.3;
  margin-top: 2rem;
}

.text-rich-text h4 {
  font-size: 1.25rem;
  line-height: 1.35;
  margin-top: 1.75rem;
}

.text-rich-text h5 {
  font-size: 1.125rem;
  line-height: 1.4;
}

.text-rich-text h6 {
  font-size: 1rem;
  line-height: 1.4;
}

/* Nelio luettelomerkiksi pyorean sijaan */
.text-rich-text ul {
  list-style-type: square;
}

.text-rich-text ul li::marker {
  font-size: 0.85em;
}

.text-rich-text li {
  margin-bottom: 0.5rem;
}

/* --------------------------------------------------------------------------
   Artikkelin tiivistelma
   -------------------------------------------------------------------------- */
.tiivistelma__teksti {
  position: relative;
  overflow: hidden;
  /* Sanityn tekstikentassa rivinvaihdot ovat merkitsevia. */
  white-space: pre-line;
  transition: max-height 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Hakautuva alareuna kertoo etta teksti jatkuu leikkauskohdan takana. */
.tiivistelma__teksti.on-suljettu::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3.5rem;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0),
    var(--color-scheme-1--background)
  );
  pointer-events: none;
}

.tiivistelma__nappi {
  appearance: none;
  margin-top: 1rem;
  padding: 0;
  border: 0;
  border-bottom: 1px solid var(--color-scheme-1--brand-blue);
  background: none;
  color: inherit;
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.5;
  cursor: pointer;
}

.tiivistelma__nappi:focus-visible {
  outline: 2px solid var(--color-scheme-1--brand-blue);
  outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
  .tiivistelma__teksti {
    transition: none;
  }
}

/* --------------------------------------------------------------------------
   Palautteita-sivu

   Kortit ladotaan CSS-palstoihin (.testimonial18_list). break-inside estaa
   kortin katkeamisen kahdelle palstalle — Webflow'n oma inline-block riittaa
   useimmiten, mutta ei kaikissa selaimissa.
   -------------------------------------------------------------------------- */
.palaute-kortti {
  break-inside: avoid;
  margin: 0 0 2rem;
}

.palaute-kortti__teksti {
  margin: 0;
  padding: 0;
  border: 0;
  /* Osa palautteista on monikappaleisia; rivinvaihdot ovat merkitsevia. */
  white-space: pre-line;
}

.palaute-kortti__rooli {
  opacity: 0.6;
}

/* --------------------------------------------------------------------------
   Footerin erotinviiva nakymattomaksi

   Vain vari poistetaan; korkeus jaa ennalleen, joten viivan varaama tila ja
   footerin rytmi sailyvat. Luokkaa kaytetaan ainoastaan footerissa.
   -------------------------------------------------------------------------- */
.divider-horizontal-4 {
  background-color: transparent;
}