/* Dampfix - "We find the cause. Fix it once."
   Bundlesta puretut tyylit itsenaiseksi tiedostoksi. Ei template-moottoria,
   ei evalia -> tiukka CSP toimii. */

@font-face {
  font-family: "Archivo";
  src: url("/assets/fonts/Archivo-var.woff2") format("woff2");
  font-weight: 400 800;
  font-stretch: 75% 125%;
  font-style: normal;
  font-display: swap;
}

:root {
  --paper: #f4f1ea;
  --ink: #101d18;
  --ink-2: #3c4d45;
  --ink-3: #42544c;
  --green: #0b6b3a;
  --green-bright: #0f7a43;
  --gold: #d9a437;
  --dark: #101d18;
  --dark-2: #16261f;
  --dark-line: #2c3d35;
  --dark-quiet: #9db0a7;
  --focus: #0062b1;

  --gutter: clamp(16px, 4vw, 56px);
  --font: "Archivo", "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  text-wrap: pretty;
  overflow-x: clip;
}

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

a { color: inherit; }

a:focus-visible,
button:focus-visible,
input:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

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

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 40;
  background: var(--ink); color: var(--paper); padding: 12px 18px;
}
.skip-link:focus { left: 0; }

.eyebrow {
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 clamp(18px, 2.4vw, 28px);
}

.num {
  display: block;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.1em;
  color: var(--green-bright);
  margin-bottom: 14px;
}

.section-title {
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 clamp(28px, 4vw, 48px);
}

/* ------------------------------------------------------------------ nav -- */

.nav {
  position: relative;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 22px var(--gutter);
}

.wordmark {
  font-weight: 800;
  font-size: 23px;
  letter-spacing: -0.06em;
  text-decoration: none;
}

.wordmark__fix { color: var(--green-bright); }

.nav__links {
  margin-left: auto;
  display: flex;
  gap: 26px;
  font-size: 15px;
  font-weight: 600;
}

.nav__links a { text-decoration: none; }
.nav__links a:hover { color: var(--green-bright); }

.langswitch {
  display: flex;
  gap: 10px;
  margin-left: auto;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
}

.langswitch a { color: var(--ink-3); text-decoration: none; padding: 4px 2px; }
.langswitch a:hover { color: var(--ink); }

.langswitch a[aria-current="page"] {
  color: var(--ink);
  border-bottom: 2px solid var(--gold);
}

.nav__links { margin-left: 0; }

/* ----------------------------------------------------------------- napit -- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 17px;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  padding: 20px 28px;
}

.btn--solid { background: var(--green); color: var(--paper); }
.btn--solid:hover { background: #095930; }

.btn--outline { border: 1.5px solid var(--ink); color: var(--ink); padding: 19px 28px; }
.btn--outline:hover { background: var(--ink); color: var(--paper); }

.btn--ghost {
  border: 1.5px solid var(--ink);
  font-size: 15px;
  padding: 12px 18px;
}
.btn--ghost:hover { background: var(--ink); color: var(--paper); }

.btn--gold { background: var(--gold); color: var(--dark); }
.btn--gold:hover { background: #c8942c; }

/* ----------------------------------------------------------------- hero -- */

.hero { position: relative; }

/* Taustakuva h1:n takana. Vaalea seinakuva + vahva kalvo, jotta teksti
   sailyy luettavana (musteen kontrasti paperia vasten 14.9:1). */
.hero__bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

/* Kuva omassa kerroksessaan, jotta filter osuu vain siihen eika kalvoon. */
.hero__bg::before {
  content: "";
  position: absolute;
  inset: 0;
  /* WebP ensin, JPEG varalle. image-set valitsee selaimen mukaan. */
  background-image: image-set(
    url("/assets/photos/hero-wall.v3.webp") type("image/webp"),
    url("/assets/photos/hero-wall.v3.jpg") type("image/jpeg")
  );
  background-position: center 30%;
  background-size: cover;
  background-repeat: no-repeat;
  filter: contrast(1.15) saturate(0.9);
}

/* Vaakagradientti: vasen kolmannes umpinaista kermaa (H1 luettava), kuva
   voimistuu oikealle. Arvot mitattu: heikoin kontrasti tekstialueella
   62 %:n kohdalla on 5.24:1 (ink-2 mustaa taustapikselia vasten). */
.hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    var(--paper) 0%,
    var(--paper) 35%,
    rgba(244, 241, 234, 0.82) 62%,
    rgba(244, 241, 234, 0.35) 100%
  );
}

.hero__inner {
  position: relative;
  z-index: 2;
  max-width: 1280px;
  margin-inline: auto;
  padding-block: clamp(28px, 7vw, 104px) clamp(48px, 8vw, 120px);
  padding-inline: 24px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}

.hero h1 {
  font-weight: 800;
  font-size: clamp(46px, 7.6vw, 112px);
  line-height: 0.9;
  letter-spacing: -0.05em;
  margin: 0 0 clamp(18px, 2.2vw, 26px);
}

.hero h1 span { display: block; }
.hero h1 .accent { color: var(--green-bright); }

/* Chris 7.9.: h1:n alle tuli kategoriarivi. Kayttaja poisti sen alta molemmat
   kappaleet liiallisena tekstina, joten kategoriarivi kantaa nyt yksin valin
   h1:n ja hintakortin valissa: se sai poistetun leadin alamarginaalin,
   muuten kortti liimautuisi otsikkoon. */
.hero__meta {
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 clamp(26px, 3.4vw, 38px);
}

.hero__actions { display: flex; gap: 12px; flex-wrap: wrap; }

.hero__number { font-size: 15px; font-weight: 700; margin: 20px 0 0; }
.hero__number a { border-bottom: 2px solid var(--gold); padding-bottom: 2px; text-decoration: none; }

/* --------------------------------------------------------------- booking -- */
/* Ilman JS:aa: koko lomake nakyvissa yhtena, vaihe-chrome piilossa.
   JS:n kanssa: app.js poistaa .no-js juuresta ja ottaa vaiheet kayttoon. */

/* Oletus: JavaScript kaytossa. Ilman sita <noscript>-tyyli avaa koko
   lomakkeen yhdeksi sivuksi. Inline-skripti ei ole vaihtoehto, koska CSP
   sallii vain script-src 'self'. */
.booking { display: none; }
.booking.is-open { display: block; }
#bk-submit { display: none; }
.booking[data-step="4"] #bk-submit { display: inline-flex; }
.booking[data-step="4"] #bk-next { display: none; }
.booking[data-step="1"] #bk-back { visibility: hidden; }
.bk-step { display: none; }
.booking[data-step="1"] .bk-step[data-step="1"],
.booking[data-step="2"] .bk-step[data-step="2"],
.booking[data-step="3"] .bk-step[data-step="3"],
.booking[data-step="4"] .bk-step[data-step="4"] { display: block; }
.bk-otherdate__field,
#bk-date { display: none; }
.bk-alt.is-open .bk-otherdate__field,
.bk-alt.is-open #bk-date { display: block; }

.booking { padding-block: clamp(48px, 7vw, 104px); }

.booking__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: start;
}

.booking__title {
  font-weight: 800;
  font-size: clamp(28px, 3.4vw, 48px);
  line-height: 1.1;
  letter-spacing: -0.03em;
  margin: 0 0 clamp(20px, 3vw, 32px);
  max-width: 22ch;
}

/* --- edistymispalkki --- */
.booking__progress {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  margin: 0 0 clamp(24px, 3vw, 36px);
  padding: 0;
}

.booking__progress li {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  border-top: 2px solid rgba(16, 29, 24, 0.16);
  padding-top: 10px;
  flex: 1 1 8rem;
}

.booking__progress li.is-done,
.booking__progress li[aria-current="step"] {
  border-top-color: var(--gold);
  color: var(--ink);
}

.booking__progress .num { display: inline; color: inherit; margin: 0 6px 0 0; }

/* --- kentat --- */
.bk-step { border: 0; margin: 0; padding: 0; }
.bk-legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.bk-field { margin: 0 0 22px; }

.bk-field > label,
.bk-label,
.bk-choice > legend {
  display: block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 10px;
  padding: 0;
}

.bk-optional { text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--ink-2); }

.booking select,
.booking input[type="text"],
.booking input[type="tel"],
.booking input[type="email"],
.booking input[type="date"],
.booking textarea {
  width: 100%;
  max-width: 34rem;
  font: inherit;
  font-size: 16px;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid rgba(16, 29, 24, 0.28);
  border-radius: 0;
  padding: 13px 14px;
}

.booking textarea { resize: vertical; }

.booking select:focus-visible,
.booking input:focus-visible,
.booking textarea:focus-visible,
.booking button:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

.bk-choice { border: 0; margin: 0 0 22px; padding: 0; }

.bk-choice label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 9px 0;
  font-size: 16px;
  border-top: 1px solid rgba(16, 29, 24, 0.12);
  cursor: pointer;
  max-width: 34rem;
}

.bk-choice input { margin-top: 3px; accent-color: var(--green); flex: 0 0 auto; }

/* --- liukusaadin --- */
.bk-range__out {
  display: block;
  font-weight: 800;
  font-size: clamp(34px, 4vw, 52px);
  line-height: 1;
  letter-spacing: -0.03em;
  margin: 0 0 8px;
}

.bk-range input[type="range"] {
  width: 100%;
  max-width: 34rem;
  accent-color: var(--gold);
  cursor: ew-resize;
}

.bk-range__scale {
  display: flex;
  justify-content: space-between;
  max-width: 34rem;
  font-size: 12px;
  color: var(--ink-3);
}

/* --- paivachipit --- */
.bk-days { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; max-width: 34rem; }

.bk-day {
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  background: var(--paper);
  color: var(--ink);
  border: 1px solid rgba(16, 29, 24, 0.28);
  border-radius: 0;
  padding: 10px 12px;
  cursor: pointer;
}

.bk-day[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }

.bk-link {
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  background: none;
  border: 0;
  padding: 0;
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 0.25em;
  cursor: pointer;
}

.bk-help { font-size: 14px; color: var(--ink-3); margin: 0 0 18px; }
.bk-count { display: block; font-size: 12px; color: var(--ink-3); margin-top: 6px; }
.bk-consent { margin: 0 0 20px; max-width: 34rem; font-size: 15px; }
.bk-consent label { display: flex; gap: 10px; align-items: flex-start; }
.bk-consent input { margin-top: 4px; accent-color: var(--green); }

/* --- yhteenveto --- */
.bk-summary { margin: 0 0 24px; max-width: 34rem; }
.bk-summary > div {
  display: flex; justify-content: space-between; gap: 16px;
  border-top: 1px solid rgba(16, 29, 24, 0.16); padding: 12px 0; font-size: 15px;
}
.bk-summary dt { color: var(--ink-3); }
.bk-summary .bk-link { font-size: 13px; }

/* --- virheet, navigointi, honeypot --- */
.bk-error { color: #8a1c10; font-size: 15px; font-weight: 700; margin: 0 0 14px; min-height: 0; }
.bk-error:empty { margin: 0; }
.bk-error::before { content: ""; }
.bk-error:not(:empty)::before { content: "! "; }

.bk-nav { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 8px; }

.bk-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* --- valmis --- */
.bk-done { border: 1px solid rgba(16, 29, 24, 0.24); padding: clamp(20px, 3vw, 32px); max-width: 34rem; }
.bk-done__ref {
  font-weight: 800; font-size: clamp(24px, 2.6vw, 34px); letter-spacing: -0.02em; margin: 8px 0 14px;
}

/* --- sivupaneeli --- */
.feecard { border: 1px solid rgba(44, 61, 53, 0.18); background: var(--paper); padding: 18px 22px; margin-bottom: 16px; }
.feecard__figure { font-weight: 800; font-size: clamp(38px, 4vw, 54px); line-height: 1; letter-spacing: -0.04em; margin: 0; }
.feecard__note { font-size: 15px; line-height: 1.5; color: var(--ink-2); margin: 10px 0 0; }

.getbox { background: var(--dark); color: var(--paper); padding: clamp(20px, 3vw, 28px); }
.getbox__label {
  font-size: 13px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--dark-quiet); margin: 0 0 16px;
}
.getbox__list { list-style: none; margin: 0; padding: 0; }
.getbox__list li { position: relative; padding: 0 0 0 26px; margin-bottom: 14px; font-size: 15px; line-height: 1.5; }
.getbox__list li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--gold); font-weight: 700; }
.getbox__list li:last-child { margin-bottom: 0; }

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

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

/* ------------------------------------------------------- hintakortti -- */
/* Yksi kortti, ei kallistusta: yksinainen vino kortti nayttaa virheelta
   eika designilta. Ei pyoristyksia, kuten muuallakaan. */

.feestack {
  list-style: none;
  margin: 0 0 clamp(18px, 2.4vw, 26px);
  padding: 0;
  max-width: 26rem;
}

.feestack__card {
  background: var(--paper);
  border: 1px solid rgba(44, 61, 53, 0.18);
  padding: 18px 22px;
  box-shadow: 0 10px 28px rgba(16, 29, 24, 0.14);
  /* Oma kerros: ilman tata teksti resamplataan kesken kallistuksen ja sumenee. */
  will-change: transform;
  transition: transform 240ms cubic-bezier(0.2, 0, 0.2, 1),
              box-shadow 240ms cubic-bezier(0.2, 0, 0.2, 1);
}

/* Vain oikealla osoittimella: kosketuslaitteella hover jaisi paalle napautuksen
   jalkeen. Kortti ei ole linkki, joten ei kursorimuutosta eika fokusrengasta. */
@media (hover: hover) and (pointer: fine) {
  .feestack__card:hover {
    transform: translateY(-5px) rotate(-0.8deg);
    box-shadow: 0 18px 42px rgba(16, 29, 24, 0.20);
  }
}

.feestack .eyebrow { margin: 0 0 6px; }

.feestack__figure {
  font-weight: 800;
  font-size: clamp(44px, 5.5vw, 72px);
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--ink);
  margin: 0;
}

.feestack__cur {
  font-size: 0.55em;
  color: var(--gold);
  margin-right: 0.06em;
  vertical-align: 0.16em;
}

.feestack__note {
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-2);
  margin: 10px 0 0;
  max-width: 30ch;
}

@media (max-width: 600px) {
  .feestack__figure { font-size: clamp(40px, 12vw, 56px); }
}

/* ------------------------------------------------ mita kartoitus sisaltaa -- */
/* Natiivi <details>: toimii ilman JavaScriptia, on nappaimistolla
   kaytettava ja ruudunlukija ilmoittaa tilan ilman aria-kirjanpitoa. */

.includes { margin: 0 0 clamp(20px, 3vw, 28px); max-width: 34rem; }
.hero__number + .includes { margin-top: 24px; }

/* Kayttaja 7.9.: alleviivattu 15 px teksti ei nayttanyt klikattavalta.
   Summary on nyt koko palstan levyinen reunustettu palkki, jossa on nimio
   vasemmalla ja kulmamerkki oikealla. Se EI ole napin nakoinen: heron kolme
   oikeaa nappia ovat heti alapuolella, ja nelja samannakoista palkkia
   allekkain veisi painoarvon varsinaiselta CTA:lta. Siksi ohut reunus ja
   paperitausta, ja vasta hover tummentaa reunan ja tuo taustasavyn. */
.includes > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  width: 100%;
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
  background: var(--paper);
  border: 1.5px solid rgba(44, 61, 53, 0.35);
  padding: 16px 18px;
  cursor: pointer;
  list-style: none;
  transition: background-color 160ms ease, border-color 160ms ease;
}

.includes > summary::-webkit-details-marker { display: none; }

/* Kulmamerkki piirretaan kahdesta reunasta, jotta se seuraa currentColoria
   eika vaadi omaa varimaarittelya kumpaankin tilaan. */
.includes > summary::after {
  content: "";
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  margin-right: 4px;
  border-right: 2.5px solid currentColor;
  border-bottom: 2.5px solid currentColor;
  transform: translateY(-3px) rotate(45deg);
  transition: transform 200ms ease;
}

.includes[open] > summary::after { transform: translateY(2px) rotate(-135deg); }

@media (hover: hover) and (pointer: fine) {
  .includes > summary:hover {
    background-color: rgba(16, 29, 24, 0.06);
    border-color: var(--ink);
  }
}

.includes > summary:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .includes > summary,
  .includes > summary::after { transition: none; }
}

/* Paneeli kiinni palkkiin: yhteinen reuna, ei kahta viivaa vierekkain. */
.includes__panel {
  margin-top: 0;
  background: var(--paper);
  border: 1.5px solid rgba(44, 61, 53, 0.35);
  border-top: 0;
  padding: 18px 22px;
}

.includes__list { list-style: none; margin: 0 0 16px; padding: 0; }

.includes__list li {
  position: relative;
  padding: 0 0 0 26px;
  margin-bottom: 10px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-2);
}

.includes__list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--gold);
  font-weight: 700;
}

.includes__list li:last-child { margin-bottom: 0; }

.includes__foot { font-size: 15px; color: var(--ink); font-weight: 700; margin: 0 0 16px; }

@media (prefers-reduced-motion: reduce) {
  .includes > summary::before { transition: none; }

  /* Varjon syveneminen jaa, liike pois. */
  .feestack__card { transition: box-shadow 240ms cubic-bezier(0.2, 0, 0.2, 1); }
  .feestack__card:hover { transform: none; }
}

/* ------------------------------------------------------- ennen / jalkeen -- */

.compare {
  position: relative;
  z-index: 12;
  /* Grid on 1fr 1fr / align-items: center. Kun disclosure-paneeli kasvattaa
     vasenta saraketta, rivi korkenee ja keskitetty kortti valuisi alas.
     align-self: start ankkuroi sen riippumatta vasemman sarakkeen korkeudesta. */
  align-self: start;
  background: var(--dark);
  color: var(--paper);
  padding: 16px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.compare__frame {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--dark-2);
  touch-action: pan-y;
}

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

/* Pohjakerros = ENNEN (vaurio). Paalla JALKEEN-kuva, jota liuku rajaa:
   kahvan vasemmalla puolella korjattu seina, oikealla vaurio.

   TAUSTA. Pyyhkaisyliu'ussa on vaistamaton ristiriita: arvo 100 tarkoittaa
   aina "vasemman puolen kuva tayttaa ruudun". Joko raahaussuunta tai
   vasen-oikea-lukusuunta voi olla oikein pain, ei molemmat.
   Chris 7.9.: raahaus oli vaarin pain, AFTER-paadyn suuntaan veto paljasti
   vaurion. Ensin korjattiin labelit kuvan puoliskojen paalle (.compare__tag),
   jotta ne kuvaavat aluetta eivatka liu'un suuntaa. Kayttaja 7.9. valitsi
   lisaksi raahaussuunnan: kerrokset kaannettiin, joten oikealle vetaminen
   paljastaa nyt korjatun seinan. Hinta on se, etta korjattu on vasemmalla
   eli lukusuuntaa vastaan. Laput kertovat kummalla puolella ollaan.
   14.9.2026: range 0-100 % (kayttaja: liuku jai kesken, ei mennyt paatyyn).
   app.js haivyttaa lapun kun sen puoli kaventuu. */
.compare__clip {
  position: absolute;
  inset: 0;
  clip-path: inset(0 48% 0 0);
}

.compare__handle {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--gold);
  left: 52%;
  pointer-events: none;
}

.compare__controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.compare__controls input[type="range"] {
  flex: 1;
  width: 100%;
  min-width: 0;
  accent-color: var(--gold);
  cursor: ew-resize;
}

.compare__label {
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin: 0;
}

.compare__label--after { color: var(--gold); }

/* Labelit kuvan puoliskojen paalla. Umpinainen --dark-tausta, ei lapinakyvyytta,
   jotta kontrasti on sama pari joka on jo mitattu tummalla kortilla. */
.compare__tag {
  position: absolute;
  top: 10px;
  margin: 0;
  padding: 5px 9px;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: var(--dark);
  color: var(--paper);
  pointer-events: none;
  transition: opacity 120ms linear;
}

@media (max-width: 640px) {
  .compare__tag { font-size: 10px; padding: 4px 7px; letter-spacing: 0.1em; }
}

.compare__tag--after { left: 10px; color: var(--gold); }
.compare__tag--before { right: 10px; }



.compare__contact {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 12px;
  flex-wrap: wrap;
  border-top: 1px solid var(--dark-line);
  padding-top: 14px;
}

.compare__contact .compare__label { color: var(--dark-quiet); }
.compare__contact a { font-weight: 700; text-decoration: none; }

/* ---------------------------------------------------------------- video -- */

.video { padding-block: clamp(48px, 7vw, 104px); }

/* Sama kokoluokka kuin entinen .trust__title (poistettu 14.9.2026). */
.video__title {
  font-weight: 800;
  font-size: clamp(28px, 3.4vw, 48px);
  line-height: 1.1;
  letter-spacing: -0.03em;
  margin: 0 0 clamp(16px, 2vw, 24px);
  max-width: 22ch;
}

.video__body {
  font-size: clamp(17px, 1.4vw, 19px);
  color: var(--ink-2);
  margin: 0 0 clamp(24px, 3vw, 40px);
  max-width: 62ch;
}

.video__player {
  display: block;
  width: 100%;
  max-width: 900px;
  margin-inline: auto;
  aspect-ratio: 16 / 9;
  height: auto;
  background: var(--dark-2);
  /* sama kulma kuin hero-kortissa: se on suorakulmainen */
  border-radius: 0;
}

/* Sama kuvatekstityyli kuin hero-kortissa, mutta kermalla luettava savy. */
.video__note {
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--ink-3);
  margin: 14px auto 0;
  max-width: 900px;
}

/* ---------------------------------------------- palvelut ja vaiheet -- */

.services,
.how { padding: clamp(48px, 7vw, 104px) var(--gutter); }

.how { background: var(--dark); color: var(--paper); }
.how .section-title { color: var(--dark-quiet); }
.how .num { color: var(--gold); }

.services__list,
.how__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: clamp(28px, 4vw, 56px);
}

/* Palvelut ovat kortteja. Sama kasittely kuin heron hintalaatikossa
   (.feestack__card): paperitausta, ohut reunus, pehmea varjo ja sama
   nosto hoverissa, jotta korttityyli on sivulla yksi eika kaksi.
   Vaiheluettelo (.how) on tummalla taustalla eika saa korttia.

   TARKKUUSHUOMIO: naissa korteissa on data-reveal, ja esiintulosaanto
   [data-reveal].armed.in asettaa transform: none tarkkuudella (0,3,0).
   Pelkka .services__list li:hover on (0,2,1) eli haviaa, jolloin nostoa ei
   tapahtuisi lainkaan. Siksi molemmat saannot kirjoitetaan attribuutin
   kanssa: base (0,2,1) voittaa .armedin (0,2,0) transitionin ja
   hover (0,3,1) voittaa .armed.in:n transformin. */
.services__list li[data-reveal] {
  background: var(--paper);
  border: 1px solid rgba(44, 61, 53, 0.18);
  padding: 22px;
  box-shadow: 0 10px 28px rgba(16, 29, 24, 0.14);
  display: flex;
  flex-direction: column;
  will-change: transform;
  /* opacity 520 ms on esiintuloa varten, muuten se hyppaisi nakyviin */
  transition: opacity 520ms ease,
              transform 260ms cubic-bezier(0.2, 0, 0.2, 1),
              box-shadow 260ms cubic-bezier(0.2, 0, 0.2, 1);
}

@media (hover: hover) and (pointer: fine) {
  .services__list li[data-reveal]:hover {
    transform: translateY(-5px) rotate(-0.8deg);
    box-shadow: 0 18px 42px rgba(16, 29, 24, 0.20);
  }
}

/* Sama poikkeus kuin muulla sivulla: liikkeen vahennys ohittaa noston. */
@media (prefers-reduced-motion: reduce) {
  .services__list li[data-reveal] { transition: none; }
  .services__list li[data-reveal]:hover { transform: none; }
}

/* Kortit ovat eri korkuisia koska tekstit ovat eri pituisia. Ilman tata
   gridin rivit venyttaisivat kortit samaan korkeuteen ja teksti jaisi
   kellumaan ylareunaan. Venytys on tassa haluttu, joten vain valistys. */
.services__list .num { margin-bottom: 10px; }

.services__list h3,
.how__list h3 {
  font-weight: 800;
  font-size: clamp(22px, 2vw, 28px);
  letter-spacing: -0.02em;
  margin: 0 0 12px;
}

.services__list p { color: var(--ink-2); margin: 0; }
.how__list p { color: var(--dark-quiet); margin: 0; }

/* Kortit tarvitsevat tiiviimman valin kuin vapaasti kelluva teksti. */
.services__list { gap: clamp(20px, 2.4vw, 28px); }

/* --------------------------------------------------------------- hinnat -- */
/* 14.9.2026: hintaosio mainostoimistotyyliin. Iso otsikko ja vino vihrea
   "Refunded in full" -leima (sama kieli kuin heron kallistettu hintakortti),
   nelja hintaporrasta kortteina. Kortin ylareunan palkki kasvaa seinan
   pituuden mukaan, joten portaat lukee yhdella silmayksella. Viimeinen porras
   on tumma, koska sen hinta ei ole numero vaan pyynto.

   TARKKUUS: korteissa on data-reveal, joten saannot kirjoitetaan
   attribuutin kanssa kuten .services__list li[data-reveal]. */

.prices { padding-block: clamp(56px, 8vw, 120px); }

.prices__head {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 64px);
  align-items: end;
  margin-bottom: clamp(36px, 5vw, 64px);
}

.prices__title {
  font-weight: 800;
  font-size: clamp(36px, 5vw, 72px);
  line-height: 0.98;
  letter-spacing: -0.04em;
  margin: 0 0 18px;
  max-width: 14ch;
}

.prices__title::before {
  content: "";
  display: block;
  width: 56px;
  height: 5px;
  background: var(--gold);
  margin-bottom: clamp(18px, 2.4vw, 28px);
}

.prices__body {
  font-size: clamp(17px, 1.5vw, 21px);
  color: var(--ink-2);
  margin: 0;
  max-width: 40ch;
}

.prices__stamp {
  justify-self: end;
  margin: 0;
  max-width: 24rem;
  background: var(--green);
  color: var(--paper);
  padding: 26px 32px 28px;
  transform: rotate(3deg);
  box-shadow: 0 14px 34px rgba(11, 107, 58, 0.28);
  outline: 2px dashed rgba(244, 241, 234, 0.45);
  outline-offset: -9px;
}

.prices__stamp strong {
  display: block;
  font-weight: 800;
  font-size: clamp(28px, 3vw, 42px);
  line-height: 1.02;
  letter-spacing: -0.02em;
  margin-bottom: 6px;
}

.prices__stamp span {
  display: block;
  font-size: 16px;
  line-height: 1.45;
  color: rgba(244, 241, 234, 0.9);
}

.prices__list {
  margin: 0 0 clamp(32px, 4vw, 48px);
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(12px, 1.6vw, 20px);
}

.prices__tier[data-reveal] {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: clamp(170px, 16vw, 220px);
  padding: clamp(26px, 2.4vw, 32px) clamp(18px, 1.8vw, 26px) clamp(20px, 2vw, 26px);
  background: #fbfaf6;
  border: 1px solid rgba(44, 61, 53, 0.18);
  box-shadow: 0 10px 28px rgba(16, 29, 24, 0.10);
  overflow: hidden;
  will-change: transform;
  transition: opacity 520ms ease,
              transform 260ms cubic-bezier(0.2, 0, 0.2, 1),
              box-shadow 260ms cubic-bezier(0.2, 0, 0.2, 1);
}

/* Seinan pituus palkkina kortin ylareunassa. */
.prices__tier[data-reveal]::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 6px;
  width: var(--len, 20%);
  background: var(--green-bright);
}
.prices__tier:nth-child(1) { --len: 18%; }
.prices__tier:nth-child(2) { --len: 50%; }
.prices__tier:nth-child(3) { --len: 76%; }
.prices__tier:nth-child(4) { --len: 100%; }

@media (hover: hover) and (pointer: fine) {
  .prices__tier[data-reveal]:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 44px rgba(16, 29, 24, 0.18);
  }
}

.prices__tier dt {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--ink-2);
}

.prices__tier dd {
  margin: 20px 0 0;
  font-weight: 800;
  font-size: clamp(42px, 4.4vw, 64px);
  line-height: 1;
  letter-spacing: -0.045em;
  color: var(--ink);
  white-space: nowrap;
}

.prices__cur {
  font-size: 0.5em;
  color: var(--gold);
  margin-right: 0.04em;
  vertical-align: 0.42em;
}

.prices__tier--large[data-reveal] { background: var(--dark); border-color: var(--dark); }
.prices__tier--large[data-reveal]::before { background: var(--gold); }
.prices__tier--large dt { color: var(--dark-quiet); }
.prices__tier--large dd {
  color: var(--paper);
  font-size: clamp(24px, 2.2vw, 32px);
  letter-spacing: -0.02em;
  white-space: normal;
}

.prices__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px 40px;
  border-top: 1px solid rgba(16, 29, 24, 0.14);
  padding-top: clamp(22px, 3vw, 32px);
}

.prices__fine { max-width: 60ch; }
.prices__note { font-size: 16px; color: var(--ink-2); margin: 0 0 4px; }
.prices__vat { font-size: 14px; color: var(--ink-3); margin: 0; }

.prices__actions { display: flex; flex-wrap: wrap; gap: 12px; }

@media (max-width: 900px) {
  .prices__head { grid-template-columns: 1fr; align-items: start; }
  .prices__stamp { justify-self: start; transform: rotate(-2deg); }
  .prices__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 30rem) {
  .prices__tier[data-reveal] { min-height: 150px; }
  .prices__tier dd { font-size: clamp(34px, 11vw, 44px); }
  .prices__tier--large dd { font-size: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  .prices__tier[data-reveal] { transition: none; }
  .prices__tier[data-reveal]:hover { transform: none; }
}

/* -------------------------------------------------------------- closing -- */

.closing {
  background: var(--dark);
  color: var(--paper);
  padding: clamp(56px, 9vw, 130px) var(--gutter);
}

.closing__title {
  font-weight: 800;
  font-size: clamp(38px, 6vw, 84px);
  line-height: 0.95;
  letter-spacing: -0.04em;
  margin: 0 0 20px;
}

.closing__body {
  font-size: clamp(17px, 1.4vw, 20px);
  color: var(--dark-quiet);
  margin: 0 0 32px;
  max-width: 44ch;
}

.closing__actions { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }

.closing__tel {
  font-weight: 800;
  font-size: clamp(20px, 2.2vw, 30px);
  letter-spacing: -0.02em;
  text-decoration: none;
  border-bottom: 2px solid var(--gold);
}

.closing__or { font-size: 14px; color: var(--dark-quiet); margin: 24px 0 0; }

/* --------------------------------------------------------------- footer -- */

.footer {
  padding: clamp(36px, 5vw, 64px) var(--gutter);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: 24px;
  align-items: start;
  font-size: 14px;
  color: var(--ink-2);
}

.footer__meta { margin: 0; line-height: 1.9; }
.footer__legal { margin: 0; }
.footer__legal a,
.footer__meta a { text-decoration: underline; text-underline-offset: 0.25em; }

/* ------------------------------------------------------------ wa-float -- */

.wa-float {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 30;
  background: var(--green);
  color: var(--paper);
  font-weight: 700;
  font-size: 15px;
  padding: 14px 20px;
  text-decoration: none;
  box-shadow: 0 10px 28px rgba(16, 29, 24, 0.28);
  opacity: 0;
  pointer-events: none;
  transition: opacity 260ms ease;
}

/* Ilman JS:aa nappi on aina nakyvissa. */
.no-js .wa-float { opacity: 1; pointer-events: auto; }

/* ---------------------------------------------------------- animaatiot -- */

[data-reveal].armed {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 520ms ease, transform 520ms ease;
}

[data-reveal].armed.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-reveal].armed { opacity: 1; transform: none; transition: none; }
  .wa-float { transition: none; }
}

/* Sama palsta kuin herossa: sisalto 1232 px leveana ja keskitettyna, mutta
   osioiden taustat (.how, .closing) jaavat taysleveiksi. Sama laskenta kuin
   .hero__inner: max-width 1280 - 2 x 24 px padding = 1232 px sisaltopalsta. */
.nav,
.video,
.booking,
.prices,
.services,
.how,
.closing,
.footer {
  padding-inline: max(24px, calc((100% - 1232px) / 2));
}

/* Kreikka ja venaja ovat selvasti pidempia kuin englanti: sama clamp
   venyttaisi H1:n seitsemalle riville. Pienempi asteikko naille kielille. */
html[lang="el"] .hero h1,
html[lang="ru"] .hero h1 { font-size: clamp(34px, 4.4vw, 68px); }

html[lang="el"] .closing__title,
html[lang="ru"] .closing__title { font-size: clamp(30px, 4.2vw, 60px); }

/* -------------------------------------------------------- responsiivi -- */

@media (max-width: 900px) {
  .nav__links { display: none; }
  .hero__inner { grid-template-columns: 1fr; gap: 40px; align-items: start; }
  .hero__bg::before { background-position: center 40%; }
  /* Mobiilissa kuva ei saa vieda huomiota tekstilta */
  .hero__bg::after {
    background: linear-gradient(
      to bottom,
      var(--paper) 0%,
      var(--paper) 55%,
      rgba(244, 241, 234, 0.82) 100%
    );
  }
}

@media (max-width: 30rem) {
  .btn { font-size: 16px; padding: 17px 22px; }
  .btn--outline { padding: 16px 22px; }
  .wa-float { right: 14px; bottom: 14px; }
}

/* ------------------------------------------------------------------ faq -- */
/* 14.9.2026: Chrisin vastaukset hakukoneille ja vastauskoneille. Natiivi
   <details> kuten "See what a survey includes": toimii ilman JavaScriptia,
   ja vastausteksti on DOMissa valmiina, joten indeksoijat lukevat sen.
   Rivit erotetaan vain ylaviivalla; listan alareuna sulkee viimeisen. */

.faq {
  padding-block: clamp(48px, 7vw, 104px);
  padding-inline: max(24px, calc((100% - 1232px) / 2));
  border-top: 1px solid rgba(16, 29, 24, 0.12);
}

.faq__group + .faq__group { margin-top: clamp(32px, 4.4vw, 56px); }

.faq__group-title {
  font-weight: 800;
  font-size: clamp(20px, 2vw, 26px);
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin: 0 0 12px;
}

.faq__list { border-bottom: 1px solid rgba(16, 29, 24, 0.18); }

.faq__item { border-top: 1px solid rgba(16, 29, 24, 0.18); }

.faq__item > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 18px 0;
  font-size: clamp(16px, 1.3vw, 18px);
  font-weight: 700;
  line-height: 1.4;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
  transition: color 160ms ease;
}

.faq__item > summary::-webkit-details-marker { display: none; }

.faq__item > summary::after {
  content: "";
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  margin-right: 6px;
  border-right: 2.5px solid var(--green-bright);
  border-bottom: 2.5px solid var(--green-bright);
  transform: translateY(-3px) rotate(45deg);
  transition: transform 200ms ease;
}

.faq__item[open] > summary::after { transform: translateY(2px) rotate(-135deg); }

@media (hover: hover) and (pointer: fine) {
  .faq__item > summary:hover { color: var(--green); }
}

.faq__item > summary:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

.faq__item p {
  margin: 0 0 22px;
  max-width: 68ch;
  color: var(--ink-2);
}

/* Leveilla naytoilla ryhman otsikko omaan palstaansa, ettei 1232 px levea
   kysymysrivi jaa tyhjaksi oikealta. */
@media (min-width: 900px) {
  .faq__group {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2.6fr);
    gap: clamp(32px, 4vw, 64px);
    align-items: start;
  }
  .faq__group-title { margin: 0; padding-top: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .faq__item > summary,
  .faq__item > summary::after { transition: none; }
}

/* ------------------------------------------------ 14.9.2026 kierros 2 -- */

/* Hintakortti kallistettuna kuin painettu tarra (mainosten 150 EUR -laatikko).
   Lepoasento on jo vino; hover suoristaa hieman ja nostaa. Vihrea kehys
   erottaa sen muista paperikorteista. */
.feestack__card {
  border: 3px solid var(--green);
  transform: rotate(-3deg);
  transform-origin: 30% 50%;
}

@media (hover: hover) and (pointer: fine) {
  .feestack__card:hover { transform: translateY(-5px) rotate(-1.5deg); }
}

@media (prefers-reduced-motion: reduce) {
  .feestack__card,
  .feestack__card:hover { transform: rotate(-3deg); }
}

/* WhatsApp-numero kuvan alla: oma brandivari, ei vaisu tekstilinkki.
   Tumma teksti vihrealla, koska valkoinen #25D366:lla jaa alle 2:1 kontrastin. */
.compare__contact a.compare__wa {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #25d366;
  color: #062a14;
  font-weight: 800;
  font-size: clamp(17px, 1.5vw, 20px);
  letter-spacing: -0.01em;
  padding: 11px 18px 11px 14px;
  border-radius: 999px;
  text-decoration: none;
  box-shadow: 0 6px 18px rgba(37, 211, 102, 0.28);
  transition: background-color 160ms ease, transform 160ms ease;
}

.compare__wa-icon { flex: 0 0 auto; }

@media (hover: hover) and (pointer: fine) {
  .compare__contact a.compare__wa:hover { background: #1ebe5a; transform: translateY(-1px); }
}

.compare__contact a.compare__wa:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
}

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

/* Palvelukorttien kuvat reunasta reunaan kortin ylaosassa. */
.services__media {
  display: block;
  margin: -22px -22px 18px;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--dark-2);
}

.services__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}


/* 28.10.2026: kaksi palvelukorttia, keskitettyna. Leipateksti listoina, jotta
   asian nakee silmayksella (Chrisin toive). */
.services__list {
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 520px));
  justify-content: center;
}

.services__list p + .services__points { margin-top: 12px; }

.services__points {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
  color: var(--ink-2);
}

.services__points li {
  position: relative;
  padding-left: 22px;
}

.services__points li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.55em;
  width: 9px;
  height: 9px;
  background: var(--gold);
}

.video__steps {
  list-style: none;
  counter-reset: step;
  margin: 0 0 18px;
  padding: 0;
  display: grid;
  gap: 10px;
  max-width: 62ch;
}

.video__steps li {
  counter-increment: step;
  display: flex;
  align-items: baseline;
  gap: 14px;
  font-weight: 700;
}

.video__steps li::before {
  content: counter(step, decimal-leading-zero);
  color: var(--gold);
  font-weight: 800;
  min-width: 2ch;
}

/* 29.10.2026: survey refund only on work of EUR 1,000 or more. Must be impossible to miss. */
.feecard__cond {
  margin: 12px 0 0;
  padding: 10px 14px;
  background: #fbefd0;
  border-left: 5px solid var(--gold);
  font-size: 17px;
  font-weight: 800;
  line-height: 1.35;
  color: var(--ink);
}

.prices__stamp .prices__stamp-cond {
  font-size: clamp(20px, 2vw, 26px);
  font-weight: 800;
  line-height: 1.15;
  color: var(--paper);
  margin: 4px 0 10px;
  padding-bottom: 10px;
  border-bottom: 2px solid rgba(244, 241, 234, 0.45);
}

.prices__terms {
  margin: 0 0 clamp(32px, 4vw, 48px);
  padding: clamp(20px, 2.6vw, 30px) clamp(22px, 3vw, 36px);
  background: #fbefd0;
  border: 2px solid var(--gold);
  border-left-width: 10px;
}

.prices__terms-title {
  margin: 0 0 8px;
  font-size: clamp(22px, 2.4vw, 32px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.prices__terms-body {
  margin: 0;
  max-width: 62ch;
  font-size: clamp(17px, 1.4vw, 19px);
  line-height: 1.5;
  color: var(--ink);
}

/* 29.10.2026: email hint and link to the survey one-pager. */
.bk-hint { display: block; margin-top: 6px; font-size: 14px; line-height: 1.4; color: var(--ink-2); }
.bk-done__info { margin: 16px 0 0; font-size: 15px; }
.bk-done__info a { color: var(--green); font-weight: 700; }