/* Koiramäki – Koiramäen Majatalo.
   Petrol blue from Nanne's staircase, greens and beige on a cream background. Fresh and airy: generous space,
   big soft shapes, coloured bands with wavy edges. Nunito, self-hosted. */

@font-face { font-family: "Nunito"; src: url("fonts/nunito-latin.woff2") format("woff2"); font-weight: 400 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Nunito"; src: url("fonts/nunito-italic-latin.woff2") format("woff2"); font-weight: 400 700; font-style: italic; font-display: swap; }

:root {
  /* Colours */
  --petrooli: #0f6f87;
  --petrooli-tumma: #0a4f61;
  --petrooli-syva: #083f4d;
  --petrooli-vaalea: #dcedf1;
  --petrooli-haalea: #eef6f8;
  --vihrea: #3f7d3a;
  --vihrea-tumma: #2b5a28;
  --vihrea-vaalea: #dcebd0;
  --hiekka: #efe4cf;
  --hiekka-tumma: #6b4f1d;
  --okra: #f6e3b8;
  --okra-teksti: #4a3510;
  --kerma: #fbf7ee;
  --valkoinen: #fffdf8;
  --teksti: #1f2b26;
  --teksti-pehmea: #46564f;

  /* Type scale */
  --fontti: "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
  --koko-pieni: .9375rem;
  --koko-perus: 1.125rem;
  --koko-iso: clamp(1.1875rem, 1.6vw, 1.3125rem);
  --koko-h3: 1.375rem;
  --koko-h2: clamp(1.75rem, 3.4vw, 2.5rem);
  --koko-h1: clamp(2.25rem, 5.2vw, 3.875rem);

  /* Spacing scale */
  --tila-1: .25rem;
  --tila-2: .5rem;
  --tila-3: .75rem;
  --tila-4: 1rem;
  --tila-5: 1.5rem;
  --tila-6: 2rem;
  --tila-7: 3rem;
  --tila-8: 4.5rem;
  --tila-9: 6.5rem;
  --osio: clamp(var(--tila-7), 7vw, var(--tila-9));

  /* Shapes */
  --pyoristys: 14px;
  --pyoristys-iso: 28px;
  --pilleri: 999px;
  --varjo: 0 10px 30px rgba(10, 79, 97, .10);
  --varjo-pieni: 0 3px 10px rgba(10, 79, 97, .08);

  /* Layout */
  --leveys: 1160px;
  --lukuleveys: 68ch;
  /* South Ostrobothnian "latomeri": spruces at the edges, three barns on a flat field (kuvat/latomeri.svg, Katri 2026-10-31).
     Used as a mask, so the landscape takes the colour of its section and the sky stays transparent. Tiles sideways. */
  --maisema: url("../kuvat/latomeri.svg");
  --aalto: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 40' preserveAspectRatio='none'%3E%3Cpath d='M0 40 C200 0 400 0 600 20 S1000 40 1200 8 V40Z'/%3E%3C/svg%3E");
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--kerma); color: var(--teksti);
  font: 400 var(--koko-perus)/1.65 var(--fontti);
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--petrooli); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--petrooli-tumma); text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--petrooli); outline-offset: 3px; border-radius: 4px; }
.yhteyspalkki :focus-visible, .yhteyskaista :focus-visible, .alaosa :focus-visible { outline-color: #fff; }
[id] { scroll-margin-top: var(--tila-5); }

h1, h2, h3 { font-weight: 800; line-height: 1.15; color: var(--petrooli-tumma); margin: 0 0 var(--tila-4); letter-spacing: -.015em; text-wrap: balance; }
h1 { font-size: var(--koko-h1); font-weight: 900; }
h2 { font-size: var(--koko-h2); }
h3 { font-size: var(--koko-h3); }
p { margin: 0 0 var(--tila-4); }
.pieni-otsikko { font-size: 1.5rem; }

.leveys { width: min(var(--leveys), 100% - 2rem); margin-inline: auto; }
.kapea { max-width: 780px; }
.keskita { text-align: center; }
.lukuteksti { max-width: var(--lukuleveys); }
.nakymaton { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ohita { position: absolute; left: -999px; top: var(--tila-2); background: #fff; padding: var(--tila-2) var(--tila-3); z-index: 100; }
.ohita:focus { left: var(--tila-2); }
.ikoni { width: 1.25em; height: 1.25em; flex: none; }

/* Text from the formatted fields */
.km-sisalto ul, .km-sisalto ol { padding-left: 1.2em; margin: 0 0 var(--tila-4); }
.km-sisalto li { margin-bottom: var(--tila-2); }
.km-sisalto li::marker { color: var(--vihrea); }
.km-sisalto > :last-child { margin-bottom: 0; }
.iso-teksti { font-size: var(--koko-iso); }

/* Buttons and links */
.nappi {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--tila-2);
  min-height: 48px; padding: .7em 1.4em; border-radius: var(--pilleri);
  background: var(--petrooli); color: #fff; font-weight: 800; text-decoration: none; line-height: 1.2;
  transition: background-color .15s, transform .15s, box-shadow .15s;
}
.nappi:hover { background: var(--petrooli-tumma); color: #fff; transform: translateY(-1px); text-decoration: none; }
.nappi--toissijainen { background: transparent; color: var(--petrooli-tumma); box-shadow: inset 0 0 0 2px var(--petrooli); }
.nappi--toissijainen:hover { background: var(--petrooli-vaalea); color: var(--petrooli-tumma); }
.nappi--valkoinen { background: #fff; color: var(--petrooli-tumma); }
.nappi--valkoinen:hover { background: var(--petrooli-haalea); color: var(--petrooli-syva); }
.nappi--reunus-valkoinen { background: transparent; color: #fff; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .85); }
.nappi--reunus-valkoinen:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.linkki-nuoli { display: inline-flex; align-items: center; gap: var(--tila-1); min-height: 44px; font-weight: 800; text-decoration: none; }
.linkki-nuoli::after { content: "→"; transition: transform .15s; }
.linkki-nuoli:hover::after { transform: translateX(3px); }
.linkki-nuoli--valkoinen { color: #fff; }
.linkki-nuoli--valkoinen:hover { color: #fff; text-decoration: underline; }

/* Top contact bar (desktop) */
.yhteyspalkki { background: var(--petrooli-tumma); color: #e6f2f5; font-size: var(--koko-pieni); }
.yhteyspalkki-sisa { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: var(--tila-2) var(--tila-5); padding-block: var(--tila-2); }
.yhteyspalkki-kohta { display: inline-flex; align-items: center; gap: var(--tila-2); }
.yhteyspalkki a { color: #fff; text-decoration: none; }
.yhteyspalkki a:hover { text-decoration: underline; }
@media (max-width: 700px) { .yhteyspalkki { display: none; } }

/* Header */
.ylaosa { background: var(--kerma); position: relative; z-index: 10; }
.ylaosa-sisa { display: flex; align-items: center; justify-content: space-between; gap: var(--tila-4); padding-block: var(--tila-4); }
.logo { display: inline-flex; align-items: center; gap: var(--tila-3); text-decoration: none; color: var(--petrooli-tumma); min-height: 48px; }
.logo:hover { text-decoration: none; }
.logo-kuva { height: clamp(76px, 8vw, 104px); width: auto; } /* the logo carries the name, so it needs room to be readable */
.logo-teksti { font-weight: 900; font-size: 1.375rem; line-height: 1.1; letter-spacing: -.01em; max-width: 9em; }
.valikko { display: flex; align-items: center; gap: var(--tila-2); }
.valikko ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--tila-1); }
.valikko a { display: flex; align-items: center; min-height: 44px; padding: 0 .95em; border-radius: var(--pilleri); text-decoration: none; font-weight: 700; color: var(--teksti); }
.valikko a:hover { background: var(--petrooli-vaalea); color: var(--petrooli-tumma); }
.valikko a[aria-current="page"] { background: var(--petrooli); color: #fff; }
.valikko-nappi, .valikko .soita-nappi { display: none; }

@media (max-width: 980px) {
  .js .valikko-nappi {
    display: inline-flex; align-items: center; gap: var(--tila-2); min-height: 48px; font: 800 1rem var(--fontti);
    padding: 0 1.1em; border: 0; border-radius: var(--pilleri); background: var(--petrooli-vaalea); color: var(--petrooli-tumma); cursor: pointer;
  }
  .valikko .soita-nappi { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; padding: 0; border-radius: 50%; background: var(--petrooli); color: #fff; }
  .valikko .soita-nappi:hover { background: var(--petrooli-tumma); color: #fff; }
  .valikko-ikoni, .valikko-ikoni::before, .valikko-ikoni::after { display: block; width: 18px; height: 2px; background: currentColor; border-radius: 2px; position: relative; }
  .valikko-ikoni::before, .valikko-ikoni::after { content: ""; position: absolute; left: 0; }
  .valikko-ikoni::before { top: -6px; }
  .valikko-ikoni::after { top: 6px; }
  .js .valikko ul { display: none; position: absolute; left: 1rem; right: 1rem; top: 100%; flex-direction: column; background: var(--valkoinen); padding: var(--tila-3); border-radius: var(--pyoristys); box-shadow: var(--varjo); }
  .js .valikko.auki ul { display: flex; }
  .valikko a { padding: 0 1em; min-height: 48px; }
}
@media (max-width: 420px) { .logo-merkki { display: none; } .logo-kuva { height: 70px; } }

/* Front page hero */
.hero { padding-block: clamp(var(--tila-4), 4vw, var(--tila-7)) clamp(var(--tila-7), 7vw, var(--tila-9)); overflow-x: clip; }
.hero-sisa { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(var(--tila-6), 5vw, var(--tila-8)); align-items: center; }
.hero-johdanto { font-size: var(--koko-iso); color: var(--teksti-pehmea); max-width: 34em; }
.hero-toiminnot { display: flex; flex-wrap: wrap; gap: var(--tila-3); margin-top: var(--tila-5); }
.hero-kuvat { position: relative; }
.hero-pallo { position: absolute; width: 78%; aspect-ratio: 1; border-radius: 50%; background: var(--petrooli-vaalea); right: -8%; top: -10%; z-index: 0; }
.hero-kuva { position: relative; z-index: 1; margin: 0; }
.hero-kuva img { width: 100%; aspect-ratio: 5 / 4; object-fit: cover; object-position: 50% 30%; border-radius: var(--pyoristys-iso); box-shadow: var(--varjo); }
.pyorea-kuva { margin: 0; }
.pyorea-kuva img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 30%; border-radius: var(--pyoristys-iso); box-shadow: var(--varjo); }

@media (max-width: 800px) {
  .hero-sisa { grid-template-columns: 1fr; }
  .hero-kuvat { order: -1; margin-inline: var(--tila-2); }
  .hero-pallo { width: 60%; right: -12%; top: -14%; }
}

/* Trust row under the hero */
.luottamus { list-style: none; margin: clamp(var(--tila-6), 5vw, var(--tila-8)) auto 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--tila-2) var(--tila-3); max-width: 1000px; }
.luottamus li { display: inline-flex; align-items: center; gap: var(--tila-2); padding: .45em 1em .45em .75em; background: var(--valkoinen); border-radius: var(--pilleri); box-shadow: var(--varjo-pieni); font-weight: 700; font-size: var(--koko-pieni); color: var(--petrooli-tumma); line-height: 1.3; }
.luottamus .ikoni { color: var(--vihrea); }
.luottamus--muokkaus { display: block; max-width: 640px; text-align: center; font-weight: 700; color: var(--petrooli-tumma); }

/* Intro band */
.esittely { padding-bottom: var(--osio); }
.esittely-laatikko {
  max-width: 900px; margin-inline: auto; padding: clamp(var(--tila-5), 4vw, var(--tila-7));
  background: var(--vihrea-vaalea); border-radius: var(--pyoristys-iso); color: var(--vihrea-tumma);
}
.esittely-laatikko .km-sisalto p { margin-bottom: var(--tila-3); }

/* Sections */
.osio { padding-block: var(--osio); }
.osio + .osio { padding-top: 0; }
.osio-otsikko { position: relative; text-align: center; max-width: 760px; margin: 0 auto var(--tila-6); }
.kaksi-saraketta { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(var(--tila-6), 5vw, var(--tila-8)); align-items: center; }
@media (max-width: 800px) { .kaksi-saraketta { grid-template-columns: 1fr; } }
.laatikko { background: var(--valkoinen); border-radius: var(--pyoristys-iso); padding: clamp(var(--tila-5), 4vw, var(--tila-7)); box-shadow: var(--varjo); }
.laatikko--hiekka { background: var(--hiekka); box-shadow: none; }
.kortit-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: var(--tila-5); align-items: start; }

/* Wavy edges */
.aalto { position: absolute; left: 0; right: 0; height: 40px; background: inherit; -webkit-mask: var(--aalto) center / 100% 100% no-repeat; mask: var(--aalto) center / 100% 100% no-repeat; pointer-events: none; }
.aalto--yla { top: -39px; }
.aalto--ala, .aalto--sivu { bottom: -39px; transform: scale(-1, -1); }

/* Landscape edge: the section's own colour rising as a distant horizon */
.maisema { position: absolute; left: 0; right: 0; top: -95px; height: 96px; background: inherit; pointer-events: none;
  -webkit-mask: var(--maisema) left bottom / 640px 96px repeat-x; mask: var(--maisema) left bottom / 640px 96px repeat-x; }
@media (max-width: 700px) { .maisema { top: -63px; height: 64px; -webkit-mask-size: 427px 64px; mask-size: 427px 64px; } }

/* Services */
.palvelut { background: var(--petrooli-vaalea); position: relative; padding-block: var(--osio); margin-block: var(--tila-7) var(--osio); }
.pikalinkit { margin: 0 auto var(--tila-6); max-width: 960px; }
.pikalinkit ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--tila-2); }
.pikalinkit a {
  display: flex; align-items: center; justify-content: center; text-align: center; min-height: 44px; padding: .5em 1.1em; border-radius: 22px; line-height: 1.3;
  background: var(--valkoinen); color: var(--petrooli-tumma); font-weight: 700; font-size: var(--koko-pieni); text-decoration: none; box-shadow: var(--varjo-pieni);
}
.pikalinkit a:hover { background: var(--petrooli); color: #fff; }
.palvelukortit { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); gap: var(--tila-5); align-items: stretch; }
.palvelukortti {
  background: var(--valkoinen); border-radius: var(--pyoristys-iso); padding: clamp(var(--tila-5), 3vw, var(--tila-6));
  box-shadow: var(--varjo); display: flex; flex-direction: column; gap: var(--tila-3);
}
.palvelukortti h3 { margin: 0; }
.palvelukortti .palvelu-kuvaus { color: var(--teksti-pehmea); }
.palvelukortti--tyhja { background: transparent; box-shadow: none; outline: 2px dashed rgba(15, 111, 135, .35); }
.tyhja-ohje { font-size: var(--koko-pieni); color: var(--teksti-pehmea); font-style: italic; margin: 0; }
.huomio { margin: 0; align-self: flex-start; background: var(--hiekka); color: var(--hiekka-tumma); font-weight: 700; font-size: var(--koko-pieni); line-height: 1.4; padding: .35em .9em; border-radius: var(--pyoristys); }
.hinnat { margin-top: auto; background: var(--vihrea-vaalea); border-radius: var(--pyoristys); padding: var(--tila-4) var(--tila-5); }
.palvelu-toiminnot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--tila-2) var(--tila-4); margin: var(--tila-2) 0 0; }
.nappi--pieni { min-height: 44px; padding: .55em 1.15em; font-size: var(--koko-pieni); }
.palvelu-soita { display: inline-flex; align-items: center; gap: var(--tila-2); min-height: 44px; font-weight: 800; font-size: var(--koko-pieni); text-decoration: none; }
.palvelu-soita:hover { text-decoration: underline; }
.hinnat-otsikko { display: block; font-size: .8125rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--vihrea-tumma); margin-bottom: var(--tila-1); }
.hinnat p { margin: 0; font-weight: 700; color: var(--vihrea-tumma); line-height: 1.55; }

/* Photographer credit: small label in the picture's corner */
.km-kuvapaikka, .km-galleria-kuva { position: relative; }
.km-kuvaaja { position: absolute; right: var(--tila-2); bottom: var(--tila-2); z-index: 1; max-width: calc(100% - 1rem);
  padding: .15em .6em; border-radius: var(--pilleri); background: rgba(10, 30, 36, .62); color: #fff;
  font-size: .75rem; font-weight: 600; line-height: 1.4; pointer-events: none; overflow-wrap: anywhere; }
.km-kuvaaja a { color: #fff; pointer-events: auto; text-decoration: underline; }
.km-galleria-kuva .km-kuvaaja { right: var(--tila-1); bottom: var(--tila-1); max-width: calc(100% - .5rem); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* full credit in the viewer */
@media (max-width: 600px) { .km-kuvaaja { font-size: .6875rem; } }
.suurennos figcaption a { color: #fff; }

/* Galleries */
/* Photo strip: even tiles, cropped toward the top where heads usually are.
   Gallery page: justified rows. Every photo keeps its own shape (--s = width/height from the server),
   photos in one row share the same height and the order runs left to right. */
.km-galleria { display: grid; gap: var(--tila-3); }
.galleria--rivi { grid-template-columns: repeat(4, 1fr); }
.galleria--rivi .km-galleria-kuva img { aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 28%; }
.galleria--ruudukko { --rivi: 230px; display: flex; flex-wrap: wrap; gap: var(--tila-3); }
.galleria--ruudukko > .km-galleria-kuva { --s: 1; flex: var(--s) 1 calc(var(--s) * var(--rivi)); }
.galleria--ruudukko > .km-galleria-kuva img { height: 100%; object-fit: cover; }
.galleria--ruudukko::after { content: ""; flex: 999 1 0; } /* keeps the last row from stretching */
/* In editing mode the gallery is a simple even grid with buttons */
.galleria--ruudukko.km-galleriakentta { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.galleria--ruudukko.km-galleriakentta::after { content: none; }
.galleria--ruudukko.km-galleriakentta .km-galleria-kuva img { aspect-ratio: 1; object-fit: cover; object-position: 50% 30%; }
@media (max-width: 600px) {
  .galleria--rivi { grid-template-columns: repeat(2, 1fr); gap: var(--tila-2); }
  .galleria--ruudukko { --rivi: 130px; gap: var(--tila-2); }
}
.km-galleria-kuva { display: block; margin: 0; border-radius: var(--pyoristys); overflow: hidden; background: var(--petrooli-haalea); }
.km-galleria-kuva img { width: 100%; transition: transform .3s; }
a.km-galleria-kuva:hover img { transform: scale(1.04); }
.kuvarivi .keskita { margin-top: var(--tila-5); }

/* Image viewer: full screen, arrows at the sides, counter and caption below the image */
.suurennos { border: 0; padding: 0; margin: 0; width: 100vw; height: 100vh; height: 100dvh; max-width: none; max-height: none; background: transparent; overflow: hidden; }
.suurennos[open] { display: flex; align-items: center; justify-content: center; }
.suurennos::backdrop { background: rgba(8, 30, 36, .92); }
.suurennos-kuva { margin: 0; display: flex; flex-direction: column; align-items: center; gap: var(--tila-3); max-width: calc(100vw - 9rem); }
.suurennos-kuva img { max-width: 100%; max-height: calc(100dvh - 9rem); width: auto; height: auto; border-radius: var(--pyoristys); }
.suurennos figcaption { color: #fff; font-size: var(--koko-pieni); text-align: center; max-width: 40em; }
.suurennos-laskuri { position: fixed; top: var(--tila-4); left: 50%; transform: translateX(-50%); margin: 0; color: #fff; font-weight: 700; font-size: var(--koko-pieni); background: rgba(0, 0, 0, .35); padding: .3em .9em; border-radius: var(--pilleri); }
.suurennos-laskuri:empty { display: none; }
.suurennos-nappi { position: fixed; display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 50%; border: 0; background: #fff; color: var(--petrooli-tumma); cursor: pointer; box-shadow: 0 4px 14px rgba(0, 0, 0, .3); }
.suurennos-nappi:hover { background: var(--petrooli-vaalea); }
.suurennos-nappi:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.suurennos-edellinen { left: var(--tila-4); top: 50%; transform: translateY(-50%); }
.suurennos-seuraava { right: var(--tila-4); top: 50%; transform: translateY(-50%); }
.suurennos-sulje { top: var(--tila-4); right: var(--tila-4); }
.suurennos-nappi[hidden] { display: none; }
@media (max-width: 700px) {
  .suurennos-kuva { max-width: 100vw; padding-inline: var(--tila-2); }
  .suurennos-kuva img { max-height: calc(100dvh - 11rem); }
  .suurennos-edellinen, .suurennos-seuraava { top: auto; bottom: var(--tila-5); transform: none; }
  .suurennos-edellinen { left: calc(50% - 64px); }
  .suurennos-seuraava { right: calc(50% - 64px); }
}

/* Subpage start */
.sivun-alku { position: relative; background: var(--petrooli-vaalea); padding-block: clamp(var(--tila-6), 5vw, var(--tila-8)); margin-bottom: calc(var(--osio) - var(--tila-5)); }
.sivun-alku-sisa { display: grid; grid-template-columns: 1.2fr .8fr; gap: clamp(var(--tila-6), 5vw, var(--tila-8)); align-items: center; }
.sivun-alku-sisa--ei-kuvaa { grid-template-columns: 1fr; max-width: 820px; }
.sivun-alku h1 { font-size: clamp(2rem, 4.4vw, 3.25rem); }
.sivun-alku .iso-teksti { color: var(--petrooli-syva); max-width: 38em; }
@media (max-width: 800px) { .sivun-alku-sisa { grid-template-columns: 1fr; } }
.sivun-alku + .osio { padding-top: 0; }

/* Contact page */
.yhteyskortit { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--tila-5); }
@media (max-width: 900px) { .yhteyskortit { grid-template-columns: minmax(0, 1fr); } }
.yhteyskortti-arvo a { overflow-wrap: anywhere; }
.yhteyskortti { background: var(--valkoinen); border-radius: var(--pyoristys-iso); padding: var(--tila-6); box-shadow: var(--varjo); }
.yhteyskortti h2 { font-size: 1.25rem; margin-bottom: var(--tila-2); }
.yhteyskortti-ikoni { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 50%; background: var(--petrooli-vaalea); color: var(--petrooli-tumma); margin-bottom: var(--tila-4); }
.yhteyskortti-arvo { font-size: 1.25rem; font-weight: 800; margin-bottom: var(--tila-2); }
.yhteyskortti-arvo a { text-decoration: none; display: inline-block; padding-block: var(--tila-2); }
.yhteyskortti-arvo a:hover { text-decoration: underline; }
.yhteyskortti-lisa { font-size: var(--koko-pieni); color: var(--teksti-pehmea); }
.kartta iframe { width: 100%; aspect-ratio: 4 / 3; border: 0; border-radius: var(--pyoristys-iso); box-shadow: var(--varjo); background: var(--petrooli-haalea); }

/* Lost animals */
.hata { display: grid; grid-template-columns: auto 1fr; gap: var(--tila-4); align-items: start; background: var(--okra); color: var(--okra-teksti); border-radius: var(--pyoristys-iso); padding: clamp(var(--tila-5), 3vw, var(--tila-6)); }
.hata-ikoni { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 50%; background: var(--valkoinen); color: var(--okra-teksti); }
.hata-otsikko { font-size: 1.375rem; font-weight: 900; margin-bottom: var(--tila-2); color: inherit; }
.hata .km-sisalto { font-size: var(--koko-iso); }
.hata a { color: var(--okra-teksti); }
.kumppani-teksti { font-size: .8125rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--teksti-pehmea); margin-bottom: var(--tila-3); }
.kumppani-logo { display: inline-block; padding: var(--tila-2); }
.kumppani-logo img { width: 120px; height: auto; filter: brightness(0); opacity: .85; }
.kumppani-logo:hover img { opacity: 1; }

/* Contact band before the footer */
.yhteyskaista { padding-block: 0 calc(var(--osio) + var(--tila-7)); } /* room for the landscape on top of the footer */
.yhteyskaista-laatikko {
  position: relative; display: grid; grid-template-columns: 1.2fr 1fr; gap: var(--tila-6); align-items: center;
  background: var(--petrooli); color: #fff; border-radius: var(--pyoristys-iso); padding: clamp(var(--tila-6), 5vw, var(--tila-8));
}
.yhteyskaista h2 { color: #fff; margin-bottom: var(--tila-3); }
.yhteyskaista .km-sisalto { color: #eaf5f8; font-size: var(--koko-iso); }
.yhteyskaista-napit { display: flex; flex-wrap: wrap; gap: var(--tila-3); align-items: center; justify-content: flex-start; }
.yhteyskaista-muokkaus { font-size: var(--koko-pieni); color: #eaf5f8; margin: 0; }
@media (max-width: 800px) {
  .yhteyskaista-laatikko { grid-template-columns: 1fr; }
  .yhteyskaista-napit .nappi { width: 100%; }
}

/* Footer */
.alaosa { position: relative; background: var(--petrooli-syva); color: #e3eff2; padding-top: var(--tila-8); }
.alaosa a { color: #fff; }
.alaosa h2 { color: #fff; font-size: 1.125rem; margin-bottom: var(--tila-3); }
.alaosa p { margin: 0 0 var(--tila-2); }
.alaosa-sisa { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: var(--tila-6); padding-bottom: var(--tila-7); }
.alaosa-nimi { font-weight: 900; font-size: 1.3rem; color: #fff; }
.alaosa-pieni { font-size: var(--koko-pieni); opacity: .9; }
.some-linkit { display: flex; gap: var(--tila-3); flex-wrap: wrap; }
.some { display: inline-flex; width: 48px; height: 48px; border-radius: 50%; background: rgba(255, 255, 255, .12); align-items: center; justify-content: center; }
.some svg { width: 24px; height: 24px; fill: #fff; }
a.some:hover { background: var(--petrooli); }
.alaosa-pohja { display: flex; justify-content: space-between; align-items: center; gap: var(--tila-4); padding-block: var(--tila-4); font-size: var(--koko-pieni); color: #c9dde2; box-shadow: 0 -1px 0 rgba(255, 255, 255, .15); }
.alaosa-pohja a { color: #c9dde2; }

/* Login and 404 */
.km-kirjaudu { max-width: 380px; margin: 0 auto; display: flex; flex-direction: column; gap: var(--tila-3); }
.km-kirjaudu input { font: inherit; min-height: 48px; padding: var(--tila-3) var(--tila-4); border: 2px solid var(--teksti-pehmea); border-radius: var(--pyoristys); background: #fff; }
.km-kirjaudu button { font: 800 1.1rem var(--fontti); min-height: 48px; padding: var(--tila-3); border: 0; border-radius: var(--pilleri); background: var(--petrooli); color: #fff; cursor: pointer; }
.km-virhe { color: #a0221b; font-weight: 700; }

/* Decorative drawing slots (theme files in kuvat/piirrokset/, see README there). Never interactive, never over text. */
.piirros { pointer-events: none; user-select: none; height: auto; }
.piirros--hero-kulma { position: absolute; z-index: 2; left: -6%; bottom: -12%; width: clamp(110px, 26%, 190px); }
.piirros--palvelut { display: block; width: clamp(90px, 14vw, 140px); margin: 0 auto var(--tila-3); }
.piirros--yhteys { position: absolute; right: clamp(var(--tila-4), 4vw, var(--tila-7)); bottom: 100%; width: clamp(110px, 16vw, 180px); margin-bottom: -12px; }
.piirros--alaosa { position: absolute; left: clamp(1rem, 6vw, 6rem); bottom: 100%; width: clamp(90px, 12vw, 150px); margin-bottom: -6px; }
.esittely-laatikko { position: relative; }
.piirros--esittely { position: absolute; right: 5%; bottom: 100%; width: clamp(100px, 14vw, 170px); margin-bottom: -14px; }
.esittely:has(.piirros--esittely) { padding-top: var(--tila-7); }
.sivun-alku .piirros { position: absolute; z-index: 2; right: max(1rem, 4vw); bottom: -36px; width: clamp(100px, 14vw, 180px); }
.palvelukortti .piirros { width: auto; max-width: min(230px, 72%); max-height: 190px; height: auto; align-self: flex-start; margin: calc(var(--tila-2) * -1) 0 var(--tila-1); }
.piirros--tietoa { float: right; width: clamp(110px, 13vw, 165px); margin: 0 0 var(--tila-3) var(--tila-4); }
.piirros--404 { width: min(260px, 70%); margin: 0 auto var(--tila-5); }
.sivu-404 .km-kirjaudu, .sivu-404 h1 { text-align: center; }
@media (max-width: 800px) { .piirros--hero-kulma { left: -2%; bottom: -10%; } }

/* When a drawing sits on top of the contact band or footer, leave room above it */
.yhteyskaista:has(.piirros--yhteys) { padding-top: var(--tila-8); }
.alaosa:has(.piirros--alaosa) { margin-top: var(--tila-7); }

/* Editing mode on the dark sections: light outlines and hints so Nanne sees what she can edit */
.yhteyskaista .km-kentta, .alaosa .km-kentta, .yhteyspalkki .km-kentta { outline-color: rgba(255, 255, 255, .65); }
.yhteyskaista .km-kentta:hover, .alaosa .km-kentta:hover, .yhteyspalkki .km-kentta:hover,
.yhteyskaista .km-kentta:focus, .alaosa .km-kentta:focus, .yhteyspalkki .km-kentta:focus { background-color: rgba(255, 255, 255, .12); outline-color: #fff; }
.yhteyskaista .km-tyhja::before, .alaosa .km-tyhja::before, .yhteyspalkki .km-tyhja::before { color: rgba(255, 255, 255, .75) !important; }
.alaosa .km-linkki { color: #fff; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}