/* ==========================================================================
   L Arkkitehdit, uudistus 2026 (DigiSilta)
   Ladataan dist/styles/main.css:n jälkeen. Fontit: teeman Gilroy-painot
   (Regular 400, Medium 500, SemiBold 600, Bold 700, ExtraBold 800).
   ========================================================================== */

:root {
  --ds-punainen: #eb797b;
  --ds-beige: #fef5f0;
  --ds-vaaleansininen: #e7edfd;
  --ds-laventeli: #cccffc;
  --ds-varjo-teksti: 2px 3px 10px rgba(0, 0, 0, .35);
  --ds-varjo-kuva: 8px 8px 16px 0 rgba(0, 0, 0, .14);
  /* Asettelujärjestelmä: yksi säiliö kaikille osioille. Työpöydällä vasemmalla on 6rem sivupalkki
     ja oikealla Ota yhteyttä -palkki, joiden lisäksi sujuva reunaväli. */
  --ds-reunavali: clamp(1.5rem, 4vw, 4rem);
  --ds-leveä: calc(100% - 2.5rem);
  --ds-sisalto: min(var(--ds-leveä), 48rem);
  --ds-osiovali: clamp(3.5rem, 7vw, 6rem);
  --ds-ruutuvali: clamp(1.5rem, 3vw, 3rem);
}

@media (min-width: 48rem) {
  :root {
    --ds-leveä: min(100% - 2 * (6rem + var(--ds-reunavali)), 72rem);
  }
}

/* Paletin taustavärit (theme.json) myös teeman omissa lohkoissa
   -------------------------------------------------------------------------- */
.has-beige-background-color { background-color: var(--ds-beige) !important; }
.has-vaaleansininen-background-color { background-color: var(--ds-vaaleansininen) !important; }
.has-laventeli-background-color { background-color: var(--ds-laventeli) !important; }
.has-vaaleanharmaa-background-color { background-color: #f7f7f7 !important; }
.has-valkoinen-background-color { background-color: #fff !important; }
.has-punainen-background-color { background-color: var(--ds-punainen) !important; }
.has-musta-background-color { background-color: #000 !important; }
.has-punainen-color { color: var(--ds-punainen) !important; }
.has-valkoinen-color { color: #fff !important; }

/* 1. Hero: keskitetty sisältö, tummennus, maltillinen varjo, pyöreä nappi
   -------------------------------------------------------------------------- */
.full-width-media-block.hero-20 .full-width-media-block__medias__item::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: rgba(0, 0, 0, .18);
  pointer-events: none;
}

/* Herossa teksti aina valkoinen (myös dioissa, joihin on valittu tumma teksti) */
.full-width-media-block.hero-20 .full-width-media-block__medias__item.dark_text::before {
  background: rgba(0, 0, 0, .18);
}

.full-width-media-block.hero-20 .full-width-media-block__medias__item__content {
  position: absolute;
  z-index: 3;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  transform: none !important;
  padding: 0 1.5rem;
  gap: 1.25rem;
}

.full-width-media-block.hero-20 .full-width-media-block__medias__item__content > * {
  margin: 0;
  max-width: 60rem;
}

.full-width-media-block.hero-20 .full-width-media-block__medias__item__content h1,
.full-width-media-block.hero-20 .full-width-media-block__medias__item__content h2 {
  font-weight: 700;
  line-height: 1.02;
  color: #fff;
  text-align: center !important;
  text-shadow: var(--ds-varjo-teksti);
  -webkit-hyphens: manual;
  hyphens: manual;
  overflow-wrap: normal;
}

.full-width-media-block.hero-20 .full-width-media-block__medias__item__content h1 {
  font-size: 3.75rem;
}

@media (min-width: 35rem) {
  .full-width-media-block.hero-20 .full-width-media-block__medias__item__content h1 { font-size: 4.75rem; }
}

@media (min-width: 48rem) {
  .full-width-media-block.hero-20 .full-width-media-block__medias__item__content h1 { font-size: 5.75rem; }
}

@media (min-width: 62rem) {
  .full-width-media-block.hero-20 .full-width-media-block__medias__item__content h1 { font-size: 6.75rem; }
}

.full-width-media-block.hero-20 .full-width-media-block__medias__item__content p {
  color: #fff;
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1.45;
  max-width: 34rem;
  text-shadow: 1px 2px 6px rgba(0, 0, 0, .45);
}

@media (min-width: 48rem) {
  .full-width-media-block.hero-20 .full-width-media-block__medias__item__content p { font-size: 1.375rem; }
}

.full-width-media-block.hero-20 .full-width-media-block__medias__item__content :is(h1, h2, h3, p, span, strong),
.full-width-media-block.hero-20 .dark_text .full-width-media-block__medias__item__content :is(h1, h2, h3, p, span, strong) {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

.full-width-media-block.hero-20 .dark_text .full-width-media-block__medias__item__content :is(h1, h2) {
  text-shadow: var(--ds-varjo-teksti);
}

.full-width-media-block.hero-20 .full-width-media-block__medias__item__content > a,
.ds-nappi,
.wp-block-button .wp-block-button__link {
  display: inline-block;
  background: var(--ds-punainen) !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  border: 0;
  border-radius: 999px;
  padding: .8rem 1.9rem;
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none !important;
  box-shadow: 2px 3px 10px rgba(0, 0, 0, .18);
  width: auto !important;
  transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease;
}

.full-width-media-block.hero-20 .full-width-media-block__medias__item__content > a::after,
.ds-nappi::after,
.wp-block-button .wp-block-button__link::after {
  content: none !important;
}

.full-width-media-block.hero-20 .full-width-media-block__medias__item__content > a:hover,
.full-width-media-block.hero-20 .full-width-media-block__medias__item__content > a:focus-visible,
.ds-nappi:hover,
.wp-block-button .wp-block-button__link:hover {
  background: #e4666a !important;
  background-image: none !important;
  transform: translateY(-2px);
  box-shadow: 3px 6px 14px rgba(0, 0, 0, .22);
}

/* Otsikot: ExtraBold (Gilroy 800) */
.block__title,
.ds-uudistus .wysiwyg h2.wp-block-heading,
.steps-with-background-color-block__title,
.features-list .item-title {
  font-weight: 800;
}

/* 2. ja 11. Projektikaruselli (Yli 1000 projektia / Selaa muita hankkeitamme)
   -------------------------------------------------------------------------- */
.cases-slideshow .scroll-container-wrapper .scroll-wrapper .scroll-content .scroll-item__content,
.cases-slideshow .scroll-container-wrapper .scroll-wrapper .scroll-content .scroll-item__title,
.cases-slideshow .scroll-container-wrapper .scroll-wrapper .scroll-content .scroll-item__description {
  text-align: left;
}

.cases-slideshow .scroll-container-wrapper .scroll-wrapper .scroll-content .scroll-item__title {
  font-weight: 700;
}

.cases-slideshow .scroll-item__image img {
  aspect-ratio: 18.6667 / 27.5;
  height: auto !important;
  width: 100%;
  transition: transform .3s ease, box-shadow .3s ease;
}

.cases-slideshow .scroll-item__link:hover .scroll-item__image img,
.cases-slideshow .scroll-item__link:focus-visible .scroll-item__image img {
  transform: translateY(-6px);
  box-shadow: var(--ds-varjo-kuva);
}

.cases-slideshow.has-background,
.cases-slideshow[class*="has-"][class*="-background-color"] {
  padding-bottom: 2.5rem;
}

/* 5., 8., 11. ja 13. Korttiosiot (features)
   -------------------------------------------------------------------------- */
.flex-item .item-image,
.flex-item figure > .item-image {
  transition: transform .3s ease, box-shadow .3s ease;
}

.flex-item:hover .item-image,
a:focus-visible > .flex-item .item-image {
  transform: translateY(-6px);
  box-shadow: var(--ds-varjo-kuva);
}

.flex-item.features-item .item-content,
.flex-item.news-item .item-content {
  text-align: left;
}

.flex-item.services-item .item-content,
.flex-item.services-item .item-content .item-title,
.flex-item.services-item .item-content .item-description {
  text-align: center;
}

.flex-item.services-item .item-content .item-title {
  font-weight: 700;
}

.flex-item.services-item:hover .item-image {
  transform: translateY(-6px);
  box-shadow: var(--ds-varjo-kuva);
}

/* Kaaviot ja piirrokset näkyvät kaaren sisällä kokonaisina */
.features-list.ds-kuvat-kokonaan .flex-item .item-image,
.features-list.ds-kuvat-kokonaan .flex-item figure > .item-image {
  object-fit: contain;
  background: #fff;
  padding: 10% 7%;
  box-sizing: border-box;
  aspect-ratio: 1 / 1.2;
  width: 100%;
  height: auto;
}

/* Kortin otsikko: punainen, tavutus vain tarvittaessa */
.flex-item.features-item .item-title {
  color: var(--ds-punainen);
  -webkit-hyphens: manual;
  hyphens: manual;
  overflow-wrap: break-word;
}

.features-list__grid-container-4 .flex-item.features-item .item-title {
  font-size: 1.5rem;
  line-height: 1.2;
}

.flex-item.features-item .item-content p {
  font-size: .9375rem;
  line-height: 1.5;
}

/* Projektisivun kaarikortit ilman linkkiä: ei osoitinta */
.flex-item.ds-ei-linkkia:hover {
  cursor: default;
}

.features-list__background-vaaleansininen { background-color: var(--ds-vaaleansininen); }
.features-list__background-laventeli { background-color: var(--ds-laventeli); }
.features-list__background-vaaleanharmaa { background-color: #f7f7f7; }

.features-list__container.features-list-has-background {
  padding-bottom: 3rem;
}

/* 4. ja 9. Sitaatit ja 7. ja 12. numerot
   -------------------------------------------------------------------------- */
.info-image__quote-container .quote {
  font-weight: 800;
  text-shadow: var(--ds-varjo-teksti);
}

.info-image__quote-container .quote-author {
  font-weight: 600;
  text-shadow: 1px 2px 6px rgba(0, 0, 0, .4);
}

.info-image__overlay {
  background: rgba(0, 0, 0, .38);
}

.info-image__numbers-container .item-number {
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  text-shadow: 1px 2px 8px rgba(0, 0, 0, .25);
}

.info-image__numbers-container .item-text {
  font-weight: 600;
  line-height: 1.2;
  margin-top: .15em;
  text-shadow: 1px 2px 6px rgba(0, 0, 0, .35);
}

.info-image__numbers-container .info-image__item {
  margin-bottom: 0;
}

/* 10. Prosessi: kuvakehysten maltillinen varjo, numeroidut otsikot */
.steps-with-background-color-block__image {
  box-shadow: 6px 6px 14px 0 rgba(0, 0, 0, .14);
}

.steps-with-background-color-block__step {
  font-weight: 800;
  margin-bottom: .5rem;
}

.steps-with-background-color-block__content {
  box-shadow: 4px 4px 14px 0 rgba(0, 0, 0, .06);
}

/* ==========================================================================
   Projektisivu: osiot WordPressin omilla lohkoilla
   ========================================================================== */

/* Tekstiosio: otsikko taustan yläreunan päällä (ilme: Kutsukilpailun voitto,
   Huvilakaupunki luonnon syleilyssä, Sweet Green) */
.wysiwyg > .wp-block-group.is-style-ds-tekstiosio {
  --ds-ylitys: 2.6rem;
  max-width: none;
  margin: calc(var(--ds-ylitys) + 3.5rem) 0 0;
  padding: 0 0 4.5rem;
  padding-top: 0 !important;
  padding-bottom: 4.5rem !important;
}

@media (min-width: 48rem) {
  .wysiwyg > .wp-block-group.is-style-ds-tekstiosio {
    --ds-ylitys: 3.3rem;
    padding-bottom: 6rem !important;
  }
}

.wysiwyg > .wp-block-group.is-style-ds-tekstiosio:not(.has-background) {
  margin-top: 4rem;
  padding-bottom: 2rem !important;
}

.wysiwyg > .wp-block-group.is-style-ds-tekstiosio:not(.has-background) > :is(h1, h2, h3):first-child {
  margin-top: 0;
}

/* Valkoisella osiolla ei ole taustan reunaa, jonka päälle otsikko nousisi: otsikko omalla
   paikallaan (muuten se liimautui edellisen kuvan alareunaan) */
.wysiwyg > .wp-block-group.is-style-ds-tekstiosio:not(.has-background) > :is(h1, h2, h3):first-child,
.wysiwyg > .wp-block-group.is-style-ds-tekstiosio:not(.has-background) > h2.ds-pitka-otsikko:first-child {
  top: 0 !important;
  margin-bottom: 2rem !important;
}

.wysiwyg > .wp-block-group.is-style-ds-tekstiosio > * {
  width: var(--ds-sisalto);
  margin-left: auto;
  margin-right: auto;
  padding-left: 0;
  padding-right: 0;
}

.wysiwyg > .wp-block-group.is-style-ds-tekstiosio > :is(h1, h2, h3):first-child {
  width: var(--ds-leveä);
  position: relative;
  top: calc(-1 * var(--ds-ylitys));
  margin-top: 0;
  margin-bottom: calc(3rem - var(--ds-ylitys));
  font-size: 2.75rem;
  font-weight: 800;
  line-height: 1.05;
  color: #000;
  max-width: none;
}

@media (min-width: 48rem) {
  .wysiwyg > .wp-block-group.is-style-ds-tekstiosio > :is(h1, h2, h3):first-child {
    font-size: 4rem;
  }
}

.wysiwyg > .wp-block-group.is-style-ds-tekstiosio > p {
  font-size: 1.125rem;
  line-height: 1.55;
}

@media (min-width: 48rem) {
  .wysiwyg > .wp-block-group.is-style-ds-tekstiosio > p { font-size: 1.25rem; }
}

.wysiwyg > .wp-block-group.is-style-ds-tekstiosio > p + p {
  margin-top: 1.25em;
}

/* Faktalista (Sijainti, Laajuus ...) */
.wysiwyg .ds-faktat p {
  margin: 0 0 1.25em;
}

.wysiwyg .ds-faktat strong {
  font-weight: 700;
}

/* Kuvat: kehys ja varjo */
.wysiwyg .wp-block-image.is-style-ds-varjo img {
  box-shadow: var(--ds-varjo-kuva);
}

/* Leveä kuva, jota vieritetään sivuttain (aluepoikkileikkaus) */
.wysiwyg > .wp-block-image.is-style-ds-vieritettava {
  max-width: none;
  padding: 0;
  margin-top: 4rem;
  margin-bottom: 4rem;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  cursor: grab;
}

.wysiwyg > .wp-block-image.is-style-ds-vieritettava.ds-vedetaan {
  cursor: grabbing;
  user-select: none;
}

.wysiwyg > .wp-block-image.is-style-ds-vieritettava img {
  display: block;
  height: clamp(11rem, 22vw, 20rem) !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 1.5rem;
  pointer-events: none;
}

.wysiwyg > .wp-block-image.is-style-ds-vieritettava figcaption {
  position: sticky;
  left: 1.5rem;
  width: max-content;
  max-width: calc(100vw - 3rem);
}

/* Isot projektikuvat (ilme: kohta 4 ja 5) */
.wysiwyg > .wp-block-image.alignwide img,
.wysiwyg > .wp-block-image.aligncenter img {
  width: 100%;
  height: auto;
}

.wysiwyg > .wp-block-image.alignwide {
  width: var(--ds-leveä);
  max-width: none;
  padding-left: 0;
  padding-right: 0;
  margin: 3.5rem auto;
}

.wysiwyg > .wp-block-image.alignfull {
  max-width: none;
  padding: 0;
  margin: 4rem 0;
}

.wysiwyg > .wp-block-image.alignfull img {
  width: 100%;
  height: auto;
  display: block;
}

.wysiwyg > .wp-block-image.is-style-ds-tumma {
  display: block;
}

/* Painikkeet */
.wysiwyg > .wp-block-buttons {
  margin: 2.5rem auto;
  justify-content: center;
}

/* ==========================================================================
   Yhtenäinen asettelu kaikille sivuille. Kaksi linjaa:
   --ds-leveä (otsikot, kuvat, sarakerivit) ja --ds-sisalto (leipäteksti).
   ========================================================================== */

/* Tekstiosion otsikot: pitkä otsikko pienempänä, alaotsikot normaalikokoisina */
.wysiwyg > .wp-block-group.is-style-ds-tekstiosio > h2.ds-pitka-otsikko:first-child {
  font-size: 2rem;
  line-height: 1.12;
}

@media (min-width: 48rem) {
  .wysiwyg > .wp-block-group.is-style-ds-tekstiosio > h2.ds-pitka-otsikko:first-child {
    font-size: 2.75rem;
  }
}

.wysiwyg > .wp-block-group.is-style-ds-tekstiosio > :is(h3, h4):first-child {
  margin-top: 0;
}

.wysiwyg > .wp-block-group.is-style-ds-tekstiosio > :is(h3, h4) {
  margin-top: 2.5rem;
  margin-bottom: 1rem;
  font-weight: 700;
}

.wysiwyg > .wp-block-group.is-style-ds-tekstiosio > :is(ul, ol) {
  padding-left: 1.25em;
  font-size: 1.125rem;
  line-height: 1.55;
}

.wysiwyg > .wp-block-group.is-style-ds-tekstiosio > .wp-block-buttons {
  margin-top: 2rem;
}

/* Taustallisen osion sisällä oleva kuva */
.wysiwyg > .wp-block-group.is-style-ds-tekstiosio > .wp-block-image {
  width: var(--ds-leveä);
  margin-top: 2rem;
}

/* Yksittäiset kuvat: leveä linja, ei suurennusta yli luonnollisen koon */
.wysiwyg > .wp-block-group.is-style-ds-tekstiosio > .wp-block-image img {
  width: auto;
  max-width: 100%;
  max-height: 85vh;
  height: auto;
  display: block;
  margin: 0 auto;
}

/* Sarakerivit: kuvarivi, teksti ja kuva, tekstisarakkeet, muut */
.wysiwyg > .wp-block-columns.alignwide,
.wysiwyg > .wp-block-group.is-style-ds-tekstiosio > .wp-block-columns {
  width: var(--ds-leveä);
  max-width: none;
  margin: 3.5rem auto;
  padding-left: 0;
  padding-right: 0;
  box-sizing: border-box;
}

.ds-kuvarivi.wp-block-columns { gap: 1.5rem; align-items: flex-start; }
.ds-tekstikuva.wp-block-columns { gap: 4rem; }
.ds-sarakerivi.wp-block-columns { gap: 2.5rem; }
.ds-tekstisarakkeet.wp-block-columns { gap: 2.5rem; }

.wysiwyg .wp-block-columns.alignwide .wp-block-column > :first-child { margin-top: 0; }
.wysiwyg .wp-block-columns.alignwide .wp-block-column > :last-child { margin-bottom: 0; }

.wysiwyg .wp-block-columns.alignwide .wp-block-image {
  margin: 0;
  padding: 0;
}

.wysiwyg .wp-block-columns.alignwide .wp-block-image img {
  width: 100%;
  height: auto;
  display: block;
}

.wysiwyg .wp-block-columns.alignwide .wp-block-column + .wp-block-image,
.wysiwyg .wp-block-columns.alignwide .wp-block-image + .wp-block-image {
  margin-top: 1.5rem;
}

.ds-tekstikuva p,
.ds-sarakerivi p {
  font-size: 1.125rem;
  line-height: 1.55;
}

.ds-tekstikuva h2,
.ds-sarakerivi h2 {
  font-size: 2rem;
  font-weight: 800;
  line-height: 1.12;
  margin-bottom: 1.5rem;
}

.ds-tekstisarakkeet :is(h2, h3, h4) {
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1.25;
  margin-bottom: .75rem;
}

.ds-tekstisarakkeet p {
  font-size: 1rem;
  line-height: 1.55;
}

@media (max-width: 781px) {
  .wysiwyg .wp-block-columns.alignwide { gap: 1.5rem; }
}

/* Sarakeosioiden ilmestyminen vieritettäessä (ds/uudistus.js) */
.wysiwyg > .ds-ilmesty {
  opacity: 0;
  transform: translateY(100px);
  transition: opacity 1s ease-out, transform 1s cubic-bezier(.25, .46, .45, .94);
}

.wysiwyg > .ds-ilmesty.ds-nakyvissa {
  opacity: 1;
  transform: none;
}

/* 6. Kartta: koko kohdekortti vie projektisivulle */
.mapboxgl-popup .case-card {
  position: relative;
}

.mapboxgl-popup .case-card__link::before {
  content: "";
  position: absolute;
  inset: 0;
}

.mapboxgl-popup .case-card:hover .case-card__image {
  box-shadow: var(--ds-varjo-kuva);
}

/* Puhelin: neljän projektikortin ryhmä yhteen sarakkeeseen (kaaviot) */
@media (max-width: 47.9375rem) {
  .features-list__grid-container-4:has(.features-item) {
    grid-template-columns: 1fr;
  }

  /* Kuva ylhäällä, teksti koko leveydellä sen alla (vierekkäin tekstille jäi ~140 px) */
  .flex-item.features-item {
    flex-direction: column !important;
  }

  .flex-item.features-item figure,
  .features-list.ds-kuvat-kokonaan .flex-item.features-item figure {
    max-width: min(100%, 14rem) !important;
    width: 100%;
    margin: 0 !important;
  }

  .flex-item.features-item .item-content {
    padding-left: 0 !important;
    margin-block-start: 1.25rem !important;
  }
}

/* Viimeisen osion alle tilaa ennen alatunnistetta */
.wysiwyg > .wp-block-group.is-style-ds-tekstiosio:not(.has-background):last-child,
.wysiwyg > .wp-block-columns.alignwide:last-child {
  padding-bottom: 5rem !important;
}

/* Tiimimme ja henkilölistat: titteli, sähköposti ja puhelin aina näkyvissä kuten
   etusivun Ota yhteyttä -osiossa. Vanha hover-liuku vei yhteystiedot nimen päälle. */
.items-wrapper--grid-view .items-wrapper__list__row__item--staff .items-wrapper__list__row__item__content__details {
  display: block !important;
  overflow: visible !important;
  min-height: 0 !important;
  transform: none !important;
}

.items-wrapper--grid-view .items-wrapper__list__row__item--staff:hover .items-wrapper__list__row__item__content__details,
.items-wrapper--grid-view .items-wrapper__list__row__item--staff .items-wrapper__list__row__item__content__details:hover {
  transform: none !important;
  opacity: 1 !important;
}

.items-wrapper--grid-view .items-wrapper__list__row__item--staff .items-wrapper__list__row__item__content__details__category,
.items-wrapper--grid-view .items-wrapper__list__row__item--staff .items-wrapper__list__row__item__content__details__contact {
  position: static !important;
  transform: none !important;
  display: block !important;
}

.items-wrapper--grid-view .items-wrapper__list__row__item--staff .items-wrapper__list__row__item__content__details__category p {
  margin: 0 0 .35rem;
}

.items-wrapper--grid-view .items-wrapper__list__row__item--staff .items-wrapper__list__row__item__content__details__contact a {
  display: block !important;
  line-height: 1.5;
  position: relative;
  z-index: 2;
}

.items-wrapper--grid-view .items-wrapper__list__row__item--staff .items-wrapper__list__row__item__content__details__contact a:hover {
  color: var(--ds-punainen);
}

/* 13. Uutiset & some: kuvat ilman valkoista reunusta, yhtenäinen teksti */
.flex-item.news-item .item-image {
  border: 0;
  width: 100%;
  object-fit: cover;
}

.flex-item.news-item .item-content p.item-text {
  font-size: 1rem;
  line-height: 1.45;
  text-align: left;
}

.flex-item.news-item {
  transition: box-shadow .3s ease;
}

.flex-item.news-item:hover {
  box-shadow: 6px 6px 18px rgba(0, 0, 0, .08);
}

/* Tiimimme, Työmme ym. listojen suodatin: irti sivupalkista (oli kiinni palkin reunassa) */
@media (min-width: 48rem) {
  .items-wrapper__list__filter-list {
    left: 7.5rem;
  }
}

/* Listasivujen esittelyteksti: korkeus sisällön mukaan. Teeman skripti lukitsi korkeuden ennen
   verkkofontin latautumista, jolloin viimeinen rivi jäi kuvaruudukon alle. */
.items-wrapper__list__desc {
  height: auto !important;
  margin-bottom: var(--ds-ruutuvali, 2rem);
}

.items-wrapper__list__desc__item.active-desc-item > :last-child {
  margin-bottom: 0;
}

/* Kiinteä suodatinlista väistää alatunnistetta sivun lopussa (siirto tehdään uudistus.js:ssä) */
.items-wrapper__list__filter-list {
  will-change: transform;
}

/* Projektikaruselli: kuvattomat kohteet jätetään pois pohjassa; tasainen kuvien rivi */
.cases-slideshow .scroll-item__image img {
  background: #f3ece7;
}


/* ==========================================================================
   ASETTELUJÄRJESTELMÄ: kaikki teeman lohkot samaan säiliöön ja rytmiin.
   Otsikot, kortit ja tekstit alkavat samasta linjasta joka leveydellä.
   ========================================================================== */

/* Säiliöt */
.cases-slideshow__container,
.features-list__container,
.steps-with-background-color__container,
.steps-with-background-color__wrapper,
.people-list__container,
.featured-with-text-and-images__wrapper,
.info-image__numbers-container,
.cases-map-nav {
  width: var(--ds-leveä) !important;
  max-width: none !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  box-sizing: border-box;
}

.features-list__container.features-list-has-background {
  padding: clamp(2rem, 4vw, 3.5rem) !important;
}

.features-list__container h2,
.people-list__container h2,
.cases-slideshow__container h2,
.steps-with-background-color__container h2 {
  margin-left: 0 !important;
}

/* Pystyrytmi: osioiden väli sama kaikkialla */
.wysiwyg > .features-list,
.wysiwyg > .people-list,
.wysiwyg > .steps-with-background-color {
  margin-top: var(--ds-osiovali);
  margin-bottom: var(--ds-osiovali);
}

.cases-slideshow__container {
  padding-top: var(--ds-osiovali) !important;
  padding-bottom: clamp(1.5rem, 3vw, 2.5rem) !important;
}

/* Osion otsikko: sujuva koko, katkeaa luonnollisesti kahdelle riville */
.block__title {
  width: auto !important;
  max-width: 12.5ch;
  font-size: clamp(2.25rem, 4.2vw, 4rem) !important;
  line-height: 1.05 !important;
  margin: 0 0 clamp(1.5rem, 3vw, 2.5rem);
}

/* Korttiruudukot: koko säiliön levyiset, sama väli */
.features-list__grid-container {
  width: 100% !important;
  margin: 0 !important;
  gap: var(--ds-ruutuvali) !important;
}

@media (min-width: 48rem) {
  .features-list__grid-container { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .features-list__grid-container-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
  .features-list__grid-container-5 { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
}

@media (min-width: 48rem) and (max-width: 61.9375rem) {
  .features-list__grid-container-5 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .features-list__grid-container-4:has(.news-item) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

.features-list .block-button {
  margin-top: clamp(2rem, 4vw, 3rem);
}

/* Projektikortit (Nostot, Kilpailut, projektisivun kaaret): kuva ja teksti samalla vasemmalla linjalla */
@media (min-width: 48rem) {
  .flex-item.features-item figure {
    margin: 0 !important;
    max-width: min(100%, 16rem) !important;
    width: 100%;
  }

  .flex-item.features-item figure > .item-image {
    width: 100%;
    height: auto;
  }

  .flex-item.features-item .item-content {
    margin-block-start: 1.5rem !important;
  }
}

.flex-item.features-item .item-title {
  font-size: clamp(1.3rem, 2vw, 1.75rem) !important;
  line-height: 1.15 !important;
  margin: 0 0 .75rem;
  -webkit-hyphens: manual;
  hyphens: manual;
  overflow-wrap: normal;
}

.flex-item.features-item .item-content > :last-child { margin-bottom: 0; }

/* Palvelut: kaikki keskitetty, otsikot mahtuvat */
.flex-item.services-item .item-image { margin-left: auto; margin-right: auto; }

.flex-item.services-item .item-content .item-title {
  font-size: clamp(1rem, 1.35vw, 1.25rem) !important;
  line-height: 1.25 !important;
  margin: 0 0 .5rem;
  -webkit-hyphens: manual;
  hyphens: manual;
}

.flex-item.services-item .item-content .item-description {
  width: 100%;
  margin: 0;
  font-size: .9375rem;
  line-height: 1.45;
}

/* Uutiskortit */
.flex-item.news-item .item-content p.item-text { font-size: .9375rem; }

/* Karusellit: teksti rivittyy kohteen levyisenä */
.scroll-container-wrapper .scroll-wrapper .scroll-content .scroll-item__link {
  display: block;
  width: 100%;
  min-width: 0;
}

.cases-slideshow .scroll-container-wrapper .scroll-wrapper .scroll-content .scroll-item__title {
  font-size: clamp(1.05rem, 1.3vw, 1.375rem);
  line-height: 1.25;
  overflow-wrap: break-word;
}

.cases-slideshow .scroll-container-wrapper .scroll-wrapper .scroll-content .scroll-item__description {
  white-space: normal;
  overflow-wrap: break-word;
  font-size: .9375rem;
  line-height: 1.45;
  margin-top: .5rem;
}

/* Hero, sitaatit ja numerot: sujuvat koot */
.full-width-media-block.hero-20 .full-width-media-block__medias__item__content h1,
.full-width-media-block.hero-20 .full-width-media-block__medias__item__content h2 {
  font-size: clamp(2.75rem, 7.2vw, 6.75rem) !important;
}

.info-image__quote-container .quote {
  font-size: clamp(2.25rem, 4.6vw, 4.75rem) !important;
}

.info-image__numbers-container {
  column-gap: var(--ds-ruutuvali) !important;
  row-gap: clamp(1.5rem, 3vw, 2.5rem) !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.info-image__numbers-container .item-number {
  font-size: clamp(2.5rem, 6.4vw, 7rem) !important;
}

.info-image__numbers-container .item-text {
  font-size: clamp(1.05rem, 1.9vw, 2.25rem) !important;
}

/* Prosessi */
.steps-with-background-color-block__title {
  font-size: clamp(1.5rem, 2.4vw, 2.25rem) !important;
  line-height: 1.15 !important;
}

/* Arvolupaus (Tehdään ideoistasi totta) */
.featured-with-text-and-images__content h2 {
  font-size: clamp(2.5rem, 5vw, 4.25rem) !important;
  line-height: 1 !important;
  width: auto !important;
}

.featured-with-text-and-images__content p {
  font-size: clamp(1.1rem, 1.6vw, 1.5rem) !important;
  line-height: 1.4 !important;
}

/* Henkilöt (Ota yhteyttä): ruudukko keskellä kuten ilmeessä */
.people-list__grid-container {
  width: 100% !important;
  max-width: 56rem !important;
  margin: 0 auto !important;
  gap: var(--ds-ruutuvali) !important;
}

.people-list-item__name {
  font-size: clamp(1.2rem, 1.7vw, 1.75rem) !important;
  line-height: 1.2 !important;
  margin-block: 1.25rem .5rem !important;
}

.people-list-item__email,
.people-list-item__phone,
.people-list-item__title {
  font-size: clamp(.8125rem, 1vw, 1rem) !important;
  line-height: 1.5 !important;
}

.people-list-item__email {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Kartan kategoriat */
.cases-map-nav {
  justify-content: center;
}

/* ==========================================================================
   Rivitys: otsikot eivät tavuta automaattisesti kesken sanan. Katko vain
   välilyönnistä, oikeasta yhdysmerkistä tai tekstiin merkitystä tavuviivasta.
   ========================================================================== */
.wysiwyg :is(h1, h2, h3, h4, h5, h6),
.block__title,
.item-title,
.scroll-item__title,
.people-list-item__name,
.cases-map-nav-item__title,
.steps-with-background-color-block__title,
.full-width-media-block__medias__item__content :is(h1, h2) {
  -webkit-hyphens: manual !important;
  hyphens: manual !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
}

/* Palvelut: pisinkin sana mahtuu riville. 5 palstaa leveällä, 4 kapeammalla, viimeinen rivi keskelle */
.features-list__grid-container:has(.services-item) {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: center;
  --ds-palstat: 2;
}

.features-list__grid-container:has(.services-item) > * {
  flex: 0 0 calc((100% - (var(--ds-palstat) - 1) * var(--ds-ruutuvali)) / var(--ds-palstat));
  min-width: 0;
}

@media (min-width: 48rem) {
  .features-list__grid-container:has(.services-item) { --ds-palstat: 2; }
}

@media (min-width: 62rem) {
  .features-list__grid-container:has(.services-item) { --ds-palstat: 4; }
}

@media (min-width: 80rem) {
  .features-list__grid-container:has(.services-item) { --ds-palstat: 5; }
}

.flex-item.services-item .item-content .item-title {
  font-size: 1rem !important;
}

@media (min-width: 90rem) {
  .flex-item.services-item .item-content .item-title { font-size: 1.125rem !important; }
}

/* Kartan kategoriat: leveämmät kohdat, nimet kokonaisina */
.cases-map-nav .cases-map-nav-item {
  width: 11.5rem !important;
  max-width: 50%;
  padding-left: .5rem;
  padding-right: .5rem;
  box-sizing: border-box;
}

/* Hero: kohteen vaihtuessa vain uusin kohde näyttää tekstinsä (ei päällekkäisiä otsikoita).
   Aktiivinen kohde merkitään skriptissä (ds/uudistus.js); teeman oma tekstin sisääntulo säilyy. */
.full-width-media-block.hero-20.ds-hero-seurattu .full-width-media-block__medias__item:not(.ds-aktiivinen) .full-width-media-block__medias__item__content {
  visibility: hidden;
}


/* Neljän kortin rivit (kaaviot, uutiset): kaksi palstaa kunnes tilaa on riittävästi */
@media (min-width: 48rem) and (max-width: 79.9375rem) {
  .features-list__grid-container-4 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

/* Heron otsikko puhelimella mahtuu näytölle */
@media (max-width: 47.9375rem) {
  .full-width-media-block.hero-20 .full-width-media-block__medias__item__content h1,
  .full-width-media-block.hero-20 .full-width-media-block__medias__item__content h2 {
    font-size: clamp(2rem, 8.6vw, 2.75rem) !important;
  }
}


/* ==========================================================================
   Arvioinnin korjaukset (kierros 1)
   ========================================================================== */

/* Ilmeen otsikkokäsittely: osion otsikon toinen rivi kuvien ja korttien yläreunan päällä
   (Yli 1000 projektia, Nostot, Kilpailut, Uutiset & some, Ota yhteyttä, Selaa muita hankkeitamme) */
.cases-slideshow__container {
  padding-bottom: 0 !important;
  position: relative;
  z-index: 3;
}

.cases-slideshow__container > .block__title,
.features-list__container:not(:has(.services-item)) > .block__title,
.people-list__container > .block__title {
  position: relative;
  z-index: 3;
  margin-bottom: -.5em !important;
}

.cases-slideshow .scroll-container-wrapper,
.features-list__grid-container,
.people-list__grid-container {
  position: relative;
  z-index: 1;
}

.features-list__container:not(:has(.services-item)) > .block__title + .features-list__grid-container,
.people-list__container > .block__title + .people-list__grid-container {
  margin-top: 0 !important;
}

/* Palvelut: kuvaus koko kortin levyinen ja keskitetty */
.flex-item.services-item .item-content {
  align-items: stretch !important;
}

.flex-item.services-item .item-content .item-title,
.flex-item.services-item .item-content .item-description {
  width: 100% !important;
  max-width: none !important;
  align-self: stretch;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Logonauha: logot pystysuunnassa keskelle ja tasakorkeiksi */
#scroller2 .scroll-wrapper .scroll-content {
  align-items: center;
}

#scroller2 .scroll-wrapper .scroll-content .scroll-item {
  display: flex !important;
  align-items: center !important;
  justify-content: center;
  height: 4.5rem;
}

#scroller2 .scroll-wrapper .scroll-content .scroll-item img {
  max-height: 3rem;
  width: auto !important;
  max-width: 100%;
  object-fit: contain;
}

/* Tutkimus & kehitys: kuvat ja logot tekstin linjaan */
.steps-with-background-color .block__content :is(figure, img, .wp-block-image) {
  margin-left: 0 !important;
}

/* Isot projektikuvat täyttävät leveän linjan; pystykuvat (ds-pysty) rajataan korkeudelta */
.wysiwyg > .wp-block-image.alignwide img {
  width: 100% !important;
  height: auto !important;
}

.wysiwyg > .wp-block-image.alignwide.ds-pysty img {
  max-height: 90vh;
  object-fit: contain;
}

/* Kartan ja numero-osion väli ilmeen mukaiseksi */
.cases-map {
  margin-bottom: 0;
}

.cases-map-nav {
  padding-bottom: clamp(1.5rem, 3vw, 2.5rem) !important;
  margin-bottom: 0 !important;
}

.wysiwyg > .featured-with-text-and-images {
  margin-top: 0;
  margin-bottom: 0;
  padding-block: var(--ds-osiovali) !important;
}

/* Sivun ensimmäinen tekstiosio (sivut ilman heroa): otsikko samalle korkeudelle kuin Työmme- ja
   Tiimimme-sivujen otsikot (144 px), ei kiinni yläreunassa. */
@media (min-width: 48rem) {
  .wysiwyg > .wp-block-group.is-style-ds-tekstiosio:not(.has-background):first-child {
    margin-top: 9rem;
  }
}

/* Taustallinen osio ilman otsikkoa (esim. faktalaatikko): sama väli ylä- ja alareunaan */
.wysiwyg > .wp-block-group.is-style-ds-tekstiosio.has-background:not(:has(> :is(h1, h2, h3):first-child)) {
  padding-top: clamp(2.5rem, 5vw, 4rem) !important;
  padding-bottom: clamp(2.5rem, 5vw, 4rem) !important;
}

.wysiwyg > .wp-block-group.is-style-ds-tekstiosio > :last-child {
  margin-bottom: 0;
}

/* Kuvagalleriat (WordPressin galleria-lohko): tasainen ruudukko sisällön leveydellä. Teeman
   vanha porrastettu asettelu jätti osan kuvista näkymättä ja alkoi sivupalkin reunasta. */
.wysiwyg .wp-block-gallery .blocks-gallery-grid {
  width: 100%;
}

.wysiwyg > .wp-block-gallery {
  width: var(--ds-leveä) !important;
  max-width: none !important;
  margin: var(--ds-osiovali) auto !important;
  padding: 0 !important;
}

.wysiwyg .wp-block-gallery .blocks-gallery-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--ds-ruutuvali);
  margin: 0 !important;
  padding: 0 !important;
}

.wysiwyg .wp-block-gallery .blocks-gallery-grid:has(> .blocks-gallery-item:only-child) {
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 48rem) {
  .wysiwyg .wp-block-gallery .blocks-gallery-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .wysiwyg .wp-block-gallery .blocks-gallery-grid:has(> .blocks-gallery-item:nth-child(2):last-child),
  .wysiwyg .wp-block-gallery .blocks-gallery-grid:has(> .blocks-gallery-item:nth-child(4):last-child) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 64rem) {
  .wysiwyg .wp-block-gallery .blocks-gallery-grid:has(> .blocks-gallery-item:nth-child(4):last-child) {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.wysiwyg .wp-block-gallery .blocks-gallery-item {
  display: block !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden;
}

.wysiwyg .wp-block-gallery .blocks-gallery-item figure {
  position: relative;
  width: 100% !important;
  max-width: none !important;
  flex: none !important;
  height: auto !important;
  padding: 0 !important;
  margin: 0;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.wysiwyg .wp-block-gallery .blocks-gallery-item figure > a {
  display: block;
  height: 100%;
}

.wysiwyg .wp-block-gallery .blocks-gallery-item img {
  position: static !important;
  display: block;
  width: 100% !important;
  height: 100% !important;
  max-width: none;
  object-fit: cover;
  transform: none;
}

.wysiwyg .wp-block-gallery .blocks-gallery-item figcaption {
  position: absolute;
  inset: auto 0 0 0;
}

/* Vanhat kokoleveät kuvalohkot (full-width-media, muu kuin hero): teeman päivityksessä
   korkeus oli kadonnut, joten kuvat eivät näkyneet lainkaan (0 px, myös nykyisellä sivulla). */
.full-width-media-block:not(.hero-20) > .full-width-media-block__medias {
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 90vh;
}

.full-width-media-block.low:not(.hero-20) > .full-width-media-block__medias {
  aspect-ratio: 21 / 9;
}

.full-width-media-block:not(.hero-20) > .full-width-media-block__medias > .full-width-media-block__medias__item.init-opa {
  opacity: 1;
}

.full-width-media-block:not(.hero-20) > .full-width-media-block__medias:has(> .full-width-media-block__medias__item:only-child) > .full-width-media-block__medias__item {
  opacity: 1;
}

/* Uutiskortit: kuva täyttää aina saman kehyksen (pystykuvat olivat kapeampia ja keskitettyjä) */
.items-wrapper__list__row__item--news .items-wrapper__list__row__item__image {
  height: 100% !important;
  overflow: hidden;
}

.items-wrapper__list__row__item--news .items-wrapper__list__row__item__image img {
  display: block;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover;
}

.items-wrapper__list__row__item--news .items-wrapper__list__row__item__content__title {
  font-weight: 400;
  hyphens: manual;
  -webkit-hyphens: manual;
}

/* Prosessikortit tabletilla (48–64rem): kuva ja teksti allekkain. Kahdessa sarakkeessa teksti
   jäi kapeaksi palstaksi ja kuva venyi korkeaksi. */
@media (min-width: 48rem) and (max-width: 63.99rem) {
  .steps-with-background-color__wrapper {
    grid-template-rows: repeat(calc(var(--_steps) * 4), auto);
  }

  .steps-with-background-color-block {
    grid-template-columns: minmax(0, 1fr);
  }

  .steps-with-background-color-block .steps-with-background-color-block__image {
    order: 0 !important;
    aspect-ratio: 16 / 9;
    height: auto;
  }

  .steps-with-background-color-block .steps-with-background-color-block__content {
    order: 1 !important;
  }

  .steps-with-background-color-block__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

/* Prosessikortit työpöydällä: lyhyempi teksti keskitetään kortin korkeudelle (kortti on kuvan korkuinen) */
@media (min-width: 64rem) {
  .steps-with-background-color-block__content {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}

/* Tyhjät kappaleet (esim. prosessiosion tekstikentässä pelkkä lohkokommentti) eivät vie tilaa */
.steps-with-background-color p:empty,
.wysiwyg > p:empty {
  display: none;
}

/* Kartan kohdekortti puhelimella: matalampi kuva, kortti pysyy kartan sisällä */
@media (max-width: 47.9375rem) {
  .mapboxgl-popup .case-card__image {
    max-height: 6.5rem;
    width: 100%;
    object-fit: cover;
  }

  .mapboxgl-popup-content {
    max-width: 14rem;
  }
}

/* Valkoinen painike valkoisella pohjalla (esim. "Selaa muita hankkeitamme." projektisivun lopussa):
   rajattu pillerinappi, jotta se erottuu painikkeena eikä näytä irtotekstiltä */
.wysiwyg .block-button .button-custom.white {
  border: 2px solid #000;
  border-radius: 999px;
  padding: .8rem 1.9rem;
  color: #000;
  background: #fff;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

.wysiwyg .block-button .button-custom.white:hover,
.wysiwyg .block-button .button-custom.white:focus-visible {
  background: #eb797b;
  border-color: #eb797b;
  color: #fff;
}

/* Taustallinen osio ilman reunaotsikkoa: ei otsikon ylitykselle varattua lisäväliä */
.wysiwyg > .wp-block-group.is-style-ds-tekstiosio.has-background:not(:has(> :is(h1, h2, h3):first-child)) {
  margin-top: var(--ds-osiovali);
}

/* Alatunniste sisältöpalstassa sivupalkkien välissä (768–1280 px se jäi palkkien alle) */
@media (min-width: 48rem) {
  footer.footer > .footer__top,
  footer.footer > .footer__bottom {
    width: min(var(--ds-leveä), 62.5rem) !important;
    max-width: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* Kartan kohdekortti puhelimella ilman kuvaa, jotta se mahtuu kartalle */
@media (max-width: 47.9375rem) {
  .mapboxgl-popup .case-card__image {
    display: none !important;
  }

  .mapboxgl-popup .case-card__title {
    hyphens: manual;
    overflow-wrap: normal;
  }
}

/* Sähköpostiosoite ei katkea kesken */
.wysiwyg a[href^="mailto:"] {
  white-space: nowrap;
}

/* Sitaatit: lainausmerkki irti tekstistä puhelimella ja sivupalkista tabletilla */
@media (max-width: 47.9375rem) {
  .info-image__quote-container {
    padding-top: 2.25rem;
  }

  .info-image__quote-container::before {
    left: 0;
    top: -.75rem;
  }
}

@media (min-width: 48rem) {
  .info-image__quote-container {
    max-width: min(42rem, calc(var(--ds-leveä) - 4rem)) !important;
    padding-block: 5.5rem;
  }

  /* Lainausmerkit tekstin ylä- ja alapuolelle, eivät tekstin päälle */
  .info-image__quote-container::before {
    left: 0;
    top: 0;
  }

  .info-image__quote-container::after {
    right: 0;
    bottom: 0;
  }
}

@media (max-width: 47.9375rem) {
  .info-image__quote-container {
    padding-bottom: 3rem;
  }
}

/* Projektikortit tabletilla: yksi palsta, kuva tekstin vieressä (kolmessa palstassa tekstille
   jäi ~130 px, kahdessa kolmas kortti jäisi yksin riville) */
@media (min-width: 48rem) and (max-width: 63.9375rem) {
  .features-list__grid-container:has(.features-item) {
    grid-template-columns: minmax(0, 1fr) !important;
    margin-top: 2rem !important;
  }

  .flex-item.features-item {
    flex-direction: row !important;
    align-items: center;
    gap: 2rem;
  }

  .flex-item.features-item figure {
    max-width: 12rem !important;
    flex-shrink: 0;
  }

  .flex-item.features-item .item-content {
    margin-block-start: 0 !important;
  }
}

/* Teksti ja kuva: useampi kuva kuvasarakkeessa ruudukkona, ei pitkänä pinona tekstin alle */
@media (min-width: 48rem) {
  .ds-tekstikuva .wp-block-column:has(> .wp-block-image + .wp-block-image) {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--ds-ruutuvali);
    align-content: center;
  }

  .ds-tekstikuva .wp-block-column:has(> .wp-block-image + .wp-block-image) > .wp-block-image {
    margin: 0;
  }

  .ds-tekstikuva .wp-block-column:has(> .wp-block-image + .wp-block-image) > .wp-block-image:first-child:nth-last-child(odd) {
    grid-column: 1 / -1;
  }
}

/* Osion painike puhelimella keskelle */
@media (max-width: 47.9375rem) {
  .features-list .block-button {
    text-align: center;
  }
}

/* Alatunnisteen logonauha mahtuu palstaan; yritysnimi ei tavuudu */
footer.footer .footer__logo-ribbon {
  flex-wrap: wrap;
  align-items: center;
  gap: 1.25rem 2rem;
  max-width: 100%;
}

@media (max-width: 79.9375rem) {
  footer.footer .footer__logo-ribbon img {
    max-height: 4.5rem;
    width: auto;
    max-width: 40%;
  }
}

footer.footer :is(h1, h2, h3, h4) {
  -webkit-hyphens: manual;
  hyphens: manual;
  overflow-wrap: normal;
}

/* Kaarikortit (projektisivun kaaret ja kaaviot, etusivun Nostot ja Kilpailut) ilmekuvan mukaan:
   kaari täyttää oman palstansa ja palstojen väli on kapea, joten kortit näyttävät yhtenäiseltä
   riviltä (ennen kapeat kaaret leveillä väleillä) */
@media (min-width: 64rem) {
  .features-list__grid-container:has(.features-item),
  .features-list__grid-container-4:has(.features-item) {
    max-width: 62rem !important;
    margin-left: auto !important;
    margin-right: auto !important;
    column-gap: clamp(1.25rem, 2vw, 2rem) !important;
  }

  .flex-item.features-item figure {
    max-width: 100% !important;
  }
}

/* Karusellin reunakaistat (hiiri vierittää karusellia): kapeat reunat, jotta kortit ovat
   klikattavissa ja hover toimii koko leveydellä (ennen kaistat peittivät reunimmaiset kolmannekset) */
.scroll-container-wrapper .scroll-zone {
  width: clamp(2.5rem, 5vw, 5rem) !important;
  background: none !important;
}

/* Projektisivun "Selaa muita hankkeitamme" valkoisella pohjalla kuten ilmekuvassa */
.single-case .cases-slideshow .scroll-container-wrapper {
  background-color: transparent;
}

/* Sivuttain vieritettävä piirros sivupalkkien välissä (ei palkkien alla) */
@media (min-width: 48rem) {
  .wysiwyg > .wp-block-image.is-style-ds-vieritettava {
    margin-left: 6rem;
    margin-right: 6rem;
  }
}

/* Kaaviot samanmuotoisissa kaarissa kuin kaarikorttien kuvat (ilme: sama elementti) */
.features-list.ds-kuvat-kokonaan .flex-item .item-image,
.features-list.ds-kuvat-kokonaan .flex-item figure > .item-image {
  aspect-ratio: 18.6667 / 27.5;
  padding: 18% 6%;
}

/* Isot kuvat samalla leveydellä kuin kaarikorttirivi (ilmekuva) */
@media (min-width: 64rem) {
  .wysiwyg > .wp-block-image.alignwide {
    width: min(var(--ds-leveä), 62rem);
  }
}

/* Hero: täyttää avausnäkymän (enintään näkymän korkuinen), ilmekuvan mittasuhde ~64 % leveydestä.
   Ennen 55,5vw jätti 1440×900-näkymän alle valkoisen kaistan, ja sivupalkin some-ikoni jäi
   valkoisena vaalealle pohjalle. */
.full-width-media-block.hero-20,
.full-width-media-block.hero-20 .full-width-media-block__medias,
.full-width-media-block.hero-20 .full-width-media-block__medias__item {
  height: min(64vw, 100vh) !important;
}

@supports (height: 100svh) {
  .full-width-media-block.hero-20,
  .full-width-media-block.hero-20 .full-width-media-block__medias,
  .full-width-media-block.hero-20 .full-width-media-block__medias__item {
    height: min(64vw, 100svh) !important;
  }
}

/* Etusivun uutiskortit: pitkät hashtag-jonot rivittyvät eivätkä leikkaudu */
.flex-item.news-item .item-content p.item-text {
  overflow-wrap: anywhere;
}

/* Taustallisen korttiosion (Nostot, Kilpailut) otsikko samalle linjalle kuin muiden osioiden otsikot */
@media (min-width: 48rem) {
  .features-list__container.features-list-has-background > .block__title {
    margin-left: calc(1rem - clamp(2rem, 4vw, 3.5rem)) !important;
  }
}

/* Tabletti ja työpöytä: sisältö pysyy sivupalkkien välissä */
@media (min-width: 48rem) {
  /* Heron otsikko ja teksti eivät jatku palkkien alle (pitkät otsikot rivittyvät) */
  .full-width-media-block.hero-20 .full-width-media-block__medias__item__content {
    padding-left: calc(6rem + 1.5rem);
    padding-right: calc(6rem + 1.5rem);
  }
}

@media (min-width: 48rem) and (max-width: 79.9375rem) {
  /* Logonauhan otsikko (ATL Positify -kyselyn tulos) alkoi vasemman palkin alta */
  .info-image__logostripe-content {
    margin-left: 7rem !important;
    margin-right: 7rem !important;
  }
}

@media (min-width: 48rem) and (max-width: 63.9375rem) {
  /* Kartta palkkien välissä: reunan pallukoita ja kortteja ei peitä valikkopalkki */
  .cases-map #map {
    margin-left: 6rem;
    margin-right: 6rem;
    width: auto;
  }

  /* Teksti ja kuva allekkain alle 1024 px:n (kahdessa palstassa teksti jäi 250 px:n kapeaksi) */
  .ds-tekstikuva.wp-block-columns,
  .ds-sarakerivi.wp-block-columns {
    flex-wrap: wrap !important;
  }

  .ds-tekstikuva.wp-block-columns > .wp-block-column,
  .ds-sarakerivi.wp-block-columns > .wp-block-column {
    flex-basis: 100% !important;
  }
}

/* Vanhan kokoleveän kuvalohkon otsikko (esim. 3D-visualisointi) palkkien välissä tabletilla */
@media (min-width: 48rem) {
  .full-width-media-block:not(.hero-20) .full-width-media-block__medias__item__content {
    box-sizing: border-box;
    max-width: none;
    padding-left: 7.5rem;
    padding-right: 7.5rem;
  }
}

/* Videohero: video peittää koko heron (16:9-kehys skaalataan heron korkeuden mukaan ja rajataan),
   ettei videodian alle jää harmaata kaistaa */
.full-width-media-block.hero-20 .desktop-media,
.full-width-media-block.hero-20 .mobile-media {
  overflow: hidden;
}

.full-width-media-block.hero-20 .vimeo-article,
.full-width-media-block.hero-20 .youtube-article {
  position: absolute;
  top: 50%;
  left: 50%;
  padding: 0;
  width: max(100%, calc(min(64vw, 100vh) * 16 / 9));
  aspect-ratio: 16 / 9;
  transform: translate(-50%, -50%);
}

/* Teksti ja kuva -osion otsikko samassa mittakaavassa kuin muiden osioiden otsikot (ennen ~22 px) */
.ds-tekstikuva .wp-block-column > :is(h2, h3, h4):first-child {
  font-size: clamp(1.75rem, 2.6vw, 2.5rem) !important;
  font-weight: 800;
  line-height: 1.1;
  margin-bottom: 1.25rem;
}

/* Kuvaliukuri (image-tile-slider) ei jatku oikean sivupalkin alle */
@media (min-width: 48rem) {
  .wysiwyg > .image-tile-slider {
    overflow: hidden;
    padding-right: 6rem !important;
  }
}

/* Sivupalkit hoverissa: teema vaihtaa ikonit mustiksi ja liu'uttaa taustapaneelin esiin, mutta
   paneelilla ei ollut väriä, joten mustat ikonit jäivät tumman kuvan päälle. Paneeli valkoiseksi
   kuten avatussa valikossa. */
.site-header:hover:not(.closing) .site-header__background,
.contact-sidebar:hover .contact-sidebar__background {
  background-color: #fff;
}

/* Kartan kohdekortti: kiinteät tekstikoot ja leveys, ettei yleinen otsikkosääntö tai otsikoiden
   sovitus kasvata tekstiä kortin yli */
#map .mapboxgl-popup .case-card {
  width: 12.5rem;
  box-sizing: border-box;
}

#map .mapboxgl-popup .case-card__title {
  font-size: 1rem !important;
  line-height: 1.35 !important;
  margin: 0;
  overflow-wrap: break-word;
  hyphens: manual;
}

#map .mapboxgl-popup .case-card__metadata {
  font-size: .875rem !important;
}

#map .mapboxgl-popup .case-card__link {
  font-size: .9375rem !important;
  white-space: nowrap;
}

#map .mapboxgl-popup .case-card > * {
  max-width: 100%;
}

#map .mapboxgl-popup .case-card__image {
  display: block;
  width: 100% !important;
  max-width: 100% !important;
  height: 9.25rem !important;
  object-fit: cover;
}

/* Pyöristetyt kuvat kaariksi (yläreuna puoliympyrä, alareuna suora). Teeman 200 px:n säde
   kaikkiin kulmiin teki korkeista korttikuvista pillereitä. Suorakulmaiset kuvat ennallaan. */
.flex-item .item-image,
.flex-item figure > .item-image {
  border-radius: 999px 999px 0 0 !important;
}

.flex-item.news-item:nth-child(3n+3) .item-image {
  border-radius: 0 !important;
}

.scroll-container-wrapper .scroll-wrapper .scroll-content .scroll-item__image.nth-1 img,
.scroll-container-wrapper .scroll-wrapper .scroll-content .scroll-item__image.nth-2 img {
  border-radius: 999px 999px 0 0;
}

/* Projektikarusellit: tarttumiskursori ja ei tekstin valintaa vedettäessä */
.scroll-container-wrapper .scroll-wrapper {
  cursor: grab;
}

.scroll-container-wrapper .scroll-wrapper.ds-vedetaan {
  cursor: grabbing;
  user-select: none;
}

/* Asiakkaan palaute 7.10.2026
   -------------------------------------------------------------------------- */

/* Projektikarusellin kuvaus hieman pienemmällä, jotta 10 % kapeampi kortti ei kasva korkeammaksi */
.cases-slideshow .scroll-container-wrapper .scroll-wrapper .scroll-content .scroll-item__description {
  font-size: .875rem;
}

/* Etusivun Nostot ja Kilpailut: kaaret pienemmiksi ja kiinteä yläraja pikseleinä. Sivusto suurentaa
   rem-yksikköä isoilla näytöillä, joten 62rem:n raja kasvoi 2 550 px:n näytöllä 1 750 px:iin ja kaaret
   olivat 552 × 815 px. Projektisivujen kaaret pysyvät ennallaan. */
@media (min-width: 64rem) {
  body:not(.single-case) .features-list__grid-container:has(.features-item),
  body:not(.single-case) .features-list__grid-container-4:has(.features-item) {
    max-width: min(62rem, 1080px) !important;
  }
}

/* Työmme ja Tiimimme: suodatinlistan ja sisällön väliin tilaa. Pisimmät kategoriat
   (Teollisuusrakennukset ja logistiikka) ulottuivat tekstin ja kuvien päälle. */
@media (min-width: 48rem) {
  .items-wrapper .items-wrapper__list {
    margin-left: 20.75rem !important;
  }
}

/* Asiakkaan palaute 12.10.2026: karusellin reunavieritys
   -------------------------------------------------------------------------- */

/* Karuselli pyörii taas, kun hiiri on sen reunakaistalla (kuten alkuperäisillä sivuilla). Hiiren paikka
   luetaan karusellista skriptissä (main.js), joten reunakaistat eivät ota hiirtä vastaan: kortit ovat
   klikattavissa ja tarttumisveto toimii koko leveydeltä. */
.scroll-container-wrapper .scroll-zone {
  pointer-events: none !important;
}

/* ==========================================================================
   Asiakkaan palaute 12.10.2026: typografia ja väljyys
   Leipäteksti pienemmäksi, osioiden väliin enemmän tilaa ja monisanaiset osio-otsikot
   useammalle riville. Mitat suhteutettu ilmekuvaan (sivualue 2 480 px leveä): korttiteksti
   ~1 % ja osioiden välit 6–11 % sivun leveydestä. Pitkä leipäteksti on ilmekuvassa ~1,6 %,
   mutta asiakas pyysi sitä pienemmäksi, joten se on nyt ~1 % (vähintään 16 px).
   Sivusto suurentaa rem-yksikköä yli 1 440 px:n näytöillä (1rem = 1,111vw), joten koot
   annetaan vw-arvoina, jotta ne eivät kasva isoilla näytöillä rem-arvojen tahtia.
   ========================================================================== */
:root {
  --ds-teksti: max(16px, 1vw);            /* leipäteksti: 16 px @1440, 19,2 px @1920, 25,5 px @2550 */
  --ds-teksti-pieni: max(15px, .875vw);   /* kortit ja listat: 15 / 16,8 / 22,3 px */
  --ds-teksti-ingressi: max(18px, 1.15vw);/* heron ja arvolupauksen ingressi: 18 / 22,1 / 29,3 px */
  --ds-osiovali: clamp(4rem, 9vw, 9rem);  /* 64 px puhelimella, 130 @1440, 173 @1920 (ennen 96 / 128) */
  --ds-kuvavali: clamp(3.5rem, 5.5vw, 6rem); /* peräkkäiset kuvat: 56 puhelimella, 79 @1440, 106 @1920 */
}

/* Leipäteksti: projektisivujen tekstiosiot, faktat, Tutkimus & kehitys -esittely, listasivujen
   esittely ja tavalliset sivut */
.wysiwyg > .wp-block-group.is-style-ds-tekstiosio > p,
.wysiwyg > .wp-block-group.is-style-ds-tekstiosio > :is(ul, ol),
.wysiwyg .ds-faktat p,
.ds-tekstikuva p,
.ds-sarakerivi p,
.steps-with-background-color__container .block__content p,
.items-wrapper__list__desc__item p,
.wysiwyg > p,
.wysiwyg > :is(ul, ol) {
  font-size: var(--ds-teksti);
}

/* Tutkimus & kehitys -esittelyn rivin pituus samaksi kuin projektisivujen leipätekstin
   (pienemmällä fontilla rivit venyivät ~110 merkkiin) */
.steps-with-background-color__container .block__content p {
  max-width: 48rem;
}

/* Pienempi teksti: kortit (kaaret, palvelut, uutiset, Tutkimus & kehitys, prosessi),
   tekstisarakkeet ja listasivujen kortit */
.flex-item.features-item .item-content p,
.flex-item.services-item .item-content .item-description,
.flex-item.news-item .item-content p.item-text,
.steps-with-background-color-block__content :is(p, li),
.ds-tekstisarakkeet p,
.wysiwyg .wp-block-columns.alignwide:not(.ds-tekstikuva, .ds-sarakerivi) .wp-block-column p,
.items-wrapper__list__row__item__content__details__category p,
.items-wrapper .extra-wrap p {
  font-size: var(--ds-teksti-pieni);
}

/* Tutkimus & kehitys- ja prosessikorteissa rivikorkeus oli kiinteä (1,5rem), joten pienempi
   teksti olisi jäänyt harvaksi */
.steps-with-background-color-block__content :is(p, li) {
  line-height: 1.55;
}

/* Projektikarusellin kuvaus pysyy 14 px:ssä 1 440 px:llä (palaute 7.10.), kasvaa hillitymmin */
.cases-slideshow .scroll-container-wrapper .scroll-wrapper .scroll-content .scroll-item__description {
  font-size: max(14px, .8125vw);
}

/* Ingressit */
.full-width-media-block.hero-20 .full-width-media-block__medias__item__content p {
  font-size: var(--ds-teksti-ingressi);
}

.featured-with-text-and-images__content p {
  font-size: var(--ds-teksti-ingressi) !important;
}

/* Väljyys projektisivuilla: otsikollinen tekstiosio ja kuvat saavat saman osiovälin kuin
   etusivun osiot (ennen 48–64 px @1440). Peräkkäisten kuvien väli kuvavälin mukaan. Marginaalit
   yhdistyvät, joten väli on suurempi kahdesta. */
.wysiwyg > .wp-block-group.is-style-ds-tekstiosio {
  margin-top: calc(var(--ds-ylitys) + var(--ds-osiovali));
}

.wysiwyg > .wp-block-group.is-style-ds-tekstiosio:not(.has-background) {
  margin-top: var(--ds-osiovali);
}

/* Teema pakottaa kuville margin-top: 1em !important (figure), joten yläreunan väli tarvitsee !importantin */
.wysiwyg > :is(.wp-block-image.alignwide, .wp-block-image.alignfull, .wp-block-image.is-style-ds-vieritettava, .wp-block-columns.alignwide) {
  margin-top: var(--ds-osiovali) !important;
  margin-bottom: var(--ds-kuvavali);
}

.wysiwyg > :is(.wp-block-image, .wp-block-columns.alignwide) + :is(.wp-block-image.alignwide, .wp-block-image.alignfull, .wp-block-image.is-style-ds-vieritettava, .wp-block-columns.alignwide) {
  margin-top: var(--ds-kuvavali) !important;
}

/* Tutkimus & kehitys ja prosessi: osion sisäiset yläreunan täytteet (2,5rem + 3,5rem otsikolliselle,
   2,5rem + 2rem prosessille) vähennetään osiovälistä, jotta näkyvä väli on sama kuin muilla osioilla
   (ilman tätä 226 px @1440, ilmekuvassa ~8 % leveydestä) */
.wysiwyg > .steps-with-background-color:has(> .steps-with-background-color__container) {
  margin-top: max(1rem, calc(var(--ds-osiovali) - 6rem));
}

.wysiwyg > .steps-with-background-color:not(:has(> .steps-with-background-color__container)) {
  margin-top: max(1rem, calc(var(--ds-osiovali) - 4.5rem));
}

/* Monisanaiset osio-otsikot useammalle riville kuten ilmekuvassa (Yli 1000 / projektia,
   Tutkimus & / kehitys, Uutiset & / some). Raja 6,6em: Ota yhteyttä ja Palvelumme mahtuvat
   yhdelle riville. min-content: pitkä yksittäinen sana (hankkeitamme) levittää otsikkoa eikä
   katkea tai pienennä otsikkoa (uudistus.js:n sovitus), sisennys antaa sovitukselle 2 px:n varan. */
.block__title {
  max-width: 6.6em;
  min-width: min-content;
  padding-inline-end: .1em;
  box-sizing: border-box;
}

/* Projektisivun tekstiosion otsikot ilman käsin tehtyä rivinvaihtoa: rivin pituus rajataan,
   otsikko pysyy leveän linjan vasemmassa reunassa. Pitkät lauseotsikot (Junatie) 16em,
   muut 10em. */
.wysiwyg > .wp-block-group.is-style-ds-tekstiosio > :is(h1, h2, h3):first-child:not(:has(br)) {
  width: auto;
  max-width: min(var(--ds-leveä), 10em);
  margin-left: calc((100% - var(--ds-leveä)) / 2);
  margin-right: 0;
}

.wysiwyg > .wp-block-group.is-style-ds-tekstiosio > h2.ds-pitka-otsikko:first-child:not(:has(br)) {
  max-width: min(var(--ds-leveä), 16em);
}

/* ==========================================================================
   Asiakkaan palaute 12.10.2026: kuvien muodot
   Ilmeen ohje: kuvakkeiden muoto ja kuvasuhde pysyvät samana, vain koko muuttuu sivun mukana.
   ========================================================================== */

/* Tutkimus & kehitys ja Prosessi: harmaa kuvakehys on aina neliö ja kuva täyttää sen (ilmekuva).
   Teema venytti kehyksen viereisen tekstikortin korkuiseksi, joten kuvan muoto vaihteli leveyden ja
   tekstin pituuden mukaan (puhelimella 318 × 438, tabletilla 483 × 278, 1 440 px:llä 384 × 488).
   Kumoaa myös tabletin 16:9-kehyksen. */
.steps-with-background-color-block .steps-with-background-color-block__image {
  aspect-ratio: 1 / 1 !important;
  height: auto !important;
  min-height: 0;
  align-self: start;
  box-sizing: border-box;
  overflow: hidden;
}

.steps-with-background-color-block .steps-with-background-color-block__image > img {
  display: block;
  width: 100% !important;
  height: 100% !important;
  max-width: none;
  aspect-ratio: auto;
  object-fit: cover;
  object-position: center;
}

/* Työpöydällä myös tekstikortti on neliö kuvan vieressä (ilmekuva: kehys ja kortti 713 × 713). Pitkä
   teksti saa kasvattaa korttia (aspect-ratio on vähimmäiskorkeus), kuva pysyy silti neliönä. */
@media (min-width: 64rem) {
  .steps-with-background-color-block .steps-with-background-color-block__content {
    aspect-ratio: 1 / 1;
    align-self: start;
    box-sizing: border-box;
    padding: clamp(1.75rem, 2.6vw, 3rem);
  }
}

/* Uutiset & some: kiinteä kuvasuhde (ilmekuvan kuvaruutu ~ 17:20) kiinteän 194 px:n korkeuden sijaan.
   Ennen kuva oli 127 × 194 puhelimella ja 378 × 194 isolla näytöllä, jolloin kaari litistyi
   matalaksi puolikuuksi. Kaikki kortit samaa kaarimuotoa (joka kolmas oli suorakulmio). */
.flex-item.news-item .item-image,
.flex-item.news-item:nth-child(3n+3) .item-image {
  display: block;
  width: 100%;
  height: auto !important;
  max-width: none;
  aspect-ratio: 17 / 20;
  object-fit: cover;
  object-position: center;
  border-radius: 999px 999px 0 0 !important;
}

/* Projektikarusellit: hiiren alla kuva nousee 10 px (kehys 4 px + kuva 6 px) ja saa varjon, mutta
   vierityskaista (overflow-x: auto) leikkaa kaiken yläreunansa yli menevän, joten kaaren yläosa
   katkesi. Kaistalle tilaa yläpuolelle; negatiivinen marginaali pitää asettelun ennallaan. */
.cases-slideshow .scroll-container-wrapper .scroll-wrapper {
  padding-top: 24px !important;
  margin-top: -24px !important;
}

/* Etusivun Nostot ja Kilpailut ilmekuvan mittoihin (15.10.2026)
   Ilmekuvassa kaaririvi täyttää noin 86 % beigestä laatikosta ja alkaa heti otsikon alta;
   7.10. lisätty 1 080 px:n yläraja jätti rivin kapeaksi laatikon keskelle isoilla näytöillä.
   Projektin nimi (asiakkaan kirjoittama .lead) leipätekstin kokoisena lihavointina: ilmekuvassa
   kategorian ja kuvauksen välissä ei ole isoa otsikkoa. */
@media (min-width: 64rem) {
  body:not(.single-case) .features-list__grid-container:has(.features-item),
  body:not(.single-case) .features-list__grid-container-4:has(.features-item) {
    max-width: 92% !important;
  }
}

.flex-item.features-item .item-content strong.lead,
.flex-item.features-item .item-content .lead {
  font-size: 1.1em;
  font-weight: 800;
  line-height: 1.3;
}

.flex-item.features-item .item-content p:has(> .lead:only-child) {
  margin-bottom: .5em;
}

/* ==========================================================================
   Ilmekuvavertailu 15.10.2026: etusivu 1–8
   Ilmekuvan sivualue (sivupalkit mukaan lukien) on 2 480 px leveä ja piirretty 1 440 px:n
   kehykseen (kerroin 1,722): osio-otsikot 72 px, heron otsikko 120 px, sitaatti 84 px, numerot
   120 px @1440. Koot annetaan vw- tai rem-arvoina (sivusto suurentaa rem-yksikköä yli 1 440 px:n
   näytöillä, 1rem = 1,111vw), joten mittasuhteet pysyvät samoina isoilla näytöillä. Valitsimet
   on rajattu etusivun osioihin 1–8; muiden osioiden ja sivujen säännöt ennallaan.
   ========================================================================== */

/* Osio-otsikot (Yli 1000 projektia, Tutkimus & kehitys, Nostot, Palvelumme): ilmekuvassa 72 px
   @1440 eli 5 % näytön leveydestä (ennen 4,2 % = 60 px). Puhelimella ennallaan (36 px). */
body.home .cases-slideshow__container > .block__title,
body.home .steps-with-background-color:has(> .steps-with-background-color__container) .block__title,
body.home .features-list:has(.features-list__background-beige) .block__title,
body.home .features-list:has(.features-list__grid-container-5) .block__title {
  font-size: clamp(2.25rem, 5vw, 5.5rem) !important;
}

/* 1. Hero: otsikko 120 px @1440 (8,33 %), rivitys väljempi; ingressi ja painike kauempana
   otsikosta kuten ilmekuvassa (ennen kaikki 20 px:n välein); painike 60 px korkea. */
body.home .full-width-media-block.hero-20 .full-width-media-block__medias__item__content h1,
body.home .full-width-media-block.hero-20 .full-width-media-block__medias__item__content h2 {
  line-height: 1.08;
}

@media (min-width: 48rem) {
  body.home .full-width-media-block.hero-20 .full-width-media-block__medias__item__content h1,
  body.home .full-width-media-block.hero-20 .full-width-media-block__medias__item__content h2 {
    font-size: clamp(2.75rem, 8.33vw, 9.5rem) !important;
  }

  body.home .full-width-media-block.hero-20 .full-width-media-block__medias__item__content {
    gap: 0;
  }

  body.home .full-width-media-block.hero-20 .full-width-media-block__medias__item__content > :is(h1, h2) {
    margin-bottom: 2.6vw;
  }

  body.home .full-width-media-block.hero-20 .full-width-media-block__medias__item__content > p {
    margin-bottom: 5.6vw;
  }

  body.home .full-width-media-block.hero-20 .full-width-media-block__medias__item__content > a {
    font-size: 1.35rem;
    padding: 1.05rem 1.65rem;
  }
}

/* 2. Yli 1000 projektia: kortti 220 × 332 px @1440 (15,3 %, kuvasuhde 378:572), väli 37 px,
   nimi 24 px, kuvaus harmaa. Otsikon toinen rivi nousee kuvien yläreunan päälle (ilmekuvassa
   otsikon alempi rivi peittää kaaren yläosaa ~28 px) eikä otsikko estä korttien klikkausta.
   Hiiren alla kuva nousee 28 px (ilmekuva) ja saa maltillisen varjon. */
:is(body.home, body.single-case) .cases-slideshow .scroll-container-wrapper .scroll-wrapper .scroll-content .scroll-item__description {
  color: #6b6866;
}

@media (min-width: 48rem) {
  body.home .cases-slideshow__container > .block__title {
    margin-bottom: -1.055em !important;
    pointer-events: none;
  }

  :is(body.home, body.single-case) .cases-slideshow .scroll-container-wrapper {
    padding-top: 2.125rem;
    padding-bottom: 2.3rem;
  }

  :is(body.home, body.single-case) .cases-slideshow .scroll-container-wrapper .scroll-wrapper {
    padding-top: 3rem !important;
    margin-top: -3rem !important;
  }

  :is(body.home, body.single-case) .cases-slideshow .scroll-container-wrapper .scroll-wrapper .scroll-content {
    gap: 2.3rem;
  }

  :is(body.home, body.single-case) .cases-slideshow .scroll-container-wrapper .scroll-wrapper .scroll-content .scroll-item {
    width: 13.75rem !important;
  }

  :is(body.home, body.single-case) .cases-slideshow .scroll-item__image img {
    aspect-ratio: 378 / 572;
  }

  :is(body.home, body.single-case) .cases-slideshow .scroll-container-wrapper .scroll-wrapper .scroll-content .scroll-item__title {
    font-size: 1.5rem;
    line-height: 1.2;
  }

  :is(body.home, body.single-case) .cases-slideshow .scroll-container-wrapper .scroll-wrapper .scroll-content .scroll-item:hover .scroll-item__image {
    transform: translateY(-.75rem);
  }

  :is(body.home, body.single-case) .cases-slideshow .scroll-item__link:hover .scroll-item__image img,
  :is(body.home, body.single-case) .cases-slideshow .scroll-item__link:focus-visible .scroll-item__image img {
    transform: translateY(-1rem);
  }
}

/* 3. Tutkimus & kehitys: ilmekuvassa kuvakehys ja kortti 414 × 414 px @1440 (28,75 %), väli 28 px,
   rivi 59,5 % leveä ja keskellä; esittelyteksti alkaa samasta linjasta kuin kuvat. Kortin
   täyte 52 px, otsikko 37,5 px, kulmat 23 px. Laventelinauha ulottuu reunasta reunaan
   (sivupalkkien alle), ennen vain sisältöpalstan levyinen. */
body.home .steps-with-background-color:has(> .steps-with-background-color__container) {
  overflow-x: clip;
}

@media (min-width: 64rem) {
  body.home .steps-with-background-color:has(> .steps-with-background-color__container) .steps-with-background-color__wrapper__background {
    width: auto;
    margin-inline: calc(50% - 50vw);
  }
}

@media (min-width: 80rem) {
  body.home .steps-with-background-color:has(> .steps-with-background-color__container) {
    --ds-tk-rivi: min(100%, 59.5vw);
  }

  body.home .steps-with-background-color:has(> .steps-with-background-color__container) .block__content {
    max-width: var(--ds-tk-rivi);
    margin-left: calc((100% - var(--ds-tk-rivi)) / 2);
  }

  body.home .steps-with-background-color:has(> .steps-with-background-color__container) .steps-with-background-color-block {
    width: var(--ds-tk-rivi);
    column-gap: 1.95vw;
  }

  body.home .steps-with-background-color:has(> .steps-with-background-color__container) .steps-with-background-color-block .steps-with-background-color-block__content {
    padding: 3.6vw;
    border-radius: 1.45rem;
  }

  body.home .steps-with-background-color:has(> .steps-with-background-color__container) .steps-with-background-color-block__title {
    font-size: 2.6vw !important;
  }
}

/* Ilmekuvassa Tutkimus & kehitys -osion tekstit ovat mustia (ennen #333) */
body.home .steps-with-background-color:has(> .steps-with-background-color__container) :is(.block__content p, .steps-with-background-color-block__title, .steps-with-background-color-block__content p) {
  color: #000;
}

/* 4. Sitaatti: teksti 84 px @1440 (5,8 %), alarivi 38 px (2,65 %); lainausmerkit tekstilohkon
   kulmissa 724 px:n levyisellä alueella. Kuva on valmiiksi tummennettu (tiedostonimi
   "tummennettu"), ja ilmekuvassa se on selvästi vaaleampi kuin kehitysversion 38 %:n
   lisätummennuksella, joten lisätummennus on kevyt. */
body.home section.info-image:has(.quote-white) .info-image__overlay {
  background: rgba(0, 0, 0, .12);
}

@media (min-width: 64rem) {
  body.home .info-image__quote-container.quote-white {
    max-width: min(50.3vw, calc(var(--ds-leveä) - 2rem)) !important;
  }

  body.home .info-image__quote-container.quote-white .quote {
    font-size: clamp(2.25rem, 5.8vw, 7rem) !important;
    line-height: 1.05;
  }

  body.home .info-image__quote-container.quote-white .quote-author {
    font-size: 2.65vw;
    line-height: 1.3;
  }
}

/* Puhelimella sitaatin pisin sana (asiakkaistamme) ei mahtunut 36 px:n tekstinä 262 px:n palstaan
   ja selain tavutti sen automaattisesti (asiakkais-tamme). Koko sovitetaan palstaan, ei tavutusta. */
@media (max-width: 47.9375rem) {
  body.home .info-image__quote-container.quote-white .quote {
    font-size: min(2.25rem, calc((100vw - 8rem) / 7.8)) !important;
    -webkit-hyphens: manual;
    hyphens: manual;
  }
}

/* 5. Nostot: painike kuten ilmekuvassa 300 × 60 px @1440 (teksti 21,5 px), ennen 230 × 44 px */
@media (min-width: 48rem) {
  body.home .features-list:has(.features-list__background-beige) .block-button a {
    font-size: 1.35rem;
    padding: 1.05rem 1.65rem;
    line-height: 1.2;
  }
}

/* 6. Kartan kategoriat: kuusi riviin kuten ilmekuvassa (kohta 177 px @1440, ennen viisi 200 px:n
   kohtaa). Nimi saa koko kohdan leveyden, joten otsikoiden sovitus (uudistus.js) ei enää
   pienennä lyhyitä nimiä ja kaikki nimet ovat samankokoisia; pisinkin sana mahtuu. */
@media (min-width: 80rem) {
  body.home .cases-map-nav {
    column-gap: 0;
  }

  body.home .cases-map-nav .cases-map-nav-item {
    width: 11.25rem !important;
    padding-left: .25rem;
    padding-right: .25rem;
  }

  body.home .cases-map-nav .cases-map-nav-item__title {
    align-self: stretch;
  }
}

/* 7. Numerot: luvut 120 px @1440 (8,3 %), tekstit 38 px (2,65 %). Lukupari keskellä kuten
   ilmekuvassa (sarakkeet 32 % ja väli 4 %, ennen vasemmassa reunassa); kiinteät sarakkeet,
   jotta nollasta kasvava luku ei siirrä asettelua. Rivien väli tiiviimpi kuin ilmekuvassa
   (asiakas: välistys Figmassa turhan suuri). Kuvan lisätummennus kevyempi (ks. sitaatti). */
body.home section.info-image:has(.info-image__numbers-container):not(:has(.info-image__logostripe-container)) .info-image__overlay {
  background: rgba(0, 0, 0, .12);
}

@media (min-width: 64rem) {
  body.home section.info-image:not(:has(.info-image__logostripe-container)) .info-image__numbers-container {
    grid-template-columns: repeat(2, 32vw) !important;
    column-gap: 4vw !important;
    row-gap: .8vw !important;
    justify-content: center;
  }

  body.home section.info-image:not(:has(.info-image__logostripe-container)) .info-image__numbers-container .info-image__item {
    max-width: none;
  }

  body.home section.info-image:not(:has(.info-image__logostripe-container)) .info-image__numbers-container .item-number {
    font-size: clamp(2.5rem, 8.3vw, 10rem) !important;
    line-height: 1;
  }

  body.home section.info-image:not(:has(.info-image__logostripe-container)) .info-image__numbers-container .item-text {
    font-size: clamp(1.05rem, 2.65vw, 3.25rem) !important;
  }
}

/* 8. Palvelumme: kaari 156 × 185 px @1440 (ennen 135 × 160), viisi riviin 196 px:n välein ja
   rivi keskellä; nimi 21 px; kuvaus harmaa ja kaaren levyinen. Hiiren alla kaari nousee 14 px
   ja saa varjon (ilmekuva). */
body.home .features-list__grid-container-5 .flex-item.services-item .item-content .item-description {
  color: #727272;
}

body.home .features-list__grid-container-5 .flex-item.services-item:hover .item-image {
  transform: translateY(-.9rem);
}

@media (min-width: 80rem) {
  body.home .features-list__grid-container-5:has(.services-item) {
    column-gap: 0 !important;
    row-gap: 1rem !important;
  }

  body.home .features-list__grid-container-5:has(.services-item) > * {
    flex: 0 0 12.25rem;
  }

  body.home .features-list__grid-container-5 .flex-item.services-item .item-image {
    width: 9.75rem;
    height: auto;
    aspect-ratio: 135.36 / 160;
  }

  body.home .features-list__grid-container-5 .flex-item.services-item .item-image img.icon {
    width: 80%;
    height: 100%;
    object-fit: contain;
  }

  /* Nimi 21 px kuten ilmekuvassa ja pitkät nimet tavutetaan sisällön tavutuskohdista
     (Korjaus-/rakentaminen). Otsikoiden sovitus (uudistus.js) mittaa sanan ilman tavutuskohtia
     ja pienentäisi nimen, joten otsikon laatikko on 1rem palstaa leveämpi molemmin puolin ja
     sisennys rajaa tekstialueen 167 px:iin @1440 (rivitys kuten ilmekuvassa: Hotellit & /
     vapaa-aika, Liikerakennukset / & pysäköinti). */
  body.home .features-list__grid-container-5 .flex-item.services-item .item-content .item-title {
    font-size: 1.33rem !important;
    line-height: 1.2 !important;
    width: auto !important;
    margin-inline: -1rem !important;
    padding-inline: 1.9rem !important;
    box-sizing: border-box;
    pointer-events: none;
  }

  body.home .features-list__grid-container-5 .flex-item.services-item .item-content .item-description {
    max-width: 9.75rem !important;
    margin-inline: auto;
    align-self: center;
  }
}

/* ==========================================================================
   Ilmekuvavertailu 15.10.2026: etusivu 9–16
   Mitat suhteutettu ilmekuvan sivualueeseen (2 480 px sivupalkkeineen = näytön leveys), joten
   ne annetaan vw-arvoina ja pysyvät samassa suhteessa 1 440, 1 920 ja 2 550 px:n näytöillä.
   Koskee työpöytää (64rem+); puhelin ja tabletti ennallaan. Tekstit ennallaan.
   ========================================================================== */

@media (min-width: 64rem) {

  /* 9. Sitaatti (Suunnitelmien laatu ...): ilmekuvassa otsikko 5,8 % leveydestä (ennen 4,6 %),
     rivit Suunnitelmien / laatu ollut hyvää / 89 %*, lähde 2,75 % (ennen 1,9 %) ja lainausmerkit
     6,9 % levyiset 59 %:n levyisen alueen kulmissa. Sisällön käsin tehty rivinvaihto (ollut<br>hyvää)
     säilyy, joten rivit ovat Suunnitelmien / laatu ollut / hyvää 89%*. */
  body.home .info-image__quote-container.quote-red {
    width: 59vw !important;
    max-width: none !important;
    padding: 6.1vw 4.5vw 1.2vw !important;
    box-sizing: border-box;
  }

  body.home .info-image__quote-container.quote-red::before,
  body.home .info-image__quote-container.quote-red::after {
    width: 6.9vw;
    height: 5.1vw;
  }

  body.home .info-image__quote-container.quote-red .quote {
    font-size: 5.8vw !important;
    line-height: 1.04;
  }

  body.home .info-image__quote-container.quote-red .quote-author {
    font-size: 2.75vw;
    line-height: 1.5;
    margin: 1vw 0 0;
  }

  /* 10. Prosessi: neliökehys ja tekstikortti 28,75 % leveydestä (ilmekuva 713 px / 2 480), väli
     2,3 %, rivi keskellä (ennen 26,7 % @1440 ja 30,4 % @1920). Laventelinauha koko leveydeltä
     sivupalkkien alle kuten ilmekuvassa. Teksti kortin yläreunasta (ei pystykeskitystä),
     sisennys 3,7 %, otsikko 2,55 %. */
  body.home .wysiwyg > .steps-with-background-color:not(:has(> .steps-with-background-color__container)) {
    overflow-x: clip;
  }

  body.home .steps-with-background-color:not(:has(> .steps-with-background-color__container)) .steps-with-background-color__wrapper {
    --_gap: 2.3vw;
  }

  body.home .steps-with-background-color:not(:has(> .steps-with-background-color__container)) .steps-with-background-color__wrapper__background {
    width: 100vw;
    margin-left: calc(50% - 50vw);
  }

  body.home .steps-with-background-color:not(:has(> .steps-with-background-color__container)) .steps-with-background-color-block {
    width: calc(2 * 28.75vw + 2.3vw);
  }

  body.home .steps-with-background-color:not(:has(> .steps-with-background-color__container)) .steps-with-background-color-block__content {
    justify-content: flex-start;
    padding: 3.3vw 3.7vw !important;
  }

  body.home .steps-with-background-color:not(:has(> .steps-with-background-color__container)) .steps-with-background-color-block__step {
    font-size: 2vw;
    line-height: 1.2;
    margin-bottom: .35vw;
  }

  body.home .steps-with-background-color:not(:has(> .steps-with-background-color__container)) .steps-with-background-color-block__title {
    font-size: 2.55vw !important;
    line-height: 1.17 !important;
    margin-bottom: 1.6vw;
  }

  body.home .steps-with-background-color:not(:has(> .steps-with-background-color__container)) .steps-with-background-color-block__content ul {
    margin-left: 0;
    padding-left: 1.6em;
  }

  /* 11. Kilpailut ja 14. arvolupaus: painike ilmekuvan kokoinen (korkeus 4,15 %, teksti 1,47 %;
     ennen 44 px ja 16 px @1440) */
  body.home .wysiwyg > .features-list:has(.features-item):not(:has(.features-list-has-background)) .block-button :is(a, .button-custom),
  body.home .featured-with-text-and-images .block-button :is(a, .button-custom) {
    font-size: 1.47vw;
    line-height: 1.25;
    padding: 1.2vw 2.2vw;
  }

  /* 12. Numerot ja logonauha: osio 81 % leveyden korkuinen, numerot 8,4 % (ennen 6,4 %),
     palstat alkavat 22,4 %:sta ja 58,8 %:sta (ennen 10,7 % ja 51,5 %), rivien väli 20 %.
     Logonauhan otsikko SemiBoldina 2,4 %, logot tasakorkeina (sanamerkit ~1,5 %, kuvalogot
     enintään 3,4 %) ja väli 1,8 % (ennen pienimmät logot 13 px korkeita). */
  body.home .info-image:has(.info-image__logostripe-container) .info-image__image {
    height: auto;
    aspect-ratio: 2480 / 2017;
  }

  body.home .info-image:has(.info-image__logostripe-container) .info-image__container {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    box-sizing: border-box;
    padding-top: 12.6vw;
  }

  body.home .info-image:has(.info-image__logostripe-container) .info-image__numbers-container {
    width: auto !important;
    margin: 0 0 0 22.4vw !important;
    grid-template-columns: 36.4vw 24vw !important;
    column-gap: 0 !important;
    row-gap: 5.8vw !important;
  }

  body.home .info-image:has(.info-image__logostripe-container) .info-image__item {
    max-width: 24vw;
  }

  body.home .info-image:has(.info-image__logostripe-container) .item-number {
    font-size: 8.4vw !important;
    line-height: 1;
  }

  body.home .info-image:has(.info-image__logostripe-container) .item-text {
    font-size: 1.98vw !important;
    line-height: 1.27;
    margin-top: .9vw;
  }

  body.home .info-image:has(.info-image__logostripe-container) .info-image__logostripe-container {
    margin-top: auto;
    padding-bottom: 7vw;
  }

  body.home .info-image:has(.info-image__logostripe-container) .info-image__logostripe-content {
    width: auto !important;
  }

  body.home .info-image:has(.info-image__logostripe-container) .info-image__logostripe-content h3 {
    font-size: 2.4vw;
    font-weight: 600;
    line-height: 1.3;
    margin: 0;
  }

  body.home #scroller2 {
    padding-block: 3.6vw 0;
  }

  body.home #scroller2 .scroll-wrapper .scroll-content {
    gap: 1.8vw;
  }

  /* Kohteen leveys logon mukaan (skripti antaa kaikille saman leveyden 1/15 näytöstä, jolloin
     leveät logot kutistuivat ja kapeiden ympärille jäi tyhjää). Skripti mittaa sarjan todellisen
     leveyden, joten päättymätön vieritys pysyy saumattomana. */
  body.home #scroller2 .scroll-wrapper .scroll-content .scroll-item {
    width: auto !important;
    height: 4vw;
    padding: 0;
  }

  body.home #scroller2 .scroll-wrapper .scroll-content .scroll-item img {
    width: auto !important;
    height: auto !important;
    max-width: 7vw;
    max-height: 2.8vw;
  }

  /* 13. Uutiset & some: kortit 13,9 % leveydestä ja ruudukko 65 % keskellä (ennen kortit 17,4 %
     koko sisältöpalstan levyisessä ruudukossa), välit 3,2 % ja 3 %, kortin reunus 1,45 % */
  body.home .wysiwyg > .features-list:has(.news-item) .features-list__grid-container {
    width: min(100%, max(65.3vw, 52rem)) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    column-gap: 3.2vw !important;
    row-gap: 3vw !important;
  }

  body.home .wysiwyg > .features-list:has(.news-item) .flex-item.news-item {
    padding: 1.45vw;
  }

  /* 14. Arvolupaus: beige laatikko sivun keskellä 80 % levyisenä (ennen koko levyinen tausta),
     teksti alkaa 18,7 %:sta, kaarikuva 18,3 × 27,5 % ja pieni kuva 10,1 × 13,3 % alareunat
     samassa linjassa (ennen 26,9 × 37 % ja 11,7 × 15,8 %), otsikko 4,95 %. */
  body.home .wysiwyg > .featured-with-text-and-images {
    margin-left: calc((100% - 80.3vw) / 2);
    margin-right: calc((100% - 80.3vw) / 2);
  }

  body.home .featured-with-text-and-images__wrapper {
    width: 100% !important;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 3vw;
    padding-left: 9vw !important;
    padding-right: 7.3vw !important;
  }

  body.home .featured-with-text-and-images__content {
    width: auto;
    flex: 1 1 auto;
    min-width: 0;
  }

  body.home .featured-with-text-and-images__content h2 {
    font-size: 4.95vw !important;
    line-height: .9 !important;
  }

  body.home .featured-with-text-and-images__content .block-button {
    margin-top: 3.5vw;
  }

  body.home .featured-with-text-and-images__images {
    display: flex;
    align-items: flex-end;
    gap: 1.45vw;
    width: auto;
    flex: 0 0 auto;
  }

  body.home .featured-with-text-and-images__image--small {
    width: 10.1vw !important;
    height: 13.3vw !important;
    max-height: none;
    aspect-ratio: auto;
  }

  body.home .featured-with-text-and-images__image--big {
    width: 18.3vw !important;
    height: 27.5vw !important;
    aspect-ratio: auto;
    border-radius: 999px 999px 0 0;
  }

  /* 15. Ota yhteyttä: kuvat 15,9 % leveydestä (ennen 18,7 %), ruudukko 54 % keskellä, rivien väli
     tiivis (kuvat 28,9 %:n välein). Alaraja 44rem, jotta kuvat eivät kutistu pienellä työpöydällä.
     Otsikko nousee ensimmäisen kuvan yläreunan päälle. */
  body.home .people-list__grid-container {
    max-width: max(54.3vw, 44rem) !important;
    column-gap: 3.3vw !important;
    row-gap: 1.7vw !important;
  }

  body.home .people-list__container > .block__title {
    margin-bottom: -.4em !important; /* vain otsikon alaosa kaaren yläreunan päällä (oli -1.1em, peitti kasvot) */
  }

  /* 16. Alatunniste: logorivi 56 % ja yhteystietorivi 58,6 % leveydestä keskellä (ennen 69 %),
     logot levitetty rivin päihin kuten ilmekuvassa (väli ~4,8 %, ennen 32 px). Alaraja 48/50rem:
     pienellä työpöydällä yritysnimi ja Meille töihin mahtuvat yhdelle riville. */
  footer.footer > .footer__top {
    width: min(var(--ds-leveä), max(56vw, 48rem)) !important;
  }

  footer.footer > .footer__bottom {
    width: min(var(--ds-leveä), max(58.6vw, 50rem)) !important;
  }

  footer.footer .footer__logo-ribbon {
    justify-content: space-between;
  }
}

/* ==========================================================================
   Ilmekuvavertailu 15.10.2026: projektisivu
   Mitat suhteutettu ilmekuvaan "Projektisivut_uusi ilme" (sivualue sivupalkkeineen 2 480 px
   leveä, 1 440 px:n näytöllä kerroin 1,722). Koot vw-arvoina, jotta ne pysyvät samassa
   suhteessa 1 920 ja 2 550 px:n näytöillä. Kaikki rajattu projektisivuille (body.single-case).
   ========================================================================== */

@media (min-width: 64rem) {
  /* 1. Hero: projektin nimi ilmekuvan kokoisena (ilme ~120 px @1440 eli 8,3vw, ennen 104 px)
     ja nimi + ingressi hieman keskikohdan yläpuolelle (ilme: ryhmän keskikohta 44 %:n korkeudella,
     ennen 50 %). Ingressin etäisyys nimestä ilmeen mukaan (~73 px peruslinjasta, ennen ~45 px). */
  body.single-case .full-width-media-block.hero-20 .full-width-media-block__medias__item__content {
    padding-bottom: 12vh;
    gap: clamp(1.25rem, 3.1vw, 4rem);
  }

  body.single-case .full-width-media-block.hero-20 .full-width-media-block__medias__item__content h1,
  body.single-case .full-width-media-block.hero-20 .full-width-media-block__medias__item__content h2 {
    font-size: 8.3vw !important;
  }

  /* 2., 6., 10. Tekstiosion otsikko: ilmekuvassa 72 px @1440 (5vw, ennen 64 px), rivit tiiviisti
     ja ensimmäisen rivin peruslinja ~10 px taustan yläreunan yläpuolella (ennen 3 px alapuolella,
     jolloin taustan reuna osui kirjainten alaosaan). Leipätekstin paikka taustan yläreunasta
     pysyy ennallaan (~154 px @1440). */
  body.single-case .wysiwyg > .wp-block-group.is-style-ds-tekstiosio {
    --ds-ylitys: 4.85vw;
  }

  body.single-case .wysiwyg > .wp-block-group.is-style-ds-tekstiosio > :is(h1, h2, h3):first-child {
    font-size: max(4rem, 5vw);
    line-height: 1;
  }

  body.single-case .wysiwyg > .wp-block-group.is-style-ds-tekstiosio.has-background > :is(h1, h2, h3):first-child {
    margin-bottom: -1vw;
  }

  /* 9. Tumma kokoleveä kuva enintään näkymän korkuinen (ilme: 916 px @1440 kuten hero, ennen
     1 129 px kuvan omassa suhteessa); kuva rajataan, ei venytetä */
  body.single-case .wysiwyg > .wp-block-image.is-style-ds-tumma img {
    max-height: min(100svh, 63.6vw);
    object-fit: cover;
    object-position: center;
  }

  /* 10. Faktat: rivien väli ilmeen mukaan (rivistä riviin ~56 px @1440, ennen 45 px) ja
     laatikon alareunaan ilmeen väljyys (~165 px @1440, ennen 96 px) */
  body.single-case .wysiwyg .ds-faktat p {
    margin-bottom: 1.85em;
  }

  body.single-case .wysiwyg > .wp-block-group.is-style-ds-tekstiosio.ds-faktat {
    padding-bottom: 11.5vw !important;
  }

  /* 11. Selaa muita hankkeitamme: otsikko samaa kokoa kuin muut osio-otsikot (5vw, ennen 60 px)
     ja sen toinen rivi korttien yläreunan päällä kuten ilmekuvassa (kortit alkavat ~16 px toisen
     rivin peruslinjan yläpuolelta, ennen 26 px otsikon alapuolella) */
  body.single-case .cases-slideshow__container > .block__title {
    font-size: 5vw !important;
    line-height: 1 !important;
    margin-bottom: calc(-1.93vw - 24px) !important; /* kortit 1,1vw toisen rivin peruslinjan yläpuolelle; 24 px = vierityskaistan nostovara */
  }

  body.single-case .cases-slideshow .scroll-container-wrapper {
    padding-top: 0 !important;
  }
}

/* 11. Karusellin ja alatunnisteen väliin ilmeen väljyys (~190 px @1440, ennen 72 px) */
body.single-case .cases-slideshow .scroll-container-wrapper {
  padding-bottom: calc(var(--ds-osiovali) + 2.5rem) !important;
}

/* Ilmekuvavertailu 15.10.2026: yhtenäistys
   Osio-otsikot ilmekuvan kokoon (5 % leveydestä, 72 px @1440) kaikissa osioissa ja kaikki
   lohkojen painikkeet samankokoisiksi (ilmekuvassa kaikki painikkeet ovat samaa kokoa, teksti 1,47 %).
   Projektisivun karuselli on sama elementti kuin etusivulla (ilmekuvan huomautus 11). */
@media (min-width: 48rem) {
  .block__title {
    font-size: clamp(2.25rem, 5vw, 5.5rem) !important;
  }

  .block-button :is(a, .button-custom) {
    font-size: max(1rem, 1.47vw);
    line-height: 1.25;
    padding: max(.75rem, 1.2vw) max(1.4rem, 2.2vw);
  }
}

/* Kartan kohdekortti leveäksi (palaute 15.10.2026). Mapbox rajaa ponnahdusikkunan 240 px:iin
   (inline max-width), jolloin isolla näytöllä rem-mitoitettu kortti ja kuva valuivat kehyksen yli.
   Kehys mukautuu nyt korttiin, ja kortin leveys kasvaa näytön mukana. */
#map .mapboxgl-popup {
  max-width: none !important;
}

#map .mapboxgl-popup .case-card {
  width: clamp(260px, 18vw, 420px);
}

#map .mapboxgl-popup .case-card__image {
  height: auto !important;
  aspect-ratio: 5 / 4;
}

@media (max-width: 47.9375rem) {
  #map .mapboxgl-popup .case-card {
    width: min(260px, calc(100vw - 5rem));
  }

  #map .mapboxgl-popup .mapboxgl-popup-content {
    max-width: none;
  }
}


/* ==========================================================================
   Mobiilikorjaukset 23.10.2026: etusivu ja listasivut
   Puhelin (alle 768 px) ja tabletti (768–1024 px). Työpöytä (yli 1024 px) ei muutu.
   ========================================================================== */

/* Etusivun numerot puhelimella: 40 px:n luku "500 000" / "750 000" on leveämpi kuin 148–163 px:n
   palsta (360–390 px), jolloin vierekkäiset luvut törmäsivät ja oikea luku osui ruudun reunaan. */
@media (max-width: 47.9375rem) {
  .info-image__numbers-container .item-number {
    font-size: min(2.5rem, 9.4vw) !important;
  }
}

/* Sitaatit puhelimella: punaisen sitaatin pisin sana (Suunnitelmien) ei mahtunut 36 px:n tekstinä
   232 px:n palstaan (360 px), ja selain tavutti sen (Suunnitel-mien). Sama sovitus kuin valkoisella
   sitaatilla, ei automaattista tavutusta. */
@media (max-width: 47.9375rem) {
  .info-image__quote-container .quote {
    font-size: min(2.25rem, calc((100vw - 8rem) / 7.8)) !important;
    -webkit-hyphens: manual;
    hyphens: manual;
  }
}

/* Sivun keskellä oleva kuvaosio, jossa on pitkä teksti (esim. Tekoäly & Paikkatieto): osion korkeus
   oli kiinteä 64 % leveydestä (390 px: 318 px), mutta teksti 650–930 px, joten tekstin alku ja loppu
   leikkautuivat pois (myös englanninkielisellä sivulla 768 px:llä). Yhden kuvan osio kasvaa nyt
   tekstin mittaiseksi; kuva täyttää sen edelleen. Usean kuvan karuselli (etusivun hero) ennallaan. */
@media (max-width: 64rem) {
  .full-width-media-block.hero-20:has(> .full-width-media-block__medias > .full-width-media-block__medias__item:only-child),
  .full-width-media-block.hero-20 > .full-width-media-block__medias:has(> .full-width-media-block__medias__item:only-child),
  .full-width-media-block.hero-20 > .full-width-media-block__medias > .full-width-media-block__medias__item:only-child {
    height: auto !important;
    min-height: min(64vw, 100vh);
  }

  /* Teema keskittää kohteen (top/left 50 % ja translate -50 %); virtauksessa ei keskitystä */
  .full-width-media-block.hero-20 > .full-width-media-block__medias > .full-width-media-block__medias__item:only-child {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    transform: none !important;
  }

  .full-width-media-block.hero-20 > .full-width-media-block__medias > .full-width-media-block__medias__item:only-child > .full-width-media-block__medias__item__content {
    position: relative;
    inset: auto;
    width: 100%;
    min-height: min(64vw, 100vh);
    box-sizing: border-box;
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
  }
}

/* Työmme ja Tiimimme, puhelin: suodatinvalikon kohdat 12 px:n tekstinä 38 px:n riveillä (pieni
   kosketusalue ja vaikea lukea). Teksti 15 px, rivit vähintään 44 px; valittu kohde samalla
   korkeudella kuin avausnuoli. */
@media (max-width: 47.9375rem) {
  .items-wrapper__list__filter-list__container__list li.items-wrapper__list__filter-list__container__list__item {
    padding-top: 0 !important;
  }

  .items-wrapper__list__filter-list__container__list li.items-wrapper__list__filter-list__container__list__item a {
    font-size: .9375rem;
    line-height: 1.25rem;
    padding: .75rem 3.5rem .75rem 0;
  }

  .items-wrapper__list__filter-list__container__list:not(.open) li.active-category a,
  .items-wrapper__list__filter-list__container__list.open li:nth-of-type(1) a {
    padding-top: 1.125rem;
    padding-bottom: 1.125rem;
  }

  /* Avausnuoli valitun kohdan tekstin korkeudelle (oli 16 px alempana) */
  .items-wrapper__list__filter-list__container__list > #toggleList {
    top: -1rem;
  }

  .items-wrapper__list__filter-list__container {
    max-height: calc(100vh - 5rem);
  }
}

/* Kosketusnäyttö: suodatinlistan hiiriefekti (muut kohdat himmenevät, kohde siirtyy oikealle ja saa
   liukuvärin) jäi napautuksen jälkeen päälle, jolloin valittu kategoria näkyi sisennettynä ja
   värillisenä ja muut himmeinä. Kosketuksella ei hiiriefektiä. */
@media (hover: none) {
  .items-wrapper__list__filter-list__container__list:hover li,
  .items-wrapper__list__filter-list__container__list:hover li:hover {
    opacity: 1;
    left: 0;
  }

  li.items-wrapper__list__filter-list__container__list__item a:hover {
    background-image: none;
    animation: none;
    -webkit-text-fill-color: currentColor;
  }
}

/* Uutiset tabletilla (768–1024 px): lista alkoi 332 px:n kohdalta, koska sivulle oli varattu tila
   piilotetulle kuukausisuodattimelle. Kortit jäivät kapeiksi (768 px: yksi 316 px:n palsta, 1024 px:
   kolme 157 px:n palstaa, joissa hashtagit katkesivat kesken sanan). Lista samaan säiliöön kuin
   muiden sivujen sisältö. */
@media (min-width: 48rem) and (max-width: 64rem) {
  .page-template-news .items-wrapper .items-wrapper__list {
    width: var(--ds-leveä) !important;
    max-width: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* Uutiset pystytabletilla (768–1023 px): säiliöön mahtuu kaksi korttia rinnakkain (ennen yksi
   514 px:n kortti allekkain). */
@media (min-width: 48rem) and (max-width: 63.9375rem) {
  .page-template-news .items-wrapper__list__row__item--news {
    width: 50% !important;
  }
}

/* Kolmen tekstisarakkeen rivi (esim. Meille töihin: Yhteisö, Työympäristö, Vapaus & vastuu)
   782–1023 px:n leveydellä: palstat olivat 161 px kapeita, ja pitkät sanat katkesivat kesken
   (työympäristösuunnittelumme). Palstat allekkain alle 1024 px:n kuten teksti ja kuva -riveissä.
   Projektisivuja (single-case) ei muuteta tässä. */
@media (min-width: 48rem) and (max-width: 63.9375rem) {
  body:not(.single-case) .ds-tekstisarakkeet.wp-block-columns {
    flex-wrap: wrap !important;
  }

  body:not(.single-case) .ds-tekstisarakkeet.wp-block-columns > .wp-block-column {
    flex-basis: 100% !important;
  }
}

/* Kosketusalueet puhelimella ja tabletilla (ulkoasu ei muutu, vain napautettava alue kasvaa):
   Tutkimus & kehitys -korttien "Lue lisää" (24 px korkea) ja Ota yhteyttä -henkilöiden
   sähköposti ja puhelin (15 px korkea). */
@media (max-width: 64rem) {
  .steps-with-background-color-block__link {
    padding-top: .625rem;
    padding-bottom: .625rem;
    margin-top: -.625rem;
    margin-bottom: -.625rem;
  }

  .people-list-item__email,
  .people-list-item__phone {
    padding-top: .25rem;
    padding-bottom: .25rem;
  }
}

/* ==========================================================================
   Mobiilikorjaukset 23.10.2026: projektisivut ja yhteiset elementit
   (header, valikko, sivupalkit, Ota yhteyttä -paneeli, alatunniste, kaaviot).
   Rajattu puhelimiin ja tabletteihin (enintään 64rem) tai kosketusnäyttöihin
   (hover: none), joten työpöytä hiirellä ei muutu.
   ========================================================================== */

/* Kosketusnäyttö: teeman hover-liukuväri (a/button:hover) jäi napautuksen jälkeen päälle
   valikkonappiin ja "Ota yhteyttä" / "Sulje" -tekstiin, jotka näkyivät haaleina ja
   ruskeanharmaina, kunnes käyttäjä napautti muualle. */
@media (hover: none) {
  #menuToggleMobile:hover,
  #menuToggle:hover,
  #menuToggleMobile:hover .menu-toggle__icon,
  #menuToggleMobile:hover .menu-toggle__icon::before,
  #menuToggleMobile:hover .menu-toggle__icon::after,
  #menuToggle:hover .menu-toggle__icon,
  #menuToggle:hover .menu-toggle__icon::before,
  #menuToggle:hover .menu-toggle__icon::after {
    background-image: none !important;
    animation: none !important;
  }

  #toggleMobileContact:hover,
  #toggleContact:hover {
    background-image: none !important;
    animation: none !important;
    -webkit-text-fill-color: currentColor !important;
  }
}

/* Valikon kuva tabletilla: teema vaihtaa valikon oikean puolen kuvan vain hiiren alla, joten
   kosketusnäytöllä (768–1024 px) puolet avatusta valikosta jäi tyhjäksi valkoiseksi. Näytetään
   ensimmäisen kohdan kuva, kunnes jokin kohta on valittu. */
@media (hover: none) and (min-width: 48rem) {
  .site-header__image-container:not(:has(.active-nav-image)) img:first-child {
    opacity: 1;
  }
}

/* Puhelimen yläpalkki: napautusalueet vähintään ~44 px (valikkonappi oli 20 × 32 px,
   "Ota yhteyttä" 95 × 24 px, logo 26 × 41 px). Negatiivinen marginaali pitää ulkoasun ennallaan. */
@media (max-width: 47.9375rem) {
  .site-header-mobile .menu-toggle {
    width: 44px;
    height: 44px;
    padding: 0 12px;
    margin: -6px -12px;
    box-sizing: border-box;
  }

  .site-header-mobile__contact-toggle {
    padding: 10px 0 !important;
    margin: -10px 0;
  }

  .site-header-mobile__logo-link {
    padding: 2px 9px;
    margin-top: -2px;
    margin-left: -9px;
  }
}

/* Somekuvakkeet valikossa (puhelin) ja vasemmassa sivupalkissa (tabletti): napautusalue oli
   16 × 14–19 px. Kasvatetaan aluetta täytteellä, ulkoasu ja välit pysyvät samoina. */
@media (max-width: 64rem) {
  #social-navigation .menu-item__link > a {
    display: inline-block;
    padding: 12px 14px;
    margin: -12px -14px;
    line-height: 0;
  }
}

/* Ota yhteyttä -paneeli puhelimella ja tabletilla: linkit (Ota yhteyttä tiimiimme, Hae meille
   töihin, Laskutustiedot, Tietosuojaseloste) olivat 14–19 px korkeita. Napautusalue ~42–48 px,
   ja linkkikappaleille väliä, jotta vierekkäiset alueet eivät mene päällekkäin. */
@media (max-width: 64rem) {
  .contact-sidebar__container__wrapper__content a {
    position: relative;
  }

  /* Alue ::before-elementillä, koska ::after on linkin alleviivaus */
  .contact-sidebar__container__wrapper__content a::before {
    content: "";
    position: absolute;
    inset: -0.75rem -0.25rem;
  }

  .contact-sidebar__container__wrapper__content p:has(a) {
    margin-block: 1.5rem;
  }
}

/* Alatunniste puhelimella: teema piilotti navigaation (Meistä, Työmme ...) ja somelinkit alle
   560 px:n leveydellä, joten puhelimen alatunnisteessa ei ollut yhtään linkkiä. Näytetään ne
   kahtena palstana yhteystietojen alla. */
@media (max-width: 34.9375rem) {
  footer.footer .footer__bottom {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2.5rem 1.5rem;
  }

  footer.footer .footer__contact {
    grid-column: 1 / -1;
  }

  footer.footer .footer__navigation,
  footer.footer .footer__social {
    display: block;
  }

  footer.footer .footer__navigation ul {
    gap: 1.25rem;
  }
}

/* Alatunnisteen linkit ja somekuvakkeet: napautusalue ~44 px (oli 28 px / 25 × 32 px) */
@media (max-width: 64rem) {
  footer.footer .footer__navigation a {
    display: inline-block;
    padding-block: 0.5rem;
    margin-block: -0.5rem;
  }

  footer.footer .footer__social__links {
    gap: 1.5rem;
  }

  footer.footer .footer__social__links a {
    display: inline-flex;
    padding: 0.625rem;
    margin: -0.625rem;
  }
}

/* Alatunniste tabletilla (768–1023 px): yritysnimi katkesi kolmelle riville (L / Arkkitehdit / Oy)
   ja "Meille töihin" kahdelle, koska kolme palstaa jakoivat kapean tilan. Yhteystiedot omalle
   rivilleen, navigaatio ja some sen alle. */
@media (min-width: 48rem) and (max-width: 63.9375rem) {
  footer.footer > .footer__bottom {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 3rem 2rem;
  }

  footer.footer .footer__contact {
    grid-column: 1 / -1;
  }

  footer.footer .footer__contact :is(h2, h3, h4) {
    margin-block-start: 2rem;
  }
}

/* Kaaviot (kaarissa olevat piirrokset) puhelimella koko palstan levyisinä: 224 px:n kaaressa
   kaavio oli ~200 px leveä eikä sen merkintöjä erottanut. Kuvakaaret pysyvät ennallaan. */
@media (max-width: 47.9375rem) {
  .features-list.ds-kuvat-kokonaan .flex-item.features-item figure {
    max-width: 100% !important;
  }
}


/* ==========================================================================
   Korjaukset 23.10.2026 (palaveripäivä)
   ========================================================================== */

/* Etusivun hero puhelimella: otsikkolaatikko (flex 2 1 0) täytti heron ja työnsi Lue lisää
   -painikkeen heron alareunaan kiinni (390 px: hero 250 px, painikkeen alareuna 250 px), jolloin
   painike näytti leikkautuvan. Painikkeellisen heron korkeus vähintään 312 px ja sisällölle
   ylä- ja alaväli; painikkeen alle jää 28 px. Painikkeettomat herot (projektisivut) ennallaan. */
@media (max-width: 47.9375rem) {
  .full-width-media-block.hero-20:has(.full-width-media-block__medias__item__content > a),
  .full-width-media-block.hero-20:has(.full-width-media-block__medias__item__content > a) > .full-width-media-block__medias,
  .full-width-media-block.hero-20:has(.full-width-media-block__medias__item__content > a) > .full-width-media-block__medias > .full-width-media-block__medias__item {
    height: max(64vw, 19.5rem) !important;
  }

  .full-width-media-block.hero-20 .full-width-media-block__medias__item__content:has(> a) {
    padding-top: 1.25rem;
    padding-bottom: 1.75rem;
  }

  /* Video peittää myös korkeamman heron (muuten harmaa kaista ylä- ja alapuolella) */
  .full-width-media-block.hero-20:has(.full-width-media-block__medias__item__content > a) :is(.vimeo-article, .youtube-article) {
    width: max(100%, calc(max(64vw, 19.5rem) * 16 / 9));
  }
}

/* Yli 1000 projektia: hiiren alla nouseva kortti (transform) piirtyi osassa selaimista otsikon
   päälle, vaikka otsikko on korkeammalla z-tasolla. Otsikko omaksi kompositointikerrokseen
   (otsikon osio z 3, karuselli z 1); otsikko ei estä korttien klikkausta. */
.cases-slideshow__container > .block__title {
  transform: translateZ(0);
  pointer-events: none;
}


/* ==========================================================================
   Asiakkaan palaute 27.10.2026 (Maria)
   ========================================================================== */

/* Projektisivujen pienet kuvat (kaarikortit): aluksi kuvan alla näkyy vain otsikko. Hiiren alla
   kuva nousee enemmän kuin ennen (6 px → 1rem), varjo vahvistuu ja leipäteksti ilmestyy otsikon
   alle. Tekstin tila on varattu valmiiksi, jottei osio veny eikä sivu hyppää hiiren liikkuessa.
   Vain hiirellä: kosketusnäytöillä ja puhelimilla teksti näkyy aina. */
@media (hover: hover) and (pointer: fine) {
  body.single-case .features-list .flex-item.features-item .item-content > :not(.item-title) {
    opacity: 0;
    transform: translateY(-.5rem);
    transition: opacity .35s ease, transform .35s ease;
  }

  body.single-case .features-list .flex-item.features-item:hover .item-content > :not(.item-title),
  body.single-case .features-list a:focus-visible > .flex-item.features-item .item-content > :not(.item-title) {
    opacity: 1;
    transform: none;
  }

  body.single-case .features-list .flex-item.features-item:hover .item-image,
  body.single-case .features-list a:focus-visible > .flex-item.features-item .item-image {
    transform: translateY(-1rem);
    box-shadow: 10px 16px 28px 0 rgba(0, 0, 0, .2);
  }
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: reduce) {
  body.single-case .features-list .flex-item.features-item .item-content > :not(.item-title) {
    transform: none;
  }
}

/* Heron otsikon alla oleva teksti hieman isompi: 18 → 20 px (puhelin ja 1 440 px),
   22 → 25 px (1 920 px), 29 → 33 px (2 550 px). Arvolupauksen ingressi ennallaan. */
.full-width-media-block.hero-20 .full-width-media-block__medias__item__content p {
  font-size: max(20px, 1.3vw);
}