/* ==========================================================================
   Äänimatkat / aanimatka.fi
   Kevyt, riippuvuudeton tyylitiedosto. Ulkoasun muuttujat ovat :root-osiossa.
   Studio-valikko (?studio) vaihtaa html-elementin data-attribuutteja:
   data-palette, data-fonts, data-nav, data-hero, data-buttons,
   data-paper, data-motion.
   ========================================================================== */

/* ---------- Fontit (omalta palvelimelta) ---------- */
@font-face { font-family: "Lora"; src: url("../fonts/lora-var.woff") format("woff"); font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Lora"; src: url("../fonts/lora-italic-var.woff") format("woff"); font-weight: 400 700; font-style: italic; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fonts/inter-regular.woff") format("woff"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fonts/inter-semibold.woff") format("woff"); font-weight: 600; font-display: swap; }

/* ---------- Muuttujat ---------- */
:root {
  /* Paletti: Aamu-usva (oletus). Värit on poimittu metsäakvarellista. */
  --paper: #f2eee8;
  --paper-2: #e6eae1;
  --surface: #faf8f4;
  --ink: #22302f;
  --ink-soft: #4c5a58;
  --line: #d6d5cb;
  --primary: #2f5557;
  --primary-ink: #ffffff;
  --primary-hover: #234345;
  --forest: #3d6461;
  --moss: #8fa58a;
  --ochre: #b0835a;
  --mist: #a9c0c0;
  --lemon: #f0dcc6;
  --accent-soft: #e2e9e4;

  --font-head: "Lora", Georgia, "Times New Roman", serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --head-weight: 450;
  --head-tracking: -0.01em;

  --radius: 6px;
  --btn-radius: 8px;
  --container: 1120px;
  --measure: 62ch;
  --header-h: 72px;
  --space-section: clamp(4.5rem, 9vw, 7.5rem);
}

[data-palette="metsa"] {
  --paper: #f6f0e4; --paper-2: #efe7d6; --surface: #fbf8f1; --ink: #2c3631; --ink-soft: #545e57; --line: #d9cfba;
  --primary: #4d6277; --primary-hover: #3e5164; --forest: #55694f; --moss: #8c9a6e; --ochre: #b98a3e; --mist: #a9b9c6; --lemon: #ece0a2; --accent-soft: #e4ebe3;
}
[data-palette="sammal"] {
  --paper: #f3f1e7; --paper-2: #e9e8da; --surface: #fafaf3; --ink: #28322b; --ink-soft: #505c53; --line: #d3d3bf;
  --primary: #4a6250; --primary-hover: #3b4f40; --forest: #4a6250; --moss: #8f9d6a; --ochre: #b8893c; --mist: #b4c2c4; --lemon: #e9df9c; --accent-soft: #e6eadb;
}
[data-palette="usva"] {
  --paper: #f1f1ec; --paper-2: #e6e8e3; --surface: #f9f9f6; --ink: #27313a; --ink-soft: #4f5a63; --line: #d2d6d0;
  --primary: #455b72; --primary-hover: #36495d; --forest: #5b6e66; --moss: #9aa58a; --ochre: #b08a52; --mist: #9fb2c3; --lemon: #e8e2b0; --accent-soft: #e2e8ec;
}
[data-palette="kanerva"] {
  --paper: #f6efe8; --paper-2: #eee3d9; --surface: #fbf7f3; --ink: #33302f; --ink-soft: #5d5856; --line: #ddd0c3;
  --primary: #5f5671; --primary-hover: #4c445b; --forest: #66705a; --moss: #9b9f7c; --ochre: #b78a55; --mist: #b9b3c8; --lemon: #efdfae; --accent-soft: #ece4ea;
}

[data-palette="jakala"] {
  --paper: #f2f1ea; --paper-2: #e7e7dc; --surface: #fafaf5; --ink: #2b332d; --ink-soft: #545d56; --line: #d2d4c6;
  --primary: #5a6b5d; --primary-hover: #485749; --forest: #5f7262; --moss: #a3ad8f; --ochre: #b39a5c; --mist: #b8c4c0; --lemon: #e6e2b4; --accent-soft: #e5e9df;
}
[data-palette="kanto"] {
  --paper: #f5ede2; --paper-2: #ece1d1; --surface: #fbf7f0; --ink: #33291f; --ink-soft: #5e5145; --line: #dccdb8;
  --primary: #6a5040; --primary-hover: #573f31; --forest: #5d6648; --moss: #9a9a6c; --ochre: #b5803f; --mist: #b8b2a6; --lemon: #ecd9a2; --accent-soft: #ece4d8;
}
[data-palette="suo"] {
  --paper: #eff0ea; --paper-2: #e3e6dd; --surface: #f8f9f5; --ink: #24302e; --ink-soft: #4c5a57; --line: #ced4cb;
  --primary: #3e5e5a; --primary-hover: #2f4b47; --forest: #3e5e5a; --moss: #93a07a; --ochre: #a9673f; --mist: #a7bcbb; --lemon: #e3dca8; --accent-soft: #dfe7e3;
}
[data-palette="koivu"] {
  --paper: #f7f6f1; --paper-2: #eeede6; --surface: #fdfdfa; --ink: #26292b; --ink-soft: #55595c; --line: #dcdbd2;
  --primary: #3f4549; --primary-hover: #2e3336; --forest: #5b6b55; --moss: #a5ad8c; --ochre: #c1974f; --mist: #c3c9cc; --lemon: #ede4ae; --accent-soft: #e9ebe6;
}

[data-fonts="fraunces"] { --font-head: "Fraunces", Georgia, serif; --font-body: "Nunito Sans", system-ui, sans-serif; --head-weight: 400; }
[data-fonts="fraunces"] h1, [data-fonts="fraunces"] h2, [data-fonts="fraunces"] h3, [data-fonts="fraunces"] .wordmark, [data-fonts="fraunces"] .statement, [data-fonts="fraunces"] .hero__tagline { font-variation-settings: "SOFT" 100, "WONK" 1; }
[data-fonts="alegreya"] { --font-head: "Alegreya", Georgia, serif; --font-body: "Alegreya Sans", system-ui, sans-serif; --head-weight: 500; --head-tracking: 0; }
[data-fonts="newsreader"] { --font-head: "Newsreader", Georgia, serif; --font-body: "Karla", system-ui, sans-serif; --head-weight: 400; }
[data-fonts="marcellus"] { --font-head: "Marcellus", Georgia, serif; --font-body: "Nunito Sans", system-ui, sans-serif; --head-weight: 400; --head-tracking: .005em; }
[data-fonts="gentium"] { --font-head: "Gentium Book Plus", Georgia, serif; --font-body: "Source Sans 3", system-ui, sans-serif; --head-weight: 400; --head-tracking: 0; }
[data-fonts="youngserif"] { --font-head: "Young Serif", Georgia, serif; --font-body: "Figtree", system-ui, sans-serif; --head-weight: 400; --head-tracking: -0.015em; }
[data-fonts="cormorant"] { --font-head: "Cormorant Garamond", Georgia, serif; --font-body: "Mulish", system-ui, sans-serif; --head-weight: 600; --head-tracking: 0; }

[data-fonts="averia"] { --font-head: "Averia Serif Libre", Georgia, serif; --font-body: "Atkinson Hyperlegible", system-ui, sans-serif; --head-weight: 400; --head-tracking: -0.01em; }
[data-fonts="hedvig"] { --font-head: "Hedvig Letters Serif", Georgia, serif; --font-body: "Hedvig Letters Sans", system-ui, sans-serif; --head-weight: 400; }
[data-fonts="instrument"] { --font-head: "Instrument Serif", Georgia, serif; --font-body: "Instrument Sans", system-ui, sans-serif; --head-weight: 400; --head-tracking: -0.005em; }
[data-fonts="instrument"] h2 { font-size: clamp(2.1rem, 1.5rem + 2.4vw, 3.1rem); }
[data-fonts="gloock"] { --font-head: "Gloock", Georgia, serif; --font-body: "Albert Sans", system-ui, sans-serif; --head-weight: 400; --head-tracking: 0; }
[data-fonts="fell"] { --font-head: "IM Fell English", Georgia, serif; --font-body: "Source Sans 3", system-ui, sans-serif; --head-weight: 400; --head-tracking: 0; }
[data-fonts="bricolage"] { --font-head: "Bricolage Grotesque", system-ui, sans-serif; --font-body: "Inter", system-ui, sans-serif; --head-weight: 500; --head-tracking: -0.02em; }

[data-buttons="pilleri"] { --btn-radius: 999px; }
[data-buttons="kulma"] { --btn-radius: 2px; }

/* ---------- Perusta ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: clip; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } }
body {
  margin: 0; overflow-x: clip;
  background-color: var(--paper); color: var(--ink);
  font-family: var(--font-body);
  font-size: clamp(1.0625rem, 1rem + .25vw, 1.15rem);
  line-height: 1.68;
}
[data-paper="on"] body { background-image: url("../img/paperi.webp"); background-size: 240px 240px; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--primary); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { color: var(--primary-hover); }
:focus-visible { outline: 3px solid var(--primary); outline-offset: 3px; border-radius: 3px; }

h1, h2, h3 {
  font-family: var(--font-head); font-weight: var(--head-weight); letter-spacing: var(--head-tracking);
  line-height: 1.16; margin: 0 0 .7em; text-wrap: balance;
}
h2 { font-size: clamp(1.85rem, 1.35rem + 2vw, 2.7rem); max-width: 22ch; }
h3 { font-size: clamp(1.2rem, 1.1rem + .5vw, 1.4rem); line-height: 1.3; }
p { margin: 0 0 1.1em; max-width: var(--measure); text-wrap: pretty; }

.skip-link { position: absolute; left: 1rem; top: -100px; z-index: 100; background: var(--primary); color: var(--primary-ink); padding: .7rem 1rem; border-radius: var(--btn-radius); }
.skip-link:focus { top: 1rem; }

.container { width: min(100% - 2.5rem, var(--container)); margin-inline: auto; }
.section { padding-block: var(--space-section); position: relative; }
.section--tint { background: color-mix(in srgb, var(--paper-2) 70%, transparent); }
.intro { margin-bottom: clamp(2rem, 4vw, 3rem); }
.intro p { color: var(--ink-soft); }
.lead { font-size: clamp(1.15rem, 1.05rem + .45vw, 1.32rem); line-height: 1.6; color: var(--ink) !important; }
.aside { font-size: .95rem; color: var(--ink-soft); padding-top: 1rem; border-top: 1px solid var(--line); margin-top: 1.5rem; }

/* ---------- Painikkeet ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 50px; padding: .8rem 1.5rem;
  font: 600 1rem/1.25 var(--font-body);
  border-radius: var(--btn-radius); border: 1.5px solid transparent;
  text-decoration: none; cursor: pointer; transition: background-color .2s, color .2s;
}
.btn--primary { background: var(--primary); color: var(--primary-ink); }
.btn--primary:hover { background: var(--primary-hover); color: var(--primary-ink); }
.btn--small { min-height: 42px; padding: .55rem 1.05rem; font-size: .95rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; align-items: center; max-width: none; }
.text-link { font-weight: 600; padding-block: .6rem; }

/* ---------- Sanamerkki (placeholder) ---------- */
.wordmark { font-family: var(--font-head); font-weight: 500; font-size: 1.45rem; letter-spacing: -.01em; color: var(--ink); text-decoration: none; white-space: nowrap; }
.wordmark:hover { color: var(--ink); }

/* ---------- Ylätunniste ja navigaatio ---------- */
.site-header { position: sticky; top: 0; z-index: 50; transition: transform .35s ease, background-color .3s; }
.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-height: var(--header-h); }
.nav-list { display: flex; gap: 1.6rem; list-style: none; margin: 0; padding: 0; }
.nav-list a { display: block; padding: .5rem 0; color: var(--ink); text-decoration: none; font-size: .98rem; border-bottom: 1px solid transparent; }
.nav-list a:hover { border-bottom-color: var(--ink-soft); color: var(--ink); }
.nav-list a[aria-current="true"] { border-bottom-color: var(--primary); color: var(--primary); }
.header-actions { display: flex; align-items: center; gap: .6rem; }
.menu-toggle {
  display: none; align-items: center; gap: .5rem; min-height: 44px; padding: .5rem .9rem; border-radius: var(--btn-radius);
  background: transparent; border: 1px solid var(--line); color: var(--ink); font: 600 .95rem var(--font-body); cursor: pointer;
}
.menu-toggle__bars { width: 18px; height: 11px; position: relative; }
.menu-toggle__bars::before, .menu-toggle__bars::after, .menu-toggle__bars span { content: ""; position: absolute; left: 0; right: 0; height: 1.5px; background: currentColor; }
.menu-toggle__bars::before { top: 0; } .menu-toggle__bars span { top: 4.75px; } .menu-toggle__bars::after { bottom: 0; }

[data-nav="palkki"] .site-header { background: color-mix(in srgb, var(--paper) 90%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
[data-nav="palkki"] .site-header.is-scrolled { box-shadow: 0 1px 0 var(--line); }
[data-nav="kelluva"] .site-header { position: fixed; left: 0; right: 0; top: 12px; }
[data-nav="kelluva"] .site-header__inner {
  width: min(100% - 1.5rem, 1080px); min-height: 60px; padding: 0 .5rem 0 1.3rem;
  background: color-mix(in srgb, var(--surface) 94%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--line); border-radius: 14px;
}
[data-nav="kelluva"] .site-header.is-hidden { transform: translateY(-120%); }
[data-nav="kelluva"] main { padding-top: 84px; }
[data-nav="minimi"] .site-header { background: transparent; position: absolute; left: 0; right: 0; }
[data-nav="minimi"] .site-nav { display: none; }
[data-nav="minimi"] .menu-toggle { display: inline-flex; }

.menu-panel { position: fixed; inset: 0; z-index: 60; display: none; background: var(--paper); overflow-y: auto; }
[data-paper="on"] .menu-panel { background-image: url("../img/paperi.webp"); background-size: 240px; }
.menu-panel.is-open { display: block; }
.menu-panel__inner { min-height: 100%; display: flex; flex-direction: column; padding-bottom: 2rem; }
.menu-panel__top { display: flex; justify-content: space-between; align-items: center; min-height: var(--header-h); }
.menu-panel ul { list-style: none; padding: 1rem 0 2rem; margin: 0; }
.menu-panel li a { display: block; padding: .65rem 0; font-family: var(--font-head); font-size: clamp(1.6rem, 6vw, 2.3rem); color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line); }
.menu-panel__art { margin-top: auto; height: 180px; background: url("../img/rajaus-pohja-1000.webp") center bottom / cover no-repeat; opacity: .9; mix-blend-mode: multiply; }

@media (max-width: 920px) {
  .site-nav { display: none; }
  .menu-toggle { display: inline-flex; }
  .header-actions .btn { display: none; }
}

/* ---------- Sankariosio ---------- */
.hero { position: relative; isolation: isolate; overflow: hidden; }
.hero__art { position: absolute; inset: 0; z-index: -1;
  -webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent 100%); mask-image: linear-gradient(to bottom, #000 72%, transparent 100%); }
.hero__art picture { display: contents; }
.hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 60%; mix-blend-mode: multiply; transform-origin: 50% 70%; }
.hero__mist { position: absolute; inset: -10% -30%; pointer-events: none;
  background:
    radial-gradient(34% 20% at 28% 64%, color-mix(in srgb, var(--paper) 88%, transparent), transparent 70%),
    radial-gradient(30% 16% at 70% 72%, color-mix(in srgb, var(--paper) 80%, transparent), transparent 70%),
    radial-gradient(22% 12% at 50% 80%, color-mix(in srgb, var(--paper) 70%, transparent), transparent 70%); }
.hero__light { position: absolute; inset: 0; pointer-events: none; opacity: .4;
  background: radial-gradient(26% 34% at 52% 52%, rgba(255, 226, 196, .55), transparent 70%); }
@media (prefers-reduced-motion: no-preference) {
  [data-motion="on"] .hero__img { animation: am-breathe 22s ease-in-out infinite alternate; }
  [data-motion="on"] .hero__mist { animation: am-mist 18s ease-in-out infinite alternate; }
  [data-motion="on"] .hero__light { animation: am-light 9s ease-in-out infinite alternate; }
}
@keyframes am-breathe { from { transform: scale(1); } to { transform: scale(1.07); } }
@keyframes am-mist { from { transform: translate3d(-12%, 1%, 0); } to { transform: translate3d(12%, -3%, 0); } }
@keyframes am-light { from { opacity: .15; } to { opacity: .8; } }
.hero__inner { display: grid; justify-items: center; align-content: center; min-height: min(86vh, 820px); padding-block: clamp(3rem, 7vw, 5.5rem) clamp(5rem, 10vw, 8rem); }
[data-nav="minimi"] .hero__inner { padding-top: calc(var(--header-h) + 2rem); }
.hero__text { position: relative; max-width: 640px; text-align: center; }
.hero__text::before { content: ""; position: absolute; z-index: -1; inset: -3.5rem -5rem;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--paper) 94%, transparent) 55%, transparent 100%); }
.hero h1 { margin-bottom: 1.2rem; max-width: none; }
.h1-brand { display: block; font-size: clamp(3rem, 1.9rem + 5vw, 5.4rem); line-height: 1; letter-spacing: -.02em; }
.h1-sub { display: block; font-size: clamp(1.15rem, 1rem + .8vw, 1.5rem); line-height: 1.35; margin: .9rem auto 0; color: var(--ink-soft); font-weight: 400; max-width: 26ch; }
.hero__tagline { font-family: var(--font-head); font-style: italic; font-size: clamp(1.2rem, 1.08rem + .6vw, 1.5rem); line-height: 1.42; color: var(--forest); margin: 0 auto 1.2rem; }
.hero__intro { color: var(--ink); margin: 0 auto 2rem; max-width: 56ch; font-size: .98em; }
.hero .btn-row { justify-content: center; }
.hero__photo { display: none; margin: 0; }
.hero__photo img { width: 100%; height: auto; border-radius: var(--radius); box-shadow: 0 18px 40px -24px rgba(30, 45, 45, .5); }

/* Vaihtoehto: valokuva rinnalla */
@media (min-width: 900px) {
  [data-hero="kuva"] .hero__inner { grid-template-columns: 1.1fr .9fr; gap: 4rem; justify-items: start; align-items: center; }
  [data-hero="kuva"] .hero__text { text-align: left; }
  [data-hero="kuva"] .h1-sub, [data-hero="kuva"] .hero__tagline, [data-hero="kuva"] .hero__intro { margin-inline: 0; }
  [data-hero="kuva"] .hero .btn-row { justify-content: flex-start; }
  [data-hero="kuva"] .hero__photo { display: block; max-width: 420px; justify-self: end; }
  [data-hero="kuva"] .hero__art { opacity: .4; }
  [data-hero="kuva"] .hero__text::before { display: none; }
}

@media (max-width: 700px) {
  .hero__art { position: relative; aspect-ratio: 16 / 10; z-index: 0;
    -webkit-mask-image: linear-gradient(to bottom, #000 60%, transparent 100%); mask-image: linear-gradient(to bottom, #000 60%, transparent 100%); }
  .hero__img { object-position: center; }
  .hero__inner { min-height: 0; padding-block: 0 3.5rem; margin-top: -2.5rem; position: relative; justify-items: start; }
  .hero__text { text-align: left; }
  .hero__text::before { display: none; }
  .h1-sub, .hero__tagline, .hero__intro { margin-inline: 0; }
  .hero .btn-row { justify-content: flex-start; }
}

/* ---------- Kuvapaikat (placeholder) ---------- */
.ph {
  position: relative; display: grid; place-items: center; text-align: center;
  aspect-ratio: var(--ar, 4 / 5); width: 100%; border-radius: var(--radius); overflow: hidden;
  background: repeating-linear-gradient(135deg, transparent 0 14px, color-mix(in srgb, var(--forest) 7%, transparent) 14px 15px), color-mix(in srgb, var(--paper-2) 80%, var(--mist) 20%);
  color: var(--ink-soft); font-size: .88rem; border: 1px dashed color-mix(in srgb, var(--forest) 30%, transparent);
}
.ph span { background: var(--surface); padding: .4rem .75rem; border-radius: 4px; max-width: 85%; }
.ph--round { --ar: 1; border-radius: 50%; width: 62%; }

/* ---------- Mitä Äänimatkat on ---------- */
#menetelma .intro { max-width: 760px; }
.statement {
  font-family: var(--font-head); font-style: italic; font-size: clamp(1.35rem, 1.1rem + 1vw, 1.9rem); line-height: 1.42;
  max-width: 34ch; margin: clamp(2rem, 5vw, 3.5rem) 0 0 auto; color: var(--forest);
}

/* ---------- Pedagogiikka ---------- */
.h-narrow { max-width: 18ch; margin-bottom: 1.5em; }
.prose-cols { display: grid; gap: 0 4rem; }
@media (min-width: 900px) { .prose-cols { grid-template-columns: 1fr 1fr; } }
.prose-cols--tight { margin-top: 2.5rem; }
.prose-cols--tight p { color: var(--ink-soft); }

/* ---------- Ääni ---------- */
.split { display: grid; gap: 2.5rem; align-items: center; }
.split--top { align-items: start; }
@media (min-width: 900px) { .split { grid-template-columns: 1fr 1fr; gap: 5rem; } .split--rev > :first-child { order: 2; } }

/* ---------- Rakenne ---------- */
#rakenne .intro { max-width: 760px; }
.flow-wrap { position: relative; }
.flow { list-style: none; margin: 0; padding: 2rem 0; display: grid; gap: 1.5rem; border-block: 1px solid var(--line); }
@media (min-width: 800px) { .flow { grid-template-columns: repeat(3, 1fr); gap: 2rem; } }
.flow li { position: relative; }
.flow__word { display: block; font-family: var(--font-head); font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem); line-height: 1.15; margin-bottom: .4rem; }
@media (min-width: 800px) {
  .flow li + li::before { content: ""; position: absolute; left: -1rem; top: .4rem; bottom: .4rem; width: 1px; background: var(--line); }
}
.flow p { margin: 0; color: var(--ink-soft); font-size: 1rem; }

/* ---------- Päivän kulku ---------- */
.day { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; position: relative; }
.day li { padding: 1rem 0 1rem 1.75rem; position: relative; border-left: 1px solid var(--line); color: var(--ink-soft); }
.day li::before { content: ""; position: absolute; left: -5px; top: 1.45rem; width: 9px; height: 9px; border-radius: 50%; background: var(--paper); border: 1.5px solid var(--moss); }
.day li:first-child::before { background: var(--lemon); border-color: var(--ochre); }
.day li:last-child::before { background: var(--mist); border-color: var(--primary); }
.day__time { display: block; font-family: var(--font-head); font-size: 1.3rem; color: var(--ink); margin-bottom: .1rem; }
@media (min-width: 900px) {
  .day { grid-template-columns: repeat(5, 1fr); }
  .day li { border-left: 0; border-top: 1px solid var(--line); padding: 1.6rem 1.25rem 0 0; }
  .day li::before { left: 0; top: -5px; }
}

/* ---------- Kasvattajalle ---------- */
.questions { font-family: var(--font-head); font-style: italic; font-size: 1.2rem; line-height: 1.5; color: var(--forest); }
.questions span { display: block; }

/* ---------- Koulutus ---------- */
.facts { margin: 2rem 0 0; display: grid; border-top: 1px solid var(--line); max-width: 520px; }
.facts div { display: grid; grid-template-columns: 7.5rem 1fr; gap: 1rem; padding: .7rem 0; border-bottom: 1px solid var(--line); }
.facts dt { color: var(--ink-soft); font-size: .95rem; }
.facts dd { margin: 0; }
.includes { padding: clamp(1.5rem, 3vw, 2.25rem); background: var(--surface); border-radius: var(--radius); border: 1px solid var(--line); }
.includes h3 { margin-bottom: 1rem; }
.dot-list { list-style: none; padding: 0; margin: 0; }
.dot-list li { position: relative; padding: .45rem 0 .45rem 1.3rem; border-bottom: 1px dotted var(--line); }
.dot-list li:last-child { border-bottom: 0; }
.dot-list li::before { content: ""; position: absolute; left: 0; top: 1.05em; width: 7px; height: 7px; border-radius: 50%; background: var(--moss); }

/* ---------- Kokemuksia ---------- */
#kokemuksia .intro { max-width: 760px; }
.quote { margin: 0; }
.quote blockquote { margin: 0; }
.quote blockquote p { font-family: var(--font-head); font-size: 1.2rem; line-height: 1.5; margin: 0; }
.quote figcaption { margin-top: .7rem; font-size: .88rem; color: var(--ink-soft); }
.quote--big { padding: clamp(1.5rem, 4vw, 3rem) 0; text-align: center; }
.quote--big blockquote p { font-size: clamp(1.5rem, 1.15rem + 1.6vw, 2.3rem); line-height: 1.35; max-width: 26ch; margin-inline: auto; font-style: italic; color: var(--forest); }
.quotes { display: grid; gap: 2rem; margin-top: 1rem; }
@media (min-width: 760px) { .quotes { grid-template-columns: 1fr 1fr; gap: 3rem; } }
.quotes .quote { padding-top: 1.25rem; border-top: 1px solid var(--line); }
.disclaimer { font-size: .92rem; color: var(--ink-soft); margin-top: 2.5rem; max-width: 70ch; }

/* ---------- Kehittäjä ---------- */
.dev-grid { display: grid; gap: 2.5rem; align-items: start; }
@media (min-width: 900px) { .dev-grid { grid-template-columns: .75fr 1.25fr; gap: 5rem; } }
.signature { font-family: var(--font-head); font-style: italic; font-size: 1.6rem; color: var(--forest); margin-top: 1.5rem; }

/* ---------- Käyttöönotto ---------- */
.steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 1.75rem; counter-reset: s; }
@media (min-width: 900px) { .steps { grid-template-columns: repeat(4, 1fr); gap: 2rem; } }
.steps li { counter-increment: s; padding-top: 1rem; border-top: 1px solid var(--ink-soft); }
.steps li::before { content: counter(s); display: block; font-family: var(--font-head); font-style: italic; font-size: 2rem; line-height: 1; color: var(--ochre); margin-bottom: .6rem; }
.steps h3 { font-size: 1.15rem; margin-bottom: .3rem; }
.steps p { font-size: .98rem; color: var(--ink-soft); margin: 0; }

/* ---------- UKK ---------- */
.faq-wrap { position: relative; max-width: 780px; margin-inline: auto; }
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: 1.15rem 0; font-family: var(--font-head); font-size: clamp(1.1rem, 1rem + .35vw, 1.25rem); line-height: 1.35;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex: none; width: 14px; height: 14px;
  background: linear-gradient(var(--ink-soft), var(--ink-soft)) center / 14px 1.5px no-repeat, linear-gradient(var(--ink-soft), var(--ink-soft)) center / 1.5px 14px no-repeat;
  transition: transform .25s;
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq summary:hover { color: var(--primary); }
.faq__body { padding: 0 0 1.3rem; color: var(--ink-soft); }
.faq__body p:last-child { margin-bottom: 0; }

/* ---------- Yhteys ---------- */
.contact { position: relative; }
.contact-grid { display: grid; gap: 2.5rem; }
@media (min-width: 900px) { .contact-grid { grid-template-columns: .9fr 1.1fr; gap: 5rem; align-items: start; } }
.form-card { background: var(--surface); border-radius: var(--radius); padding: clamp(1.5rem, 3.5vw, 2.4rem); border: 1px solid var(--line); position: relative; z-index: 1; }
.field { display: grid; gap: .35rem; margin-bottom: 1.1rem; }
.field label { font-weight: 600; font-size: .95rem; }
.field .opt { font-weight: 400; color: var(--ink-soft); }
.field input, .field textarea { width: 100%; font: inherit; font-size: 1rem; color: var(--ink); padding: .75rem .9rem; border-radius: 4px; border: 1px solid color-mix(in srgb, var(--ink) 28%, transparent); background: #fff; }
.field textarea { min-height: 140px; resize: vertical; }
.field input:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; border-color: var(--primary); }
.field [aria-invalid="true"] { border-color: #a2412f; }
.field-error { color: #9a3b2a; font-size: .9rem; margin: 0; }
.field-error:empty { display: none; }
.check { display: grid; grid-template-columns: 24px 1fr; gap: .7rem; align-items: start; margin: .5rem 0 1.4rem; font-size: .95rem; }
.check input { width: 24px; height: 24px; margin: 0; accent-color: var(--primary); }
.check label { padding-block: .15rem; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-status { margin-top: 1rem; }
.form-success { padding: 1.5rem 0; }
.form-success h3 { margin-bottom: .5rem; }
.demo-note { font-size: .85rem; color: var(--ink-soft); background: var(--accent-soft); padding: .6rem .8rem; border-radius: 4px; margin-top: 1rem; }
.contact-direct { margin-top: 1.5rem; font-size: .98rem; }

/* ---------- Alatunniste ---------- */
.site-footer { padding: 3rem 0 2.5rem; background: color-mix(in srgb, var(--forest) 9%, var(--paper)); font-size: .95rem; }
.footer-grid { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1.5rem 3rem; align-items: flex-start; }
.footer-grid p { margin: .35rem 0 0; color: var(--ink-soft); }
.footer-links { list-style: none; padding: 0; margin: 0; display: grid; gap: .35rem; }
.footer-bottom { margin-top: 2rem; padding-top: 1.25rem; border-top: 1px solid var(--line); color: var(--ink-soft); font-size: .88rem; max-width: none; }

/* ---------- Tietosuojasivu ---------- */
.doc { max-width: 760px; }
.doc h1 { font-size: clamp(2.2rem, 1.6rem + 2.5vw, 3.2rem); }
.doc h2 { font-size: 1.5rem; margin-top: 2.5rem; }
.doc .eyebrow { font-size: .95rem; color: var(--forest); margin-bottom: .5rem; }
.todo { background: color-mix(in srgb, var(--lemon) 70%, transparent); padding: .05em .35em; border-radius: 3px; font-weight: 600; }

/* ---------- Valokuvat ja vesiväripesut ---------- */
.photo { width: 100%; height: auto; border-radius: var(--radius); display: block; }
.framed { position: relative; isolation: isolate; margin: 0 auto; max-width: 420px; width: 100%; }
.framed .photo { position: relative; z-index: 1; box-shadow: 0 18px 40px -24px rgba(30, 45, 45, .5); }
.framed .wash { position: absolute; z-index: 0; width: 150%; max-width: none; right: -38%; top: 10%; opacity: 1; mix-blend-mode: multiply;
  -webkit-mask-image: radial-gradient(closest-side, #000 50%, transparent); mask-image: radial-gradient(closest-side, #000 50%, transparent); }
.framed--left { margin-inline: 0; }
.framed--left .wash { right: auto; left: -40%; }
@media (max-width: 899px) { .framed .wash { display: none; } }

/* ---------- Kokemukset vesiväritaustalla ---------- */
#kokemuksia { padding-bottom: 0; }
#kokemuksia .voices { margin-bottom: 0; }
#kokemuksia .disclaimer { margin-top: 1.25rem; padding-bottom: clamp(2.5rem, 5vw, 4rem); }
.voices { position: relative; overflow: hidden; padding: clamp(3rem, 7vw, 6rem) 0 clamp(5rem, 12vw, 10rem); }
.voices__bg {
  position: absolute; inset: -18% 0 -6% 0; z-index: 0;
  background: url("../img/rajaus-pohja-1920.webp") center bottom / 100% auto no-repeat;
  mix-blend-mode: multiply;
}
@media (max-width: 800px) { .voices__bg { background-image: url("../img/rajaus-pohja-1000.webp"); background-size: 220% auto; } }
.voices__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, var(--paper) 0%, color-mix(in srgb, var(--paper) 55%, transparent) 30%, transparent 60%); }
[data-paper="on"] .voices__bg::after { background: linear-gradient(to bottom, var(--paper) 0%, color-mix(in srgb, var(--paper) 50%, transparent) 30%, transparent 60%); }
.voices__inner { position: relative; z-index: 1; }
.voices .quote--big { padding-top: 0; }
.voices .quote--big blockquote p { font-size: clamp(1.7rem, 1.2rem + 2.2vw, 2.9rem); color: var(--ink); }
.voices .quotes { margin-top: clamp(2rem, 5vw, 4rem); }
.voices .quotes .quote {
  border-top: 0; box-shadow: 0 10px 30px -18px rgba(20, 40, 40, .5); padding: clamp(1.4rem, 3vw, 2rem);
  background: color-mix(in srgb, var(--surface) 90%, transparent); border-radius: var(--radius);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
}

/* ---------- Yhteys: vuoristotausta ---------- */
.contact { overflow: hidden; }
.contact__bg { position: absolute; inset: -10% 0 0 0; z-index: 0; opacity: .4; mix-blend-mode: multiply;
  background: url("../img/metsa-peili-1920.webp") center bottom / cover no-repeat; }
@media (max-width: 800px) { .contact__bg { background-image: url("../img/metsa-peili-1000.webp"); opacity: .35; } }
.contact__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, var(--paper) 0%, transparent 45%); }
.contact .contact-grid { position: relative; z-index: 1; }
.contact-person { display: flex; gap: 1rem; align-items: center; margin-top: 2rem; }
.contact-person img { width: 76px; height: 76px; border-radius: 50%; object-fit: cover; flex: none; }
.contact-person p { margin: 0; font-size: .98rem; }

/* ---------- Liike (parallaksi) ---------- */
[data-speed] { will-change: transform; }
[data-motion="off"] [data-speed] { transform: none !important; }

/* ---------- Äänimatkat lyhyesti ---------- */
.overview { margin: 0; display: grid; gap: 0; border-top: 1px solid var(--line); }
.overview > div { display: grid; gap: .35rem 2.5rem; padding: 1.3rem 0; border-bottom: 1px solid var(--line); }
@media (min-width: 800px) { .overview > div { grid-template-columns: 15rem 1fr; } }
.overview dt { font-family: var(--font-head); font-size: 1.25rem; line-height: 1.3; }
.overview dd { margin: 0; max-width: var(--measure); }
.overview .dot-list li { border-bottom: 0; padding-block: .2rem; }
.overview .dot-list li::before { top: .8em; }
#kokonaisuus .statement { margin-top: clamp(2.5rem, 5vw, 3.5rem); }

/* ---------- Päivän kulku rakenteen yhteydessä ---------- */
.day-block { margin-top: clamp(3rem, 6vw, 4.5rem); }
.day-block > p { color: var(--ink-soft); margin-bottom: 1.75rem; }
.day-block h3 { font-size: clamp(1.4rem, 1.2rem + .8vw, 1.8rem); }

/* ---------- Mobiilin kiinteä varauspainike ---------- */
.mobile-cta { display: none; }
@media (max-width: 920px) {
  .mobile-cta:not([hidden]) { display: flex; position: fixed; z-index: 40; left: 12px; right: 12px; bottom: max(12px, env(safe-area-inset-bottom));
    box-shadow: 0 10px 30px -10px rgba(20, 40, 40, .55); }
}

/* Yläpalkki on läpinäkyvä sivun alussa, jolloin metsä jatkuu sen taakse */
[data-nav="palkki"] .site-header:not(.is-scrolled) { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
@media (min-width: 701px) {
  [data-nav="palkki"] .hero { margin-top: calc(-1 * var(--header-h)); }
  [data-nav="palkki"] .hero__inner { padding-top: calc(var(--header-h) + clamp(2rem, 5vw, 4rem)); }
}

/* Taustojen yläreuna häivytetään paperiin */
.voices__bg, .contact__bg { -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 30%); mask-image: linear-gradient(to bottom, transparent 0%, #000 30%); }
.voices__bg { inset: 0 0 -1px 0; -webkit-mask-image: none; mask-image: none; mix-blend-mode: multiply;
  background:
    linear-gradient(to bottom, #fff 0%, rgba(255,255,255,.85) 25%, rgba(255,255,255,0) 60%) center bottom / 100% 25vw no-repeat,
    url("../img/rajaus-pohja-1920.webp") center bottom / 100% 25vw no-repeat; }
@media (max-width: 800px) { .voices__bg { background:
    linear-gradient(to bottom, #fff 0%, rgba(255,255,255,.85) 25%, rgba(255,255,255,0) 60%) center bottom / 100% 55vw no-repeat,
    url("../img/rajaus-pohja-1000.webp") center bottom / 220% 55vw no-repeat; } }
.voices { padding-bottom: clamp(9rem, 20vw, 17rem); }
.voices__bg::after, .contact__bg::after { display: none; }
.contact__bg { inset: -10% 0 -12% 0; }

/* ---------- Lainauskaruselli ---------- */
.slider { position: relative; }
.slider__track { list-style: none; margin: 0; padding: 0; display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; scroll-behavior: smooth; }
.slider__track::-webkit-scrollbar { display: none; }
.slide { flex: 0 0 100%; scroll-snap-align: center; display: grid; place-items: center; padding-inline: clamp(.5rem, 6vw, 5rem); }
.voices .slide .quote--big { padding: 0; }
.voices .slide .quote--big blockquote p { font-size: clamp(1.45rem, 1.05rem + 1.9vw, 2.5rem); max-width: 24ch; }
.slider__nav { display: flex; justify-content: center; align-items: center; gap: 1.1rem; margin-top: clamp(1.75rem, 4vw, 2.75rem); }
.slider__btn { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  background: color-mix(in srgb, var(--surface) 88%, transparent); border: 1px solid var(--line); color: var(--ink); }
.slider__btn:hover { background: var(--surface); border-color: var(--ink-soft); }
.slider__btn[disabled] { opacity: .35; cursor: default; }
.slider__dots { display: flex; gap: .5rem; }
.slider__dots span { width: 8px; height: 8px; border-radius: 50%; background: color-mix(in srgb, var(--ink) 25%, transparent); transition: background-color .3s, transform .3s; }
.slider__dots span.is-on { background: var(--primary); transform: scale(1.25); }
.voices { padding: clamp(2rem, 5vw, 4rem) 0 clamp(5rem, 11vw, 9rem); }

/* ---------- Rajaukset metsäakvarellista ---------- */
.vignette, .wash { mix-blend-mode: multiply; pointer-events: none; user-select: none; }
.framed .wash--puro { width: 150%; right: -45%; top: auto; bottom: -14%; opacity: 1;
  -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 45%, transparent 100%); mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 45%, transparent 100%); }
.framed--left .wash--koivut { width: 62%; left: -40%; top: -10%; opacity: 1;
  -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 50%, transparent 100%); mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 50%, transparent 100%); }
.statement-wrap { position: relative; display: grid; align-items: center; margin-top: clamp(2.5rem, 5vw, 3.5rem); }
#kokonaisuus .statement-wrap .statement { margin-top: 0; }
.vignette--kuuset { position: absolute; left: 4%; top: 50%; translate: 0 -50%; width: clamp(180px, 22vw, 300px); height: auto;
  -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 45%, transparent 100%); mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 45%, transparent 100%); }
.rakenne-wrap { position: relative; }
.vignette--kuusi { position: absolute; right: 2%; top: -4.5rem; width: clamp(130px, 13vw, 190px); height: auto;
  -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 45%, transparent 100%); mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 45%, transparent 100%); }
.vignette--mannyt { position: absolute; left: -300px; top: -3rem; width: 300px; height: auto;
  -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 40%, transparent 100%); mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 40%, transparent 100%); }
@media (max-width: 899px) { .vignette--kuuset, .vignette--kuusi { display: none; } }
@media (max-width: 1260px) { .vignette--mannyt { display: none; } }
.flow-wrap, .rakenne-wrap .intro { position: relative; z-index: 1; }

/* ---------- Äänimatkat lyhyesti (ilman taulukkoa) ---------- */
.glance { display: grid; gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
@media (min-width: 900px) { .glance { grid-template-columns: 1fr 1.05fr; } }
.glance__facts { display: grid; gap: 1.75rem; }
.glance__item h3 { font-size: 1.3rem; margin-bottom: .3rem; color: var(--forest); }
.glance__item p { margin: 0; }
.glance__box { position: relative; padding: clamp(1.6rem, 3.5vw, 2.4rem); border-radius: 14px;
  background: color-mix(in srgb, var(--accent-soft) 70%, var(--surface)); }
.glance__box h3 { font-size: 1.3rem; margin-bottom: 1rem; }
.leaf-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.leaf-list li { position: relative; padding-left: 1.7rem; }
.leaf-list li::before { content: ""; position: absolute; left: 0; top: .42em; width: 13px; height: 13px;
  background: var(--moss); border-radius: 0 70% 0 70%; transform: rotate(-10deg); opacity: .85; }

/* Lainauksen kuvalle oma tila */
.statement-wrap { display: grid; gap: 1.5rem; align-items: center; margin-top: clamp(3.5rem, 7vw, 5.5rem); }
@media (min-width: 900px) { .statement-wrap { grid-template-columns: minmax(220px, 300px) 1fr; gap: clamp(2.5rem, 6vw, 5rem); } }
.vignette--kuuset { position: static; translate: none; width: 100%; max-width: 300px; }
#kokonaisuus .statement-wrap .statement { margin: 0; max-width: 32ch; }
@media (max-width: 899px) { .vignette--kuuset { display: block; max-width: 200px; margin-inline: auto; } }

/* ---------- Nostolainaukset eri osioissa ---------- */
.pull { margin: 2rem 0 0; padding: 1.4rem 0 0 1.4rem; position: relative; }
.pull { border-left: 2px solid color-mix(in srgb, var(--moss) 70%, transparent); padding: .2rem 0 .2rem 1.3rem; margin-top: 2.25rem; }
.pull blockquote { margin: 0; }
.pull blockquote p { font-family: var(--font-head); font-style: italic; font-size: clamp(1.15rem, 1.05rem + .45vw, 1.35rem); line-height: 1.5; color: var(--forest); margin: 0; max-width: 40ch; }
.pull figcaption { margin-top: .6rem; font-size: .88rem; color: var(--ink-soft); }

/* Karusellin tarinadiat */
.quote__kicker { font-size: .85rem; letter-spacing: .08em; text-transform: uppercase; color: var(--forest); margin: 0 auto .9rem; font-weight: 700; }
.voices .quote--story blockquote p { font-style: normal; font-size: clamp(1.25rem, 1rem + 1.3vw, 1.9rem); max-width: 30ch; }
.quote--big { text-align: center; }

/* ---------- Käyttöönoton polku ---------- */
.path { position: relative; --dot: 64px; --drop: 3.25rem; }
.path__line { position: absolute; left: 0; top: 0; width: 100%; height: calc(var(--dot) + var(--drop)); overflow: visible; pointer-events: none; }
.path__line path { fill: none; stroke: var(--moss); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 1 9; }
.path__steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 2.25rem; position: relative; }
.path__steps li { position: relative; text-align: center; padding-inline: .5rem; }
.path__dot { display: grid; place-items: center; width: var(--dot); height: var(--dot); margin: 0 auto 1rem; border-radius: 50%;
  font-family: var(--font-head); font-size: 1.6rem; color: var(--ink);
  background: radial-gradient(circle at 40% 35%, var(--surface) 0 30%, color-mix(in srgb, var(--mist) 55%, var(--surface)) 75%);
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--paper-2) 80%, transparent); }
.path__steps li:last-child .path__dot { background: radial-gradient(circle at 40% 35%, var(--surface) 0 30%, color-mix(in srgb, var(--lemon) 70%, var(--surface)) 75%); }
.path__steps h3 { font-size: 1.2rem; margin-bottom: .3rem; }
.path__steps p { font-size: .98rem; color: var(--ink-soft); margin: 0 auto; max-width: 24ch; }
@media (min-width: 900px) {
  .path__steps { grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
  .path__steps li:nth-child(even) { padding-top: var(--drop); }
}
@media (prefers-reduced-motion: no-preference) {
  .path__line { clip-path: inset(0 100% 0 0); transition: clip-path 2.4s ease; }
  .path.is-in .path__line { clip-path: inset(0 0 0 0); }
  .path__dot { transform: scale(.85); opacity: .4; transition: transform .7s ease, opacity .7s ease; }
  .path.is-in .path__dot { transform: none; opacity: 1; }
  .path.is-in li:nth-child(2) .path__dot { transition-delay: .5s; }
  .path.is-in li:nth-child(3) .path__dot { transition-delay: 1.1s; }
  .path.is-in li:nth-child(4) .path__dot { transition-delay: 1.7s; }
}
@media (max-width: 899px) {
  .path__line { display: none; }
  .path__steps { gap: 0; }
  .path__steps li { text-align: left; display: grid; grid-template-columns: 56px 1fr; column-gap: 1.1rem; padding: 0 0 1.75rem; }
  .path__steps li::before { content: ""; position: absolute; left: 27px; top: 56px; bottom: 0; border-left: 2px dotted var(--moss); }
  .path__steps li:last-child::before { display: none; }
  .path { --dot: 56px; }
  .path__dot { grid-row: span 2; margin: 0; font-size: 1.35rem; }
  .path__steps h3 { margin-top: .75rem; }
  .path__steps p { margin: 0; max-width: none; }
}

/* Polun numerot vesiväriläiskissä (vain läiskä kiertyy, numero pysyy suorassa) */
.path { --dot: 78px; }
.path__dot { position: relative; isolation: isolate; background: none; box-shadow: none; border-radius: 0; font-size: 1.75rem; }
.path__dot::before { content: ""; position: absolute; inset: 0; z-index: -1; background: url("../img/laikku-usva.webp") center / contain no-repeat; transform: rotate(var(--r, 0deg)); }
.path__steps li:nth-child(2) .path__dot::before { background-image: url("../img/laikku-taivas.webp"); }
.path__steps li:nth-child(3) .path__dot::before { background-image: url("../img/laikku-sammal.webp"); }
.path__steps li:last-child .path__dot { background: none; }
.path__steps li:last-child .path__dot::before { background-image: url("../img/laikku-sitruuna.webp"); }
.path__steps li:nth-child(2) .path__dot { --r: 140deg; } .path__steps li:nth-child(3) .path__dot { --r: -100deg; } .path__steps li:nth-child(4) .path__dot { --r: 60deg; }
@media (max-width: 899px) { .path { --dot: 64px; } .path__steps li::before { left: 31px; top: 64px; } .path__steps li { grid-template-columns: 64px 1fr; } }
.btn-row--center { justify-content: center; }