/* BBeautiful Helsinki
   Каркас: базовые токены, шапка, секция спирали-воронки.
   Остальные секции пока пустые заглушки. */

:root {
  --vari-tausta:      #fbf7f5;
  --vari-tausta-2:    #f3e9e6;
  --vari-teksti:      #2e2a2b;
  --vari-teksti-2:    #6d6265;
  /* korostus затемнён с #b8737f до #a05a68: белый текст на кнопках,
     бейдже и плашке должен давать ≥ 4.5:1 (WCAG AA) */
  --vari-korostus:    #a05a68;
  --vari-korostus-2:  #96525e;
  --vari-viiva:       #e6d8d4;

  --fontti: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --header-korkeus: 64px;

  /* Воронка */
  --kierre-korkeus:  400vh;          /* длина скролла секции */
  /* Карточка 3:4. Ограничена и по ширине, и по высоте: иначе на низком
     вьюпорте (ноутбук с открытыми панелями) она вылезает за пределы пина. */
  --kortti-leveys:   clamp(150px, min(23vw, 30vh), 270px);
  --kasi-korkeus:    clamp(76px, 11vh, 120px);
  --kasi-leveys:     clamp(90px, 14vw, 150px);

  /* Палочка. Все размеры выводятся из ширины тайла древка (нативно 180×443,
     пропорция держится через background-size: 100% auto).
     Коэффициенты — из ширины стеклянной колонны в местах стыка, замеренной
     по альфа-каналу: навершие 80px при картинке 500, древко 100 при 180,
     наконечник 89 при 200. Части экспортированы в разном масштабе, поэтому
     без этих множителей на стыках была бы ступенька:
       навершие   = 500/80 × 100/180 = 3.4722
       наконечник = 200/89 × 100/180 = 1.2484  */
  --sauva-varsi-l: clamp(44px, 6vw, 78px);
  --sauva-karki-l: calc(var(--sauva-varsi-l) * 3.4722);
  --sauva-nuppi-l: calc(var(--sauva-varsi-l) * 1.2484);
  --sauva-pituus:  400vh;            /* общая длина палочки */
}

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

html { scroll-padding-top: var(--header-korkeus); }

body {
  margin: 0;
  font-family: var(--fontti);
  color: var(--vari-teksti);
  background: var(--vari-tausta);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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


/* ---------- Шапка ---------- */

/* Без backdrop-filter: блюр под липкой шапкой Safari пересчитывает
   каждый кадр, пока под ней едет сцена — на ProMotion это съедало
   половину бюджета кадра. Вместо блюра чуть плотнее подложка. */
.header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: clamp(.75rem, 2vw, 1.5rem);
  min-height: var(--header-korkeus);
  padding: 0 clamp(1rem, 4vw, 2.5rem);
  background: rgba(251, 247, 245, .96);
  border-bottom: 1px solid var(--vari-viiva);
}

.header__logo { display: block; flex: none; }
.header__logo img { display: block; height: 42px; width: auto; }

/* Пункты и переключатель языка собирает js/main.js из js/tekstit.js.
   Меню в середине (авто-поля), кнопка записи прижата вправо. */
.header__nav {
  display: flex;
  align-items: center;
  gap: clamp(.9rem, 2.2vw, 1.5rem);
  margin-inline: auto;
}

.header__linkki {
  color: inherit;
  text-decoration: none;
  font-size: .92rem;
}

.header__linkki:hover,
.header__linkki:focus-visible { color: var(--vari-korostus-2); }

.header__kielet {
  display: flex;
  gap: .15rem;
  font-size: .85rem;
}

.header__kielet a {
  padding: .15em .35em;
  color: var(--vari-teksti-2);
  text-decoration: none;
}

.header__kielet a[aria-current] { color: var(--vari-teksti); font-weight: 600; }

.header__varaa { flex: none; padding: .5em 1.2em; font-size: .9rem; }

/* Бургер: виден только на узком экране */
.header__valikko {
  display: none;
  flex: none;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.header__valikko span {
  display: block;
  width: 20px;
  height: 2px;
  margin: 4px auto;
  background: var(--vari-teksti);
}

@media (max-width: 899px) {
  .header__valikko { display: block; }
  .header__varaa   { margin-left: auto; }

  /* Меню и язык — выпадашкой под шапкой; открывает класс on-auki
     (ставит js/main.js). Логотип в это же время сменяется монограммой
     через <picture> в разметке. */
  .header__nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: none;
    flex-direction: column;
    align-items: center;
    gap: .9rem;
    margin: 0;
    padding: 1.1rem 1rem 1.4rem;
    background: rgba(251, 247, 245, .97);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--vari-viiva);
  }

  .header.on-auki .header__nav { display: flex; }
}


/* ---------- Кнопка ---------- */

.nappi {
  display: inline-block;
  padding: .72em 1.7em;
  border-radius: 999px;
  background: var(--vari-korostus);
  color: #fff;
  font-weight: 600;
  letter-spacing: .02em;
  text-decoration: none;
  transition: background-color .2s ease;
}

.nappi:hover,
.nappi:focus-visible { background: var(--vari-korostus-2); }


/* ---------- Секции-заглушки ---------- */
/* Временно: пустым секциям нужна высота, чтобы их было видно при скролле. */

.osio,
.alatunniste { min-height: 30vh; }


/* ================= Спираль-воронка ================= */

.kierre {
  position: relative;
  height: var(--kierre-korkeus);
}

/* Пиннится. perspective — на самом sticky-элементе: так безопаснее для
   iOS Safari. Transform и preserve-3d живут ниже, на .kierre__lava.
   Ни на .kierre, ни на её предках не должно быть transform/filter —
   иначе sticky перестанет цепляться за вьюпорт. */
.kierre__pin {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  perspective: 1500px;              /* меньше — передняя карточка раздувается */
  perspective-origin: 50% 36%;
  background:
    radial-gradient(120% 80% at 50% 12%, #fff 0%, var(--vari-tausta) 55%, var(--vari-tausta-2) 100%);
}

/* --- HERO над звездой --- */

/* Тексты ставит js/main.js, по ходу вступления гасит spiral.js.
   height: 0 — в потоке места не занимает, пин начинается с верха секции;
   липнет под шапкой и лежит поверх пина (z-index против его фона). */
.kierre__hero {
  position: sticky;
  top: calc(var(--header-korkeus) + clamp(.75rem, 4vh, 2.25rem));
  z-index: 3;
  height: 0;
  padding: 0 1rem;
  text-align: center;
  pointer-events: none;
}

.hero__otsikko {
  margin: 0 0 .45rem;
  font-size: clamp(1.5rem, 4.5vw, 2.3rem);
  font-weight: 600;
  letter-spacing: -.015em;
}

.hero__lead {
  margin: 0;
  color: var(--vari-teksti-2);
  font-size: clamp(.95rem, 2.6vw, 1.15rem);
}

.hero__vihje {
  margin: .9rem 0 0;
  color: var(--vari-korostus-2);
  font-size: .78rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* --- палочка --- */

/* Столбик длиной --sauva-pituus. Вертикальный сдвиг ставит spiral.js,
   вращение сцены сюда не доходит: слой лежит рядом с .kierre__lava, а не внутри. */
.kierre__sauva {
  position: absolute;
  top: 0;                       /* точное значение ставит spiral.js: зависит от
                                   того, где стоит карточка, а это считается там */
  left: 50%;
  z-index: 0;
  width: var(--sauva-karki-l);
  height: var(--sauva-pituus);
  margin-left: calc(var(--sauva-karki-l) / -2);
  display: flex;
  flex-direction: column;
  align-items: center;          /* все три части на одной вертикальной оси */
  pointer-events: none;
  will-change: transform;       /* двигается каждый кадр; без своего слоя
                                   Safari перерисовывал бы весь столбик */
}

.kierre__karki {
  flex: none;
  width: var(--sauva-karki-l);
  aspect-ratio: 500 / 760;
  background: url("../kuvat/sauva/sauva-karki.png") no-repeat center / 100% 100%;
}

/* Единственная тянущаяся часть. background-size: 100% auto держит пропорцию
   тайла 180×443, repeat-y набирает нужную длину. */
.kierre__varsi {
  flex: 1 1 auto;
  min-height: 0;
  width: var(--sauva-varsi-l);
  background: url("../kuvat/sauva/sauva-varsi.png") repeat-y top center / 100% auto;
}

.kierre__nuppi {
  flex: none;
  width: var(--sauva-nuppi-l);
  aspect-ratio: 200 / 331;
  background: url("../kuvat/sauva/sauva-nuppi.png") no-repeat center / 100% 100%;
}

/* Место под фото руки с маникюром: рука держит палочку за древко, поэтому
   слот сидит на древке над наконечником, а не под остриём — кончик остаётся
   ниже и виден. Из потока вынут, точное положение по вертикали ставит
   spiral.js: оно зависит от того, куда уехал наконечник.
   Пунктир виден только на этапе каркаса. */
.kierre__kasi {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: var(--kasi-leveys);
  height: var(--kasi-korkeus);
  border: 1px dashed var(--vari-viiva);
  border-radius: 12px;
}

/* --- 3D-сцена --- */

.kierre__lava {
  position: absolute;
  left: 50%;
  top: 36%;                         /* точка фокуса: сюда приходит активная карточка */
  width: 0;
  height: 0;
  z-index: 1;
  transform-style: preserve-3d;
  will-change: transform;   /* только здесь, на карточках нельзя */
}

/* transform / opacity / visibility карточек ставит spiral.js каждый кадр */
.kortti {
  position: absolute;
  width: var(--kortti-leveys);
  height: calc(var(--kortti-leveys) * 4 / 3);
  margin-left: calc(var(--kortti-leveys) / -2);
  margin-top: calc(var(--kortti-leveys) * -2 / 3);
}

/* Тень, скругление и overflow-маска на одном слое собирали в Safari
   дорогой композит. Разнесено: тень — псевдоэлементом под карточкой
   (красится один раз и гаснет вместе с ней её opacity), скругление —
   border-radius на фоне и самой картинке, overflow-маски нет. */
.kortti::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 14px;
  box-shadow: 0 18px 40px -18px rgba(70, 40, 45, .45);
}

.kortti__kehys {
  width: 100%;
  height: 100%;
  border-radius: 14px;
  background-color: var(--vari-tausta-2);
  background-size: cover;
  background-position: center;
}

.kortti picture { display: block; width: 100%; height: 100%; }

.kortti img {
  width: 100%;
  height: 100%;
  border-radius: 14px;
  object-fit: cover;
  opacity: 0;                      /* до загрузки видна LQIP-заглушка */
  transition: opacity .4s ease;
}

.kortti img.on-ladattu { opacity: 1; }

/* Клик по плитке ведёт к строке своей услуги в прайсе (ставит spiral.js).
   Только в воронке: в списке reduced-motion строка прайса и так рядом. */
.kierre__lava .kortti { cursor: pointer; }

/* --- плоский блок поверх сцены --- */

.kierre__tiedot {
  position: absolute;
  left: 50%;
  bottom: calc(var(--kasi-korkeus) + clamp(.5rem, 2vh, 1.5rem));
  z-index: 3;
  transform: translateX(-50%);
  display: grid;                   /* все 9 блоков в одной ячейке — кросс-фейд */
  width: min(92vw, 440px);
  padding: 1rem 1.25rem;
  text-align: center;
  /* Мягкая подложка: текст ложится поверх фото и должен читаться */
  background: radial-gradient(
    62% 72% at 50% 50%,
    rgba(251, 247, 245, .95) 30%,
    rgba(251, 247, 245, 0) 100%);
}

.tiedot {
  grid-area: 1 / 1;
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s ease;
}

.tiedot.on-aktiivinen { opacity: 1; pointer-events: auto; }

/* бейдж предложения (TARJOUS) — на плоском оверлее, не в 3D-сцене */
.tiedot__tarjous {
  display: inline-block;
  margin: 0 0 .45rem;
  padding: .15em .7em;
  border-radius: 999px;
  background: var(--vari-korostus);
  color: #fff;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.tiedot__nimi {
  margin: 0 0 .35rem;
  font-size: clamp(1.25rem, 3.4vw, 1.75rem);
  font-weight: 600;
  letter-spacing: -.01em;
}

.tiedot__lyhyt {
  margin: 0 0 .5rem;
  color: var(--vari-teksti-2);
  font-size: clamp(.85rem, 2.3vw, .95rem);
}

.tiedot__meta {
  margin: 0 0 1rem;
  color: var(--vari-teksti-2);
  font-size: clamp(.95rem, 2.6vw, 1.05rem);
}

.tiedot__hinta { color: var(--vari-teksti); font-weight: 600; }

.tiedot__kesto::before { content: " · "; color: var(--vari-viiva); }

/* --- точки прогресса --- */

.kierre__pisteet {
  position: absolute;
  right: clamp(.4rem, 2.5vw, 2rem);
  top: 50%;
  z-index: 4;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: .35rem;
}

.piste {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.piste::before {
  content: "";
  width: 9px;
  height: 9px;
  border: 1px solid var(--vari-korostus);
  border-radius: 50%;
  transition: background-color .25s ease, transform .25s ease;
}

.piste[aria-current]::before {
  background: var(--vari-korostus);
  transform: scale(1.3);
}


/* ---------- prefers-reduced-motion: обычный список ---------- */
/* Атрибут ставит spiral.js, он же собирает список вместо сцены. */

.kierre__lista { display: none; }

[data-liike="vahennetty"] .kierre        { height: auto; }
[data-liike="vahennetty"] .kierre__pin   { display: none; }

/* HERO без воронки — обычный статичный заголовок над списком */
[data-liike="vahennetty"] .kierre__hero {
  position: static;
  height: auto;
  padding: clamp(2rem, 6vw, 3rem) 1rem 0;
  pointer-events: auto;
}

[data-liike="vahennetty"] .kierre__lista {
  display: grid;
  gap: clamp(2rem, 5vw, 3rem);
  max-width: 960px;
  margin: 0 auto;
  padding: clamp(2rem, 6vw, 4rem) clamp(1rem, 4vw, 2rem);
  list-style: none;
}

[data-liike="vahennetty"] .palvelu {
  display: grid;
  grid-template-columns: minmax(0, 220px) 1fr;
  gap: clamp(1rem, 3vw, 2rem);
  align-items: center;
}

[data-liike="vahennetty"] .kortti {
  position: static;
  width: 100%;
  height: auto;
  margin: 0;
  aspect-ratio: 3 / 4;
}

[data-liike="vahennetty"] .tiedot {
  grid-area: auto;        /* в воронке блоки лежат стопкой в одной ячейке,
                             в списке каждый стоит на своём месте */
  opacity: 1;
  pointer-events: auto;
  text-align: left;
}

@media (max-width: 560px) {
  [data-liike="vahennetty"] .palvelu { grid-template-columns: 1fr; }
}


/* ================= Прайс ================= */
/* Содержимое #hinnat собирает js/hinnasto.js из js/hinnat.js:
   в разметке ни цифр, ни названий. Категория — <details> с якорем
   id="hinta-<slug>", на него ведут карточки воронки и кнопка «Katso
   hinnat» оверлея. Открыто или закрыто — решает js/hinnasto.js: на
   широком экране развёрнуто всё, на телефоне категории собраны. */

.hinnasto {
  max-width: 720px;
  margin: 0 auto;
  padding: clamp(2rem, 6vw, 4rem) clamp(1rem, 4vw, 2rem);
}

.hinnasto__paaotsikko {
  margin: 0 0 .6rem;
  font-size: clamp(1.35rem, 3.4vw, 1.9rem);
  letter-spacing: -.01em;
}

.hinnasto__kategoria { border-bottom: 1px solid var(--vari-viiva); }

/* Заголовок категории — вся строка кликабельна. Штатный маркер убран,
   свой шеврон стоит абсолютно у правого края: флексовый уехал бы за
   примечанием (lisa) при его переносе на вторую строку. */
.hinnasto__otsikko {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .2rem .8rem;
  padding: 1.05rem 1.6rem 1.05rem 0;
  cursor: pointer;
  list-style: none;
}

.hinnasto__otsikko::-webkit-details-marker { display: none; } /* старый Safari */

.hinnasto__otsikko::after {
  content: "";
  position: absolute;
  top: 50%;
  right: .35rem;
  width: .5rem;
  height: .5rem;
  border: solid var(--vari-teksti-2);
  border-width: 0 1.5px 1.5px 0;
  /* translateY центрует не рамку, а видимую галку: у закрытой стрелки
     остриё внизу, у открытой вверху */
  transform: translateY(-70%) rotate(45deg);
  transition: transform .25s;
}

.hinnasto__kategoria[open] > .hinnasto__otsikko::after {
  transform: translateY(-30%) rotate(225deg);
}

.hinnasto__nimi {
  margin: 0;
  font-size: clamp(1.1rem, 2.8vw, 1.3rem);
  font-weight: 600;
  letter-spacing: -.01em;
}

/* примечание категории (lisa) — например «сокеринг по той же цене» */
.hinnasto__lisa {
  color: var(--vari-teksti-2);
  font-size: .9rem;
}

.hinnasto__palvelut {
  margin: 0;
  padding: .1rem 0 1.3rem;
  list-style: none;
  display: grid;
  gap: .75rem;
}

.hinnasto__rivi {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: .1rem 1rem;
  font-size: .95rem;
}

.hinnasto__pnimi { flex: 1 1 auto; }

/* kuvaus услуги — второй строкой на всю ширину. max-width сюда не
   ставить: он режет гипотетический размер флекс-элемента, и
   flex-basis: 100% перестаёт переносить строку. */
.hinnasto__kuvaus {
  flex-basis: 100%;
  margin: 0;
  color: var(--vari-teksti-2);
  font-size: .85rem;
}

/* Внутри подписей переносов нет (nowrap), но ряд целиком переносится:
   у Vahauspaketti с его erikseen + saasto на 360px одной строки мало. */
.hinnasto__meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: baseline;
  gap: .2rem .6rem;
  white-space: nowrap;
}

.hinnasto__kesto { color: var(--vari-teksti-2); font-size: .9rem; }
.hinnasto__hinta { font-weight: 600; }

/* у услуг с saastoEur: цена зон по отдельности (UI.erikseen) —
   приглушена, экономия (UI.saasta) — заметной плашкой */
.hinnasto__erikseen { color: var(--vari-teksti-2); font-size: .9rem; }

.hinnasto__saasto {
  padding: .1em .6em;
  border-radius: 999px;
  background: var(--vari-korostus);
  color: #fff;
  font-size: .8rem;
  font-weight: 600;
}

/* повтор кнопки записи — в конце каждой категории, по центру строки.
   Отрицательный отступ съедает часть нижнего padding списка услуг. */
.hinnasto__varaa {
  display: block;
  width: fit-content;
  margin: -.4rem auto 1.4rem;
  padding: .5em 1.2em;
  font-size: .9rem;
}


/* ================= Отзывы ================= */
/* Содержимое собирает js/main.js из ARVOSTELUT (tekstit.js).
   Цитаты настоящие и остаются по-фински на обеих версиях. */

.arvostelut {
  max-width: 960px;
  margin: 0 auto;
  padding: clamp(2rem, 6vw, 4rem) clamp(1rem, 4vw, 2rem);
}

.arvostelut__otsikko {
  margin: 0 0 .4rem;
  font-size: clamp(1.35rem, 3.4vw, 1.9rem);
  letter-spacing: -.01em;
}

.arvostelut__arvio {
  margin: 0 0 1.4rem;
  color: var(--vari-teksti-2);
}

.arvostelut__numero { color: var(--vari-teksti); font-weight: 600; }
.arvostelut__tahdet { color: var(--vari-korostus); letter-spacing: .1em; }

.arvostelut__lista {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 3vw, 1.5rem);
  align-items: start;   /* короткие карточки не тянутся под длинную */
}

.arvostelut__kortti {
  padding: clamp(1.1rem, 3vw, 1.5rem);
  border-radius: 18px;
  background: var(--vari-tausta-2);
}

.arvostelut__teksti {
  margin: 0 0 .8rem;
  font-size: .95rem;
}

.arvostelut__nimi {
  margin: 0;
  color: var(--vari-teksti-2);
  font-size: .9rem;
}

/* На телефоне — горизонтальная лента со snap: длинный отзыв не режем,
   но и простыню на пол-экрана не строим. Отрицательные поля выводят
   ленту к краям экрана, padding возвращает выравнивание карточек. */
@media (max-width: 700px) {
  .arvostelut__lista {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 82%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    margin-inline: calc(-1 * clamp(1rem, 4vw, 2rem));
    padding-inline: clamp(1rem, 4vw, 2rem);
    padding-bottom: .5rem;
    scroll-padding-inline: clamp(1rem, 4vw, 2rem);
  }

  .arvostelut__kortti { scroll-snap-align: start; }
}


/* ================= Почему мы и контакты ================= */
/* Содержимое обеих секций собирает js/main.js из js/tekstit.js */

.miksi {
  max-width: 960px;
  margin: 0 auto;
  padding: clamp(2rem, 6vw, 4rem) clamp(1rem, 4vw, 2rem);
}

.miksi__otsikko {
  margin: 0 0 1.4rem;
  font-size: clamp(1.35rem, 3.4vw, 1.9rem);
  letter-spacing: -.01em;
}

.miksi__lista {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(1rem, 3vw, 2rem);
}

.miksi__nimi { margin: 0 0 .3rem; font-size: 1.05rem; }
.miksi__teksti { margin: 0; color: var(--vari-teksti-2); font-size: .95rem; }

/* Контакты: две колонки — расположение и каналы связи, на телефоне
   в столбик. Кнопка записи в конце — финальный CTA страницы. */
.yhteys {
  max-width: 960px;
  margin: 0 auto;
  padding: clamp(2rem, 6vw, 4rem) clamp(1rem, 4vw, 2rem);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 4vw, 3rem);
}

@media (max-width: 700px) {
  .yhteys { grid-template-columns: 1fr; }
}

.yhteys__otsikko {
  margin: 0 0 .8rem;
  font-size: clamp(1.35rem, 3.4vw, 1.9rem);
  letter-spacing: -.01em;
}

.yhteys__teksti { margin: 0 0 .8rem; color: var(--vari-teksti-2); }
.yhteys__osoite { margin: 0 0 .4rem; font-weight: 600; }
.yhteys__aukiolo { margin: 0; color: var(--vari-teksti-2); }

/* статичная карта OSM — ссылка на Google Maps */
.yhteys__kartta { display: block; margin-top: 1.2rem; }

.yhteys__kartta img {
  width: 100%;
  height: auto;
  border-radius: 14px;
  border: 1px solid var(--vari-viiva);
}

.yhteys__lista {
  margin: 0 0 1.5rem;
  padding: 0;
  list-style: none;
  display: grid;
  gap: .55rem;
}

.yhteys__lista a { color: inherit; text-decoration: none; }

.yhteys__lista a:hover,
.yhteys__lista a:focus-visible { color: var(--vari-korostus-2); }

/* второстепенные действия — контурные кнопки под основной */
.yhteys__toissijaiset {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin-top: .8rem;
}

.nappi--toissijainen {
  padding: .45em 1.1em;
  font-size: .9rem;
  background: none;
  border: 1px solid var(--vari-korostus);
  color: var(--vari-korostus-2);
}

.nappi--toissijainen:hover,
.nappi--toissijainen:focus-visible {
  background: var(--vari-tausta-2);
  color: var(--vari-korostus-2);
}


/* ================= Футер ================= */
/* Содержимое собирает js/main.js: монограмма, реквизиты, политика
   своего языка и переключатель FI/EN. */

.alatunniste {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem 1.5rem;
  margin-top: clamp(2rem, 6vw, 4rem);
  padding: clamp(1.5rem, 4vw, 2.5rem) clamp(1rem, 4vw, 2.5rem);
  border-top: 1px solid var(--vari-viiva);
}

.alatunniste__logo img { height: 34px; width: auto; }

.alatunniste__yritys {
  margin: 0;
  color: var(--vari-teksti-2);
  font-size: .9rem;
}

.alatunniste__tietosuoja {
  color: var(--vari-teksti-2);
  font-size: .9rem;
}

.alatunniste__tietosuoja:hover,
.alatunniste__tietosuoja:focus-visible { color: var(--vari-korostus-2); }

.alatunniste__kielet {
  margin-left: auto;
  display: flex;
  gap: .15rem;
  font-size: .85rem;
}

.alatunniste__kielet a {
  padding: .15em .35em;
  color: var(--vari-teksti-2);
  text-decoration: none;
}

.alatunniste__kielet a[aria-current] { color: var(--vari-teksti); font-weight: 600; }


/* ================= Текстовые страницы ================= */
/* tietosuojaseloste.html и en/privacy.html. Статические, без модулей:
   main.js перепишет title метой главной, а его меню ведёт на якоря,
   которых здесь нет — поэтому мини-шапка своя. */

.tekstisivu__ylapalkki {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--header-korkeus);
  padding: 0 clamp(1rem, 4vw, 2.5rem);
  border-bottom: 1px solid var(--vari-viiva);
}

.tekstisivu__ylapalkki img { height: 38px; width: auto; }

.tekstisivu__kielet { display: flex; gap: .15rem; font-size: .85rem; }

.tekstisivu__kielet a {
  padding: .15em .35em;
  color: var(--vari-teksti-2);
  text-decoration: none;
}

.tekstisivu__kielet a[aria-current] { color: var(--vari-teksti); font-weight: 600; }

.tekstisivu {
  max-width: 720px;
  margin: 0 auto;
  padding: clamp(2rem, 6vw, 4rem) clamp(1rem, 4vw, 2rem);
}

.tekstisivu h1 {
  margin: 0 0 1.5rem;
  font-size: clamp(1.5rem, 4vw, 2rem);
  letter-spacing: -.01em;
}

.tekstisivu h2 { margin: 1.8rem 0 .4rem; font-size: 1.1rem; }

.tekstisivu p { margin: .35rem 0; color: var(--vari-teksti-2); }

.tekstisivu__takaisin {
  display: inline-block;
  margin-top: 2.5rem;
  color: var(--vari-korostus-2);
}