/* ==========================================================================
   ikiPiha Oy - tyylit
   Väri: yrityksen oma logonvihreä #27750B. Pohja: kivituhka.
   Kirjasimet: Bricolage Grotesque (otsikot) + Instrument Sans (leipä),
   itse isännöidyt woff2-tiedostot assets/fonts/-kansiossa (SIL OFL 1.1).
   Ei yhtään kutsua Googlelle.
   ========================================================================== */

/* ------------------------------------------------- itse isännöidyt kirjasimet */

/* latin-ext */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 400 800;
  font-stretch: 75% 100%;
  font-display: swap;
  src: url(fonts/bricolage-grotesque-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 400 800;
  font-stretch: 75% 100%;
  font-display: swap;
  src: url(fonts/bricolage-grotesque-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Instrument Sans';
  font-style: italic;
  font-weight: 400 700;
  font-stretch: 75% 100%;
  font-display: swap;
  src: url(fonts/instrument-sans-italic-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Instrument Sans';
  font-style: italic;
  font-weight: 400 700;
  font-stretch: 75% 100%;
  font-display: swap;
  src: url(fonts/instrument-sans-italic-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 75% 100%;
  font-display: swap;
  src: url(fonts/instrument-sans-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 75% 100%;
  font-display: swap;
  src: url(fonts/instrument-sans-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* pohjat */
  --kivi:      #EDEFE8;
  --kivi-2:    #E4E8DD;
  --kivi-3:    #D8DDCF;
  --multa:     #131A0E;
  --multa-2:   #0C1208;

  /* teksti */
  --ink:       #141A11;
  --ink-2:     #47513F;
  --ink-3:     #58614F;
  --on-multa:  #EDEFE8;
  --on-multa-2:#A8B3A0;

  /* aksentti: vain toiminnalliset elementit */
  --vihrea:    #27750B;
  --vihrea-d:  #1B5905;
  --vihrea-l:  #93D46B;

  /* viivat */
  --viiva:     #C7CFBB;
  --viiva-2:   #B4BDA5;
  --viiva-d:   #2C3626;

  /* vuodenaikojen pohjat: esiintyvät VAIN vuosikellossa */
  --kevat:     #E4EFD8;
  --kesa:      #F4F0D9;
  --syksy:     #F4E7CF;
  --talvi:     #E2EAF0;

  --mitta:     1320px;
  --reuna:     clamp(20px, 5vw, 72px);
  --ease:      cubic-bezier(.16, 1, .3, 1);
}

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

[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--kivi);
  color: var(--ink);
  font-family: "Instrument Sans", system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.62;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

/* <picture> on oletuksena inline-elementti ja rikkoisi säännöt joissa img saa
   height:100% tai absoluuttisen sijoituksen. display:contents poistaa kääreen
   layoutista kokonaan. */
picture { display: contents; }

/* vain ruudunlukijalle */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

section[id], div[id] { scroll-margin-top: 94px; }

::selection { background: var(--vihrea); color: #fff; }

:focus-visible {
  outline: 2px solid var(--vihrea);
  outline-offset: 3px;
  border-radius: 1px;
}
.on-multa :focus-visible, .footer :focus-visible { outline-color: var(--vihrea-l); }

.ohita {
  position: absolute; left: -9999px; top: 0;
  background: var(--vihrea); color: #fff; padding: 12px 18px; z-index: 100;
}
.ohita:focus { left: 12px; top: 12px; }

/* --------------------------------------------------------------- typografia */

h1, h2, h3, .wm {
  font-family: "Bricolage Grotesque", "Instrument Sans", system-ui, sans-serif;
  font-variation-settings: "wdth" 100;
  margin: 0;
  text-wrap: balance;
  overflow-wrap: break-word;
}

h1 {
  font-size: clamp(2.6rem, 6vw, 5rem);
  font-weight: 600;
  font-variation-settings: "opsz" 96, "wdth" 100;
  letter-spacing: -.032em;
  line-height: .98;
}

h2 {
  font-size: clamp(1.85rem, 3.5vw, 3rem);
  font-weight: 600;
  font-variation-settings: "opsz" 48, "wdth" 100;
  letter-spacing: -.028em;
  line-height: 1.04;
}

/* .ilmo-solujen otsikot ovat sivun tasolla h2, mutta kokoluokaltaan h3 */
h3, .ilmo h2 {
  font-size: clamp(1.15rem, 1.7vw, 1.45rem);
  font-weight: 600;
  font-variation-settings: "opsz" 24, "wdth" 100;
  letter-spacing: -.018em;
  line-height: 1.2;
}

p { margin: 0 0 1.1em; max-width: 68ch; }
p:last-child { margin-bottom: 0; }

.lede { font-size: clamp(1.05rem, 1.35vw, 1.22rem); line-height: 1.58; color: var(--ink-2); }
.pieni { font-size: .94rem; color: var(--ink-3); }

a { color: var(--vihrea); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--vihrea-d); }
.on-multa a, .footer a { color: var(--vihrea-l); }

/* ------------------------------------------------------------------ pohjat */

.wrap { width: 100%; max-width: var(--mitta); margin-inline: auto; padding-inline: var(--reuna); }
.osio { padding-block: clamp(64px, 9vw, 132px); }
.osio--tiivis { padding-block: clamp(44px, 5.5vw, 76px); }
.kivi-2 { background: var(--kivi-2); }
.on-multa { background: var(--multa); color: var(--on-multa); }
.on-multa h1, .on-multa h2, .on-multa h3 { color: var(--on-multa); }
.on-multa .lede, .on-multa p { color: var(--on-multa-2); }

.otsake { display: grid; grid-template-columns: 5fr 6fr; gap: clamp(24px, 4vw, 64px); align-items: end; margin-bottom: clamp(36px, 4.5vw, 64px); }
.otsake > p { margin: 0; }

hr.viiva { border: 0; border-top: 1px solid var(--viiva); margin: 0; }

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

.nappi {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 22px;
  font: inherit; font-size: .95rem; font-weight: 600; letter-spacing: -.005em;
  border: 1px solid transparent; border-radius: 3px;
  text-decoration: none; cursor: pointer;
  transition: background .22s var(--ease), color .22s var(--ease), border-color .22s var(--ease), transform .22s var(--ease);
}
.nappi svg { width: 15px; height: 15px; flex: none; transition: transform .28s var(--ease); }
.nappi:hover svg { transform: translateX(4px); }

.nappi--taysi { background: var(--vihrea); color: #fff; }
.nappi--taysi:hover { background: var(--vihrea-d); color: #fff; transform: translateY(-2px); }

.nappi--haamu { border-color: var(--viiva-2); color: var(--ink); background: transparent; }
.nappi--haamu:hover { border-color: var(--ink); color: var(--ink); transform: translateY(-2px); }

.on-multa .nappi--taysi { background: var(--vihrea-l); color: var(--multa); }
.on-multa .nappi--taysi:hover { background: #B0E38C; color: var(--multa); }
.on-multa .nappi--haamu { border-color: rgba(237, 239, 232, .32); color: var(--on-multa); }
.on-multa .nappi--haamu:hover { border-color: var(--on-multa); color: var(--on-multa); }

/* ----------------------------------------------------------------- ylapalkki */

.ylapalkki {
  position: sticky; top: 0; z-index: 60;
  background: rgba(237, 239, 232, .88);
  backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid var(--viiva);
}
.ylapalkki__sisus {
  display: flex; align-items: center; gap: clamp(16px, 3vw, 40px);
  min-height: 74px;
}

.wm {
  font-size: 1.42rem; font-weight: 700; letter-spacing: -.035em;
  font-variation-settings: "opsz" 24, "wdth" 100;
  color: var(--ink); text-decoration: none; line-height: 1; white-space: nowrap;
  display: inline-flex; align-items: baseline; gap: .28em;
}
.wm i { font-style: normal; font-weight: 400; color: var(--ink-2); }
.wm u { font-style: normal; text-decoration: none; font-size: .58em; font-weight: 500; color: var(--ink-3); letter-spacing: 0; }

.navi { display: flex; align-items: center; gap: clamp(14px, 2vw, 30px); margin-left: auto; }
.navi a {
  color: var(--ink-2); text-decoration: none; font-size: .94rem; font-weight: 500;
  padding: 6px 0; position: relative;
}
.navi a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--ink); transform: scaleX(0); transform-origin: left;
  transition: transform .32s var(--ease);
}
.navi a:hover { color: var(--ink); }
.navi a:hover::after { transform: scaleX(1); }
.navi a[aria-current="page"] { color: var(--ink); font-weight: 600; }
.navi a[aria-current="page"]::after { transform: scaleX(1); background: var(--vihrea); height: 2px; }

.puh {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--ink); text-decoration: none; font-weight: 600; font-size: .95rem;
  white-space: nowrap;
}
.puh svg { width: 15px; height: 15px; color: var(--vihrea); }
.puh:hover { color: var(--vihrea-d); }

.valikkonappi {
  display: none; margin-left: auto; background: none; border: 1px solid var(--viiva-2);
  border-radius: 3px; padding: 9px 13px; color: var(--ink); font: inherit; font-size: .9rem;
  font-weight: 600; cursor: pointer; align-items: center; gap: 9px;
}
.valikkonappi span { display: block; width: 17px; height: 9px; position: relative; }
.valikkonappi span::before, .valikkonappi span::after {
  content: ""; position: absolute; left: 0; right: 0; height: 1.5px; background: var(--ink);
  transition: transform .3s var(--ease), top .3s var(--ease);
}
.valikkonappi span::before { top: 0; }
.valikkonappi span::after { top: 7.5px; }
.valikkonappi[aria-expanded="true"] span::before { top: 4px; transform: rotate(45deg); }
.valikkonappi[aria-expanded="true"] span::after { top: 4px; transform: rotate(-45deg); }

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

.hero { position: relative; }
.hero__grid {
  display: grid; grid-template-columns: 1fr minmax(320px, 45%);
  gap: clamp(28px, 4vw, 72px); align-items: stretch;
  /* teksti linjaan .wrapin kanssa, kuva vuotaa oikeaan reunaan */
  padding-left: max(var(--reuna), calc((100% - var(--mitta)) / 2 + var(--reuna)));
}
.hero__teksti { padding-block: clamp(48px, 7vw, 104px) clamp(40px, 5vw, 72px); align-self: center; }
.hero h1 { max-width: 13ch; }
.hero .lede { margin-top: clamp(20px, 2.4vw, 30px); max-width: 46ch; }
.hero__napit { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(26px, 3vw, 38px); }

/* kuva absoluuttisena, jotta pystykuva ei venytä hero-riviä korkeaksi */
.hero__kuva { position: relative; overflow: hidden; background: var(--kivi-3); min-height: clamp(380px, 40vw, 560px); }
.hero__kuva img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }

/* ------------------------------------------------------ vuosikisko (signature) */

.kisko { position: relative; padding-block: 30px 8px; }
.kisko__viiva {
  position: absolute; left: 0; right: 0; top: 30px; height: 1px; background: var(--viiva-2);
  transform-origin: left;
}
.js .kisko__viiva { transform: scaleX(0); }
.js .kisko.nakyy .kisko__viiva { transform: scaleX(1); transition: transform 1.3s var(--ease); }

.kisko__kuukaudet {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(12, 1fr);
}
.kisko__m { position: relative; padding-top: 12px; }
.kisko__m::before {
  content: ""; position: absolute; left: 0; top: 0; width: 1px; height: 8px; background: var(--viiva-2);
}
.kisko__m > span {
  font-size: .68rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-3); display: block; transition: color .4s var(--ease);
}
.kisko__m.on > span { color: var(--vihrea); }
.kisko__m.on::before { background: var(--vihrea); height: 12px; width: 2px; }

.kisko__nyt {
  position: absolute; top: 24px; width: 13px; height: 13px; margin-left: -6px;
  border-radius: 50%; background: var(--vihrea); border: 3px solid var(--kivi);
  transition: left .9s var(--ease), opacity .5s var(--ease);
  opacity: 0;
}
.kivi-2 .kisko__nyt { border-color: var(--kivi-2); }
.kisko.nakyy .kisko__nyt { opacity: 1; }

/* ---------------------------------------------------------------- ilmoitukset */

.ilmot { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--viiva); border-block: 1px solid var(--viiva); }
.ilmo { background: var(--kivi-2); padding: clamp(26px, 3vw, 38px) clamp(22px, 2.4vw, 34px); }
.ilmo h2 { margin-bottom: 10px; }
.ilmo p { font-size: .96rem; color: var(--ink-2); margin-bottom: 14px; }
/* .laji esiintyy myös ilmoituskaistan ulkopuolella (tietosuojasivu), joten
   koko ja väri määritellään luokalle itselleen, ei vain .ilmo-osiolle. */
a.laji {
  display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: .95rem;
  color: var(--vihrea); text-decoration: none;
}
a.laji svg { width: 14px; height: 14px; flex: none; transition: transform .28s var(--ease); }
a.laji:hover { color: var(--vihrea-d); text-decoration: underline; }
a.laji:hover svg { transform: translateX(3px); }

.ilmo--kiire { background: var(--kivi-3); }
.ilmo--kiire h2 { color: var(--vihrea-d); }

/* ----------------------------------------------------------------- vuosikello */

.vuosi { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--viiva); margin-top: 26px; }
.kausi {
  background: var(--kausi-bg, var(--kivi));
  padding: 0 0 clamp(20px, 2.2vw, 30px);
  border-top: 3px solid transparent;
  transition: border-color .45s var(--ease);
}
.kausi[data-kausi="kevat"] { --kausi-bg: var(--kevat); }
.kausi[data-kausi="kesa"]  { --kausi-bg: var(--kesa); }
.kausi[data-kausi="syksy"] { --kausi-bg: var(--syksy); }
.kausi[data-kausi="talvi"] { --kausi-bg: var(--talvi); }
.kausi.on { border-top-color: var(--vihrea); }

.kausi__kuva { aspect-ratio: 4 / 3; overflow: hidden; background: var(--kivi-3); }
.kausi__kuva img {
  width: 100%; height: 100%; object-fit: cover;
  filter: saturate(.82); transition: filter .55s var(--ease), transform .8s var(--ease);
}
.kausi.on .kausi__kuva img { filter: saturate(1); }
.kausi:hover .kausi__kuva img, .kausi:focus-within .kausi__kuva img { filter: saturate(1); transform: scale(1.03); }

.kausi__sisus { padding: clamp(18px, 2vw, 26px) clamp(16px, 1.7vw, 24px) 0; }
.kausi__ylä { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.kausi h3 { letter-spacing: -.02em; }
.kausi__kk { font-size: .7rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap; }
.kausi.on .kausi__kk { color: var(--vihrea); }

.kausi ul { list-style: none; margin: 0; padding: 0; }
.kausi li {
  font-size: .93rem; color: var(--ink-2); padding: 9px 0 9px 18px; position: relative;
  border-top: 1px solid rgba(20, 26, 17, .11);
}
.kausi li::before {
  content: ""; position: absolute; left: 0; top: 17px; width: 7px; height: 1px; background: var(--vihrea);
}

/* -------------------------------------------------------------- palvelurivit */

.rivit { border-top: 1px solid var(--viiva); }
.rivi {
  display: grid; grid-template-columns: minmax(220px, 4fr) 7fr;
  gap: clamp(12px, 3vw, 48px);
  padding: clamp(22px, 2.6vw, 34px) 0;
  border-bottom: 1px solid var(--viiva);
  align-items: start;
}
.rivi h3 { letter-spacing: -.022em; }
.rivi p { margin: 0; color: var(--ink-2); font-size: 1rem; }
.rivi__lista { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 0; }
.rivi__lista li { font-size: .9rem; color: var(--ink-3); }
.rivi__lista li:not(:last-child)::after { content: "·"; margin: 0 .55em; color: var(--viiva-2); }

/* ------------------------------------------------------------------- jaettu */

.jako { display: grid; grid-template-columns: 6fr 5fr; gap: clamp(30px, 5vw, 84px); align-items: start; }
.jako--kaanto { grid-template-columns: 5fr 6fr; }
.jako--kaanto .jako__media { order: -1; }
.jako__media img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 5; }
.jako__media--laaja img { aspect-ratio: 4 / 3; }
.jako__teksti > * + h3 { margin-top: 2em; }
.jako__teksti h3 + p { margin-top: .5em; }

.faktat { list-style: none; margin: clamp(26px, 3vw, 40px) 0 0; padding: 0; border-top: 1px solid var(--viiva); }
.faktat li { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--viiva); font-size: .95rem; }
.faktat .k { color: var(--ink-3); }
.faktat .v { font-weight: 600; }

/* ---------------------------------------------------------------- galleria */

.galleria { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.kuvanappi {
  border: 0; padding: 0; margin: 0; background: var(--kivi-3); cursor: zoom-in;
  overflow: hidden; position: relative; display: block; width: 100%;
}
.kuvanappi img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; transition: transform .7s var(--ease); }
.kuvanappi:hover img { transform: scale(1.04); }
.kuvanappi--laaja { grid-column: span 2; }
.kuvanappi--laaja img { aspect-ratio: 3 / 2; }

.laatikko {
  position: fixed; inset: 0; z-index: 90; display: none;
  align-items: center; justify-content: center;
  background: #0C1208; padding: clamp(16px, 4vw, 56px) clamp(16px, 4vw, 56px) clamp(52px, 6vw, 78px);
}
.laatikko[open], .laatikko.auki { display: flex; }
.laatikko img { max-width: min(1100px, 92vw); max-height: 80vh; width: auto; object-fit: contain; }
.laatikko__teksti {
  position: absolute; left: 0; right: 0; bottom: clamp(16px, 3vw, 30px);
  margin: 0; max-width: none; text-align: center;
  color: var(--on-multa-2); font-size: .92rem; padding-inline: 20px;
}
.laatikko button {
  position: absolute; background: none; border: 1px solid rgba(237,239,232,.3); color: var(--on-multa);
  width: 46px; height: 46px; border-radius: 3px; cursor: pointer; font-size: 1.1rem; line-height: 1;
  display: grid; place-items: center; transition: border-color .2s, background .2s;
}
.laatikko button:hover { border-color: var(--on-multa); background: rgba(237,239,232,.08); }
.laatikko .sulje { top: clamp(14px, 3vw, 28px); right: clamp(14px, 3vw, 28px); }
.laatikko .edell { left: clamp(10px, 2vw, 24px); top: 50%; margin-top: -23px; }
.laatikko .seur  { right: clamp(10px, 2vw, 24px); top: 50%; margin-top: -23px; }
.laatikko svg { width: 18px; height: 18px; }

/* ------------------------------------------------------ ennen ja jälkeen */

.vertailu { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(12px, 1.8vw, 24px); }
.vertailu figure { margin: 0; display: grid; gap: 12px; }
.vertailu__merkki {
  font-size: .705rem; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-3);
  padding-bottom: 9px; border-bottom: 1px solid var(--viiva);
}
.vertailu img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--kivi-3); }
.vertailu__teksti { margin-top: clamp(16px, 2vw, 24px); max-width: 74ch; }

@media (max-width: 620px) {
  .vertailu { grid-template-columns: 1fr; gap: 26px; }
}

/* ------------------------------------------------------------- kuvakaista */

.kaista { position: relative; min-height: clamp(420px, 52vw, 620px); display: grid; align-items: end; overflow: hidden; }
.kaista__kuva { position: absolute; inset: 0; }
.kaista__kuva img { width: 100%; height: 100%; object-fit: cover; }
.kaista__kuva img { filter: saturate(.88); }
.kaista__kuva::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(12,18,8,.96) 0%, rgba(12,18,8,.9) 26%, rgba(12,18,8,.66) 52%, rgba(12,18,8,.24) 82%, rgba(12,18,8,.08) 100%);
}
.kaista__sisus { position: relative; padding-block: clamp(40px, 5vw, 72px); }
.kaista h2 { max-width: 18ch; }
.kaista p { max-width: 54ch; margin-top: 18px; }

/* ----------------------------------------------------------------- lomake */

.yhteys { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(32px, 5vw, 80px); align-items: start; }

.kortti-yhteys { border-top: 1px solid var(--viiva); }
.kortti-yhteys dl { margin: 0; }
.kortti-yhteys .par { display: grid; grid-template-columns: 34% 1fr; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--viiva); }
.kortti-yhteys dt { color: var(--ink-3); font-size: .9rem; margin: 0; }
.kortti-yhteys dd { margin: 0; font-size: 1rem; }
.kortti-yhteys dd a { text-decoration: none; font-weight: 600; }
.kortti-yhteys dd a:hover { text-decoration: underline; }

.lomake { display: grid; gap: 16px; }
.kentat { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.kentta { display: grid; gap: 6px; align-content: start; }
.kentta--leveä { grid-column: 1 / -1; }
.kentta label { font-size: .78rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.kentta input, .kentta textarea, .kentta select {
  font: inherit; font-size: 1rem; color: var(--ink);
  background: var(--kivi); border: 1px solid var(--viiva-2); border-radius: 3px;
  padding: 12px 14px; width: 100%;
  transition: border-color .2s var(--ease), background .2s var(--ease);
}
.kivi-2 .kentta input, .kivi-2 .kentta textarea, .kivi-2 .kentta select { background: #F3F5EE; }
.kentta select { line-height: 1.62; }  /* sama korkeus kuin tekstikentillä */
.kentta textarea { min-height: 140px; resize: vertical; }
/* placeholderin kontrasti kummallakin pohjalla vähintään 4,5:1 */
.kentta input::placeholder, .kentta textarea::placeholder { color: var(--ink-3); opacity: 1; }
.kentta input:hover, .kentta textarea:hover, .kentta select:hover { border-color: var(--ink-3); }
.kentta input:focus, .kentta textarea:focus, .kentta select:focus { outline: none; border-color: var(--vihrea); box-shadow: 0 0 0 3px rgba(39,117,11,.16); }
.kentta input:user-invalid, .kentta textarea:user-invalid { border-color: #9A2B14; }
.kentta__ohje { font-size: .88rem; color: var(--ink-3); margin: 0; text-transform: none; letter-spacing: 0; font-weight: 400; }

/* palvelimen palauttama kenttäkohtainen virhe */
.kentta--virhe input, .kentta--virhe textarea, .kentta--virhe select { border-color: #9A2B14; }
.ryhma--virhe > legend { color: #9A2B14; }
.kentta__virhe { font-size: .88rem; font-weight: 600; color: #9A2B14; margin: 0; }

/* hunajapurkki: piilossa ihmisiltä, näkyvissä roboteille */
.hunaja { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* valintaryhmät (asiakastyyppi, palvelut, toistuvuus) */
.ryhma { border: 0; margin: 0; padding: 0; min-width: 0; }
.ryhma > legend {
  padding: 0; margin-bottom: 6px; font-size: .78rem; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-3);
}
.ryhma > .kentta__ohje { margin-bottom: 4px; }
.valinnat { display: grid; }
.valinnat--kaksi { grid-template-columns: 1fr 1fr; column-gap: 20px; }
.valinta {
  display: flex; align-items: center; gap: 11px; min-height: 44px; padding-block: 8px;
  font-size: .96rem; color: var(--ink-2); cursor: pointer;
}
.valinta input { width: 20px; height: 20px; accent-color: var(--vihrea); flex: none; margin: 0; }
.valinta:hover { color: var(--ink); }

.lupa { display: grid; margin-top: 4px; }
.lupa .rivi-lupa {
  display: flex; align-items: center; gap: 11px; min-height: 44px; padding-block: 8px;
  font-size: .93rem; color: var(--ink-2); cursor: pointer;
}
.lupa input[type="checkbox"] { width: 20px; height: 20px; accent-color: var(--vihrea); flex: none; margin: 0; }
.lomake__alaosa { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; justify-content: space-between; margin-top: 4px; }
.lomake__alaosa button[aria-busy="true"] { opacity: .72; cursor: progress; }
.lomake__alaosa button:disabled { opacity: .72; }
.lomake__virhe { color: #9A2B14; font-weight: 600; }

/* lomakkeen tilalle jäävä kiitosviesti */
.kiitos { border-top: 2px solid var(--vihrea); padding-top: 22px; }
.kiitos h3 { margin-bottom: 8px; }
.kiitos p { color: var(--ink-2); }

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

.footer { background: var(--multa); color: var(--on-multa-2); padding-block: clamp(48px, 6vw, 80px) 30px; }
.footer__grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1.2fr; gap: clamp(26px, 4vw, 56px); }
.footer .wm { color: var(--on-multa); }
.footer .wm i { color: var(--on-multa-2); }
.footer .wm u { color: var(--on-multa-2); }
.footer__otsikko { font-size: .72rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--on-multa-2); margin: 0 0 14px; }
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.footer li, .footer p { font-size: .95rem; }
.footer a { color: var(--on-multa); text-decoration: none; }
.footer a:hover { color: var(--vihrea-l); text-decoration: underline; }
.footer__ala {
  margin-top: clamp(36px, 4vw, 56px); padding-top: 22px; border-top: 1px solid var(--viiva-d);
  display: flex; flex-wrap: wrap; gap: 12px 28px; justify-content: space-between; font-size: .86rem;
}
.footer__ala p { margin: 0; font-size: .86rem; }
.merkkilogo { background: #fff; padding: 10px 12px; border-radius: 3px; display: inline-block; }
.merkkilogo img { width: 118px; height: auto; }

/* --------------------------------------------------------- mobiilin soittopalkki */

.soittopalkki {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; display: none;
  grid-template-columns: 1fr 1fr; gap: 1px; background: var(--viiva-2);
  border-top: 1px solid var(--viiva-2);
}
.soittopalkki a {
  background: var(--kivi); color: var(--ink); text-decoration: none;
  padding: 14px 10px; min-height: 52px; text-align: center; font-weight: 600; font-size: .95rem;
  display: flex; align-items: center; justify-content: center; gap: 8px;
}
.soittopalkki a.paa { background: var(--vihrea); color: #fff; }
.soittopalkki svg { width: 15px; height: 15px; }

/* ------------------------------------------------------------------- liike */

/* Näkyvä oletustila: JS lisää .odota vain ruudun alapuolisille osioille. */
.js .esiin.odota { opacity: 0; transform: translateY(16px); }
.js .esiin.nakyy { opacity: 1; transform: none; transition: opacity .8s var(--ease), transform .8s var(--ease); }

.js .hero__teksti > * { opacity: 0; transform: translateY(14px); }
.js.ladattu .hero__teksti > * { opacity: 1; transform: none; transition: opacity .85s var(--ease), transform .85s var(--ease); }
.js.ladattu .hero__teksti > *:nth-child(1) { transition-delay: .06s; }
.js.ladattu .hero__teksti > *:nth-child(2) { transition-delay: .16s; }
.js.ladattu .hero__teksti > *:nth-child(3) { transition-delay: .26s; }
.js.ladattu .hero__teksti > *:nth-child(4) { transition-delay: .36s; }

.js .hero__kuva img { clip-path: inset(0 0 100% 0); transform: scale(1.05); }
.js.ladattu .hero__kuva img {
  clip-path: inset(0 0 0 0); transform: scale(1);
  transition: clip-path 1.25s var(--ease), transform 1.6s var(--ease);
}

@media (prefers-reduced-motion: reduce) {
  .js .esiin, .js .hero__teksti > *, .js .hero__kuva img, .js .kisko__viiva {
    opacity: 1 !important; transform: none !important; clip-path: none !important; transition: none !important;
  }
  .kausi__kuva img, .kuvanappi img { transition: none; }
}

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

@media (max-width: 1080px) {
  .hero__grid { grid-template-columns: 1fr; padding-left: 0; gap: 0; }
  .hero__teksti { padding-inline: var(--reuna); }
  .hero__kuva { min-height: 0; aspect-ratio: 16 / 10; order: -1; }
  .hero h1 { max-width: 16ch; }
  .vuosi { grid-template-columns: repeat(2, 1fr); }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .galleria { grid-template-columns: repeat(3, 1fr); }
}

/* Valikossa on viisi kohtaa, joten se siirtyy nappien taakse jo 1000 pikselissä.
   Muut palstamuutokset tapahtuvat vasta 900 pikselissä. */
@media (max-width: 1000px) {
  .navi, .ylapalkki .puh { display: none; }
  .valikkonappi { display: inline-flex; min-height: 44px; }
  .ylapalkki.auki .navi {
    display: flex; position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--kivi); border-bottom: 1px solid var(--viiva); padding: 8px var(--reuna) 20px;
  }
  .ylapalkki.auki .navi a {
    padding: 14px 0; border-bottom: 1px solid var(--viiva); font-size: 1.05rem;
    min-height: 52px; display: flex; align-items: center;
  }
  .ylapalkki.auki .navi a::after { display: none; }
}

@media (max-width: 900px) {
  body { font-size: 16.5px; }
  .otsake, .jako, .jako--kaanto, .yhteys { grid-template-columns: 1fr; }
  .jako--kaanto .jako__media { order: 0; }
  .ilmot { grid-template-columns: 1fr; }
  .rivi { grid-template-columns: 1fr; gap: 8px; }
  .kentat { grid-template-columns: 1fr; }
  .kisko__m > span { font-size: 0; }
  .kisko__m.on > span { font-size: .68rem; }
  .soittopalkki { display: grid; }
  body { padding-bottom: 53px; padding-bottom: calc(53px + env(safe-area-inset-bottom)); }
}

@media (max-width: 620px) {
  .galleria { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .vuosi { grid-template-columns: 1fr; }
  .kausi__kuva { aspect-ratio: 16 / 9; }
  .kortti-yhteys .par { grid-template-columns: 1fr; gap: 2px; }
  .footer__grid { grid-template-columns: 1fr; }
  .valinnat--kaksi { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------------ tulostus */

@media print {
  .ylapalkki, .soittopalkki, .laatikko, .kisko, .ohita, .hero__kuva,
  .kaista__kuva, .jako__media, .galleria, .lomake, .merkkilogo { display: none !important; }
  html { scroll-behavior: auto; }
  body {
    background: #fff; color: #000; font-size: 11pt; line-height: 1.5;
    padding-bottom: 0; -webkit-print-color-adjust: exact;
  }
  .js .esiin, .js .hero__teksti > *, .js .hero__kuva img {
    opacity: 1 !important; transform: none !important; clip-path: none !important;
  }
  .osio, .osio--tiivis { padding-block: 18pt; }
  .kivi-2, .kausi, .ilmo, .ilmo--kiire { background: #fff; }
  .on-multa, .footer { background: #fff; color: #000; }
  .on-multa h1, .on-multa h2, .on-multa h3, .footer .wm,
  .on-multa .lede, .on-multa p, .footer a, .footer li, .footer p { color: #000; }
  .hero__grid, .otsake, .jako, .yhteys, .rivi { display: block; }
  a { color: #000; text-decoration: underline; }
  h1, h2, h3 { page-break-after: avoid; }
  .rivi, .ilmo, .kausi { page-break-inside: avoid; }
  /* URLit näkyviin vain sinne, missä ne ovat sisältöä */
  .footer a[href^="http"]::after, .yhteys a[href^="http"]::after {
    content: " (" attr(href) ")"; font-size: 9pt; word-break: break-all;
  }
  .sr-only { display: none; }
}