/* ============================================================
   CULMEN 2.0
   Editorial, arkkitehtuuritoimiston mittakaava. Sama rakenne kuin
   1.0:ssa, mutta ilme rakentuu kolmesta asiasta:
     1. Valtava otsikkotypografia reunasta reunaan, tiivis riviväli
     2. Runsas tyhjä tila ja epäsymmetrinen kuvasommittelu
     3. Vähän värejä — turkoosi on ainoa, joka korottaa ääntään
   ============================================================ */

:root {
  --brown:  #6b4a34;                                   /* lopullinen ruskea tähän */
  --accent: #a9552f;                                   /* savi */
  --accent-2: #4fe06a;                                 /* vihreä — lukittu 25.8.2026 */
  --accent-2-deep: color-mix(in oklab, var(--accent-2) 52%, #06201d);

  --ink:      color-mix(in oklab, var(--brown) 14%, #080605);
  --ink-soft: color-mix(in oklab, var(--brown) 24%, #17110c);
  --ink-mute: color-mix(in oklab, var(--brown) 30%, #352c24);
  --paper:    color-mix(in oklab, var(--brown) 2%,  #fdfcfa);
  --paper-2:  color-mix(in oklab, var(--brown) 6%,  #f7f3ee);
  --paper-3:  color-mix(in oklab, var(--brown) 13%, #ece5dc);
  --line:     color-mix(in oklab, var(--brown) 26%, transparent);
  --line-2:   color-mix(in oklab, var(--brown) 55%, transparent);
  --dark:     color-mix(in oklab, var(--brown) 62%, #150d07);   /* tumma mutta selvästi ruskea */
  --accent-ink: #f7f3ec;
  --accent-soft: color-mix(in oklab, var(--accent) 9%, var(--paper));

  --display: 'Michroma', 'Arial Black', system-ui, sans-serif;
  --sans: 'Instrument Sans', -apple-system, 'Segoe UI', system-ui, sans-serif;
  --serif: var(--sans);

  --gut: clamp(1.1rem, 3.2vw, 2.6rem);                 /* sivumarginaali */
  --wrap: 1680px;                                      /* leveä — sisältö saa hengittää reunoihin */
  --ease: cubic-bezier(.16, 1, .3, 1);
  --r: 0px;                                            /* ei pyöristyksiä, editorial */
}

/* Värit on lukittu: savi (--accent) + vihreä (--accent-2).
   Prototyypin värivalitsin on poistettu. */

/* Perusta ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; display: flex; flex-direction: column;
  background: var(--paper); color: var(--ink);
  font-family: var(--sans); font-size: 17px; line-height: 1.5;
  letter-spacing: -0.008em; -webkit-font-smoothing: auto;
}
main { flex: 1; }
img, svg, video { max-width: 100%; display: block; }
a { color: inherit; }
::selection { background: var(--accent-2); color: var(--ink); }

/* Selaimen omat siniset korostukset pois.

   Sivuston paletissa ei ole sinistä lainkaan, joten jokainen sininen välähdys
   on selaimen oletus. Niitä on kaksi, ja kumpikin osuu logoon: kosketuksen
   korostus napautettaessa ja tarkennusrengas napautuksen jälkeen. Sivun
   vaihtuessa verho viivyttää siirtymää sen verran, että ne ehtii nähdä.

   `:where()` on nollatarkkuudella, joten jokainen komponentin oma
   tarkennustyyli voittaa tämän — tämä on vain se pohja jota ei ollut. */
:where(a, button, summary, [tabindex]) { -webkit-tap-highlight-color: transparent; }
:where(a, button, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--mark); outline-offset: 3px;
}

.wrap { width: min(calc(100% - var(--gut) * 2), var(--wrap)); margin-inline: auto; }
.bleed { width: calc(100% - var(--gut) * 2); margin-inline: auto; }

/* --- Typografia ----------------------------------------------------------
   Näyttötypografia on tarkoituksella liian iso: se on koko ilmeen ydin.
   Riviväli 0.82 ja negatiivinen välistys tekevät massasta tiiviin.        */
h1, h2, h3, h4 { margin: 0; font-weight: 400; }
.display, h1, h2 {
  font-family: var(--display);
  line-height: .84; letter-spacing: -0.045em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.3rem, 7.6vw, 8.6rem); }
h2 { font-size: clamp(2rem, 6.4vw, 7rem); }
h3 { font-family: var(--sans); font-size: clamp(1.05rem, 1.35vw, 1.28rem); font-weight: 600;
     letter-spacing: -0.02em; line-height: 1.24; }

/* Pienempi näyttökoko silloin kun otsikko on palstassa eikä reunasta reunaan */
.h-col { font-size: clamp(1.7rem, 3.2vw, 3.4rem); line-height: .95; }

p { margin: 0 0 1em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

.lede { font-size: clamp(1.05rem, 1.35vw, 1.34rem); line-height: 1.42; color: var(--ink-soft); max-width: 46ch; }
.measure { max-width: 62ch; color: var(--ink-soft); }

/* Pieni metateksti — sivuston toinen ääni */
.meta, .eyebrow {
  font-family: var(--sans); font-size: .78rem; line-height: 1.4;
  letter-spacing: .1em; text-transform: uppercase; font-weight: 600;
  color: var(--ink-soft); margin: 0;
}
.eyebrow { color: var(--accent-2-deep); display: flex; align-items: center; gap: .55rem; }
.eyebrow::before {
  content: ''; width: 15px; height: 8px; flex: none; background: var(--mark);
  clip-path: polygon(0 100%, 50% 0, 100% 100%, 50% 42%);
}

section { padding-block: clamp(4rem, 11vw, 12rem); }
.rule { height: 1px; background: var(--line); border: 0; margin: 0; }

/* --- Header --------------------------------------------------------------
   Ei palkkia, ei taustaa: pelkkä logo ja navigaatio kellumassa sivun päällä. */
.site-head { position: fixed; inset: 0 0 auto; z-index: 60; padding: clamp(1rem, 2vw, 1.7rem) 0; mix-blend-mode: normal; }
.site-head__in { display: flex; align-items: flex-start; gap: 2rem; }
.mark {
  display: block; width: clamp(96px, 9vw, 128px); aspect-ratio: 351.24 / 34.32;
  background: currentColor;
  -webkit-mask: url('../assets/culmen-logo.svg') no-repeat center / contain;
  mask: url('../assets/culmen-logo.svg') no-repeat center / contain;
}
.brand { display: block; color: var(--ink); text-decoration: none; flex: none; }
.nav { margin-left: auto; display: flex; flex-wrap: nowrap; justify-content: flex-end; gap: .1rem .95rem; }
.nav a {
  font-size: .8rem; letter-spacing: -0.005em; text-decoration: none; color: var(--ink);
  padding-bottom: 1px; border-bottom: 1px solid transparent;
}

.nav a[aria-current='page'] { border-bottom-color: var(--accent-2); }
.head-cta { display: none; }
.burger { display: none; }

/* Vaalea header tumman kuvan päällä */
.site-head.is-light .brand, .site-head.is-light .nav a { color: var(--paper); }

@media (max-width: 900px) {
  .nav { position: fixed; inset: 0; flex-direction: column; justify-content: center; align-items: flex-start;
         gap: .2rem; background: var(--paper); padding: var(--gut); display: none; max-width: none; }
  .nav.is-open { display: flex; }
  .nav a { font-family: var(--display); font-size: clamp(1.6rem, 8vw, 2.6rem); letter-spacing: -.04em; }
  .nav a::after { content: ''; }
  .burger { display: block; margin-left: auto; position: relative; z-index: 2; background: none; border: 0;
            font: inherit; font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; cursor: pointer; color: inherit; }
  .site-head.is-light .burger { color: var(--paper); }
}

/* --- Hero ----------------------------------------------------------------
   Koko ruudun kuva, nimi ison kokoisena kuvan päällä alavasemmalla.        */
.hero { position: relative; height: 100svh; min-height: 560px; overflow: clip; padding: 0; }
.hero__media { position: absolute; inset: 0; }
.hero__media img, .hero__media .ph { position: absolute; inset: -6% 0 0; width: 100%; height: 112%; object-fit: cover; }
.hero__media::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to top, rgb(0 0 0 / .55) 0%, rgb(0 0 0 / .12) 42%, rgb(0 0 0 / .28) 100%);
}
.hero__in {
  position: absolute; inset: auto 0 0; z-index: 2; color: var(--paper);
  padding-bottom: clamp(1.4rem, 3vw, 2.6rem);
}
.hero h1 { color: var(--paper); }
.hero__foot { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1.4rem; margin-top: clamp(1rem, 2vw, 1.8rem); }
.hero__lede { color: color-mix(in oklab, var(--paper) 86%, transparent); max-width: 34ch; font-size: clamp(.95rem, 1.1vw, 1.12rem); line-height: 1.45; }
.hero__meta { color: color-mix(in oklab, var(--paper) 72%, transparent); }
.hero__scroll { display: flex; align-items: center; gap: .5rem; font-size: .72rem; letter-spacing: .13em; text-transform: uppercase; color: color-mix(in oklab, var(--paper) 72%, transparent); }
.hero__scroll i { width: 13px; height: 7px; background: var(--accent-2); clip-path: polygon(0 0, 50% 100%, 100% 0, 50% 58%); animation: nudge 2.4s var(--ease) infinite; }
@keyframes nudge { 0%,100%{transform:translateY(0)} 50%{transform:translateY(4px)} }

/* --- Iso lausunto reunasta reunaan --------------------------------------- */
.statement { padding-block: clamp(5rem, 14vw, 15rem); }
.statement h2 { font-size: clamp(2.1rem, 8.4vw, 9.2rem); }
.statement__meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: 1.6rem 2rem; margin-bottom: clamp(3rem, 7vw, 6rem); }
.statement__meta p { max-width: 26ch; font-size: .88rem; color: var(--ink-soft); }
.statement__after { display: flex; flex-wrap: wrap; gap: 1.4rem 3rem; align-items: baseline; margin-top: clamp(2rem, 4vw, 3.5rem); }

/* --- Linkit ja napit ------------------------------------------------------ */
.btn {
  display: inline-block; position: relative; overflow: hidden;
  font: inherit; font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 600;
  padding: 1.05rem 2rem; border: 1px solid currentColor; background: none; color: inherit;
  text-decoration: none; cursor: pointer;
  background-image: linear-gradient(var(--accent-2), var(--accent-2));
  background-repeat: no-repeat; background-position: 50% 100%; background-size: 100% 0%;
  transition: background-size .55s var(--ease), color .35s var(--ease);
}
.btn:hover { background-size: 100% 100%; color: var(--ink); }
.btn__l { display: block; position: relative; overflow: hidden; }
.btn__l > span { display: block; transition: transform .55s var(--ease); }
.btn__l > span + span { position: absolute; inset: 0; transform: translateY(110%); }
.btn:hover .btn__l > span { transform: translateY(-110%); }
.btn:hover .btn__l > span + span { transform: translateY(0); }
.btn--solid { background-color: var(--ink); color: var(--paper); border-color: var(--ink); }
.btn--solid:hover { color: var(--ink); }
.btn--sm { padding: .75rem 1.3rem; font-size: .74rem; }

.link-arrow {
  display: inline-flex; align-items: baseline; gap: .5rem; text-decoration: none;
  font-size: .84rem; letter-spacing: .04em; text-transform: uppercase; font-weight: 600;
  padding-bottom: .35rem; border-bottom: 1px solid var(--line-2);
  transition: border-color .35s var(--ease), color .35s var(--ease);
}
.link-arrow::after { content: '↗'; transition: transform .4s var(--ease); }
.link-arrow:hover { color: var(--accent-2-deep); border-color: var(--accent-2); }
.link-arrow:hover::after { transform: translate(3px, -3px); }

/* --- Kuvapaikat ----------------------------------------------------------- */
.ph { position: relative; background: var(--paper-3); overflow: hidden; display: grid; place-items: center; }
.ph::after {
  content: ''; position: absolute; inset: 0; margin: auto;
  width: 26%; max-width: 110px; aspect-ratio: 2.6 / 1;
  background: color-mix(in oklab, var(--brown) 14%, transparent);
  clip-path: polygon(0 100%, 50% 0, 100% 100%, 50% 34%);
}
.ph--photo::after { display: none; }
.ph--photo img { width: 100%; height: 100%; object-fit: cover; }
.ph__tag {
  position: absolute; left: 0; bottom: 0; z-index: 2; font-size: .64rem;
  text-transform: uppercase; letter-spacing: .12em; font-weight: 600;
  padding: .4rem .6rem; background: color-mix(in oklab, var(--brown) 14%, var(--paper)); color: var(--ink-soft);
}
.ph--hero { aspect-ratio: 4 / 3; }
.ph--wide { aspect-ratio: 16 / 7; }
.ph--card { aspect-ratio: 4 / 3; }
.ph--square { aspect-ratio: 1; }

/* Muotokuvapaikka: beige pohja ja Culmenin C. Korvaa .ph:n harjamerkin,
   koska ihmisen kohdalla tunnus lukee paremmin kuin kuvion palanen. */
.ph--tunnus::after {
  width: 34%; max-width: 96px; aspect-ratio: 44.34 / 34.26; clip-path: none;
  background: color-mix(in oklab, var(--brown) 30%, transparent);
  -webkit-mask: url(../assets/culmen-c.svg) center / contain no-repeat;
  mask: url(../assets/culmen-c.svg) center / contain no-repeat;
}
.ph--tunnus img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: cover; }

/* Kuvateksti: nimi vasemmalle, mitta oikealle */
.figcap { display: flex; justify-content: space-between; gap: 1rem; margin-top: .7rem;
          font-size: .8rem; color: var(--ink-soft); }
.figcap span:last-child { color: var(--ink-mute); font-variant-numeric: tabular-nums; }

/* --- Epäsymmetrinen galleria ---------------------------------------------
   Kuvat eri kokoisina ja eri korkeuksilla. Keskellä oleva kasvaa suureksi
   kun se ohittaa ruudun keskikohdan (js hoitaa skaalan).                  */
.gal { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(2rem, 6vw, 7rem) clamp(1rem, 2.5vw, 2.5rem); align-items: start; }
.gal__item { position: relative; }
.gal__item figure { margin: 0; }
.gal__item .ph { transform-origin: center; will-change: transform; }
.gal__item:nth-child(4n + 1) { grid-column: 1 / span 6; }
.gal__item:nth-child(4n + 1) .ph { aspect-ratio: 4/3; }
.gal__item:nth-child(4n + 2) { grid-column: 8 / span 5; margin-top: clamp(3rem, 10vw, 10rem); }
.gal__item:nth-child(4n + 2) .ph { aspect-ratio: 3/4; }
.gal__item:nth-child(4n + 3) { grid-column: 2 / span 7; }
.gal__item:nth-child(4n + 3) .ph { aspect-ratio: 16/10; }
.gal__item:nth-child(4n + 4) { grid-column: 10 / span 3; margin-top: clamp(2rem, 6vw, 6rem); }
.gal__item:nth-child(4n + 4) .ph { aspect-ratio: 3/4; }
@media (max-width: 820px) {
  .gal { grid-template-columns: 1fr; }
  .gal__item { grid-column: 1 / -1 !important; margin-top: 0 !important; }
}

/* --- Luettelot ------------------------------------------------------------ */
.tick { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; font-size: 1rem; }
.tick li { position: relative; padding-left: 1.5rem; color: var(--ink-soft); }
.tick li::before { content: ''; position: absolute; left: 0; top: .62em; width: 11px; height: 6px;
  background: var(--mark); clip-path: polygon(0 100%, 50% 0, 100% 100%, 50% 45%); }
.tick strong { color: var(--ink); }

/* Numeroitu indeksilista — palvelut, vaiheet */
.index-list { border-top: 1px solid var(--line); }
.index-list__row {
  display: grid; grid-template-columns: 4.5rem minmax(0, 1.1fr) minmax(0, 1.3fr) auto;
  gap: 1rem clamp(1rem, 3vw, 3rem); align-items: baseline;
  padding: clamp(1.4rem, 3vw, 2.4rem) 0; border-bottom: 1px solid var(--line);
  text-decoration: none; color: inherit; position: relative;
  transition: color .35s var(--ease);
}
.index-list__row::before {
  content: ''; position: absolute; inset: auto 0 -1px; height: 1px; background: var(--accent-2);
  transform: scaleX(0); transform-origin: 0 50%; transition: transform .55s var(--ease);
}
a.index-list__row:hover::before { transform: scaleX(1); }
.index-list__n { font-family: var(--display); font-size: .78rem; letter-spacing: .04em; color: var(--accent-2-deep); }
.index-list__t { font-family: var(--display); font-size: clamp(1.15rem, 2.1vw, 2rem); letter-spacing: -.04em; line-height: 1.05; }
.index-list__d { font-size: .95rem; color: var(--ink-soft); }
.index-list__x { font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-mute); white-space: nowrap; }
@media (max-width: 900px) {
  .index-list__row { grid-template-columns: 3rem 1fr; }
  .index-list__d, .index-list__x { grid-column: 2; }
}

/* --- Faktat --------------------------------------------------------------- */
.facts { border-top: 1px solid var(--line); margin: 0; }
.facts div { display: flex; justify-content: space-between; gap: 2rem; padding: .95rem 0; border-bottom: 1px solid var(--line); font-size: 1rem; }
.facts dt { color: var(--ink-mute); margin: 0; }
.facts dd { margin: 0; text-align: right; }

/* --- Luvut ---------------------------------------------------------------- */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); gap: clamp(2rem, 5vw, 4rem); }
.stats b { display: block; font-family: var(--display); font-size: clamp(2.2rem, 5.5vw, 5rem);
  letter-spacing: -.05em; line-height: .9; color: var(--ink); margin-bottom: .8rem; font-weight: 400; white-space: nowrap; }
.stats span { font-size: .88rem; color: var(--ink-soft); display: block; max-width: 22ch; }

/* --- Palstat -------------------------------------------------------------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 6rem); align-items: start; }
.split--narrow { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
.split--wide { grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); }
/* Otsikko ja sen vieressä oleva ingressi lähtevät samalta riviltä. Perusrivi
   eikä yläreuna, koska otsikon rivikorkeus on .95 ja ingressin 1.5 — laatikoiden
   yläreunat kohdakkain jättäisivät tekstit eri korkeuksille. Vain siellä missä
   molemmat ovat tekstiä; kuvan kanssa tasaus tulisi väärästä kohdasta. */
.split--wide:has(> .lede) { align-items: baseline; }
@media (max-width: 900px) { .split--wide:has(> .lede) { align-items: start; } }
/* minmax(0, 1fr) eikä 1fr: pelkkä 1fr on minmax(auto, 1fr), jolloin sarake ei
   kutistu sisältönsä minimileveyden alle. 320 pikselissä iso otsikko työnsi
   sarakkeen 339 pikseliin ja rivimaski leikkasi lopun ruudun ulkopuolella. */
@media (max-width: 900px) { .split, .split--narrow, .split--wide { grid-template-columns: minmax(0, 1fr); } }

/* Kiireellinen huoltoasia ennen lomaketta, kun palstat menevät päällekkäin.
   Mitattu: laatikko oli 870 px lomakkeen alapuolella, eli vesivahingon kanssa
   soittava selasi koko lomakkeen läpi ennen kuin näki puhelinnumeron. Sama
   periaate kuin muuallakin sivustolla — puhelin ensin, lomake toissijaisena. */
@media (max-width: 900px) {
  .split > :has(> .panel--laatikko) { order: -1; }
}
.sticky { position: sticky; top: clamp(4.5rem, 9vw, 7rem); }
@media (max-width: 900px) { .sticky { position: static; } }

/* --- Kortit --------------------------------------------------------------- */
.grid-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: clamp(2rem, 4vw, 3.5rem) clamp(1.2rem, 2.5vw, 2.5rem); }
.card { display: flex; flex-direction: column; text-decoration: none; color: inherit; }
.card__media { position: relative; overflow: hidden; }
.card__media .ph { transition: transform .8s var(--ease); }
.card:hover .card__media .ph { transform: scale(1.03); }
.card__badge { position: absolute; top: 0; left: 0; z-index: 3; font-size: .64rem; text-transform: uppercase;
  letter-spacing: .12em; font-weight: 700; padding: .4rem .7rem; background: var(--accent-2); color: var(--ink); }
.card__body { padding-top: 1rem; display: flex; flex-direction: column; gap: .45rem; flex: 1; }
.card__kicker { font-size: .7rem; text-transform: uppercase; letter-spacing: .13em; font-weight: 600; color: var(--ink-mute); }
.card__title { font-family: var(--display); font-size: clamp(1.05rem, 1.5vw, 1.35rem); letter-spacing: -.035em; line-height: 1.1; }
.card__meta { display: flex; flex-wrap: wrap; gap: .3rem .9rem; font-size: .86rem; color: var(--ink-soft); }
.card__foot { margin-top: auto; padding-top: .9rem; display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  border-top: 1px solid var(--line); }
.card__price { font-size: 1.05rem; font-weight: 600; letter-spacing: -.02em; white-space: nowrap; }
.card__price small { font-weight: 400; font-size: .78rem; color: var(--ink-mute); }
.card__go { font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-mute); transition: color .35s var(--ease); }
.card:hover .card__go { color: var(--accent-2-deep); }

/* --- Suodattimet ---------------------------------------------------------- */
.filters { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; align-items: baseline; padding-bottom: 1.2rem; border-bottom: 1px solid var(--line); }
.chip { font: inherit; font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 600;
  background: none; border: 0; padding: .3rem 0; cursor: pointer; color: var(--ink-mute);
  border-bottom: 2px solid transparent; transition: color .3s var(--ease), border-color .3s var(--ease); }
.chip:hover { color: var(--ink); }
.chip[aria-pressed='true'] { color: var(--ink); border-bottom-color: var(--accent-2); }
.filters__count { margin-left: auto; font-size: .8rem; color: var(--ink-mute); }

/* --- Sivun otsikkoalue ---------------------------------------------------- */
.pagehead { padding-block: clamp(7rem, 15vw, 13rem) clamp(2rem, 4vw, 4rem); }
.pagehead h1 { margin-bottom: clamp(1.5rem, 3vw, 2.6rem); }
/* `align-items: center` on pakollinen, ei koriste. Kosketuslaitteilla
   murulinkit ovat 44 px korkeita osumakohtia ja niiden teksti on keskitetty,
   mutta erotinmerkit venyvät samaan korkeuteen ilman keskitystä — jolloin
   kauttaviivat jäävät laatikkonsa yläreunaan ja näyttävät vinoilta. */
.crumbs { font-size: .72rem; letter-spacing: .13em; text-transform: uppercase; color: var(--ink-mute);
  margin: 0 0 clamp(1.5rem, 4vw, 3rem);
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.crumbs a { text-decoration: none; }
.crumbs a:hover { color: var(--accent-2-deep); }

/* Kapealla ruudulla syvän sivun viimeinen murunen putosi omalle rivilleen ja
   toisti H1:n sanasta sanaan — sama teksti kahdesti allekkain. Polku riittää,
   koska sivun nimi lukee heti alla otsikkona.

   Vain kolmitasoisilla poluilla (5 lasta): kaksitasoisella jäljelle jäisi
   pelkkä "Etusivu", mikä ei ole murupolku vaan yksinäinen linkki. */
@media (max-width: 560px) {
  .crumbs:has(> :nth-child(5)) > :nth-last-child(-n+2) { display: none; }
}

/* --- Päivystyskaista ------------------------------------------------------
   Savenvärinen jakso heti heron alla. `.tone-savi` oli määritelty ja kontrastit
   mitattu mutta käyttämättä; se otettiin käyttöön 8.9.2026, koska sivun
   ensimmäinen sävynvaihto oli vasta 3787 pikselin kohdalla eli 40 % alaspäin.
   Sävynvaihtoja on nyt kolme, eli sallitun rajoissa. */
.paivystys { padding-block: clamp(2rem, 4vw, 3.2rem); }
.paivystys__in {
  display: grid; justify-items: center; gap: .9rem; text-align: center;
}
/* `.paivystys__in` on itse `.wrap`, joten sen lapset poimivat sivuston
   pystyrytmin marginaalit `gap`in päälle. Ks. sama ratkaisu `.deck__row`:ssa. */
.paivystys__in > * { margin-top: 0 !important; }
.paivystys__lisa { font-size: .95rem; line-height: 1.5; max-width: 42ch; }

/* Savitaustalla `--ink` on vaalea, joten `.btn--solid`in oletustäyttö olisi
   vaaleaa vaalealla. `--ink-static` on aina tumma. */
.paivystys .btn--solid {
  background-color: var(--ink-static); color: var(--paper); border-color: var(--ink-static);
}
@media (max-width: 620px) {
  .paivystys__in { justify-items: stretch; }
  .paivystys__nappi { text-align: center; }
}

/* --- Paneelit ------------------------------------------------------------- */
.panel { border-top: 1px solid var(--ink); padding-top: 1.4rem; }
.panel--accent { border-top-color: var(--accent-2); border-top-width: 3px; }
.svc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: clamp(2rem, 4vw, 4rem); }
.svc { display: flex; flex-direction: column; gap: .7rem; text-decoration: none; color: inherit;
       border-top: 1px solid var(--line); padding-top: 1.3rem; position: relative; }
.svc::before { content: ''; position: absolute; inset: 0 0 auto; height: 3px; background: var(--accent-2);
  transform: scaleX(0); transform-origin: 0 50%; transition: transform .55s var(--ease); }
a.svc:hover::before { transform: scaleX(1); }
.svc__n { font-family: var(--display); font-size: .74rem; letter-spacing: .06em; color: var(--accent-2-deep); }
.svc p { font-size: .97rem; color: var(--ink-soft); }
.svc ul { margin: 0; padding-left: 1.05rem; font-size: .92rem; color: var(--ink-soft); display: grid; gap: .2rem; }
.svc .link-arrow { margin-top: auto; padding-top: 1rem; align-self: flex-start; border-bottom: 0; }

.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: clamp(1.6rem, 3vw, 3rem); }
.steps > div { border-top: 3px solid var(--accent-2); padding-top: 1.1rem; counter-increment: s; }
.steps { counter-reset: s; }
.steps > div::before { content: '0' counter(s); display: block; font-family: var(--display); font-size: .74rem;
  color: var(--accent-2-deep); margin-bottom: .6rem; }
.steps h3 { margin-bottom: .35rem; }
.steps p { font-size: .93rem; color: var(--ink-soft); }

/* --- Lomake --------------------------------------------------------------- */
.form { display: grid; gap: 1.5rem; }
.form label { display: grid; gap: .5rem; font-size: .72rem; letter-spacing: .13em; text-transform: uppercase;
  font-weight: 600; color: var(--ink-mute); }
.form input, .form textarea, .form select {
  font: inherit; font-size: 1.05rem; color: var(--ink); padding: .5rem 0;
  border: 0; border-bottom: 1px solid var(--line-2); background: none; letter-spacing: -.01em;
}
.form input:focus, .form textarea:focus, .form select:focus { outline: 0; border-bottom-color: var(--accent-2); border-bottom-width: 2px; }
.form textarea { min-height: 90px; resize: vertical; }
.form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
@media (max-width: 600px) { .form .row { grid-template-columns: 1fr; } }
.form .consent { grid-template-columns: auto 1fr; align-items: start; gap: .7rem; text-transform: none;
  letter-spacing: 0; font-size: .88rem; font-weight: 400; color: var(--ink-soft); }

/* --- Tumma kaista --------------------------------------------------------- */
.band-dark { background: var(--ink); color: var(--paper); }
.band-dark .lede, .band-dark p, .band-dark .measure { color: color-mix(in oklab, var(--paper) 74%, var(--ink)); }
.band-dark .meta, .band-dark .index-list__x, .band-dark .card__kicker { color: color-mix(in oklab, var(--paper) 52%, var(--ink)); }
.band-dark .eyebrow { color: var(--accent-2); }
.band-dark .rule, .band-dark .facts div, .band-dark .index-list, .band-dark .index-list__row,
.band-dark .svc, .band-dark .filters { border-color: color-mix(in oklab, var(--paper) 20%, transparent); }
.band-dark .stats b, .band-dark h2, .band-dark h3 { color: var(--paper); }
.band-dark .index-list__n, .band-dark .svc__n { color: var(--accent-2); }
.band-dark .tick li { color: color-mix(in oklab, var(--paper) 76%, var(--ink)); }
.band-dark .link-arrow { border-color: color-mix(in oklab, var(--paper) 35%, transparent); }
.band-dark .link-arrow:hover { color: var(--accent-2); border-color: var(--accent-2); }
.band-dark .btn { color: var(--paper); }
.band-dark .btn:hover { color: var(--ink); }
.cta-band { background: var(--ink); color: var(--paper); }
.cta-band .lede { color: color-mix(in oklab, var(--paper) 72%, var(--ink)); }
.cta-band .btn { color: var(--paper); }
.cta-band .btn:hover { color: var(--ink); }

/* --- Footer --------------------------------------------------------------- */
.site-foot { border-top: 1px solid var(--line); padding-block: clamp(3rem, 6vw, 5rem) 1.6rem; }
.foot-grid { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 2.5rem 2rem; }
@media (max-width: 860px) { .foot-grid { grid-template-columns: 1fr 1fr; } }
.foot-grid h4 { font-size: .72rem; letter-spacing: .13em; text-transform: uppercase; color: var(--accent-2-deep); margin-bottom: 1rem; font-weight: 600; }
.foot-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; font-size: .93rem; }
.foot-grid a { text-decoration: none; }
.foot-grid a:hover { color: var(--accent-2-deep); }
.foot-brand .mark { width: clamp(130px, 14vw, 190px); margin-bottom: 1.2rem; }
/* Päivystys alatunnisteessa: saatavilla joka sivulla mutta ei huutamassa.
   Asiakas ei halunnut sitä etusivun alkuun, joten tämä ja yhteystietosivun
   kiireellinen-laatikko ovat sen paikat. */
/* Sama koko kuin muillakin alatunnisteen riveillä: `.foot-grid ul` on 1rem,
   ja oma pienempi koko sai rivin näyttämään alaviitteeltä. */
.foot-paivystys { margin-top: .35rem; }
.foot-brand p { font-size: .92rem; color: var(--ink-soft); max-width: 34ch; }
.foot-bottom { margin-top: clamp(3rem, 6vw, 5rem); padding-top: 1.3rem; border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; font-size: .78rem; color: var(--ink-mute); }

/* --- Sivukartta ----------------------------------------------------------- */
.map-lvl { border-top: 1px solid var(--line); }
.map-row { display: grid; grid-template-columns: 3.5rem minmax(0, 1fr) auto; gap: .6rem 1.6rem;
  padding: 1.3rem 0; border-bottom: 1px solid var(--line); align-items: baseline; }
.map-row--sub { padding-left: clamp(1rem, 4vw, 4rem); }
.map-row__n { font-family: var(--display); font-size: .74rem; color: var(--accent-2-deep); }
.map-row__t { font-family: var(--display); font-size: clamp(1rem, 1.6vw, 1.35rem); letter-spacing: -.035em; }
.map-row--sub .map-row__t { font-family: var(--sans); font-weight: 600; font-size: 1.02rem; letter-spacing: -.01em; }
.map-row__d { grid-column: 2; font-size: .93rem; color: var(--ink-soft); }
.map-row__url { font-size: .74rem; color: var(--ink-mute); white-space: nowrap; }
.map-row__url a { text-decoration: none; border-bottom: 1px solid var(--line-2); }
@media (max-width: 700px) { .map-row { grid-template-columns: 2.4rem 1fr; } .map-row__url { grid-column: 2; } }
.tag { display: inline-block; font-size: .62rem; text-transform: uppercase; letter-spacing: .12em; font-weight: 700;
  padding: .2rem .5rem; border: 1px solid var(--line); color: var(--ink-mute); }
.tag--now { background: var(--accent-2); border-color: transparent; color: var(--ink); }

/* --- Kohdegalleria (kohde.html) ------------------------------------------- */
.gallery { display: grid; grid-template-columns: 2.1fr 1fr; gap: .5rem; align-items: stretch; }
.gallery__thumbs { display: grid; grid-template-rows: repeat(3, 1fr); gap: .5rem; }
.gallery__main { aspect-ratio: 3 / 2; }
@media (max-width: 760px) { .gallery { grid-template-columns: 1fr; }
  .gallery__thumbs { grid-template-rows: none; grid-template-columns: repeat(3, 1fr); }
  .gallery__thumbs .ph { aspect-ratio: 3 / 2; } }

.contact-person { display: flex; gap: 1rem; align-items: center; }
.contact-person .ph { width: 56px; height: 56px; flex: none; border-radius: 50%; }
.contact-person .ph::after { width: 44%; }
.contact-person b { display: block; font-size: 1rem; }
.contact-person span { font-size: .82rem; color: var(--ink-mute); }

.skip { position: absolute; left: -9999px; }
.skip:focus { left: 1rem; top: 1rem; z-index: 999; background: var(--ink); color: var(--paper); padding: .7rem 1rem; }

/* ============================================================
   LIIKE
   ============================================================ */
.js-motion [data-anim='up'], .js-motion [data-anim='media'] { opacity: 0; }
.js-motion [data-anim='stagger'] > * { opacity: 0; }
.js-motion .line-mask { display: block; overflow: hidden; padding: .26em 0 .40em; margin: -.26em 0 -.40em; }
.js-motion .line-mask > span { display: block; }
.js-motion .eyebrow::before { transform: scaleY(0); transform-origin: 50% 100%; }
.js-motion .eyebrow.is-in::before { transform: none; transition: transform .9s .12s var(--ease); }
.js-motion .rule { transform: scaleX(0); transform-origin: 0 50%; }
.js-motion .rule.is-in { transform: none; transition: transform 1.1s var(--ease); }

.hl { position: relative; isolation: isolate; display: inline-block; }
.hl::before { content: ''; position: absolute; z-index: -1; left: -.06em; right: -.06em; bottom: .06em; height: .3em;
  background: var(--accent-2); opacity: .55; transform: scaleY(0); transform-origin: 50% 100%; }
.js-motion .is-in .hl::before, .js-motion .hl.is-in::before { transform: scaleY(1); transition: transform .85s .28s var(--ease); }
html:not(.js-motion) .hl::before { transform: scaleY(1); }

.progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 90; background: var(--accent-2);
  transform: scaleX(0); transform-origin: 0 50%; pointer-events: none; }

/* Valikon kirjaimet nousevat harjaksi */
.nav a .ltr { display: inline-block; white-space: pre; transition: transform .5s var(--ease); transition-delay: calc((1 - var(--r)) * 45ms); }
.nav a:hover .ltr, .nav a:focus-visible .ltr { transform: translateY(calc(var(--r) * -7px)); }

/* --- Preloader: laskuri 0 → 100 ------------------------------------------- */
html.preloading, html.preloading body { background: var(--paper); }
html.preloading main, html.preloading .site-head, html.preloading .site-foot { opacity: 0; }
.pre { position: fixed; inset: 0; z-index: 300; background: var(--paper); color: var(--ink); }
.pre__num {
  position: absolute; left: var(--gut); bottom: clamp(1rem, 3vw, 2.4rem);
  font-family: var(--display); font-size: clamp(4rem, 17vw, 15rem); line-height: .8;
  letter-spacing: -.06em; font-variant-numeric: tabular-nums;
}
.pre__word { position: absolute; left: var(--gut); top: clamp(1rem, 2vw, 1.7rem); width: clamp(96px, 9vw, 128px); }
.pre__word .mark { width: 100%; color: var(--ink); }
.pre__line { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--accent-2);
  transform: scaleX(0); transform-origin: 0 50%; }
.pre__cap { position: absolute; right: var(--gut); bottom: clamp(1.2rem, 3vw, 2.6rem); text-align: right;
  font-size: .72rem; letter-spacing: .13em; text-transform: uppercase; color: var(--ink-mute); opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .js-motion [data-anim], .js-motion [data-anim='stagger'] > * { opacity: 1 !important; transform: none !important; }
  .js-motion .rule, .js-motion .eyebrow::before { transform: none !important; }
  .hl::before { transform: scaleY(1) !important; }
  .progress, .hero__scroll i { display: none; }
  .nav a .ltr, .btn__l > span { transition: none !important; transform: none !important; }
  .btn__l > span + span { display: none; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* --- Prototyyppipaneeli --------------------------------------------------- */

/* --- Korostus näyttökoossa ------------------------------------------------
   Isossa koossa paksu palkki näyttää yliviivaukselta. Ohuempi ja alempana. */
.statement .hl::before, h1 .hl::before { bottom: .012em; height: .17em; opacity: .6; }
.h-col .hl::before { bottom: .02em; height: .22em; }

/* --- Header: piiloutuu alas scrollatessa, palaa ylös ----------------------
   Kelluva header meni kuvien päälle ja jäi lukukelvottomaksi. Nyt se
   väistyy alaspäin mentäessä ja palaa taustan kanssa ylöspäin.            */
.site-head { transition: transform .55s var(--ease), background-color .35s var(--ease), border-color .35s var(--ease);
             border-bottom: 1px solid transparent; }
/* .is-hidden poistettu: header pysyy aina näkyvissä */
.site-head.is-solid { background: var(--paper); border-bottom-color: var(--line); }
.site-head.is-solid .brand, .site-head.is-solid .nav a, .site-head.is-solid .burger { color: var(--ink); }

/* ============================================================
   AUDITIN KORJAUKSET
   ============================================================ */

/* 1. HERO EI SAA LEIKATA OTSIKKOA -------------------------------------------
   Hero oli height:100svh + overflow:clip, joten pitkä otsikko leikkautui
   kaikilla leveyksillä (mitattu: 954/900, 1179/1112, 895/844).
   Nyt korkeus on minimi ja osio kasvaa sisällön mukaan.                     */
.hero {
  height: auto; min-height: 100svh;
  display: flex; align-items: flex-end;
  padding: clamp(6rem, 13vh, 9rem) 0 clamp(1.4rem, 3vw, 2.6rem);
}
.hero__in { position: relative; inset: auto; width: 100%; padding-bottom: 0; }
/* Vahvempi tummennus, jotta valkoinen teksti kantaa myös vaalean kuvan päällä */
.hero__media::after {
  background:
    linear-gradient(to top, rgb(0 0 0 / .68) 0%, rgb(0 0 0 / .3) 38%, rgb(0 0 0 / .1) 62%, rgb(0 0 0 / .35) 100%);
}

/* 2. TEKSTIN VÄLIT — yksi rytmi koko sivustolle -----------------------------
   Mitattu ennen: h2:n jälkeiset välit 0/3/6/11/19/39 px, h3:n 0/5/6/7/8/10/11.
   Ne tulivat HTML:n inline-marginaaleista. Nyt rytmi on täällä.            */
:root {
  --sp-1: .5rem;    /* tiukka pari */
  --sp-2: .95rem;   /* otsikko → oma leipä */
  --sp-3: 1.5rem;   /* eyebrow → otsikko, h2 → leipä */
  --sp-4: 2.4rem;   /* lohko → lohko */
  --sp-5: 3.6rem;   /* aihe → aihe */
}
/* Rytmisäännöt siirretty tiedoston loppuun, "PYSTYRYTMI — yksi lähde välille".
   Täällä oli ensimmäinen versio; kolme rinnakkaista järjestelmää antoi samalle
   parille eri välin eri paikoissa. */
main :is(p, ul, ol, dl, .lede, .measure) + :is(.btn, .link-arrow, .statement__after, .stats, .steps, .svc-grid, .index-list, .grid-cards) { margin-top: var(--sp-4); }

/* 3. TUMMAT KAISTAT: kaikki tekstit vaaleiksi -------------------------------
   Mitattu: .stats span 1.18:1 ja .cta-band .eyebrow 3.8:1 — molemmat
   tummaa ruskeaa tummalla pohjalla.                                        */
.band-dark, .cta-band {
  /* Tausta omasta tokenista, jotta --ink voidaan turvallisesti kääntää vaaleaksi */
  background: var(--dark); color: var(--paper);
  --ink: var(--paper);
  --ink-soft: color-mix(in oklab, var(--paper) 78%, var(--dark));
  --ink-mute: color-mix(in oklab, var(--paper) 60%, var(--dark));
  --line: color-mix(in oklab, var(--paper) 22%, transparent);
  --line-2: color-mix(in oklab, var(--paper) 42%, transparent);
  --accent-2-deep: var(--accent-2);
}
.band-dark .stats span, .cta-band .stats span,
.band-dark .figcap, .cta-band .figcap { color: var(--ink-soft); }
.cta-band .eyebrow, .band-dark .eyebrow { color: var(--accent-2); }

/* 4. KOSKETUSKOHTEET --------------------------------------------------------*/
.form input[type='checkbox'] { width: 22px; height: 22px; accent-color: var(--accent-2); flex: none; margin-top: .1rem; }
.chip { padding: .6rem 0; min-height: 44px; display: inline-flex; align-items: center; }
.filters { gap: .2rem 1.6rem; }

/* 5. TYPOGRAFIA — välistyksen alaraja ---------------------------------------*/
.display, h1, h2 { letter-spacing: -0.04em; }
h2 { font-size: clamp(2rem, 6vw, 6.4rem); }

/* Piilotettu otsikko ruudunlukijalle (otsikkotaso ei saa hypätä h1 → h3) */
.vh { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
      clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }

/* ============================================================
   PRELOADER v2 — pystypalkit nousevat alhaalta ylös
   Ruskea pohja, ohuet palkit kasvavat porrastetusti vasemmalta
   oikealle, sitten sanamerkki. Sama "kaikki nousee" -periaate
   kuin muualla, nyt koko ruudun kokoisena.
   ============================================================ */
html.preloading, html.preloading body { background: var(--brown); }
.pre { position: fixed; inset: 0; z-index: 300; background: var(--brown); overflow: hidden; }
.pre__bars { position: absolute; inset: 0; display: flex; align-items: flex-end; }
.pre__bars i {
  flex: 1; height: 100%; background: var(--dark);
  transform: scaleY(0); transform-origin: 50% 100%;
}
.pre__mid {
  position: absolute; inset: 0; display: grid; place-items: center;
  text-align: center; padding: var(--gut);
}
.pre__word { position: static; left: auto; top: auto; width: clamp(180px, 34vw, 460px); opacity: 0; margin-inline: auto; }
.pre__word .mark { width: 100%; color: var(--paper); }
.pre__cap {
  margin-top: clamp(.8rem, 2vw, 1.4rem); opacity: 0;
  font-size: .72rem; letter-spacing: .3em; text-transform: uppercase;
  color: color-mix(in oklab, var(--paper) 60%, transparent);
}
.pre__num {
  position: absolute; left: var(--gut); bottom: clamp(1rem, 3vw, 2.2rem);
  font-family: var(--display); font-size: clamp(2rem, 6vw, 5rem); line-height: .85;
  letter-spacing: -.05em; font-variant-numeric: tabular-nums;
  color: color-mix(in oklab, var(--paper) 55%, transparent);
}
.pre__line { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--accent-2);
  transform: scaleX(0); transform-origin: 0 50%; z-index: 2; }

/* ============================================================
   VAAKAGALLERIA — keskimmäinen kuva on suurin
   Kuvat vierivät vaakasuunnassa; ruudun keskellä oleva skaalautuu
   täyteen kokoon ja himmenee reunoja kohti. Vieritys hiirellä,
   raahaamalla, nuolinäppäimillä tai nuolipainikkeilla.
   ============================================================ */
.hgal { position: relative; }
.hgal__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: 1.5rem; margin-bottom: clamp(1.6rem, 3vw, 2.6rem); }
.hgal__nav { display: flex; gap: .5rem; }
.hgal__nav button {
  width: 52px; height: 52px; border: 1px solid var(--line-2); background: none; color: inherit;
  cursor: pointer; font-size: 1.05rem; line-height: 1; display: grid; place-items: center;
  transition: background-color .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
}
.hgal__nav button:hover:not(:disabled) { background: var(--accent-2); border-color: var(--accent-2); color: var(--ink); }
.hgal__nav button:disabled { opacity: .3; cursor: default; }

.hgal__track {
  display: flex; gap: clamp(1rem, 2.2vw, 2.2rem);
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: none; -ms-overflow-style: none;
  padding-inline: max(0px, calc((100% - clamp(300px, 34vw, 560px)) / 2));
  cursor: grab;
}
.hgal__track::-webkit-scrollbar { display: none; }
.hgal__track.is-dragging { cursor: grabbing; scroll-snap-type: none; }

.hgal__item {
  flex: 0 0 clamp(300px, 34vw, 560px); scroll-snap-align: center; margin: 0;
  transform-origin: center center;
}
.hgal__item .ph { aspect-ratio: 3 / 4; transition: filter .5s var(--ease); }
.hgal__item .figcap { opacity: .35; transition: opacity .5s var(--ease); }
.hgal__item.is-mid .figcap { opacity: 1; }

/* Keskimmäinen saa oman tilansa: skaala tulee JS:stä, väri täältä */
.hgal__item:not(.is-mid) .ph { filter: saturate(.55) brightness(.94); }

.hgal__count { font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-mute);
  font-variant-numeric: tabular-nums; margin-top: clamp(1.2rem, 2.5vw, 2rem); }
.hgal__count b { color: var(--ink); font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
  .hgal__track { scroll-behavior: auto; }
  .hgal__item { transform: none !important; }
  .hgal__item:not(.is-mid) .ph { filter: none; }
}

/* ============================================================
   KORJAUSKIERROS 2
   ============================================================ */

/* --- Otsikkokoot pienemmiksi ----------------------------------------------
   Näyttöotsikot olivat liian isoja luettavaksi ja palstassa oleva otsikko
   leikkautui ("Vuokrapalv…"). Palstaotsikko saa oman, pienemmän kokonsa,
   ja mikään otsikko ei voi enää vuotaa laatikkonsa yli.                    */
h1 { font-size: clamp(2rem, 5.6vw, 5.6rem); }
h2 { font-size: clamp(1.7rem, 4.4vw, 4.4rem); }
.hero h1 { font-size: clamp(2rem, 5.4vw, 5.8rem); }
.statement h2 { font-size: clamp(1.9rem, 5.4vw, 5.4rem); }
.h-col { font-size: clamp(1.5rem, 2.8vw, 2.9rem); line-height: .98; }

/* Palstassa oleva otsikko on aina palstakokoinen */
.split > * h2, .split > h2,
.split--narrow > * h2, .split--wide > * h2,
.svc-block h2, .panel h2, .pin__side h2 {
  font-size: clamp(1.5rem, 2.8vw, 2.9rem); line-height: .98;
}
/* Turvaverkko: pitkä sana ei koskaan leikkaudu */
h1, h2, h3, .display, .h-col, .index-list__t, .card__title, .map-row__t { overflow-wrap: anywhere; }

/* --- Korostuspalkki: alleviivaus, ei yliviivaus ---------------------------*/
.hl::before { bottom: .02em; height: .13em; opacity: .8; }
.statement .hl::before, h1 .hl::before { bottom: .015em; height: .11em; }

/* --- Lohkojen välit -------------------------------------------------------
   Otsikkosäännöt koskivat vain sisaruksia, joten lohkojen väliin ei jäänyt
   mitään kun inline-marginaalit poistettiin. Tämä hoitaa lohkorytmin.     */
section > .wrap > * + *,
section > .wrap > .split + *,
.svc-block > .split > * > * + .index-list { margin-top: var(--sp-5); }
section > .wrap > .split ~ .index-list,
section > .wrap > .split ~ .grid-cards,
section > .wrap > .split ~ .stats,
section > .wrap > .split ~ .steps,
section > .wrap > .split ~ .svc-grid,
section > .wrap > .split ~ .gal,
section > .wrap > .split ~ .map-lvl { margin-top: clamp(2.4rem, 5vw, 4rem); }
/* Palstan sisällä pienempi rytmi kuin lohkojen välillä. Tämä on vain
   oletus: typografiset parit alla voittavat sen molemmissa yhteyksissä.  */
.split > div > * + * { margin-top: var(--sp-3); }
.split > div > :is(p,ul,dl,.lede,.measure) + :is(.btn,.link-arrow,.panel,.stats,.tick) { margin-top: var(--sp-4); }

/* Typografiset parit: sama väli riippumatta siitä, kuinka syvällä ollaan.
   Ilman näitä lohko- ja palstasäännöt ylikirjoittivat tyyppikohtaisen
   rytmin, ja sama pari sai eri välin eri kohdissa sivustoa.              */
section > .wrap > :is(h1, h2, .h-col, .display) + *,
.split > div > :is(h1, h2, .h-col, .display) + *,
section > .wrap > :is(.eyebrow, .meta, .crumbs) + *,
.split > div > :is(.eyebrow, .meta, .crumbs) + *,
section > .wrap > :is(p, ul, ol, dl) + :is(p, ul, ol, dl),
.split > div > :is(p, ul, ol, dl) + :is(p, ul, ol, dl) { margin-top: var(--sp-3); }

section > .wrap > :is(h3, h4) + *,
.split > div > :is(h3, h4) + * { margin-top: var(--sp-2); }

section > .wrap > :is(.tick, .facts) + *, section > .wrap > * + :is(.tick, .facts),
.split > div > :is(.tick, .facts) + *, .split > div > * + :is(.tick, .facts) { margin-top: var(--sp-4); }

/* Lomake ja paneeli ovat omia lohkojaan, eivät kappaleita */
section > .wrap > * + :is(.form, .panel), .split > div > * + :is(.form, .panel),
section > .wrap > .form + *, .split > div > .form + * { margin-top: var(--sp-5); }
.pagehead > .wrap > * + * { margin-top: 0; }
.pagehead .crumbs + h1 { margin-top: 0; }

/* --- Beige kaista rytmiksi ------------------------------------------------
   Sama sävy kuin rakenne-sivun taustassa. Käytetään harkiten: se erottaa
   osiot toisistaan ilman että sivusta tulee raidallinen.                   */
.band-beige { background: var(--paper-2); }
.band-beige + .band-beige { padding-top: 0; }
.pagehead.band-beige { padding-bottom: clamp(3rem, 6vw, 5rem); }

/* --- Nappirivit -----------------------------------------------------------
   Napit olivat eri korkuisia ja eri linjassa, koska rivit oli tehty
   inline-tyyleillä eri tavoin. Nyt yksi komponentti.                       */
.actions { display: flex; flex-wrap: wrap; align-items: stretch; gap: .7rem 1.4rem; }
.actions > * { align-self: stretch; }
.actions > .link-arrow { align-self: center; }
.btn { display: inline-flex; align-items: center; justify-content: center; text-align: center; }
.statement__after, .hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.4rem 2.4rem; }

/* --- Preloader: pehmeämmät sävyt -----------------------------------------
   Musta harja ruskealla oli liian kova. Nyt lämmin hiekka pohjana ja
   brändin ruskea harjana — sama kuva, pehmeä kontrasti.                   */
html.preloading, html.preloading body { background: var(--paper-3); }
.pre { background: var(--paper-3); }
.pre__bars i { background: var(--brown); }
.pre__word .mark { color: var(--paper); }
.pre__num { color: color-mix(in oklab, var(--brown) 70%, #2a2018); }
.pre__cap { color: color-mix(in oklab, var(--paper) 78%, transparent); }
.pre__line { background: var(--accent-2); }

/* --- Beige laajemmin ------------------------------------------------------*/
.band-beige { background: var(--paper-2); }
.band-beige .ph { background: var(--paper-3); }
.band-beige + section:not(.band-beige):not(.band-dark):not(.cta-band) { padding-top: clamp(4rem, 9vw, 9rem); }

/* Nappirivin sisällä ei rytmimarginaaleja — ne rikkoivat napin korkeuden
   ja jättivät napit eri linjaan. Komponentti hoitaa välit itse.           */
.actions > *, .statement__after > *, .hero__actions > * { margin: 0 !important; }
.actions > .btn { height: auto; min-height: 0; }

/* --- Lukusarja ------------------------------------------------------------
   "1991" on paljon leveämpi kuin "2", joten kapea sarake antoi niiden
   törmätä. Leveämpi minimi ja isompi sarakeväli.                           */
.stats { grid-template-columns: repeat(auto-fit, minmax(min(100%, clamp(200px, 17vw, 260px)), 1fr));
         gap: clamp(2.4rem, 4vw, 3.4rem) clamp(2.5rem, 5vw, 5rem); }
.stats b { font-size: clamp(2rem, 4.4vw, 4rem); }
.stats > div { min-width: 0; }

/* Lukusarjan jälkeen tuleva linkki tarvitsee oman ilmansa */
.stats + *, .stats + .actions { margin-top: clamp(2.4rem, 5vw, 4rem) !important; }


/* ============================================================
   PRELOADER v3 — terävä harja, ei laskuria
   ============================================================ */
html.preloading, html.preloading body { background: var(--dark); }
.pre { background: var(--dark); }
.pre__bars { display: none; }
.pre__ridge { position: absolute; inset: 0; background: var(--paper-3); }
.pre__num { display: none; }
.pre__mid { position: absolute; inset: 0; display: grid; place-items: center; padding: var(--gut); text-align: center; }
.pre__word { position: static; width: clamp(180px, 32vw, 440px); opacity: 0; margin-inline: auto; }
.pre__word .mark { width: 100%; color: var(--dark); }
.pre__cap { margin-top: clamp(.8rem, 2vw, 1.4rem); opacity: 0; font-size: .72rem; letter-spacing: .3em;
  text-transform: uppercase; color: color-mix(in oklab, var(--dark) 62%, transparent); }
.pre__line { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--accent-2);
  transform: scaleX(0); transform-origin: 0 50%; z-index: 3; }

/* Tummat pinnat ruskeiksi mustan sijaan */
.band-dark, .cta-band { background: var(--dark); }
.btn--solid { background-color: var(--dark); border-color: var(--dark); }


/* ============================================================
   KORJAUSKIERROS 3
   ============================================================ */

/* --- Beige aina koko leveydeltä -------------------------------------------
   Beige oli .wrap-elementin sisällä, joten se näkyi vain palstan levyisenä.
   Tausta piirretään nyt pseudoelementillä, joka ulottuu ruudun reunoihin
   riippumatta siitä, kuinka syvällä rakenteessa lohko on.                  */
.band-beige { position: relative; background: none; }
.band-beige::before {
  content: ''; position: absolute; z-index: -1;
  top: 0; bottom: 0; left: 50%; width: 100vw; transform: translateX(-50%);
  background: var(--paper-2);
}
.band-beige > * { position: relative; }
/* Kun beige on osion sisällä, osio tarvitsee pystytilaa reunojen ympärille */
.svc-block.band-beige { padding-block: clamp(3rem, 7vw, 6rem); }

/* --- Header aina luettava -------------------------------------------------
   Kelluva header jäi kuvien ja kaistojen päälle sekavana. Heron ulkopuolella
   se saa aina oman taustansa.                                             */
.site-head.is-solid { background: var(--paper); border-bottom-color: var(--line); }
.site-head.is-solid .brand, .site-head.is-solid .nav a, .site-head.is-solid .burger { color: var(--ink); }

/* ============================================================
   PINNATTU OSIO — sisältö vaihtuu paikallaan scrollatessa
   ============================================================ */
.pin__stage { min-height: 100svh; display: flex; align-items: center; padding-block: clamp(4rem, 9vh, 7rem); }
.pin__grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.pin__side .h-col { margin-bottom: var(--sp-3); }
.pin__count { display: flex; align-items: baseline; gap: .4rem; margin-top: var(--sp-4);
  font-family: var(--display); font-size: .9rem; color: var(--ink-mute); }
.pin__count b { font-size: 2rem; color: var(--accent-2); font-weight: 400; line-height: 1; }
.pin__bars { display: flex; gap: .4rem; margin-top: var(--sp-2); }
.pin__bars i { height: 2px; flex: 1; background: var(--line); position: relative; overflow: hidden; }
.pin__bars i::after { content: ''; position: absolute; inset: 0; background: var(--accent-2);
  transform: scaleX(0); transform-origin: 0 50%; transition: transform .45s var(--ease); }
.pin__bars i.is-on::after { transform: scaleX(1); }

.pin__items { position: relative; min-height: clamp(300px, 42vh, 420px); }
.pin-item { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center;
  gap: var(--sp-2); border-top: 3px solid var(--accent-2); padding-top: var(--sp-3); }
.pin-item__n { font-family: var(--display); font-size: .74rem; letter-spacing: .06em; color: var(--accent-2); }
.pin-item h3 { font-family: var(--display); font-size: clamp(1.4rem, 2.6vw, 2.4rem);
  letter-spacing: -.04em; line-height: 1.02; font-weight: 400; }
.pin-item p { font-size: 1rem; color: var(--ink-soft); max-width: 46ch; }
.pin-item ul { margin: 0; padding-left: 1.1rem; font-size: .95rem; color: var(--ink-soft); display: grid; gap: .2rem; }

@media (max-width: 900px) {
  .pin__grid { grid-template-columns: 1fr; }
  .pin__items { position: static; min-height: 0; display: grid; gap: var(--sp-4); }
  .pin-item { position: static; opacity: 1 !important; transform: none !important; }
  .pin__count, .pin__bars { display: none; }
  .pin__stage { min-height: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .pin__items { position: static; min-height: 0; display: grid; gap: var(--sp-4); }
  .pin-item { position: static; opacity: 1 !important; transform: none !important; }
}

/* --- Pienimmät tekstikoot ylös --------------------------------------------
   Metateksti, valikko, kuvatekstit ja tagit olivat liian pieniä luettavaksi.
   Nostettu kauttaaltaan ja versaalien välistystä kevennetty.               */
.meta, .eyebrow { font-size: .88rem; letter-spacing: .08em; }
.nav a { font-size: 1rem; letter-spacing: 0; }
.figcap { font-size: .92rem; }
.card__kicker { font-size: .82rem; letter-spacing: .1em; }
.card__go { font-size: .84rem; letter-spacing: .09em; }
.card__badge { font-size: .74rem; letter-spacing: .09em; }
.index-list__n, .svc__n, .pin-item__n { font-size: .86rem; }
.index-list__x { font-size: .84rem; letter-spacing: .09em; }
.hgal__count { font-size: .88rem; }
.crumbs { font-size: .84rem; letter-spacing: .09em; }
.filters__count { font-size: .88rem; }
.chip { font-size: .88rem; letter-spacing: .07em; }
.tag { font-size: .74rem; letter-spacing: .09em; }
.ph__tag { font-size: .76rem; letter-spacing: .08em; }
.foot-grid h4 { font-size: .84rem; letter-spacing: .09em; }
.foot-grid ul { font-size: 1rem; }
.foot-bottom { font-size: .88rem; }
.form label { font-size: .84rem; letter-spacing: .09em; }
.map-row__n, .map-row__url { font-size: .84rem; }
.btn { font-size: .9rem; letter-spacing: .07em; }
.btn--sm { font-size: .84rem; }
.link-arrow { font-size: .92rem; letter-spacing: .03em; }
.hero__scroll { font-size: .84rem; letter-spacing: .09em; }
.pre__cap { font-size: .84rem; letter-spacing: .22em; }
.steps p, .svc ul { font-size: 1rem; }
.pin-item ul { font-size: 1rem; }


/* ============================================================
   SIVUN TAUSTA VAIHTUU SCROLLATESSA
   Aiemmin osiot olivat värilaatikoita sivun päällä. Nyt koko sivu
   — tausta, teksti, viivat, napit ja header — vaihtaa sävyä, kun
   osio saapuu ruudun mittalinjalle. Sävy tulee <html>-elementin
   luokasta (.tone-*), ja siirtymän hoitaa CSS-transitio, ei JS.
   Osio kertoo oman sävynsä attribuutilla data-bg.
   ============================================================ */

:root {
  --page-bg: var(--paper);
  --surface: var(--paper-3);                                  /* kuvapaikat ja pillerit */
  --ink-static: color-mix(in oklab, var(--brown) 14%, #080605); /* teksti turkoosin päällä */
  --btn-solid-bg: var(--dark);
  --btn-solid-ink: var(--paper);
}

.tone-paper { --page-bg: var(--paper); --surface: var(--paper-3); }
.tone-beige { --page-bg: var(--paper-2); --surface: color-mix(in oklab, var(--brown) 19%, #ece5dc); }

.tone-dark, .tone-savi {
  --ink: var(--paper);
  --ink-soft: color-mix(in oklab, var(--paper) 80%, var(--page-bg));
  --ink-mute: color-mix(in oklab, var(--paper) 62%, var(--page-bg));
  --line:    color-mix(in oklab, var(--paper) 24%, transparent);
  --line-2:  color-mix(in oklab, var(--paper) 46%, transparent);
  --accent-2-deep: var(--accent-2);
  --surface: color-mix(in oklab, var(--paper) 13%, var(--page-bg));
  --btn-solid-bg: var(--paper);
  --btn-solid-ink: var(--dark);
}
.tone-dark { --page-bg: var(--dark); }
.tone-savi { --page-bg: color-mix(in oklab, var(--accent) 88%, #2a1109); }

html { background: var(--page-bg); }
body { background: transparent; }

/* Kaistat eivät enää maalaa itseään: ne vain kertovat sävynsä ------------- */
.band-dark, .cta-band, .band-beige { background: transparent; color: inherit; }
.band-beige::before { display: none; }
.band-dark, .cta-band {
  --ink: inherit; --ink-soft: inherit; --ink-mute: inherit;
  --line: inherit; --line-2: inherit; --accent-2-deep: inherit;
}
.band-dark .lede, .band-dark p, .band-dark .measure, .band-dark .tick li,
.band-dark .stats span, .cta-band .stats span, .band-dark .figcap, .cta-band .figcap,
.cta-band .lede { color: var(--ink-soft); }
.band-dark .meta, .band-dark .index-list__x, .band-dark .card__kicker { color: var(--ink-mute); }
.band-dark .stats b, .band-dark h2, .band-dark h3, .band-dark .btn, .cta-band .btn { color: var(--ink); }
.band-dark .rule, .band-dark .facts div, .band-dark .index-list, .band-dark .index-list__row,
.band-dark .svc, .band-dark .filters { border-color: var(--line); }
.band-dark .link-arrow { border-color: var(--line-2); }

/* Pinnat ja pillerit seuraavat sävyä --------------------------------------- */
.ph, .band-beige .ph { background: var(--surface); }
.ph__tag { background: var(--page-bg); color: var(--ink); }
.site-head.is-solid { background: var(--page-bg); }
@media (max-width: 900px) { .nav { background: var(--page-bg); } }

/* Turkoosin päällä teksti on aina tumma, oli sivu minkä sävyinen tahansa --- */
::selection { color: var(--ink-static); }
.card__badge, .tag--now { color: var(--ink-static); }
.btn:hover, .btn--solid:hover, .band-dark .btn:hover, .cta-band .btn:hover { color: var(--ink-static); }
.btn--solid { background-color: var(--btn-solid-bg); border-color: var(--btn-solid-bg); color: var(--btn-solid-ink); }
.skip:focus { background: var(--ink-static); color: var(--paper); }

/* Sävynvaihdon siirtymä. Viimeisenä tiedostossa, jotta komponenttien omat
   transitiot (napit, linkit) voittavat tämän eivätkä katoa.               */
*, *::before, *::after {
  transition: background-color .8s var(--ease), color .8s var(--ease), border-color .8s var(--ease);
}
html.preloading, html.preloading * { transition: none; }

/* --- Sävyjen kontrastikorjaukset (mitattu) --------------------------------
   Turkoosi teksti kärsii aina taustasta: se on kirkas mutta vaalea. Sävyjen
   mukana vaihtuu siis myös turkoosin syvyys.                              */
:root { --accent-2-deep: color-mix(in oklab, var(--accent-2) 45%, #06201d); }
.tone-dark, .tone-savi {
  --ink-soft: color-mix(in oklab, var(--paper) 88%, var(--page-bg));
  --ink-mute: color-mix(in oklab, var(--paper) 76%, var(--page-bg));
}
.tone-savi {
  --page-bg: color-mix(in oklab, var(--accent) 84%, #241009);
  --accent-2-deep: color-mix(in oklab, var(--accent-2) 72%, #ffffff);
}
.tone-savi .cta-band .eyebrow, .tone-savi .band-dark .eyebrow { color: var(--accent-2-deep); }

/* Pinnatun osion numerot: syvä turkoosi vaalealla, kirkas tummalla */
.pin-item__n, .pin__count b { color: var(--accent-2-deep); }
.tone-dark { --accent-2-deep: var(--accent-2); }
.tone-savi { --ink-mute: color-mix(in oklab, var(--paper) 82%, var(--page-bg)); }

/* --- Sävynvaihto rauhallisemmaksi -----------------------------------------
   Vaihtoja on nyt harvassa: sivu kulkee vaaleasta yhteen tummaan jaksoon ja
   päättyy saveen. Siirtymä on pitkä ja tasainen, jotta se luetaan valon
   muutoksena eikä välähdyksenä.                                           */
*, *::before, *::after {
  transition: background-color 1.25s cubic-bezier(.4, 0, .2, 1),
              color 1.25s cubic-bezier(.4, 0, .2, 1),
              border-color 1.25s cubic-bezier(.4, 0, .2, 1);
}
html.preloading, html.preloading * { transition: none; }
.tone-savi { --page-bg: color-mix(in oklab, var(--accent) 72%, #2a1a12); }


/* ============================================================
   KORTTIPAKKA — kuva, iso otsikko, avautuvat kortit
   Pinnattu osio oli palvelusivulla liikaa. Sama sisältö luetaan nyt
   yhdellä silmäyksellä: valokuva taustana, otsikko sen päällä ja
   kolme vaaleaa korttia kuvan alareunan yli. Kortti avautuu
   plus-napista, joten sivu pysyy lyhyenä.
   ============================================================ */
.deck { position: relative; padding: 0; overflow: clip; }
.deck__media { position: absolute; inset: 0 0 30% 0; }
.deck__media img { width: 100%; height: 100%; object-fit: cover; }
.deck__media::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgb(20 12 7 / .55) 0%, rgb(20 12 7 / .16) 38%, rgb(20 12 7 / .5) 100%);
}
.deck__head { position: relative; padding-block: clamp(5rem, 11vw, 9.5rem) clamp(5rem, 12vw, 10rem); color: var(--paper); }
.deck__head .eyebrow { color: var(--accent-2); }
.deck__h { font-size: clamp(2.1rem, 6.2vw, 6rem); color: var(--paper); margin: 0; }
.deck__lede { color: color-mix(in oklab, var(--paper) 86%, transparent); max-width: 46ch;
  margin-top: clamp(1rem, 2vw, 1.6rem); font-size: clamp(1rem, 1.25vw, 1.22rem); line-height: 1.45; }

.deck__row { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(.5rem, .9vw, 1rem); padding-bottom: clamp(4rem, 8vw, 7rem); align-items: start; }
.deck__card {
  position: relative; background: var(--paper);
  padding: clamp(1.3rem, 2vw, 2rem) clamp(1.3rem, 2vw, 2rem) clamp(4.8rem, 6vw, 5.6rem);
  min-height: clamp(210px, 21vw, 290px); display: flex; flex-direction: column;
  /* --sp-2 eikä .55rem: otsikko tarvitsee tekstistään enemmän ilmaa kuin
     8,8 px, ja tyhjä rivi kappaleiden välissä on 23 px — otsikkoväli jää
     silti pienemmäksi, mikä on oikea järjestys. */
  gap: var(--sp-2);
  /* Kortti on aina vaalea, myös tummalla sivulla — sävymuuttujat lukitaan */
  --ink: var(--ink-static);
  --ink-soft: color-mix(in oklab, var(--brown) 24%, #17110c);
  --ink-mute: color-mix(in oklab, var(--brown) 30%, #352c24);
  --line: color-mix(in oklab, var(--brown) 26%, transparent);
  --line-2: color-mix(in oklab, var(--brown) 55%, transparent);
  --accent-2-deep: color-mix(in oklab, var(--accent-2) 45%, #06201d);
  color: var(--ink);
}
.deck__n { font-family: var(--display); font-size: .82rem; letter-spacing: .04em; color: var(--accent-2-deep); }
.deck__card h3 { font-family: var(--display); font-size: clamp(1.2rem, 1.9vw, 1.85rem);
  letter-spacing: -.04em; line-height: 1.05; font-weight: 400; margin: 0; }
.deck__body { display: grid; grid-template-rows: 0fr; opacity: 0;
  transition: grid-template-rows .65s var(--ease), opacity .45s var(--ease); }
.deck__inner { overflow: hidden; min-height: 0; }
.deck__inner > * + * { margin-top: var(--sp-2); }
.deck__inner .actions { margin-top: var(--sp-3); }
.deck__inner p { font-size: .97rem; color: var(--ink-soft); }
.deck__card.is-open .deck__body { grid-template-rows: 1fr; opacity: 1; }

.deck__more {
  position: absolute; right: clamp(1rem, 1.6vw, 1.6rem); bottom: clamp(1rem, 1.6vw, 1.6rem);
  width: 52px; height: 52px; min-height: 52px; border: 0; border-radius: 50%; padding: 0; cursor: pointer;
  background: var(--accent); color: var(--accent-ink);
  transition: background-color .4s var(--ease), color .4s var(--ease), transform .55s var(--ease);
}
.deck__more::before, .deck__more::after { content: ''; position: absolute; inset: 0; margin: auto; background: currentColor; }
.deck__more::before { width: 17px; height: 2px; }
.deck__more::after  { width: 2px; height: 17px; }
.deck__more:hover { background: var(--accent-2); color: var(--ink-static); }
.deck__card.is-open .deck__more { transform: rotate(135deg); }

@media (max-width: 900px) {
  .deck__media { inset: 0 0 auto 0; height: 56%; }
  .deck__row { grid-template-columns: 1fr; }
  .deck__card { min-height: 0; }
}
/* reduced motion: sisalto avautuu edelleen plus-napista, vain liike jaa pois */
/* Korttirivi on oma komponenttinsa: lohkorytmi ei saa siirtää kortteja eri linjaan */
.deck__row > * { margin-top: 0 !important; }
.svc-block.band-dark, .svc-block.band-beige { padding-block: clamp(3rem, 7vw, 6rem); }

/* --- Sävynvaihto: väri vain niille, jotka sen itse asettavat ---------------
   Yleinen `color`-transitio joka elementille aiheutti ketjuviiveen: linkki
   peri väriä vanhemmalta, joka oli itse kesken siirtymän, joten alatunnisteen
   linkit jäivät tummiksi tummalla taustalla vielä sekunniksi. Nyt väriä
   animoivat vain ne elementit, joilla on oma color-sääntö — perijät
   seuraavat lähintä animoituvaa esi-isäänsä reaaliajassa.                 */
*, *::before, *::after {
  transition: background-color 1.25s cubic-bezier(.4, 0, .2, 1),
              border-color 1.25s cubic-bezier(.4, 0, .2, 1);
}
body,
.lede, .measure, .meta, .eyebrow, .crumbs, .figcap, .figcap span:last-child,
.brand, .nav a, .statement__meta p, .tick li, .tick strong,
.index-list__n, .index-list__d, .index-list__x, .facts dt,
.stats b, .stats span, .card__kicker, .card__meta, .card__price small, .card__go,
.chip, .filters__count, .svc p, .svc ul, .svc__n, .steps p, .steps > div::before,
.form label, .form input, .form textarea, .form select,
.foot-grid h4, .foot-brand p, .foot-bottom,
.map-row__n, .map-row__d, .map-row__url, .tag, .contact-person span,
.pin__count, .pin__count b, .pin-item__n, .pin-item p, .pin-item ul,
.deck__n, .deck__inner p, .ph__tag, .hgal__count, .btn--solid {
  transition: color 1.25s cubic-bezier(.4, 0, .2, 1),
              background-color 1.25s cubic-bezier(.4, 0, .2, 1),
              border-color 1.25s cubic-bezier(.4, 0, .2, 1);
}
html.preloading, html.preloading * { transition: none; }

/* --- Mobiilivalikon nappi näkyviin ----------------------------------------
   `.head-cta` oli piilotettu kaikilla leveyksillä, joten hampurilaisnappi ei
   näkynyt mobiilissa lainkaan eikä valikkoa saanut auki.                   */
@media (max-width: 820px) {
  .head-cta { display: block; margin-left: auto; }
}
@media (max-width: 900px) { .burger { min-height: 44px; padding: .6rem 0; } }


/* ============================================================
   KORTTIPAKAN LIIKE — hover ja ponnahdusikkuna
   Kortti oli staattinen laatikko. Nyt: savi nousee kortin pohjasta
   täyteen, teksti kääntyy vaaleaksi, plus pyörähtää ympäri ja kortti
   kohoaa. Klikkaus avaa paneelin, joka kasvaa ulos juuri siitä
   kortista — sama "nousee paikalleen" -logiikka syvyyssuunnassa.
   ============================================================ */
.deck__card { overflow: hidden; transition: transform .7s var(--ease); }
.deck__card::before {
  content: ''; position: absolute; inset: 0; z-index: 0; background: var(--accent);
  transform: scaleY(0); transform-origin: 50% 100%; transition: transform .7s var(--ease);
}
.deck__card > * { position: relative; z-index: 1; }
.deck__card:hover, .deck__card:has(:focus-visible) {
  transform: translateY(-8px);
  --ink: var(--paper);
  --ink-soft: color-mix(in oklab, var(--paper) 88%, var(--accent));
  --ink-mute: color-mix(in oklab, var(--paper) 74%, var(--accent));
  --line: color-mix(in oklab, var(--paper) 30%, transparent);
  --line-2: color-mix(in oklab, var(--paper) 52%, transparent);
  --accent-2-deep: color-mix(in oklab, var(--accent-2) 72%, #ffffff);
}
.deck__card:hover::before, .deck__card:has(:focus-visible)::before { transform: scaleY(1); }
.deck__card:hover .deck__n, .deck__card:has(:focus-visible) .deck__n { color: var(--accent-2-deep); }
.deck__card:hover .deck__more, .deck__card:has(:focus-visible) .deck__more {
  transform: rotate(180deg); background: var(--paper); color: var(--accent);
}
.deck__more:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 3px; }
/* Sisältö elää nyt ponnahdusikkunassa; kortissa se on vain lähdemateriaalia */
.deck__body { display: none; }

.pop { position: fixed; inset: 0; z-index: 250; display: grid; place-items: center; padding: clamp(1rem, 4vw, 3rem); }
.pop[hidden] { display: none; }
.pop__veil { position: absolute; inset: 0; background: color-mix(in oklab, var(--dark) 82%, transparent); }
.pop__panel {
  position: relative; width: min(660px, 100%); max-height: 84svh; overflow: auto;
  background: var(--paper); padding: clamp(1.6rem, 3.2vw, 2.8rem);
  /* Paneeli on aina vaalea, myös tummalla sivulla */
  --ink: var(--ink-static);
  --ink-soft: color-mix(in oklab, var(--brown) 24%, #17110c);
  --ink-mute: color-mix(in oklab, var(--brown) 30%, #352c24);
  --line: color-mix(in oklab, var(--brown) 26%, transparent);
  --line-2: color-mix(in oklab, var(--brown) 55%, transparent);
  --accent-2-deep: color-mix(in oklab, var(--accent-2) 45%, #06201d);
  color: var(--ink);
}
.pop__panel:focus { outline: none; }
.pop__panel > * + * { margin-top: var(--sp-2); }
.pop__panel h3 { font-family: var(--display); font-size: clamp(1.5rem, 3vw, 2.4rem);
  letter-spacing: -.04em; line-height: 1.05; font-weight: 400; margin-top: .5rem; }
.pop__panel p { color: var(--ink-soft); }
.pop__panel .actions { margin-top: var(--sp-3); }
.pop__panel .tick, .pop__panel .facts { margin-top: var(--sp-3); }
.pop__x {
  position: fixed; top: clamp(1rem, 2.4vw, 2rem); right: clamp(1rem, 2.4vw, 2rem);
  width: 52px; height: 52px; min-height: 52px; border: 1px solid color-mix(in oklab, var(--paper) 40%, transparent);
  border-radius: 50%; background: none; color: var(--paper); cursor: pointer; padding: 0;
  transition: background-color .4s var(--ease), color .4s var(--ease), transform .5s var(--ease);
}
.pop__x::before, .pop__x::after { content: ''; position: absolute; inset: 0; margin: auto;
  width: 18px; height: 2px; background: currentColor; }
.pop__x::before { transform: rotate(45deg); }
.pop__x::after  { transform: rotate(-45deg); }
.pop__x:hover { background: var(--accent); color: var(--paper); transform: rotate(90deg); }

@media (prefers-reduced-motion: reduce) {
  .deck__card, .deck__card::before, .deck__more, .pop__x { transition: none; }
}
/* Hoverin viimeistely: koko kortti on klikattava, sisältö kohoaa hieman
   täytön mukana ja verho on riittävän tumma, jotta paneeli erottuu. */
.deck__card { cursor: pointer; }
.deck__n, .deck__card h3 { transition: transform .7s var(--ease), color .4s var(--ease); }
.deck__card:hover .deck__n, .deck__card:has(:focus-visible) .deck__n { transform: translateY(-4px); }
.deck__card:hover h3, .deck__card:has(:focus-visible) h3 { transform: translateY(-4px); transition-delay: .06s; }
.pop__veil { background: color-mix(in oklab, var(--dark) 90%, transparent); }
/* Hoverin numerorivi: kalpea mintunvihreä kantaa saven päällä, mitattu 3,6 → yli 4,5 */
.deck__card:hover, .deck__card:has(:focus-visible) { --accent-2-deep: color-mix(in oklab, var(--accent-2) 26%, #ffffff); }
/* Plus-nappi takaisin oikeaan alanurkkaan: `.deck__card > *` -sääntö (z-index
   savitäytön päälle) oli antanut sillekin position: relative. */
.deck__card > .deck__more { position: absolute; z-index: 2; }
/* Kuvan alareuna kortin puoliväliin — kortit lepäävät kuvan päällä,
   eivät sen alapuolella. Mitattu: peitto 54 px → n. puolet kortista. */
.deck__media { inset: 0 0 22% 0; }
@media (max-width: 900px) { .deck__media { inset: 0 0 auto 0; height: 53%; } }

/* --- Kohdekortit: rivitys kuriin ------------------------------------------
   Leveällä ruudulla sarakkeita tuli viisi, jolloin kortin alarivi ahtautui ja
   "Katso kohde →" katkesi kesken. Nyt sarake on leveämpi ja alarivi rivittyy
   kokonaisena: hinta omalle rivilleen, linkki omalleen.                    */
.grid-cards { grid-template-columns: repeat(auto-fill, minmax(min(100%, clamp(290px, 24vw, 420px)), 1fr)); }
.card__foot { flex-wrap: wrap; row-gap: .5rem; }
.card__go { white-space: nowrap; }
.card__kicker { text-wrap: pretty; }
/* Kortit ja paneeli beigeksi: kirkkaan valkoinen oli liian kova kuvan päällä */
.deck__card, .pop__panel { background: var(--paper-3); }
/* Beigellä turkoosi tarvitsee lisää syvyyttä: mitattu 3,96 → yli 4,5 */
.deck__card, .pop__panel {
  --accent-2-deep: color-mix(in oklab, var(--accent-2) 35%, #06201d);
  /* Merkit lukitaan samoin: paneeli on aina vaalea, mutta sivu sen alla voi
     olla tumma, jolloin --mark peri kirkkaan vihreän eikä erottunut. */
  --mark: color-mix(in oklab, var(--accent-2) 26%, #06201d);
}


/* ============================================================
   PYSTYRYTMI — yksi lähde välille
   Selaimen omat marginaalit vuosivat rytmin läpi: kappaleen alaväli
   on 1em eli riippuu fonttikoosta, joten sama pari sai eri välin eri
   kohdissa (mitattu p → p: 15, 17, 28, 29, 30 px). Ne nollataan, ja
   väli tulee vain alla olevista säännöistä. Komponenttien omat
   luokkasäännöt (.foot-grid h4, .steps h3, .stats b …) voittavat
   yhä, koska ne ovat luokkia.
   ============================================================ */
main :is(h1, h2, h3, h4, h5, h6, p, ul, ol, dl, figure, blockquote),
.pop__panel :is(h1, h2, h3, h4, p, ul, ol, dl) { margin-top: 0; margin-bottom: 0; }

main :is(p, ul, ol, dl) + :is(p, ul, ol, dl) { margin-top: var(--sp-3); }
main :is(h3, h4) + * { margin-top: var(--sp-2); }
main :is(h1, h2, .h-col, .display) + * { margin-top: var(--sp-3); }
main :is(.eyebrow, .meta, .crumbs) + :is(h1, h2, h3, .h-col, .display) { margin-top: var(--sp-3); }
/* Luettelo saa saman ilman ympärilleen — ennen 38 px ylle ja 15 px alle */
main * + :is(.tick, .facts), main :is(.tick, .facts) + * { margin-top: var(--sp-4); }

/* Otsikon rivimaskeissa on em-mittainen padding + negatiivinen marginaali,
   jotta ä ja ö eivät leikkaudu. Negatiivinen marginaali vuoti ulos otsikosta
   ja söi seuraavan lohkon väliä sitä enemmän mitä isompi otsikko: 70 px:n
   otsikon jälkeen jäi 14 px, 45 px:n jälkeen 18 px, vaikka sääntö sanoi 24.
   flow-root pitää maskit otsikon sisällä, jolloin väli on aina sama.       */
main :is(h1, h2, h3, h4, .h-col, .display) { display: flow-root; }

/* Komponentit, jotka hoitavat välinsä itse flex/grid-gapilla, eivät ota
   rytmimarginaaleja päälle — muuten väli oli gap + marginaali.            */
main :is(.svc, .card__body, .pin-item, .form, .hero__in, .deck__card) > * { margin-top: 0; }
/* Palvelukortin oma gap samaan rytmiin muun sivuston kanssa (11 px → 15 px) */
.svc { gap: var(--sp-2); }
/* Varmistus: mikään tekstilohko ei jää nollavälille, vaikka sen ympärillä
   ei olisi omaa rytmisääntöä. Matala painoarvo, joten kaikki yllä voittaa. */
main * + :is(p, ul, ol, dl) { margin-top: var(--sp-3); }
/* Sivun otsikon ja ingressin väli samaksi kuin muualla (42 px → 24 px) */
.pagehead h1 { margin-bottom: var(--sp-3); }
/* Luettelon rivivälit samaksi kaikissa listoissa (3 px → 9 px) */
.svc ul { gap: .55rem; }
/* Otsikkoparit varmistuksen jälkeen uudelleen, jotta ne voittavat sen */
main :is(h1, h2, .h-col, .display) + * { margin-top: var(--sp-3); }
main :is(h3, h4) + * { margin-top: var(--sp-2); }
main :is(.eyebrow, .meta, .crumbs) + :is(h1, h2, h3, .h-col, .display) { margin-top: var(--sp-3); }
main * + :is(.tick, .facts), main :is(.tick, .facts) + * { margin-top: var(--sp-4); }
/* Header: logo ja valikko samalle pystykeskilinjalle (logo oli 8 px ylhäällä) */
.site-head__in { align-items: center; }
/* Lomakkeen otsikko ja ingressi omana lohkonaan kenttien yläpuolella */
.form-lead { max-width: none; }   /* otsikko saa koko leveyden, ingressillä on oma mittansa */
/* CTA-kaistan eyebrow: syvä sävy vaalealla, kirkas vain tummalla sivulla
   (kaista ei ole enää savenvärinen, joten kirkas vihreä jäi 1,63:een) */
.cta-band .eyebrow, .band-dark .eyebrow { color: var(--accent-2-deep); }

/* --- Iso lausunto ---------------------------------------------------------
   Rytmin yhtenäistäminen pudotti nappirivin välin 24 px:iin, mikä on liian
   vähän 90 px:n otsikon alle. Tämä lohko saa oman, isomman välinsä.       */
section > .wrap > .statement__after { margin-top: clamp(2.6rem, 5vw, 4.5rem); }

/* Yläpalstan sarakkeet samalle riville: laatikot alkoivat samalta korkeudelta,
   mutta versaalilapun ja leipätekstin ensimmäiset rivit eivät osuneet samalle
   linjalle. Perusviiva ratkaisee sen. */
.statement__meta { align-items: baseline; }
/* Paneelin otsikko: sama pieni koko kuin muillakin osioiden otsikoilla,
   mutta selvästi otsikko eikä irrallinen lappu */
.panel__t { font-family: var(--sans); font-size: 1rem; font-weight: 700; letter-spacing: -.01em; }
/* Nappirivi on lohko, ei kappale: sama väli kuin muillakin lohkoilla */
main * + :is(.actions, .statement__after, .hero__actions) { margin-top: var(--sp-4); }
section > .wrap > * + .actions, .split > div > * + .actions { margin-top: var(--sp-4); }


/* ============================================================
   KOSKETUSLAITTEET, MOBIILIVALIKKO JA PONNAHDUSIKKUNAN RYTMI
   ============================================================ */

/* --- Hover vain hiirelle -------------------------------------------------
   Kosketusnäytöllä :hover jää päälle napautuksen jälkeen, joten kortti jäi
   savenväriseksi ja napit täyttyneiksi. Kumotaan hover-tilat siellä missä
   hoveria ei ole; näppäimistön :focus-visible toimii yhä.               */
@media (hover: none) {
  .deck__card:hover { transform: none; }
  .deck__card:hover::before { transform: scaleY(0); }
  .deck__card:hover .deck__n, .deck__card:hover h3 { transform: none; }
  .deck__card:hover .deck__more { transform: none; background: var(--accent); color: var(--accent-ink); }
  .deck__card:hover { --ink: var(--ink-static);
    --ink-soft: color-mix(in oklab, var(--brown) 24%, #17110c);
    --ink-mute: color-mix(in oklab, var(--brown) 30%, #352c24);
    --line: color-mix(in oklab, var(--brown) 26%, transparent);
    --line-2: color-mix(in oklab, var(--brown) 55%, transparent);
    --accent-2-deep: color-mix(in oklab, var(--accent-2) 35%, #06201d); }
  .btn:hover { background-size: 100% 0%; color: inherit; }
  .btn--solid:hover { color: var(--btn-solid-ink); }
  .btn:hover .btn__l > span { transform: none; }
  .btn:hover .btn__l > span + span { transform: translateY(110%); }
  .link-arrow:hover { color: inherit; border-color: var(--line-2); }
  .link-arrow:hover::after { transform: none; }
  .card:hover .card__media .ph { transform: none; }
  .card:hover .card__go { color: var(--ink-mute); }
  a.svc:hover::before, a.index-list__row:hover::before { transform: scaleX(0); }
  .deck__more:hover { background: var(--accent); color: var(--accent-ink); }
  .pop__x:hover { background: none; color: var(--paper); transform: none; }
  .chip:hover { color: var(--ink-mute); }
  .foot-grid a:hover, .crumbs a:hover { color: inherit; }
}

/* --- Mobiilivalikko: isommat kohteet ja väljyys --------------------------
   Myöhempi ".nav a { font-size: 1rem }" -sääntö oli kaapannut mobiilikoon,
   joten linkit olivat 16 px ja lähes kiinni toisissaan.                  */
@media (max-width: 900px) {
  .nav { gap: .2rem; justify-content: center; }
  .nav a {
    font-family: var(--display); font-size: clamp(1.7rem, 7.5vw, 2.4rem);
    letter-spacing: -.04em; line-height: 1.1;
    display: block; width: 100%; padding: .55rem 0; min-height: 56px;
    border-bottom: 1px solid transparent;
  }
  .nav a[aria-current='page'] { border-bottom-color: transparent; color: var(--accent-2-deep); }
}

/* --- Ponnahdusikkunan rytmi ----------------------------------------------
   Paneeli on <main>:n ulkopuolella, joten sivuston pystyrytmi ei yltänyt
   sinne: otsikko oli kiinni leipätekstissä ja luettelo liian kaukana.   */
.pop__panel > * + * { margin-top: var(--sp-3); }
.pop__panel .deck__n + h3 { margin-top: var(--sp-3); }
.pop__panel h3 + p { margin-top: var(--sp-2); }
.pop__panel * + :is(.tick, .facts), .pop__panel :is(.tick, .facts) + * { margin-top: var(--sp-4); }
.pop__panel .meta { margin-top: var(--sp-2); }

/* --- Indeksilistan sarakkeet samaan linjaan -------------------------------
   Jokainen rivi on oma grid-elementtinsä, joten viimeisen sarakkeen sisältö
   venytti fr-sarakkeita eri tavoin joka rivillä ja kuvaustekstit alkoivat eri
   kohdasta. Kiinteä viimeinen sarake pitää raiteet samoina kaikilla riveillä. */
.index-list__row { grid-template-columns: 4.5rem minmax(0, 1.1fr) minmax(0, 1.3fr) 9rem; }
.index-list__x { text-align: right; }
@media (max-width: 900px) { .index-list__row { grid-template-columns: 3rem 1fr; } }

/* --- Mobiili: osiot erottumaan toisistaan -------------------------------
   Kapealla ruudulla palstat pinoutuvat, jolloin osion sisäiset välit olivat
   lähes yhtä suuret kuin osioiden väliset. Sivu luki yhtenä pötkönä.      */
@media (max-width: 900px) {
  section { padding-block: clamp(4.5rem, 14vw, 12rem); }
  .split, .split--narrow, .split--wide { row-gap: clamp(2.6rem, 9vw, 3.6rem); }
  /* Hiusviiva osioiden väliin siellä missä ei ole erillistä <hr>:ää */
  section + section > .wrap::before {
    content: ''; display: block; height: 1px; background: var(--line);
    margin-bottom: clamp(2.5rem, 8vw, 3.5rem);
  }
  .pagehead + section > .wrap::before, section.deck + section > .wrap::before { content: none; }
}

/* --- Mobiili: valintalista mahtuu ----------------------------------------
   "Asiani koskee" -valikon pisin vaihtoehto ei mahtunut kenttään, ja
   kosketuskohde oli matala.                                              */
@media (max-width: 820px) {
  .form select {
    width: 100%; max-width: 100%; font-size: 1rem; min-height: 48px;
    padding-right: 1.4rem; text-overflow: ellipsis;
  }
  .form input, .form textarea { font-size: 1rem; min-height: 44px; }
}

/* --- Korostuksen sananväli ------------------------------------------------
   SplitText pilkkoo `.hl`-korostuksen sanoiksi, ja koska `.hl` on
   inline-block, sen loppuun jäänyt välilyönti katosi: "vastaa puhelimeen"
   renderöityi muodossa "vastaapuhelimeen". pre-wrap säilyttää välin.      */
.hl { white-space: pre-wrap; }


/* ============================================================
   PEHMEÄMPI POHJA JA KOROSTUSKYNÄ
   ============================================================ */

/* --- Vaalea pohja beigeksi -------------------------------------------------
   Kirkas cream oli kova. Sivun perussävy on nyt sama beige kuin
   palvelusivun korteissa. Kuvapaikat ja pagehead syvennettiin, jotta ne
   erottuvat yhä pohjasta.                                                 */
.tone-paper {
  --page-bg: var(--paper-3);
  --surface: color-mix(in oklab, var(--brown) 22%, #ece5dc);
}
.tone-beige {
  --page-bg: color-mix(in oklab, var(--brown) 19%, #ece5dc);
  --surface: color-mix(in oklab, var(--brown) 27%, #ece5dc);
}
/* Turkoosi/vihreä teksti tarvitsee beigellä lisää syvyyttä (mitattu 3,96) */
:root { --accent-2-deep: color-mix(in oklab, var(--accent-2) 35%, #06201d); }
/* Korttien ja paneelin oma pohja säilyy — ne ovat kuvan tai tumman päällä */
.deck__card, .pop__panel { background: var(--paper-3); }
.site-head.is-solid { background: var(--page-bg); }

/* --- Korostus korostuskynäksi ---------------------------------------------
   Ohut alleviivaus oli enemmän viiva kuin korostus. Nyt veto kattaa koko
   rivin korkeuden ja pyyhkäistään vasemmalta oikealle kun rivi tulee
   näkyviin — sama nouseva rytmi kuin muuallakin, nyt vaakasuunnassa.     */
.hl::before {
  left: -.1em; right: -.1em; top: -.04em; bottom: -.02em; height: auto;
  opacity: .5; transform: scaleX(0); transform-origin: 0 50%;
}
.js-motion .is-in .hl::before, .js-motion .hl.is-in::before {
  transform: scaleX(1); transition: transform .95s .15s cubic-bezier(.22, 1, .36, 1);
}
html:not(.js-motion) .hl::before { transform: scaleX(1); }
.statement .hl::before, h1 .hl::before, .h-col .hl::before { bottom: -.02em; top: -.04em; height: auto; opacity: .45; }
@media (prefers-reduced-motion: reduce) { .hl::before { transform: scaleX(1) !important; } }

/* --- Leveän ruudun välit kuriin ------------------------------------------
   1920 px:n ruudulla osioiden väliin jäi 384 px ja lausunnon ympärille
   480 px, eli sivulla oli enemmän tyhjää kuin sisältöä. Yläraja alas;
   kapeilla ruuduilla arvot eivät muutu.                                   */
section { padding-block: clamp(4rem, 8vw, 7.5rem); }
.statement { padding-block: clamp(5rem, 10vw, 9.5rem); }
.pagehead { padding-block: clamp(6.5rem, 12vw, 10rem) clamp(2rem, 4vw, 3.5rem); }
@media (max-width: 900px) { section { padding-block: clamp(4.5rem, 14vw, 7.5rem); } }
/* Sävykohtaiset syvyydet uudelleen :root-säännön jälkeen (järjestys ratkaisee) */
.tone-dark { --accent-2-deep: var(--accent-2); }
.tone-savi { --accent-2-deep: color-mix(in oklab, var(--accent-2) 72%, #ffffff); }


/* --- Pohja: hitusen beigeen vivahtava valkoinen ---------------------------
   Beige oli liian tumma ja puhdas valkoinen liian kova. Perussävy on nyt
   --paper-2, ja pagehead erottuu siitä syvemmällä beigellä.              */
.tone-paper {
  --page-bg: var(--paper-2);
  --surface: color-mix(in oklab, var(--brown) 15%, #ece5dc);
}
.tone-beige {
  --page-bg: var(--paper-3);
  --surface: color-mix(in oklab, var(--brown) 22%, #ece5dc);
}

/* --- Harjamerkit erottumaan ----------------------------------------------
   Kirkas vihreä hukkui vaaleaan pohjaan pienenä muotona. Merkki ottaa nyt
   saman syvän sävyn kuin sen vieressä oleva teksti; tummalla kaistalla
   --accent-2-deep on kirkas, joten siellä se säilyy kirkkaana.           */
.eyebrow::before { background: var(--accent-2-deep); }
.steps > div, .pin-item { border-top-color: var(--accent-2-deep); }
/* Harjamerkki oli ohut viiva: paksumpi veto ja hitusen isompi */
.eyebrow::before { width: 17px; height: 10px; clip-path: polygon(0 100%, 50% 0, 100% 100%, 50% 58%); }
/* Tyhjä nosto ei piirrä vihreää laatikkoa (CMS:ssä kenttä saa jäädä tyhjäksi) */
.card__badge:empty { display: none; }


/* ============================================================
   APULUOKAT — entiset inline-tyylit
   CSP ei salli inline-tyylejä (style-src 'self'), joten sommittelun
   pikkusäädöt ovat luokkina. Generoitu kerran; jos lisäät uuden, kirjoita
   se tänne äläkä style-attribuuttiin — build kieltäytyy muuten.
   ============================================================ */
.u-soft { color: var(--ink-soft); }
.u-w56 { max-width: 56ch; }
.u-self-center { align-self: center; }
.u-dim { color: inherit; opacity: .8; }
.u-end { justify-self: end; }
.u-ar43 { aspect-ratio: 4/3; }
.u-ar34 { aspect-ratio: 3/4; }

/* Vaakakuva, ei pystykuva (8.9.2026). Pystysuhde teki paikasta 1440 px:n
   näytöllä 635 × 847 px eli lähes ruudun korkuisen, ja kavennettuna 340
   pikseliin se näytti kapealta liuskalta. Vaakakuva saa palstan leveyden ja
   jää silti matalaksi. */

/* Tyhjä kuvakenttä tuottaa <img>:n ilman src:ää, jolloin selain näyttää
   rikkinäisen kuvan ja alt-tekstin. Piilotetaan se, niin alta paljastuu
   Culmenin C — sama lopputulos kuin ennen kuin kuvakenttä oli olemassa. */
.ph--tunnus img:not([src]), .ph--tunnus img[src=""] { display: none; }
.u-w60 { max-width: 60ch; }
.u-nolink { text-decoration: none; }
.u-1 { font-size: .88rem; color: var(--ink-soft); }
.u-2 { font-size: .9rem; }
.u-3 { font-size: .94rem; color: var(--ink-soft); }
.u-4 { font-size: .95rem; }
.u-5 { gap: 2rem; align-items: center; }
.u-6 { font-size: .95rem; color: var(--ink-soft); }
.u-7 { font-size: 1rem; }
.u-8 { font-family: var(--serif); font-size: clamp(1.3rem,2vw,1.75rem); line-height: 1.3; color: var(--ink); }
.u-9 { font-size: .93rem; }
.u-10 { padding-block: 2.2rem clamp(3.5rem,7vw,6rem); }
.u-11 { padding-block: clamp(2.5rem,5vw,4rem); }
.u-12 { padding-block: clamp(4rem,10vw,8rem); }
.u-13 { font-size: clamp(2.2rem,5vw,3.8rem); }
.u-14 { font-family: var(--serif); font-size: clamp(1.4rem,2.2vw,1.9rem); line-height: 1.28; color: var(--ink); }
.u-15 { font-family: var(--serif); font-size: clamp(1.3rem,2vw,1.8rem); line-height: 1.3; color: var(--ink); }
.u-16 { aspect-ratio: 16/10; }
.u-17 { align-items: center; }
.u-18 { aspect-ratio: 4/5; }
.u-19 { border-bottom: 0; padding-bottom: 1.2rem; }
.u-20 { align-items: end; gap: 2rem; }
.u-21 { font-size: clamp(2.2rem,4.6vw,3.6rem); }
.u-22 { justify-self: end; text-align: right; }
.u-23 { font-family: var(--serif); font-size: clamp(2rem,3.4vw,2.8rem); line-height: 1; }
.u-24 { font-size: .85rem; color: var(--ink-soft); }
.u-25 { font-size: .82rem; color: var(--ink-soft); }
.u-26 { padding-block: clamp(2.6rem,5vw,4rem); }
.u-27 { gap: clamp(2rem,5vw,5rem); }
.u-28 { order: 2; }
.u-29 { display: grid; gap: .55rem; }
.u-30 { font-size: .8rem; color: var(--ink-soft); }
.u-31 { order: 1; }
.u-32 { font-size: clamp(1.7rem,2.6vw,2.2rem); }
.u-33 { margin-left: .4rem; }
/* Kaksi saraketta silloin kun niille on tilaa. Kiinteä "1fr 1fr" on
   minmax(auto, 1fr) kahdesti, eikä kutistu sisällön minimin alle: 320
   pikselissä se työnsi kaksi 153 pikselin saraketta 270 pikselin kaistaan. */
.u-34 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.u-35 { align-items: center; gap: 2.5rem; }
.u-36 { font-size: clamp(1.7rem,3vw,2.4rem); }
.u-37 { text-align: center; padding-block: clamp(2.5rem,5vw,4rem); }
.u-38 { justify-content: center; }
.u-39 { font-family: var(--serif); font-size: clamp(2.4rem,6vw,4.4rem); line-height: 1; }
.u-40 { padding-block: clamp(2rem,4vw,3.5rem); }
.u-41 { font-size: .97rem; color: var(--ink-soft); }
.u-42 { border-top: 0; }
.u-43 { align-self: center; width: 100%; }
.u-44 { scroll-margin-top: 90px; }
.u-45 { font-size: .88rem; opacity: .7; }
/* Alatunnisteen toinen kappale: väli luokkana, koska CSP ei salli
   inline-tyyliä myöskään JS:n lisäämässä markupissa. */
.foot-brand p + p { margin-top: .7rem; }

/* --- Kohteen kuvagalleria --------------------------------------------------
   Kuvat tulevat CMS:stä, joten määrää ei tiedetä etukäteen: ensimmäinen on
   pääkuva ja loput asettuvat sen alle kolmen ruudukkoon. Kaikki kuvat ovat
   samaa komponenttia, jotta yksi lisäys ei vaadi taittomuutosta.          */
.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; align-items: stretch; }
.gallery__item { position: relative; margin: 0; aspect-ratio: 3 / 2; overflow: hidden; }
.gallery__item:first-child { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
.gallery__item img { width: 100%; height: 100%; object-fit: cover; }
.gallery__item figcaption { position: absolute; left: 0; bottom: 0; }
@media (max-width: 700px) {
  .gallery { grid-template-columns: repeat(2, 1fr); }
  .gallery__item:first-child { aspect-ratio: 4 / 3; }
}

/* --- Paneelin sisäinen rytmi ---------------------------------------------
   Paneeli on lohko lohkon sisällä, eikä sivun rytmi yltänyt sen lapsiin:
   eyebrow, henkilö ja nappirivi olivat kiinni toisissaan (mitattu 0 px).  */
.panel > * + * { margin-top: var(--sp-3); }
.panel > .eyebrow + * { margin-top: var(--sp-2); }
.panel > .panel__t + * { margin-top: var(--sp-2); }

/* Päällekkäiset koko leveyden napit tarvitsevat hieman enemmän ilmaa */
.u-29 { gap: .75rem; }

/* --- Iso otsikko ja sen alla oleva ruudukko ------------------------------
   24 px riittää leipätekstille, mutta 60 px:n otsikon alla kortit näyttivät
   tarttuvan kiinni. Ruudukot ja listat saavat lohkovälin.                 */
main :is(h1, h2, .h-col, .display) + :is(.grid-cards, .index-list, .steps, .svc-grid, .stats, .gallery, .split) {
  margin-top: var(--sp-5);
}

/* --- Kuvan sisääntulo -----------------------------------------------------
   Kuvapinta paljastuu alhaalta ylös clip-pathilla ja kuva asettuu 1.12 → 1.
   Skaalaus tapahtuu kuvan sisällä, joten kehyksen mitat eivät liiku eikä
   sivu hyppää. Ilman liikettä kuva on normaalisti näkyvissä.             */
.ph--photo img { will-change: auto; }
@media (prefers-reduced-motion: reduce) {
  .js-motion [data-anim='media'] { clip-path: none !important; }
  .js-motion [data-anim='media'] img { transform: none !important; }
}

/* --- Korostus voimakkaammaksi --------------------------------------------
   Puolikas peitto jäi vaalealla pohjalla haaleaksi. Vaalealla veto on nyt
   täysi: tumma teksti kirkkaan vihreän päällä kantaa hyvin. Tummalla
   kaistalla teksti on vaalea, joten siellä veto pysyy vaimeana — muuten
   vaalea teksti kirkkaan vihreän päällä katoaisi.                          */
.hl::before { opacity: 1; }
.statement .hl::before, h1 .hl::before, .h-col .hl::before { opacity: .95; }
.tone-dark .hl::before { opacity: .4; }

/* --- Videot --------------------------------------------------------------
   Video on lyhyt mykkä silmukka, joka lähtee pyörimään kun kohdistin tulee
   päälle. Tiedostoa ei ladata ennen sitä (preload="none"), joten sivu latautuu
   yhtä nopeasti oli videoita yksi tai kymmenen.

   Kosketuslaitteella hoveria ei ole, joten siellä video käynnistyy kun se
   tulee näkyviin. Jos käyttäjä on pyytänyt vähemmän liikettä, mitään ei
   käynnistetä ja paikalla pysyy aloituskuva.                              */
.ph--media video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity .5s var(--ease); z-index: 1;
}
.ph--media.is-playing video { opacity: 1; }

.vid-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr));
  gap: clamp(2rem, 4vw, 3.5rem) clamp(1.2rem, 2.5vw, 2.5rem); }
/* Yksin jäävä video ei kasva koko leveyteen: 16:9 tuhannessa pikselissä on
   korkeampi kuin ruutu, jolloin otsikko jää sen alle näkymättömiin. */
.vid-grid:has(> :only-child) { max-width: min(100%, 58rem); }
.vidcard__t { font-family: var(--display); font-size: clamp(1.05rem, 1.5vw, 1.35rem);
  letter-spacing: -.035em; line-height: 1.1; margin-top: 1rem; }
.vidcard__d { font-size: .92rem; color: var(--ink-soft); margin-top: .4rem; }

/* Tyhjä osio ei jää sivulle. Asiakas lisää videot vasta kun niitä on kuvattu,
   eikä otsikko ilman sisältöä ole kenellekään hyödyksi. */
.vid:not(:has(.vidcard)) { display: none; }
.news:not(:has(.card)) { display: none; }

/* --- Ajankohtaista -------------------------------------------------------- */
.card__date { font-size: .82rem; color: var(--ink-mute); font-variant-numeric: tabular-nums; }
/* Etusivulla näytetään kolme uusinta. Rajaus on tyyleissä eikä sisällössä,
   jotta CMS:n esikatselu ja julkaistu sivu näyttävät varmasti samalta. */
.news__grid > :nth-child(n + 4) { display: none; }

.artikkeli { max-width: 68ch; }
.artikkeli > * + * { margin-top: var(--sp-3); }
.artikkeli p { font-size: 1.05rem; color: var(--ink-soft); }
.artikkeli a { color: var(--ink); text-decoration-thickness: 1px; text-underline-offset: .2em; }
.artikkeli strong { color: var(--ink); }
.artikkeli__head { max-width: 62ch; }
.artikkeli__head > * + * { margin-top: var(--sp-2); }

.u-ar169 { aspect-ratio: 16/9; }

/* Hunajapurkki: robotti täyttää, ihminen ei näe. Ei display:none, koska osa
   automaateista osaa jo ohittaa piilotetut kentät. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* --- Pienten merkkien sävy ------------------------------------------------
   Kirkas vihreä toimii pintana (korostuspalkki, tumma kaista) mutta ei
   ohuena merkkinä vaalealla: se katoaa lämpimään paperiin. Merkeillä on
   siksi oma muuttujansa, joka on tummempi kuin --accent-2-deep. Tummalla
   sivulla suhde kääntyy ja kirkas vihreä pääsee oikeuksiinsa.            */
:root { --mark: color-mix(in oklab, var(--accent-2) 26%, #06201d); }
.tone-dark { --mark: var(--accent-2); }
.tone-savi { --mark: color-mix(in oklab, var(--accent-2) 72%, #ffffff); }
.band-dark { --mark: var(--accent-2); }

/* Nuolilinkin teksti pysyy musteen värisenä myös hoverissa; vihreä jää
   alleviivaukseen, jossa sillä on pituutta. */
.link-arrow:hover { color: var(--ink); border-color: var(--mark); }

/* --- Listan ja sen otsikon väli -------------------------------------------
   Lista on lohko, mutta oman otsikkonsa alla se on otsikon sisältö. 38 px
   irrotti "Hallitukselle"-otsikon sen omista luodeista niin, että ne
   näyttivät kuuluvan eri asioihin.                                       */
/* Tarkkuus on nostettava lohkosääntöjen yli: ".split > div > * + .tick" on
   painavampi kuin pelkkä tyyppipari, joten sama konteksti kirjoitetaan auki. */
main :is(h2, h3, h4) + :is(.tick, .facts),
main section > .wrap > :is(h2, h3, h4) + :is(.tick, .facts),
main .split > div > :is(h2, h3, h4) + :is(.tick, .facts),
main .panel > :is(h2, h3, h4, .eyebrow) + :is(.tick, .facts) { margin-top: var(--sp-2); }

/* Yläteksti on otsikon kaltainen tunniste, ei kappale: sen jälkeinen lista
   kuuluu sille, joten väli on otsikkoväli eikä lohkoväli. */
main :is(p:not(.eyebrow), .lede, .measure) + :is(.tick, .facts),
main section > .wrap > :is(p:not(.eyebrow), .lede, .measure) + :is(.tick, .facts),
main .split > div > :is(p:not(.eyebrow), .lede, .measure) + :is(.tick, .facts) { margin-top: var(--sp-3); }
main .eyebrow + :is(.tick, .facts) { margin-top: var(--sp-2); }

/* --- Missä sivulla ollaan -------------------------------------------------
   Ohut vihreä alleviivaus ei erottunut. Nykyinen sivu saa täyden musteen ja
   paksun viivan, muut vaimenevat — ero syntyy kahdesta asiasta yhden sijaan. */
.nav a { color: var(--ink-soft); transition: color .35s var(--ease); }
.nav a:hover { color: var(--ink); }
.nav a[aria-current='page'] {
  color: var(--ink); font-weight: 600;
  border-bottom: 2px solid currentColor; padding-bottom: 0;
}
.site-head.is-light .nav a { color: color-mix(in oklab, var(--paper) 72%, transparent); }
.site-head.is-light .nav a[aria-current='page'] { color: var(--paper); }
@media (max-width: 820px) {
  .nav a[aria-current='page'] { border-bottom-width: 3px; }
}

/* Galleriasta nostettu kohde on linkki. Kuva kohoaa hieman, jotta ero
   tavalliseen kuvaan näkyy ennen klikkausta eikä vasta kursorin muodosta. */
.gal__link { display: block; text-decoration: none; color: inherit; }
.gal__link .ph { transition: transform .7s var(--ease); }
.gal__link:hover .ph { transform: scale(1.02); }
@media (hover: none) { .gal__link:hover .ph { transform: none; } }

/* --- Nykyinen sivu valikossa ----------------------------------------------
   Ohut alleviivaus ei erottunut kummassakaan koossa. Nykyinen sivu saa saman
   korostuksen kuin otsikoiden avainsanat: se on brändin oma merkki, ja
   täytenä pintana kirkas vihreä myös kantaa. */
.nav a[aria-current='page'] {
  position: relative; isolation: isolate;
  color: var(--ink); border-bottom-color: transparent;
}
.nav a[aria-current='page']::before {
  content: ''; position: absolute; z-index: -1;
  left: -.35em; right: -.35em; top: -.12em; bottom: -.1em;
  background: var(--accent-2); opacity: .95;
}
/* Vaalean headerin päällä teksti on paperia; korostuksen päällä se katoaisi. */
.site-head.is-light .nav a[aria-current='page'] { color: var(--ink-static); }
@media (max-width: 900px) {
  .nav a[aria-current='page']::before { left: -.18em; right: -.18em; }
}

/* --- Painikkeet keskelle mobiilissa ---------------------------------------
   Nappirivit olivat osin vasemmalla ja osin keskellä sen mukaan, missä
   lohkossa ne sattuivat olemaan. Kapealla ruudulla ne kuuluvat keskelle. */
@media (max-width: 640px) {
  .actions, .statement__after, .hero__actions, .form div:has(> button[type='submit']) {
    justify-content: center;
  }
  .actions > .btn, .statement__after > .btn { flex: 1 1 auto; text-align: center; justify-content: center; }
  .cta-band .actions, .panel .actions { justify-content: center; }
}

/* --- Ohuet vihreät viivat vaalealla ---------------------------------------
   Sama havainto kuin merkeissä: kirkas vihreä ei kanna ohuena lämpimällä
   paperilla. Viivat käyttävät nyt samaa tummempaa sävyä kuin merkit. */
.chip[aria-pressed='true'] { border-bottom-color: var(--mark); }
.form input:focus, .form textarea:focus, .form select:focus { border-bottom-color: var(--mark); }
.index-list__row::before { background: var(--mark); }
.svc::before { background: var(--mark); }
.tone-dark .chip[aria-pressed='true'] { border-bottom-color: var(--accent-2); }

/* --- Korostuspalkki ei nouse rivinsä yläpuolelle --------------------------
   Isoilla otsikoilla rivikorkeus on .84, eli rivit ovat tiiviimmässä kuin
   kirjaimet. Palkin .04em:n ylitys osui silloin edellisen rivin kirjaimiin. */
.statement .hl::before, h1 .hl::before, .h-col .hl::before { top: 0; bottom: -.02em; }
/* Ja hieman ilmaa monirivisen ison otsikon riveille. */
h1, .display { line-height: .88; }

/* --- Alatunnisteen esittely ------------------------------------------------
   Leipätekstin kokoisena ja omalla rytmillään; .92 rem oli pienempi kuin
   viereisten sarakkeiden linkit, mikä sai lohkon näyttämään keskeneräiseltä. */
.foot-brand p { font-size: 1rem; line-height: 1.55; max-width: 40ch; }
.foot-brand p + p { margin-top: .9rem; }

/* --- Ponnahduspaneelin alareuna -------------------------------------------
   Viimeinen linkki oli kiinni laatikon reunassa, koska paneelin padding
   riitti tekstille mutta ei sen jälkeiselle nappiriville. */
.pop__panel { padding-bottom: clamp(2.2rem, 4vw, 3.4rem); }
.pop__panel > :last-child { margin-bottom: 0; }

/* --- Uutiskorttien rivit ---------------------------------------------------
   Nostotekstin rivit olivat kiinni toisissaan: .card__meta on tarkoitettu
   lyhyille tiedoille, ei kappaleelle. */
.news__grid .card__meta, .grid-cards .card__meta:not(:has(span + span)) { line-height: 1.5; }

/* --- Artikkelin otsikko ei tavutu keskeltä sanaa ---------------------------
   "Talvikunnossapito" katkesi muotoon "talvikunnossapi-to". Pitkä yhdyssana
   saa mieluummin mennä yli kuin katketa väärästä kohdasta. */
.artikkeli__head h1, .pagehead h1 { hyphens: manual; overflow-wrap: break-word; }

/* --- Video ilman aloituskuvaa ---------------------------------------------
   Kun aloituskuvaa ei ole, videon oma ensimmäinen ruutu on se. Silloin video
   on näkyvissä myös pysähtyneenä, eikä alla ole kuvapaikkaa jota paljastaa. */
.ph--media.is-still video { opacity: 1; }

/* --- Paneelin yläviiva ----------------------------------------------------
   3 px kirkasta vihreää lämpimällä paperilla oli se viiva joka sattui
   silmään. Sama sävy kuin muillakin ohuilla merkeillä. */
.panel--accent { border-top-color: var(--mark); }
.tone-dark .panel--accent, .band-dark .panel--accent { border-top-color: var(--accent-2); }

/* --- Valikkokenttä --------------------------------------------------------
   Pisin vaihtoehto on 45 merkkiä eikä mahtunut 213 pikseliin. Kenttä ottaa
   nyt koko palstan leveydeltä, ja vaihtoehdot on lyhennetty niin ettei
   katkaisua tarvita alkuunkaan. */
.form select { width: 100%; max-width: 100%; text-overflow: ellipsis; }

/* --- Pinottu palsta -------------------------------------------------------
   Kapealla ruudulla .split menee yhteen sarakkeeseen, ja sarakeväli (jopa
   96 px) jäi otsikon ja sen oman tekstin väliin. Pystyssä väli on lohkoväli,
   ei palstaväli. */
@media (max-width: 900px) {
  .split, .split--narrow, .split--wide { row-gap: var(--sp-4); }
  /* Ruudukossa väli on gap. Lohkorytmin marginaali laskettiin sen päälle,
     jolloin otsikon ja sen oman tekstin väliin tuli 96 px. */
  main :is(.split, .split--narrow, .split--wide) > * + * { margin-top: 0; }
}

/* --- Osioiden erottelu kapealla ruudulla ---------------------------------
   Erottelu tehdään kokoerolla, ei viivoilla. Työpöydällä osio-otsikko on
   nelinkertainen leipätekstiin nähden; mobiilissa clamp jäi kiinni
   minimiinsä ja suhde romahti 1,6-kertaiseksi, jolloin mikään ei näyttänyt
   osion aloitukselta. Väliotsikko oli 16,8 px ja leipä 16 px — käytännössä
   sama koko.

   Kaistat maalaavat itsensä myös kapealla: sävynvaihdos tapahtuisi muuten
   näkymättömissä, koska ruudulla näkyy yksi osio kerrallaan.            */
@media (max-width: 900px) {
  /* Kapealla kaistat maalaavat itsensä, jolloin raja on kova reuna eikä
     hidas sävynvaihdos jota ei ehdi nähdä. */
  section[data-bg='beige'] { background: var(--paper-2); }
  section[data-bg='dark'] {
    background: var(--dark);
    --page-bg: var(--dark);
    --ink: var(--paper);
    --ink-soft: color-mix(in oklab, var(--paper) 80%, var(--dark));
    --ink-mute: color-mix(in oklab, var(--paper) 62%, var(--dark));
    --line:    color-mix(in oklab, var(--paper) 24%, transparent);
    --line-2:  color-mix(in oklab, var(--paper) 46%, transparent);
    --accent-2-deep: var(--accent-2);
    --mark: var(--accent-2);
    color: var(--ink);
  }

  /* Yläteksti aloittaa osion, joten sillä on tilaa hengittää. */
  section > .wrap > .eyebrow:first-child,
  section > .wrap > div > .eyebrow:first-child { margin-top: .4rem; }
}

/* --- Kosketuskohteet -------------------------------------------------------
   Logo on 11 pikseliä korkea kuva, joten sen linkki oli 11 pikselin korkuinen
   — sivuston tärkein navigointikohde ja käytännössä osumaton. Kuva pysyy
   kokoisenaan, linkki kasvaa sen ympärille. */
.brand { display: flex; align-items: center; min-height: 44px; }

/* Kosketusnäytöllä linkin pitää olla osuttava; hiirellä sama olisi vain ilmaa.

   ⚠️ **Jokainen linkki jolla on oma `display` on lisättävä poikkeuksiin.**
   Tämän säännön tarkkuus on (0,4,2) eikä yksi luokka voita sitä, joten
   `inline-flex` syrjäyttää komponentin oman asettelun ja latoo sisällön
   riviin. Instagram-ruudussa se nosti kuvatekstin kuvan viereen 12 pikselin
   kaistaksi, ja pikalinkeissä se litisti nimen ja kuvauksen vierekkäin.

   Vika näkyy vain kosketuslaitteilla, joten työpöydällä mitattuna kaikki
   näyttää oikealta — siksi se ehti livenä asti kahdesti.

   `.deck__card` selviää ilman poikkeusta vain siksi, että sen oma
   `flex-direction: column` jää voimaan. Se on onnenkantamoinen, ei sääntö. */
@media (hover: none) {
  main a:not(.btn):not(.card):not(.brand):not(.index-list__row):not(.ig-tile):not(.valinta__polku),
  .site-foot a { display: inline-flex; align-items: center; min-height: 44px; }
}

/* Valintaruutu ja radionappi jäävät ulos: ne ovat 22 pikselin neliöitä, ja
   44 pikselin korkeus venytti ruudun suorakaiteeksi ja irrotti sen omasta
   tekstistään. Osumakohta kasvatetaan sen sijaan koko rivin kautta. */
.form select, .form input:not([type='checkbox']):not([type='radio']), .form textarea { min-height: 44px; }
.form .consent { min-height: 44px; align-content: center; }

/* --- Kokoasteikko kapealla ruudulla ---------------------------------------
   Osiot erotetaan toisistaan kokoerolla. Kaikki alla olevat clamp-arvot
   jäivät mobiilissa kiinni minimiinsä (vw-termi on siellä paljon pienempi),
   joten koko asteikko litistyi: osio-otsikko 24 px, väliotsikko 16,8 px ja
   leipäteksti 16 px. Kolme eri tasoa saman kokoisina eivät ole tasoja.

   Suhdeluvut leipätekstiin (16 px): sivun otsikko 2,6× · osio-otsikko 2,25×
   · väliotsikko 1,2×. Työpöydällä suhde on suurempi, mutta siellä on myös
   tilaa; tämä riittää tekemään aloituksesta tunnistettavan.               */
@media (max-width: 700px) {
  h1 { font-size: 2.6rem; }
  h2, .h-col { font-size: 2.25rem; }
  .statement h2 { font-size: 2.5rem; }
  .deck__h { font-size: 2.35rem; }

  /* Väliotsikko oli leipätekstin kokoinen, eli ei väliotsikko lainkaan. */
  h3, .svc h3, .pop__panel h3 { font-size: 1.2rem; }

  /* Yläteksti on osion nimilappu: se kuuluu lähelle otsikkoaan ja kauas
     edellisestä osiosta. Ilman sitä iso otsikko kelluisi yksin. */
  section > .wrap > .eyebrow,
  section > .wrap > div > .eyebrow,
  section > .wrap > * > .eyebrow { margin-bottom: .5rem; }
}

/* --- Palvelulista kapealla ruudulla ---------------------------------------
   Numero, otsikko ja kuvaus ovat työpöydällä samalla rivillä, ja viiva erottaa
   rivit toisistaan. Kapealla ne latautuvat allekkain, jolloin viivoja tulee
   yhtä monta kuin palveluita ja lista alkaa lukea taulukkona. Numero 01–04 ja
   otsikon koko riittävät erottamaan rivit; viiva on niiden päällä liikaa. */
@media (max-width: 900px) {
  .index-list { border-top: 0; }
  .index-list__row { border-bottom: 0; padding-block: 1.1rem; }
  /* Ilman viivaa rivien väli tekee ryhmittelyn, joten se on oltava selvä. */
  .index-list__row + .index-list__row { margin-top: .6rem; }
}


/* --- Nykyisen sivun korostus kantaa myös tummalla -------------------------
   Korostuspalkki on aina sama kirkas vihreä, joten sen päällä oleva teksti ei
   saa seurata sivun sävyä. Tummalla kaistalla teksti kääntyi vaaleaksi ja
   kontrasti putosi noin 1,7:1 — mitattu, ei arvattu. */
.nav a[aria-current='page'],
.site-head .nav a[aria-current='page'],
.site-head.is-solid .nav a[aria-current='page'],
.site-head.is-light .nav a[aria-current='page'] { color: var(--ink-static); }

/* --- Piilotettu otsikko ei tuota väliä ------------------------------------
   `.vh` on ruudunlukijalle, ei silmälle: se ei vie tilaa, mutta rytmisääntö
   antoi seuraavalle lohkolle silti otsikon jälkeisen marginaalin. Sivulla
   näkyi aukko kohdassa, jossa ei ole mitään. */
main .vh + :is(.grid-cards, .index-list, .steps, .svc-grid, .stats, .gallery,
               .split, .news__grid, .deck) { margin-top: 0; }

/* --- Kiireellinen yhteydenotto omana laatikkonaan -------------------------
   Pelkkä yläviiva ei riittänyt erottamaan sitä viereisestä lomakkeesta, ja
   juuri tämä lohko on se, joka pitää löytää silmäillen. Täyttö on hyvin
   kevyt: laatikko saa erottua, mutta ei huutaa lomakkeen yli.

   Oma luokkansa eikä `.panel--accent`, koska aksenttipaneeleja on sivustolla
   kymmenen ja loput ovat leveitä omia lohkojaan — niille laatikko on kehys
   jonka ympärillä on jo tyhjää, ja ne olivat parempia ilman. */
.panel--laatikko {
  background: color-mix(in oklab, var(--mark) 7%, transparent);
  border: 1px solid color-mix(in oklab, var(--mark) 20%, transparent);
  border-top: 3px solid var(--mark);
  padding: 1.35rem 1.5rem 1.5rem;
}
.tone-dark .panel--laatikko, .band-dark .panel--laatikko {
  background: color-mix(in oklab, var(--accent-2) 10%, transparent);
  border-color: color-mix(in oklab, var(--accent-2) 28%, transparent);
  border-top-color: var(--accent-2);
}

/* --- Sivunvaihdon verho ---------------------------------------------------
   Verho on `body::after` eikä JS:n luoma elementti, jotta se on maalattavissa
   jo ensimmäisellä ruudunpiirrolla. JS:n luoma ehtisi välähtää: saapuva sivu
   olisi hetken paljaana ennen kuin verho on olemassa.

   Suunta on sama molemmissa päissä. Poistuessa verho nousee alhaalta yli,
   saapuessa se jatkaa ylös ja pois — yhtäjaksoinen liike ylöspäin, joka ei
   katkea siihen että sivu vaihtuu välissä. */
body::after {
  content: ''; position: fixed; inset: 0; z-index: 280;
  background: var(--dark);
  transform: scaleY(0); transform-origin: 50% 100%;
  pointer-events: none;
}
html.leaving body::after {
  transform-origin: 50% 100%;
  animation: verho-yli .42s cubic-bezier(.5, 0, .3, 1) forwards;
}
html.wiping body::after {
  transform-origin: 50% 0%;
  animation: verho-pois .72s var(--ease) forwards;
}
@keyframes verho-yli  { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes verho-pois { from { transform: scaleY(1); } to { transform: scaleY(0); } }

@media (prefers-reduced-motion: reduce) {
  html.leaving body::after, html.wiping body::after {
    animation: none; transform: scaleY(0);
  }
}


/* --- Sivun yläosan jälkeinen väli -----------------------------------------
   `.band-beige + section` antaa beigen kaistan jälkeen ison välin, mikä on
   oikein kesken sivun. Mutta `.pagehead` on myös beige kaista, ja sillä on jo
   oma 80 px:n alapadding — yhdessä ne tekivät ingressin ja sisällön väliin
   182 px:n aukon. Sivun alussa erottelu on jo tehty, joten tähän riittää
   vähemmän. */
main .pagehead.band-beige + section:not(.band-beige):not(.band-dark):not(.cta-band) {
  padding-top: clamp(2.2rem, 4vw, 4rem);
}


/* --- Korttien numerointi laskurina ----------------------------------------
   Numerot olivat kirjoitettuna korttiin. Kun palvelu voidaan piilottaa CMS:stä,
   kiinteä numero jättäisi sarjaan aukon: 01, 03, 04 näyttää virheeltä eikä
   valinnalta. Laskuri numeroi jäljelle jääneet kortit uudelleen itsestään. */
.deck__row { counter-reset: kortti; }
.deck__card { counter-increment: kortti; }
.deck__n::before { content: counter(kortti, decimal-leading-zero); }
/* Kun JS on kirjoittanut numeron, laskuri väistyy — muuten numero näkyisi
   kahdesti. `:empty` on tässä juuri oikea ehto: se kertoo onko teksti tullut. */
.deck__n:not(:empty)::before { content: none; }

/* --- Palvelupaketit haitarina ---------------------------------------------
   Natiivi <details>, ei omaa JavaScriptiä: haitari toimii myös ilman skriptejä
   ja näppäimistöllä ilman että sitä tarvitsee erikseen rakentaa. Merkkinä on
   katon harja, joka kääntyy ylöspäin auetessaan — sama muoto kuin nimessä. */
.paketit { display: grid; margin-top: var(--sp-4); }
.paketit:not(:empty) { border-top: 1px solid var(--line); }
.paketti { border-bottom: 1px solid var(--line); }

.paketti__paa {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; padding: .95rem 2.1rem .95rem 0;
  cursor: pointer; position: relative; list-style: none;
}
.paketti__paa::-webkit-details-marker { display: none; }
.paketti__paa:focus-visible { outline: 2px solid var(--mark); outline-offset: 3px; }

.paketti__nimi { font-family: var(--display); font-size: .95rem; letter-spacing: .01em; }
.paketti__hinta {
  color: var(--accent-2-deep); font-size: .9rem; white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* Harjamerkki: alaspäin suljettuna, ylöspäin auki. */
.paketti__paa::after {
  content: ''; position: absolute; right: .4rem; top: 1.15rem;
  width: .48rem; height: .48rem;
  border-right: 2px solid var(--mark); border-bottom: 2px solid var(--mark);
  transform: rotate(45deg); transform-origin: 50% 50%;
  transition: transform .45s var(--ease);
}
.paketti[open] .paketti__paa::after { transform: rotate(-135deg); }

.paketti__kuvaus {
  margin: 0; padding: 0 2.1rem 1.05rem 0;
  color: var(--ink-soft); font-size: .95rem; max-width: 58ch;
}

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


/* --- Neljä palvelua asettuu kahteen sarakkeeseen --------------------------
   Kolme korttia mahtuu riviin, neljäs jäisi yksin toiselle riville. Kahdella
   sarakkeella neljä asettuu 2 × 2 -ruudukoksi, ja kolmella kortilla mikään
   ei muutu. Ehto lukee korttien määrän suoraan sivulta, joten piilotetun
   palvelun jälkeen asettelu korjaa itsensä ilman että sitä tarvitsee kertoa.

   Mobiilin yhden sarakkeen sääntö on tämän jälkeen omassa media-lohkossaan,
   joten se voittaa tämän kapealla ruudulla. */
@media (min-width: 56.3rem) {
  .deck__row:has(.deck__card:nth-child(4)) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* --- Paketin hinta on se, mitä siitä katsotaan --------------------------- */
.paketti__hinta { font-size: 1.02rem; }


/* --- Mobiilin korjaukset palvelukortteihin -------------------------------- */

/* Paneelin vieritys ei saa tarttua sivuun sen takana, ja iOS tarvitsee
   kosketusvieritykselle oman vihjeensä. */
.pop__panel { overscroll-behavior: contain; touch-action: pan-y; }

/* Paketin rivi ei mahtunut kapealle ruudulle: nimi on yhdyssana jota ei voi
   katkaista ja hinta on nowrap, joten rivi kasvoi paneelia leveämmäksi ja
   hinta jäi ruudun ulkopuolelle. Kapealla ne menevät allekkain. */
.paketti__nimi { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 40rem) {
  .paketti__paa {
    flex-direction: column; align-items: flex-start;
    gap: .15rem; padding-right: 2.4rem;
  }
  .paketti__hinta { white-space: normal; }
  .paketti__paa::after { top: 1.1rem; }
}

/* Korttien väli oli 8 px, ja kun kortti maalaa itsensä täyteen, se näytti
   sulautuvan naapuriinsa. Kapealla ruudulla väli on nyt sen verran, että
   kortit lukevat erillisinä. */
@media (max-width: 56.25rem) {
  .deck__row { gap: 1.1rem; }
}


/* --- Avattu mobiilivalikko on aina vaalea, joten teksti on aina tummaa ----
   Paneeli maalaa itsensä `--paper`illa, mutta linkkien väri seurasi headerin
   tilaa: tumman kaistan päällä header on vaaleassa tilassa ja maalasi linkit
   paperinvärisiksi — vaaleaa vaalean päälle, eli valikko oli lukukelvoton.
   Sama koski logoa ja Valikko-painiketta, jotka jäivät paneelin päälle.

   Valitsimissa on headerin tila mukana, koska `.site-head.is-light .nav a`
   on tarkkuudeltaan (0,3,1) ja voittaisi muuten tämän. */
@media (max-width: 900px) {
  .nav.is-open a,
  .site-head .nav.is-open a,
  .site-head.is-light .nav.is-open a,
  .site-head.is-solid .nav.is-open a { color: var(--ink-static); }

  .site-head:has(.nav.is-open) .burger,
  .site-head.is-light:has(.nav.is-open) .burger,
  .site-head:has(.nav.is-open) .brand,
  .site-head.is-light:has(.nav.is-open) .brand { color: var(--ink-static); }
}


/* --- Mitä tarvitset: suora polku heti sivun alussa ------------------------
   Sivusto on kerronnallinen, ja se palvelee selailijaa. Se, joka tuli
   hakemaan yhtä asiaa, joutui vierittämään kolme ruudullista ennen kuin
   löysi mitään. Tämä on hänelle: neljä suoraa polkua ennen tarinaa.

   Painikkeen muoto, koska sitä myös painetaan. Täyttö nousee alhaalta kuten
   sivuston muissakin napeissa — sama liike kuin kaikessa täällä. */
.valinta { padding-block: clamp(2.4rem, 4.5vw, 4rem); }
.valinta__rivi {
  display: grid; gap: clamp(.8rem, 1.6vw, 1.2rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  margin-top: var(--sp-3);
}
/* Pohjaväri levossa, ei pelkkä viiva. Ohutviivainen laatikko cremellä oli
   käytännössä näkymätön ennen hoveria — asiakas huomasi sen ensimmäisenä.
   Savi nousee edelleen pohjasta hoverilla, eli liike on ennallaan.

   ⚠️ **Sävymuuttujat on lukittava**, koska laatikko on aina vaalea mutta sivu
   sen alla voi olla tumma. Ilman lukitusta `--ink` kääntyi tummalla sivulla
   vaaleaksi ja teksti katosi vaaleaan laatikkoon. Sama ratkaisu kuin
   `.deck__card`:ssa — se on kuvio, ei poikkeus. */
.valinta__polku {
  position: relative; overflow: hidden; background-color: var(--paper-2);
  --ink: var(--ink-static);
  --ink-soft: color-mix(in oklab, var(--brown) 24%, #17110c);
  --ink-mute: color-mix(in oklab, var(--brown) 30%, #352c24);
  --line: color-mix(in oklab, var(--brown) 26%, transparent);
  --mark: color-mix(in oklab, var(--accent-2) 26%, #06201d);
  color: var(--ink);
  display: grid; gap: .3rem; align-content: start;
  padding: 1.15rem 1.3rem 1.25rem; min-height: 44px;
  border: 1px solid color-mix(in oklab, var(--ink) 24%, transparent);
  text-decoration: none; color: inherit;
  background-image: linear-gradient(var(--accent-2), var(--accent-2));
  background-repeat: no-repeat; background-position: 50% 100%; background-size: 100% 0%;
  transition: background-size .55s var(--ease), color .35s var(--ease),
              border-color .35s var(--ease);
}
.valinta__polku:hover,
.valinta__polku:focus-visible {
  background-size: 100% 100%;
  border-color: transparent;
  color: var(--ink-static);
}
/* Kirkkaan vihreän päällä myös tarkennus ja nuoli tarvitsevat tumman. */
.valinta__polku:hover .valinta__lisa,
.valinta__polku:focus-visible .valinta__lisa,
.valinta__polku:hover .valinta__nimi::after,
.valinta__polku:focus-visible .valinta__nimi::after { color: var(--ink-static); }
.valinta__polku:focus-visible { outline: 2px solid var(--mark); outline-offset: 3px; }

.valinta__nimi {
  position: relative;
  font-family: var(--display); font-size: clamp(.98rem, 1.3vw, 1.1rem);
  letter-spacing: -.01em; line-height: 1.2;
}
.valinta__nimi::after { content: ' →'; color: var(--mark); }
.valinta__lisa {
  position: relative;
  font-size: .9rem; line-height: 1.45; color: var(--ink-soft);
  transition: color .35s var(--ease);
}

/* Kosketusnäytöllä :hover jää päälle napautuksen jälkeen. */
@media (hover: none) {
  .valinta__polku:hover { background-size: 100% 0%; color: inherit;
    border-color: color-mix(in oklab, var(--ink) 24%, transparent); }
  .valinta__polku:hover .valinta__lisa { color: var(--ink-soft); }
  .valinta__polku:hover .valinta__nimi::after { color: var(--mark); }
}


/* --- Palvelukortti on nyt linkki ------------------------------------------
   Kortti avasi ennen ponnahdusikkunan. Nyt jokaisella palvelulla on oma sivu,
   joten kortti on linkki — ja koska koko kortti on klikattava, se tarvitsee
   linkin oletustyylien kumoamisen. Plus-merkki jäi paikalleen merkkinä siitä
   että tästä pääsee eteenpäin, mutta se ei ole enää nappi. */
/* Väri kortin omasta lukitusta muuttujasta, ei perittynä: kortti on vaalea
   mutta se on tumman kaistan päällä, ja `inherit` toi otsikkoon kaistan
   kerman — vaaleaa vaalean päälle. Hoverilla --ink kääntyy vaaleaksi samalla
   kun savitäyttö nousee alta, joten sama sääntö palvelee molempia tiloja. */
/* ⚠️ Ei `display: block`. Se oli refleksi linkiksi muuttamisessa, mutta se
   voittaa perussäännön `.deck__card { display: flex }` tarkkuudella (0,1,1 vs
   0,1,0) — jolloin `gap` lakkasi vaikuttamasta ja koska sivuston reset nollaa
   marginaalit, otsikon ja leipätekstin väliksi jäi 0 px. */
a.deck__card { text-decoration: none; color: var(--ink); }
.deck__kuvaus {
  position: relative; z-index: 1;
  margin-top: var(--sp-2); max-width: 34ch;
  font-size: .97rem; line-height: 1.5; color: var(--ink-soft);
  transition: color .35s var(--ease);
}
/* Kortin oma täyttö nousee hoverilla; teksti tummenee sen päällä. */
.deck__card:hover .deck__kuvaus,
.deck__card:focus-visible .deck__kuvaus { color: var(--ink); }
.deck__card .deck__more { pointer-events: none; }

/* --- Paketit omalla sivullaan ---------------------------------------------
   Sivulla on tilaa, joten haitari saa olla väljempi kuin ponnahdusikkunassa
   ja leveydeltään luettava. */
.paketit--sivu { max-width: 46rem; margin-top: var(--sp-4); }
.paketit--sivu .paketti__paa { padding-block: 1.15rem; }
.paketit--sivu .paketti__nimi { font-size: 1.05rem; }
.paketit--sivu .paketti__hinta { font-size: 1.06rem; }


/* --- Vuokrattavat vai myytävät --------------------------------------------
   Valikon "Kohteet" vei vuokrattaviin, ja myytävät piti löytää alatunnisteen
   pienestä tekstistä. Molemmilla sivuilla on nyt sama valinta, joten kumpi
   tahansa on aina yhden klikkauksen päässä. */
.kohdevalinta {
  display: flex; flex-wrap: wrap; gap: .6rem;
  margin-top: var(--sp-4);
}
.kohdevalinta__nappi {
  flex: 1 1 12rem;
  padding: .95rem 1.4rem; text-align: center; text-decoration: none;
  font-family: var(--display); font-size: .96rem; letter-spacing: -.01em;
  color: var(--ink); border: 1px solid color-mix(in oklab, var(--ink) 24%, transparent);
  position: relative; overflow: hidden;
  background-image: linear-gradient(var(--accent-2), var(--accent-2));
  background-repeat: no-repeat; background-position: 50% 100%; background-size: 100% 0%;
  transition: background-size .5s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.kohdevalinta__nappi:hover,
.kohdevalinta__nappi:focus-visible { background-size: 100% 100%; color: var(--ink-static); border-color: transparent; }
/* Avoinna oleva sivu on täytetty, jotta näkee kummassa on. */
.kohdevalinta__nappi[aria-current='page'] {
  background-size: 100% 100%; color: var(--ink-static); border-color: transparent;
}
@media (hover: none) {
  .kohdevalinta__nappi:hover:not([aria-current='page']) {
    background-size: 100% 0%; color: var(--ink);
    border-color: color-mix(in oklab, var(--ink) 24%, transparent);
  }
}

/* --- Lomakkeen vihje ------------------------------------------------------
   Sääntö "puhelin tai sähköposti" kerrotaan etukäteen. Vaatimus, jonka
   huomaa vasta lähetysnappia painaessa, on juuri sitä kitkaa josta asiakas
   halusi eroon. */
.form__vihje {
  margin-top: calc(var(--sp-2) * -1);
  font-size: .88rem; color: var(--ink-soft);
}


/* --- `hidden` piilottaa oikeasti ------------------------------------------
   `hidden` on selaimen oma oletustyyli, ja mikä tahansa oma display-sääntö
   voittaa sen. Kohdekortit ovat display:flex, joten suodatin merkitsi kortit
   piilotetuiksi mutta ne jäivät näkyviin — kaikki kohteet näkyivät jokaisella
   suodattimella. Asiakas huomasi tämän. */
[hidden] { display: none !important; }

/* --- Otsikot eivät tavutu automaattisesti ---------------------------------
   "yhteydenottopyyntö" katkesi mobiilissa muotoon "yhteydenottopy-yntö".
   Pitkä yhdyssana saa mieluummin mennä yli kuin katketa väärästä kohdasta. */
main :is(h1, h2, h3, h4, .h-col, .display, .deck__h) {
  hyphens: manual;
  overflow-wrap: break-word;
}


/* --- Toimialueet laatikoina -----------------------------------------------
   Alueet olivat luettelona, ja asiakas hahmotti ne laatikoiksi joita pitäisi
   voida lisätä. Nyt ne ovat samaa muotoa kuin arvot samalla sivulla, joten
   uuden paikkakunnan lisääminen näyttää siltä miltä sen kuuluukin. */
.svc--alue { gap: .45rem; }
.svc--alue h3 { font-size: 1.02rem; }


/* --- Instagram-syöte ------------------------------------------------------
   Ruudukko, ei karuselli: kaikki näkyy kerralla eikä mikään liiku itsestään.
   Kuusi saraketta työpöydällä, kolme tabletilla, kaksi puhelimessa — ruutu
   pysyy neliönä joka koossa, jolloin rivi on aina täysi.

   Ruutu käyttäytyy kuin sivuston muutkin: savi nousee pohjasta hoverilla ja
   kuvateksti tulee sen mukana. Ei Instagramin omaa ilmettä, ei logoja. */
.ig { padding-block: clamp(2.6rem, 5vw, 4.5rem); }
.ig__head {
  display: flex; flex-wrap: wrap; align-items: flex-end;
  justify-content: space-between; gap: 1rem 2rem;
  margin-bottom: var(--sp-4);
}
.ig-grid {
  display: grid; gap: clamp(.4rem, .8vw, .7rem);
  grid-template-columns: repeat(6, minmax(0, 1fr));
}
@media (max-width: 900px) { .ig-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .ig-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Kuvateksti on kuvan ALLA eikä peitteenä sen päällä. Peite näkyi vain
   hoverilla, eli ei koskaan puhelimella — ja siellä on enemmistö kävijöistä.
   Nyt teksti on luettavissa joka laitteella, ja kuva pysyy kokonaan näkyvissä. */
.ig-tile {
  display: block; text-decoration: none; color: inherit;
}
/* 3:4 on Instagramin nykyisen profiiliruudukon suhde. (4:5 on yksittäisen
   julkaisun suhde — eri asia, ja ruudukossa väärä.) */
.ig-tile__kuva {
  position: relative; overflow: hidden;
  aspect-ratio: 3 / 4; background: var(--paper-2);
}
.ig-tile img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .7s var(--ease);
}
.ig-tile:hover img, .ig-tile:focus-visible img { transform: scale(1.04); }

/* Haaleampi kuin leipäteksti: kuvateksti on saate, ei sisältöä jota luetaan
   ensin. `--ink-soft` seuraa sivun sävyä, toisin kuin läpinäkyvyys. */
.ig-tile__teksti {
  margin-top: .6rem;
  font-size: .8rem; line-height: 1.45; color: var(--ink-soft);
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
.ig-tile:focus-visible { outline: 2px solid var(--mark); outline-offset: 2px; }

/* Video ja karuselli näyttävät muuten samalta kuin kuva. */
.ig-tile__merkki {
  position: absolute; top: .5rem; right: .55rem;
  width: 1.1rem; height: 1.1rem; color: var(--paper);
  filter: drop-shadow(0 1px 2px rgb(0 0 0 / .45));
}

@media (hover: none) {
  .ig-tile:hover img { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ig-tile img { transition: none; }
}


/* --- Instagram: videot ----------------------------------------------------
   Video makaa pysäytyskuvan päällä ja lähtee pyörimään hoverilla, kuten
   sivuston omat videot. Jos se ei lataudu, se poistetaan ja kuva jää — 
   Instagramin videa-osoitteet ovat allekirjoitettuja ja vanhenevat. */
.ig-tile video {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.ig-tile__merkki {
  display: grid; place-items: center;
  font-size: .62rem; line-height: 1;
}