/* =========================================================================
   Craftwise Oy — etusivu
   Leveä ruudukko, paljon tilaa, pehmeät muodot ja lämmin valkoinen pohja.
   Palvelut ovat linkkikortteja isometrisillä ääriviivakuvakkeilla. Oranssia
   käytetään vain yksittäisinä merkkeinä, muuten musta ja valkoinen kantavat
   ilmeen. Otsikot Libre Franklin, leipäteksti Manrope.
   Järjestys: muuttujat -> reset -> perusta -> typografia -> layout ->
   painikkeet -> header -> hero -> palvelut -> lupaus -> merkit -> etenee
   -> cta -> työt -> yhteys -> footer -> apuluokat -> media queries
   ========================================================================= */

/* ----------------------------- Muuttujat -------------------------------- */
:root {
  --muste: #16181b;
  --teksti: #56616b;
  /* Vaimennetut sävyt on tummennettu niin että leipäteksti yltää
     WCAG AA -kontrastiin sekä valkoisella että harmaalla pohjalla */
  --teksti-vaalea: #626c75;
  --teksti-haalea: #78828a;
  --valkoinen: #ffffff;
  --tausta-2: #f4f5f6;        /* neutraali vaalea harmaa */
  --tausta-3: #eaecee;        /* astetta tummempi harmaa */

  --viiva: #e3e6e8;
  --viiva-tumma: #d0d5d9;

  /* Aksenttivärit. Kirkas oranssi on koristeväri: viivat, kuvakkeet, ruksit ja
     hover-taustat. Tumma oranssi on sama sävy tekstikäyttöön, koska kirkas ei
     yllä WCAG AA -kontrastiin valkoisella eikä harmaalla pohjalla. Sininen on
     tiedon ja lomakkeen väri: fokusreunat, UKK ja pitkien tekstien linkit. */
  --oranssi: #ee6a21;
  --oranssi-tumma: #b3480f;
  --oranssi-hohde: rgba(238, 106, 33, 0.12);
  --sininen: #1f4e8c;
  --sininen-hohde: rgba(31, 78, 140, 0.09);

  --tumma: #16181b;

  --fontti: "Manrope", system-ui, -apple-system, sans-serif;
  --fontti-otsikko: "Libre Franklin", "Manrope", system-ui, -apple-system, sans-serif;

  /* Leveä ruudukko: sisältö saa hengittää isoilla näytöillä */
  --leveys: 1460px;
  --leveys-kapea: 900px;
  --pad-x: clamp(1.25rem, 4.5vw, 3.5rem);
  --osio-y: clamp(4.5rem, 8.5vw, 8.5rem);
  --header-korkeus: 88px;

  --pyoristys: 22px;
  --pyoristys-pieni: 14px;

  --varjo-pieni: 0 2px 8px rgba(22, 24, 27, 0.04);
  --varjo: 0 12px 32px rgba(22, 24, 27, 0.09);
  --varjo-iso: 0 20px 48px rgba(22, 24, 27, 0.13);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-pehmea: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ----------------------------- Reset ------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
img, svg, picture, video { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }

/* ----------------------------- Perusta ---------------------------------- */
body {
  font-family: var(--fontti);
  font-size: 1.02rem;
  line-height: 1.68;
  color: var(--teksti);
  background: var(--valkoinen);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

::selection { background: rgba(238, 106, 33, 0.26); color: var(--muste); }
:focus-visible { outline: 2px solid var(--sininen); outline-offset: 3px; }

.skip-link {
  position: absolute;
  left: -9999px;
  z-index: 200;
  background: var(--muste);
  color: var(--valkoinen);
  padding: 0.85rem 1.4rem;
  border-radius: 0 0 var(--pyoristys-pieni) 0;
}
.skip-link:focus { left: 0; top: 0; }

/* ----------------------------- Typografia ------------------------------- */
/* Otsikot Libre Franklinilla, semibold ja tiivis kirjainväli. */
h1, h2, h3, h4 {
  font-family: var(--fontti-otsikko);
  color: var(--muste);
  font-weight: 600;
  letter-spacing: -0.022em;
  line-height: 1.14;
  text-wrap: balance;
}

h1 {
  font-size: clamp(2.2rem, 4.3vw, 3.85rem);
  line-height: 1.04;
  letter-spacing: -0.032em;
}
h2 { font-size: clamp(1.75rem, 3.05vw, 2.8rem); line-height: 1.08; letter-spacing: -0.028em; }
h3 { font-size: clamp(1.08rem, 1.45vw, 1.25rem); line-height: 1.3; letter-spacing: -0.018em; }

p { text-wrap: pretty; }
/* Väliotsikon jälkeinen kappale saa välinsä komponentin omasta säännöstä,
   muuten kortin otsikon ja tekstin väliin tulee turhan iso aukko */
h1 + p, h2 + p { margin-top: 1.1rem; }
strong { font-weight: 700; color: var(--muste); }

/* Eyebrow'n edessä lyhyt oranssi viiva. Sama merkki toistuu jokaisen osion
   alussa, joten aksenttiväri kulkee läpi sivun ilman että se vie tilaa. */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.62rem;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--teksti-vaalea);
  margin-bottom: 1.2rem;
}
.eyebrow::before {
  content: "";
  flex: none;
  width: 24px;
  height: 2px;
  border-radius: 2px;
  background: var(--oranssi);
}

/* ----------------------------- Layout ----------------------------------- */
.container {
  width: 100%;
  max-width: var(--leveys);
  margin-inline: auto;
  padding-inline: var(--pad-x);
}

.section { padding-block: var(--osio-y); position: relative; }
/* Kiinteä header ei saa peittää ankkurilinkin kohdetta */
section[id] { scroll-margin-top: calc(var(--header-korkeus) + 12px); }

.osio-otsikko { margin-bottom: clamp(2.6rem, 4.5vw, 4rem); }
.osio-otsikko h2 { max-width: 20ch; }
.osio-otsikko__lead {
  color: var(--teksti-vaalea);
  max-width: 58ch;
  margin-top: 1.2rem;
  font-size: 1.05rem;
}
.osio-otsikko--rivi { display: grid; gap: 1.6rem; align-items: end; }

/* ----------------------------- Painikkeet ------------------------------- */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 1.12rem 2rem;
  min-height: 58px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.98rem;
  letter-spacing: -0.014em;
  line-height: 1;
  border: 1.5px solid transparent;
  transition:
    background-color 0.32s var(--ease-pehmea),
    color 0.32s var(--ease-pehmea),
    border-color 0.32s var(--ease-pehmea);
}

/* Hover on koko sivustolla oranssi. Teksti vaihtuu samalla mustaksi, koska
   valkoinen ei yllä AA-kontrastiin kirkkaalla oranssilla. */
.btn-musta { background: var(--muste); color: var(--valkoinen); }
.btn-musta:hover { background: var(--oranssi); color: var(--muste); }

.btn-valkoinen { background: var(--valkoinen); color: var(--muste); }
.btn-valkoinen:hover { background: var(--oranssi); color: var(--muste); }

.btn-reunus { background: transparent; color: var(--valkoinen); border-color: rgba(255, 255, 255, 0.54); }
.btn-reunus:hover { border-color: var(--oranssi); background: rgba(238, 106, 33, 0.2); }

.btn-sm { padding: 0.76rem 1.4rem; min-height: 48px; font-size: 0.92rem; }
.btn-block { width: 100%; }

/* Tekstilinkki, jossa nuoli liikkuu */
.linkki-nuoli {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-weight: 700;
  font-size: 1.02rem;
  letter-spacing: -0.016em;
  color: var(--muste);
  padding-bottom: 0.4rem;
  border-bottom: 1.5px solid var(--muste);
  transition: color 0.3s var(--ease-pehmea), border-color 0.3s var(--ease-pehmea);
}
.linkki-nuoli svg { width: 17px; height: 17px; transition: transform 0.35s var(--ease); }
.linkki-nuoli:hover { color: var(--oranssi-tumma); border-color: var(--oranssi); }
.linkki-nuoli:hover svg { transform: translateX(4px); }

/* ----------------------------- Header ----------------------------------- */
.header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  transition: background-color 0.4s var(--ease-pehmea), box-shadow 0.4s var(--ease-pehmea);
}
/* Vieritettäessä umpivalkoinen palkki: ei reunaviivaa, vain kevyt varjo */
.header.scrolled {
  background: var(--valkoinen);
  box-shadow: 0 1px 2px rgba(22, 24, 27, 0.05), 0 8px 24px rgba(22, 24, 27, 0.06);
}

.header__inner {
  max-width: var(--leveys);
  margin-inline: auto;
  padding: 0 var(--pad-x);
  height: var(--header-korkeus);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

.logo { display: inline-flex; align-items: center; gap: 0.72rem; flex: none; }
.logo img { width: 44px; height: 44px; transition: transform 0.5s var(--ease); }
.logo:hover img { transform: rotate(-40deg); }
.logo__teksti {
  font-family: var(--fontti-otsikko);
  font-weight: 700;
  font-size: 1.16rem;
  letter-spacing: -0.032em;
  color: var(--valkoinen);
  transition: color 0.4s var(--ease-pehmea);
  white-space: nowrap;
}
.logo__oy { font-weight: 500; opacity: 0.6; }
.header.scrolled .logo__teksti { color: var(--muste); }

.nav { display: flex; align-items: center; gap: 2.8rem; margin-left: auto; }
.nav__links { display: flex; align-items: center; gap: 2.3rem; }
.nav__links a {
  position: relative;
  font-size: 0.96rem;
  font-weight: 600;
  letter-spacing: -0.014em;
  color: rgba(255, 255, 255, 0.92);
  padding-block: 0.3rem;
  transition: color 0.4s var(--ease-pehmea);
}
.nav__links a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: var(--oranssi);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.4s var(--ease);
}
.nav__links a:hover::after { transform: scaleX(1); transform-origin: left; }
.header.scrolled .nav__links a { color: var(--muste); }

/* ---- Palvelut-alavalikko ---- */
.nav__pudotus { position: relative; }
.nav__pudotus > a { display: inline-flex; align-items: center; gap: 0.32rem; }
.nav__nuoli { width: 14px; height: 14px; transition: transform 0.35s var(--ease); }
.nav__pudotus:hover .nav__nuoli,
.nav__pudotus:focus-within .nav__nuoli { transform: rotate(180deg); }

/* Läpinäkyvä silta, jotta hover ei katkea matkalla valikkoon */
.nav__pudotus::after {
  content: "";
  position: absolute;
  inset: 100% 0 auto 0;
  height: 18px;
}

.nav__valikko {
  position: absolute;
  top: calc(100% + 16px);
  left: -1rem;
  min-width: 17rem;
  padding: 0.5rem;
  background: var(--valkoinen);
  border-radius: var(--pyoristys-pieni);
  box-shadow: var(--varjo);
  display: grid;
  gap: 0.1rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition:
    opacity 0.28s var(--ease-pehmea),
    transform 0.32s var(--ease),
    visibility 0.28s;
  z-index: 5;
}
.nav__pudotus:hover .nav__valikko,
.nav__pudotus:focus-within .nav__valikko {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.nav__links .nav__valikko a {
  padding: 0.7rem 0.85rem;
  border-radius: 10px;
  font-size: 0.94rem;
  font-weight: 600;
  color: var(--muste);
  transition: background-color 0.25s var(--ease-pehmea);
}
.nav__links .nav__valikko a::after { display: none; }
.nav__links .nav__valikko a:hover { background: var(--tausta-2); }
/* Avoinna oleva palvelusivu erottuu alavalikossa oranssilla */
.nav__links .nav__valikko a[aria-current] {
  color: var(--oranssi-tumma);
  background: var(--oranssi-hohde);
}

.nav__actions { display: flex; align-items: center; gap: 1.5rem; }
.nav__phone {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.96rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.92);
  transition: color 0.4s var(--ease-pehmea), opacity 0.25s ease;
}
.nav__phone svg { width: 16px; height: 16px; color: var(--oranssi); }
.nav__phone:hover { opacity: 0.72; }
.header.scrolled .nav__phone { color: var(--muste); }

.header .btn-musta { background: var(--valkoinen); color: var(--muste); }
.header.scrolled .btn-musta { background: var(--muste); color: var(--valkoinen); }
/* Headerin painike menee hoverissa oranssiksi kuten muutkin napit. Oma
   sääntönsä siksi, että .header .btn-musta ohittaisi muuten .btn-musta:hoverin. */
.header .btn-musta:hover,
.header.scrolled .btn-musta:hover { background: var(--oranssi); color: var(--muste); }

.menu-toggle { display: none; width: 44px; height: 44px; margin-right: -10px; }
.menu-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  border-radius: 2px;
  background: var(--valkoinen);
  margin: 5px auto;
  transition: transform 0.4s var(--ease), background-color 0.4s var(--ease-pehmea);
}
.header.scrolled .menu-toggle span { background: var(--muste); }
.nav.open ~ .menu-toggle span:first-child { transform: translateY(3.5px) rotate(45deg); }
.nav.open ~ .menu-toggle span:last-child { transform: translateY(-3.5px) rotate(-45deg); }

.nav-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 18, 21, 0.45);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
  z-index: 98;
}
.nav-backdrop.show { opacity: 1; pointer-events: auto; }

/* ----------------------------- Hero ------------------------------------- */
.hero {
  position: relative;
  min-height: 620px;
  height: 90vh;
  height: 90svh;
  max-height: 900px;
  display: flex;
  align-items: flex-end;
  color: var(--valkoinen);
  overflow: hidden;
  isolation: isolate;
}
.hero__media { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
/* <picture> täytyy asemoida, muuten kuvan prosenttikorkeus ei ratkea
   ja kuva jää heroa lyhyemmäksi */
.hero__media picture { position: absolute; inset: 0; display: block; }
.hero__poster {
  width: 100%;
  height: 112%;
  object-fit: cover;
  will-change: transform;
  transform: scale(1.03);
}
/* Kolme kerrosta: pystysuunnan tummennus alareunaan, vinottainen tummennus
   vasempaan laitaan tekstin taakse ja tasainen sävy koko kuvan päälle. */
.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, rgba(12, 14, 17, 0.38) 0%, rgba(12, 14, 17, 0.18) 24%, rgba(12, 14, 17, 0.93) 100%),
    linear-gradient(78deg, rgba(12, 14, 17, 0.82) 0%, rgba(12, 14, 17, 0.4) 56%, rgba(12, 14, 17, 0.06) 100%),
    linear-gradient(rgba(12, 14, 17, 0.16), rgba(12, 14, 17, 0.16));
}

.hero__inner {
  width: 100%;
  max-width: var(--leveys);
  margin-inline: auto;
  padding: 0 var(--pad-x) clamp(3.4rem, 7vh, 5.5rem);
}
.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.62rem;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.78);
  margin-bottom: 1.5rem;
}
.hero__eyebrow::before {
  content: "";
  flex: none;
  width: 26px;
  height: 2px;
  border-radius: 2px;
  background: var(--oranssi);
}
.hero h1 { color: var(--valkoinen); max-width: 16ch; }
.hero__soft { color: rgba(255, 255, 255, 0.6); }
.hero__lead {
  margin-top: 1.5rem;
  max-width: 44ch;
  font-size: 1.12rem;
  color: rgba(255, 255, 255, 0.9);
}
.hero__cta { margin-top: 2.5rem; display: flex; align-items: center; gap: 1.8rem; flex-wrap: wrap; }
.hero__link {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-weight: 700;
  font-size: 0.98rem;
  color: var(--valkoinen);
  opacity: 0.94;
  transition: opacity 0.25s ease;
}
.hero__link svg { width: 18px; height: 18px; transition: transform 0.45s var(--ease); }
.hero__link:hover { opacity: 1; }
.hero__link:hover svg { transform: translateY(4px); }

/* ----------------------------- Lupaus ----------------------------------- */
.lupaus { background: var(--tausta-2); }
/* Rivileveys rem:eissä eikä ch:na, jotta otsikon rivijako ei riipu siitä
   miten leveä otsikkofontti sattuu olemaan */
.lupaus__ylä { max-width: 52rem; }
.lupaus__ylä h2 { max-width: 52rem; }
/* Eyebrow on oma rivinsä, joten sen alle riittää pieni väli */
.lupaus__ylä .eyebrow { margin-bottom: 0.7rem; }
/* CTA on osion alalaidassa vasemmalla, kolmen kohdan jälkeen */
.lupaus__cta { margin-top: clamp(2.5rem, 4vw, 3.5rem); }

.lupaus__rivi {
  margin-top: clamp(3rem, 5vw, 4.5rem);
  display: grid;
  gap: 2.4rem;
}
/* Mobiilissa kohdat ovat allekkain ja erottuvat yläreunan viivalla.
   Desktopissa viiva vaihtuu pystyviivoiksi sarakkeiden väliin. */
.lupaus__kohta { padding-top: 1.4rem; border-top: 1px solid #b3bac0; }
/* Numeroiden tilalla oranssi kuvake pehmeän oranssin laatan päällä. Kiinteä
   koko pitää subgrid-rivin samana kaikissa kolmessa kohdassa. */
.lupaus__kuvake {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  padding: 9px;
  border-radius: 15px;
  background: var(--oranssi-hohde);
  color: var(--oranssi-tumma);
  margin-bottom: 1rem;
}
.lupaus__kuvake svg { display: block; width: 100%; height: 100%; }
.lupaus__kohta h3 { margin-bottom: 0.55rem; }
.lupaus__kohta p { color: var(--teksti-vaalea); font-size: 0.98rem; max-width: 40ch; }

/* ----------------------------- Palvelut --------------------------------- */
.palvelukortit { display: grid; gap: 1.2rem; }

.palvelukortti {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--valkoinen);
  /* Kortti on samanvärinen kuin osion tausta, joten hieman vahvempi reuna ja
     kevyt varjo nostavat sen irti pinnasta. */
  border: 1px solid var(--viiva-tumma);
  box-shadow: 0 1px 2px rgba(22, 24, 27, 0.04), 0 6px 18px rgba(22, 24, 27, 0.06);
  border-radius: var(--pyoristys);
  padding: clamp(1.6rem, 2.2vw, 2.1rem);
  overflow: hidden;
  will-change: transform;
  transition:
    transform 0.45s var(--ease),
    box-shadow 0.45s var(--ease),
    border-color 0.35s var(--ease-pehmea);
}
/* Hienovarainen lämmin hehku kortin yläreunassa hoverilla */
.palvelukortti::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, var(--oranssi), #f6a06a);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s var(--ease);
}
.palvelukortti:hover {
  transform: translateY(-6px);
  box-shadow: var(--varjo);
  border-color: transparent;
}
.palvelukortti:hover::before { transform: scaleX(1); }

.palvelukortti__kuvake {
  display: block;
  width: 118px;
  height: 118px;
  margin-bottom: 1.3rem;
  will-change: transform;
  transition: transform 0.55s var(--ease);
}
.palvelukortti__kuvake img { width: 100%; height: 100%; }
.palvelukortti:hover .palvelukortti__kuvake { transform: translateY(-4px) scale(1.06); }

/* Kortin otsikko mitoitetaan niin, että pisin nimi mahtuu leveillä
   näytöillä yhdelle riville. Kapeimmilla neljän sarakkeen leveyksillä
   "Lämmitys- ja putkityöt" jakautuu kahdelle riville, mutta subgrid pitää
   korttien tekstit silti samalla linjalla. */
.palvelukortti h3 {
  font-size: clamp(0.98rem, 1.3vw, 1.17rem);
  letter-spacing: -0.02em;
  margin-bottom: 0.55rem;
}
.palvelukortti p { color: var(--teksti-vaalea); font-size: 0.97rem; flex: 1; }

.palvelukortti__linkki {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.6rem;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--muste);
}
.palvelukortti__linkki svg { width: 16px; height: 16px; transition: transform 0.4s var(--ease); }
.palvelukortti__linkki { transition: color 0.3s var(--ease-pehmea); }
.palvelukortti:hover .palvelukortti__linkki { color: var(--oranssi-tumma); }
.palvelukortti:hover .palvelukortti__linkki svg { transform: translateX(5px); }

/* ----------------------------- Näin etenee ------------------------------ */
.etenee__grid { display: grid; gap: clamp(2.4rem, 4vw, 4.5rem); align-items: start; }
.etenee__kuva { border-radius: var(--pyoristys); overflow: hidden; }
.etenee__kuva img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  transition: transform 1.1s var(--ease);
}
.etenee__kuva:hover img { transform: scale(1.04); }
.etenee__teksti h2 { max-width: 17ch; margin-bottom: 2.2rem; }

.askeleet { display: grid; }
.askel {
  display: grid;
  grid-template-columns: 3.4rem 1fr;
  gap: 1rem;
  padding: 1.4rem 0;
  border-top: 1px solid var(--viiva);
}
.askel:last-child { border-bottom: 1px solid var(--viiva); }
.askel__nro {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--oranssi-tumma);
  padding-top: 0.25rem;
}
.askel h3 { margin-bottom: 0.5rem; }
.askel p { font-size: 0.98rem; color: var(--teksti-vaalea); max-width: 46ch; }

/* ----------------------------- Merkit ----------------------------------- */
/* Osio seuraa harmaata lupausosiota, joten yläreunan viivaa ei tarvita */
.merkit {
  overflow: hidden;
  text-align: center;
  padding-block: clamp(2.8rem, 4.5vw, 4rem);
  border-bottom: 1px solid var(--viiva);
}
.merkit__otsikko { margin-bottom: 2rem; }
.merkit__teksti {
  font-size: clamp(1.02rem, 1.5vw, 1.2rem);
  color: var(--teksti-vaalea);
  max-width: 48ch;
  margin-inline: auto;
}

.karuselli {
  position: relative;
  overflow: hidden;
  padding-block: 1.2rem;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
/* Hover hidastaa radan, ei pysäytä sitä. Nopeudenvaihto tehdään script.js:ssä
   playbackRatella, koska animation-durationin muuttaminen hypäyttäisi radan. */
.karuselli__rata { display: flex; width: max-content; animation: liuku 46s linear infinite; }
.karuselli__era {
  display: flex;
  align-items: center;
  gap: clamp(3rem, 7vw, 6.5rem);
  padding-right: clamp(3rem, 7vw, 6.5rem);
}
.karuselli__era img {
  height: 24px;
  width: auto;
  object-fit: contain;
  filter: grayscale(1) opacity(0.48);
  transition: filter 0.4s var(--ease-pehmea), transform 0.4s var(--ease);
}
.karuselli__era img:hover { filter: grayscale(0) opacity(1); transform: scale(1.06); }
.karuselli__era img[src*="mitsubishi"] { height: 37px; }
.karuselli__era img[src*="daikin"] { height: 25px; }
.karuselli__era img[src*="gree"] { height: 25px; }
.karuselli__era img[src*="innova"] { height: 20px; }
.karuselli__era img[src*="samsung"] { height: 21px; }
.karuselli__era img[src*="panasonic"] { height: 19px; }
/* Tämän on oltava mitsubishi-säännön jälkeen, koska src sisältää sanan "mitsubishi" */
.karuselli__era img[src*="mitsubishi-heavy"] { height: 40px; }

@keyframes liuku {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ----------------------------- CTA -------------------------------------- */
.cta {
  position: relative;
  padding-block: clamp(5.5rem, 9vw, 8.5rem);
  color: var(--valkoinen);
  overflow: hidden;
  isolation: isolate;
  text-align: center;
}
.cta__media { position: absolute; inset: 0; z-index: -1; }
.cta__media img { width: 100%; height: 100%; object-fit: cover; }
.cta__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(14, 17, 20, 0.74), rgba(14, 17, 20, 0.86));
}
.cta__inner { max-width: var(--leveys-kapea); }
.cta h2 { color: var(--valkoinen); max-width: 20ch; margin-inline: auto; }
.cta p { color: rgba(255, 255, 255, 0.84); max-width: 54ch; margin-inline: auto; font-size: 1.08rem; }
.cta__napit { margin-top: 2.6rem; display: flex; gap: 0.9rem; flex-wrap: wrap; justify-content: center; }

/* ----------------------------- Työt ------------------------------------- */
.galleria { display: grid; gap: 1.4rem; }
.galleriakuva { position: relative; }
.galleriakuva img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--pyoristys);
  transition: transform 1.1s var(--ease);
}
.galleriakuva { overflow: hidden; border-radius: var(--pyoristys); }
.galleriakuva:hover img { transform: scale(1.04); }

/* ----------------------------- Yhteys ----------------------------------- */
.yhteys { background: var(--tausta-2); }
.yhteys__grid { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); align-items: start; }

.yhteys__kortit { display: grid; gap: 1rem; }
/* Vasemman reunan oranssi nauha kasvaa esiin hoverilla. Staattisella kortilla
   nauha on aina paikallaan mutta vaimeampi. */
.yhteyskortti {
  position: relative;
  display: block;
  background: var(--valkoinen);
  border-radius: var(--pyoristys-pieni);
  padding: 1.5rem 1.7rem;
  box-shadow: var(--varjo-pieni);
  overflow: hidden;
  will-change: transform;
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.yhteyskortti::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--oranssi);
  transform: scaleY(0.28);
  transform-origin: top;
  opacity: 0.45;
  transition: transform 0.45s var(--ease), opacity 0.45s var(--ease-pehmea);
}
a.yhteyskortti:hover { transform: translateY(-4px); box-shadow: var(--varjo); }
a.yhteyskortti:hover::before { transform: scaleY(1); opacity: 1; }
a.yhteyskortti:hover .yhteyskortti__arvo { color: var(--oranssi-tumma); }
.yhteyskortti__label {
  display: block;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--oranssi-tumma);
  margin-bottom: 0.5rem;
}
.yhteyskortti__arvo {
  display: block;
  font-size: 1.28rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--muste);
  line-height: 1.25;
  overflow-wrap: anywhere;
  transition: color 0.3s var(--ease-pehmea);
}
.yhteyskortti__lisa {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.93rem;
  color: var(--teksti-vaalea);
}

/* Lomake */
.lomake {
  background: var(--valkoinen);
  border-radius: var(--pyoristys);
  padding: clamp(1.6rem, 3vw, 2.8rem);
  display: grid;
  gap: 1.05rem;
  box-shadow: var(--varjo-pieni);
}
.kentta { display: grid; gap: 0.42rem; }
.kentta-pari { display: grid; gap: 1.05rem; }
.kentta label { font-size: 0.84rem; font-weight: 600; color: var(--teksti-vaalea); }
.kentta input,
.kentta select,
.kentta textarea {
  width: 100%;
  padding: 0.92rem 1.05rem;
  background: var(--tausta-2);
  border: 1.5px solid transparent;
  border-radius: var(--pyoristys-pieni);
  font-size: 0.98rem;
  color: var(--muste);
  transition: border-color 0.3s var(--ease-pehmea), background-color 0.3s var(--ease-pehmea), box-shadow 0.3s var(--ease-pehmea);
  -webkit-appearance: none;
  appearance: none;
}
.kentta select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23626c75' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.95rem center;
  background-size: 15px;
  padding-right: 2.5rem;
}
.kentta textarea { resize: vertical; min-height: 122px; }
.kentta input:hover,
.kentta select:hover,
.kentta textarea:hover { background: var(--tausta-3); }
.kentta input:focus,
.kentta select:focus,
.kentta textarea:focus {
  border-color: var(--sininen);
  background: var(--valkoinen);
  box-shadow: 0 0 0 4px var(--sininen-hohde);
  outline: none;
}
.kentta input::placeholder,
.kentta textarea::placeholder { color: var(--teksti-haalea); }

.lomake .btn { margin-top: 0.4rem; }

/* Kenttäkohtainen virheviesti. form.js kirjoittaa tekstin tähän ja lisää
   kenttään .invalid-luokan. Tyhjänä piilotetaan kokonaan, muuten .kentta-
   ruudukon väli jäisi näkyviin tyhjän rivin verran. */
.field__error {
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--oranssi-tumma);
}
.field__error:empty { display: none; }

.kentta input.invalid,
.kentta textarea.invalid {
  border-color: var(--oranssi-tumma);
  background: var(--valkoinen);
}
.kentta input.invalid:focus,
.kentta textarea.invalid:focus {
  border-color: var(--oranssi-tumma);
  box-shadow: 0 0 0 4px var(--oranssi-hohde);
}

/* Lähetyksen tila. form.js asettaa luokan pending, ok tai err ja tyhjentää
   sisällön uuden lähetyksen alkaessa; tyhjänä laatikko on piilossa.
   Vihreä on tämän lohkon oma väri: muualla sivustolla ei ole onnistumistilaa,
   joten sitä ei ole muuttujissa. */
.form__status {
  font-size: 0.94rem;
  line-height: 1.55;
  padding: 0.95rem 1.2rem;
  border-radius: 0 var(--pyoristys-pieni) var(--pyoristys-pieni) 0;
  border-left: 3px solid var(--viiva-tumma);
  background: var(--tausta-2);
  color: var(--teksti);
}
.form__status:empty { display: none; }
.form__status.ok {
  background: rgba(28, 122, 74, 0.09);
  border-left-color: #1c7a4a;
  color: #14532d;
  font-weight: 600;
}
.form__status.err {
  background: rgba(238, 106, 33, 0.1);
  border-left-color: var(--oranssi);
  color: var(--muste);
}
/* Virhetilassa puhelin ja sähköposti ovat linkkejä: juuri silloin kun lähetys
   on rikki, varapolun pitää olla napautuksen päässä. */
.form__status a {
  font-weight: 700;
  color: var(--oranssi-tumma);
  text-decoration: underline;
  text-underline-offset: 2px;
  white-space: nowrap;
}

/* Pienpainettu ehto lähetysnapin alla. Negatiivinen ylämarginaali kumoaa
   osan lomakkeen ruudukkovälistä, jotta teksti kiinnittyy nappiin. */
.lomake__ehto {
  margin-top: -0.5rem;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--teksti-haalea);
  text-align: center;
}
.lomake__ehto a {
  color: var(--teksti-vaalea);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.lomake__ehto a:hover { color: var(--muste); }

/* ----------------------------- Footer ----------------------------------- */
.footer {
  background: var(--tumma);
  /* Oranssi hiusviiva päättää sivun ja erottaa footerin yläpuolisesta osiosta */
  border-top: 3px solid var(--oranssi);
  color: rgba(255, 255, 255, 0.66);
  padding-top: clamp(3.5rem, 6vw, 5.5rem);
  font-size: 0.97rem;
}
.footer__grid { display: grid; gap: 2.6rem; padding-bottom: clamp(2.5rem, 5vw, 4rem); }
.logo--footer { margin-bottom: 1.1rem; }
.logo--footer .logo__teksti { color: var(--valkoinen); }
.footer__brandi p { max-width: 30ch; }
.footer__sarake h3 {
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.54);
  margin-bottom: 1.15rem;
}
.footer__sarake li + li { margin-top: 0.6rem; }
.footer__sarake a { transition: color 0.25s ease, padding-left 0.3s var(--ease); }
.footer__sarake a:hover { color: var(--oranssi); padding-left: 4px; }

.footer__ala {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
  padding-block: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 0.89rem;
  color: rgba(255, 255, 255, 0.56);
}
.footer__ala a { border-bottom: 1px solid rgba(255, 255, 255, 0.24); }
.footer__ala a:hover { color: var(--oranssi); border-bottom-color: var(--oranssi); }

/* --------------------- Rivien tasaus (subgrid) --------------------------- */
/* Korttien ja lupauskohtien otsikot ovat eri mittaisia. Subgridillä numero,
   otsikko, leipäteksti ja linkki asettuvat samoille riveille kortista
   riippumatta. Selaimessa ilman subgrid-tukea sisältö virtaa normaalisti. */
@supports (grid-template-rows: subgrid) {
  @media (min-width: 640px) {
    .lupaus__rivi { grid-template-rows: auto auto auto; }
    .lupaus__kohta {
      display: grid;
      grid-row: span 3;
      grid-template-rows: subgrid;
      row-gap: 0;
      align-content: start;
    }
    .lupaus__kohta h3 { margin-bottom: 0; padding-bottom: 0.75rem; }
  }

  @media (min-width: 640px) {
    .palvelukortit { grid-template-rows: auto auto auto auto; }
    .palvelukortti {
      display: grid;
      grid-row: span 4;
      grid-template-rows: subgrid;
      row-gap: 0;
      align-content: start;
    }
    .palvelukortti h3 { margin-bottom: 0; padding-bottom: 0.75rem; }
    .palvelukortti__kuvake { margin-bottom: 1.3rem; }
  }
}

/* ----------------------------- Virhesivu -------------------------------- */
/* 404.html käyttää samaa headeria ja painikkeita kuin etusivu. */
.virhesivu {
  min-height: 76vh;
  padding-top: calc(var(--header-korkeus) + clamp(3rem, 9vw, 7rem));
  padding-bottom: clamp(4rem, 9vw, 8rem);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}
.virhesivu__koodi {
  font-family: var(--fontti-otsikko);
  font-size: clamp(3.5rem, 11vw, 7rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.045em;
  color: rgba(238, 106, 33, 0.24);
}
.virhesivu h1 { margin: 0.6rem 0 1.1rem; }
.virhesivu p { max-width: 52ch; }
.virhesivu .btn { margin-top: 2.2rem; }
.virhesivu__yhteys { margin-top: 1.8rem; font-size: 0.97rem; }
.virhesivu__yhteys a {
  color: var(--muste);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.25s var(--ease-pehmea);
}
.virhesivu__yhteys a:hover { color: var(--oranssi-tumma); }

/* ============================= Palvelusivut ============================== */
/* Palvelusivut käyttävät etusivun komponentteja sellaisenaan: osio-otsikko,
   askeleet, lupaus__rivi, galleria, palvelukortit, cta, yhteys ja lomake.
   Tässä lohkossa on vain se mikä on palvelusivuille uutta: matala hero,
   murupolku, tekstin ja kuvan jako, ruksilista ja UKK-haitari. */

/* Osion taustan vaihto ilman omaa komponenttia. Palvelusivuilla taustat
   vuorottelevat valkoisen ja harmaan välillä, jotta osiot erottuvat. */
.section--harmaa { background: var(--tausta-2); }

/* ---- Matala hero ---- */
/* Etusivun hero on 90vh. Palvelusivulla riittää murto-osa: otsikko, lyhyt
   alaotsikko ja toimintakehotus. Yläpehmuste on headerin korkuinen, koska
   header on fixed eikä varaa tilaa. */
.svc-hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: clamp(400px, 52vh, 560px);
  padding-top: calc(var(--header-korkeus) + clamp(2.4rem, 5vw, 4rem));
  padding-bottom: clamp(2.8rem, 5vw, 4.2rem);
  color: var(--valkoinen);
  overflow: hidden;
  isolation: isolate;
}
.svc-hero__media { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
/* <picture> täytyy asemoida, muuten kuvan prosenttikorkeus ei ratkea ja
   kuva jää heron korkuiseksi. Sama kuin etusivun herossa. */
.svc-hero__media picture { position: absolute; inset: 0; display: block; }
/* Kuva on osiota korkeampi, jotta parallax voi siirtää sitä alaspäin ilman
   että alareunaan paljastuu tyhjää. Liike tehdään script.js:ssä. */
.svc-hero__poster {
  width: 100%;
  height: 118%;
  object-fit: cover;
  will-change: transform;
  transform: scale(1.03);
}
/* Sama kolmen kerroksen tummennus kuin etusivun herossa, mutta hieman
   kevyempi: tekstiä on vähemmän ja osio on matalampi. */
.svc-hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, rgba(12, 14, 17, 0.5) 0%, rgba(12, 14, 17, 0.3) 38%, rgba(12, 14, 17, 0.88) 100%),
    linear-gradient(78deg, rgba(12, 14, 17, 0.78) 0%, rgba(12, 14, 17, 0.36) 60%, rgba(12, 14, 17, 0.06) 100%),
    linear-gradient(rgba(12, 14, 17, 0.14), rgba(12, 14, 17, 0.14));
}
.svc-hero__inner {
  width: 100%;
  max-width: var(--leveys);
  margin-inline: auto;
  padding-inline: var(--pad-x);
}
/* Pienempi kuin etusivun h1: matalassa herossa jättikokoinen otsikko
   täyttäisi koko osion eikä alaotsikolle jäisi tilaa. */
.svc-hero h1 {
  color: var(--valkoinen);
  max-width: 19ch;
  font-size: clamp(1.95rem, 3.5vw, 3rem);
}
.svc-hero__lead {
  margin-top: 1.15rem;
  max-width: 50ch;
  font-size: 1.06rem;
  color: rgba(255, 255, 255, 0.88);
}
.svc-hero__cta {
  margin-top: 2.1rem;
  display: flex;
  align-items: center;
  gap: 0.9rem;
  flex-wrap: wrap;
}

/* ---- Murupolku ---- */
/* Oletusväritys on vaalea, koska murupolku on tummassa herossa.
   Vaalealla pohjalla käytetään muunnosta .murupolku--tumma. */
.murupolku { margin-bottom: 1.3rem; font-size: 0.85rem; }
.murupolku ol { display: flex; flex-wrap: wrap; align-items: center; gap: 0.55rem; }
.murupolku li {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  color: rgba(255, 255, 255, 0.62);
}
.murupolku li + li::before {
  content: "";
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: currentColor;
}
.murupolku a { color: rgba(255, 255, 255, 0.82); transition: color 0.25s ease; }
.murupolku a:hover { color: var(--valkoinen); }
.murupolku [aria-current] { color: var(--valkoinen); }

.murupolku--tumma li { color: var(--teksti-haalea); }
.murupolku--tumma a { color: var(--teksti-vaalea); }
.murupolku--tumma a:hover { color: var(--muste); }
.murupolku--tumma [aria-current] { color: var(--muste); }

/* ---- Teksti ja kuva rinnakkain ---- */
.svc-jako { display: grid; gap: clamp(2.2rem, 4vw, 4rem); align-items: center; }
.svc-jako__kuva { border-radius: var(--pyoristys); overflow: hidden; }
.svc-jako__kuva img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  transition: transform 1.1s var(--ease);
}
.svc-jako__kuva:hover img { transform: scale(1.04); }
.svc-jako__teksti h2 { max-width: 18ch; }
.svc-jako__teksti p { color: var(--teksti-vaalea); max-width: 56ch; }
.svc-jako__teksti p + p { margin-top: 1.05rem; }
/* Toimintakehotus tekstipalstan alalaidassa, listan jälkeen */
.svc-jako__cta { margin-top: clamp(1.9rem, 3vw, 2.5rem); }

/* ---- Ruksilista ---- */
.svc-lista { display: grid; gap: 0.72rem 2.2rem; margin-top: clamp(1.8rem, 3vw, 2.4rem); }
.svc-lista li {
  position: relative;
  padding-left: 1.85rem;
  font-size: 0.99rem;
  color: var(--teksti-vaalea);
}
.svc-lista li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.34em;
  width: 1.15rem;
  height: 1.15rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ee6a21' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 13 4 4L19 7'/%3E%3C/svg%3E") center / contain no-repeat;
}
.svc-lista strong { display: block; color: var(--muste); font-weight: 700; }

/* ---- Askeleet rinnakkain ---- */
/* Etusivulla askeleet ovat kuvan vieressä yhtenä pylväänä. Palvelusivulla
   kuvaa ei ole, joten ne asettuvat kahteen sarakkeeseen. Alaviiva siirtyy
   listalta itselleen, koska last-child ei enää ole visuaalisesti alin. */
.askeleet--rivi { border-bottom: 1px solid var(--viiva); }
.askeleet--rivi .askel:last-child { border-bottom: 0; }

/* ---- Usein kysytyt kysymykset ---- */
/* Kysymykset ovat omia laatikoitaan ja asettuvat työpöydällä kahteen
   sarakkeeseen. align-items: start estää laatikoita venymästä rivin
   korkuisiksi, jolloin avattu vastaus ei kasvata viereistä laatikkoa. */
.ukk__lista { display: grid; gap: 1rem; align-items: start; }
.ukk__kohta {
  position: relative;
  overflow: hidden;
  background: var(--valkoinen);
  border: 1px solid var(--viiva-tumma);
  border-radius: var(--pyoristys-pieni);
  padding-inline: clamp(1.15rem, 2vw, 1.6rem);
  transition: border-color 0.35s var(--ease-pehmea), box-shadow 0.35s var(--ease);
}
/* Avattu kysymys saa sinisen nauhan vasempaan reunaan. Nauha on absoluuttinen,
   jotta se ei siirrä laatikon sisältöä auettaessa. */
.ukk__kohta::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--sininen);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.4s var(--ease);
}
.ukk__kohta[open]::before { transform: scaleY(1); }
.ukk__kohta:hover { border-color: var(--teksti-haalea); }
.ukk__kohta[open] {
  border-color: transparent;
  box-shadow: 0 1px 2px rgba(22, 24, 27, 0.04), 0 6px 18px rgba(22, 24, 27, 0.07);
}
.ukk__kysymys {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.2rem;
  padding-block: 1.25rem;
  cursor: pointer;
  list-style: none;
  font-family: var(--fontti-otsikko);
  font-weight: 600;
  font-size: clamp(1rem, 1.35vw, 1.1rem);
  letter-spacing: -0.018em;
  line-height: 1.36;
  color: var(--muste);
  transition: color 0.25s var(--ease-pehmea);
}
.ukk__kysymys::-webkit-details-marker { display: none; }
.ukk__kysymys:hover { color: var(--sininen); }
.ukk__kohta[open] .ukk__kysymys { color: var(--sininen); }
.ukk__kysymys::after {
  content: "";
  flex: none;
  width: 19px;
  height: 19px;
  margin-top: 0.15rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316181b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform 0.35s var(--ease);
}
.ukk__kohta[open] .ukk__kysymys::after {
  transform: rotate(180deg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f4e8c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}
.ukk__vastaus {
  padding-bottom: 1.4rem;
  color: var(--teksti-vaalea);
  font-size: 0.97rem;
}
.ukk__vastaus p + p { margin-top: 0.85rem; }
.ukk__vastaus a {
  color: var(--sininen);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Rivi listan alla: jos vastausta ei löytynyt, tarjotaan puhelin ja lomake */
.ukk__lisa {
  margin-top: clamp(1.9rem, 3vw, 2.5rem);
  color: var(--teksti-vaalea);
}
.ukk__lisa a {
  color: var(--muste);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.ukk__lisa a:hover { color: var(--sininen); }

/* ============================= Tietosivu ================================= */
/* Tietosuojaselosteen kaltainen pitkä tekstisivu. Ei kuvaa, joten header
   tarvitsee vaalean tilan jo ennen vieritystä. */
.header--vaalea { background: var(--valkoinen); }
.header--vaalea .logo__teksti,
.header--vaalea .nav__links a,
.header--vaalea .nav__phone { color: var(--muste); }
.header--vaalea .menu-toggle span { background: var(--muste); }
.header--vaalea .btn-musta { background: var(--muste); color: var(--valkoinen); }

.tietosivu {
  padding-top: calc(var(--header-korkeus) + clamp(2.6rem, 6vw, 5rem));
  padding-bottom: clamp(4rem, 8vw, 7rem);
}
.tietosivu__otsikko { max-width: 30ch; }
.tietosivu__paivitetty {
  margin-top: 1rem;
  font-size: 0.9rem;
  color: var(--teksti-haalea);
}
.tietosivu__sisalto { max-width: 68ch; margin-top: clamp(2.4rem, 4vw, 3.4rem); }
.tietosivu__sisalto h2 {
  font-size: clamp(1.28rem, 2vw, 1.62rem);
  margin-top: clamp(2.4rem, 4vw, 3.2rem);
  margin-bottom: 0.85rem;
}
.tietosivu__sisalto h2:first-child { margin-top: 0; }
.tietosivu__sisalto h3 { margin-top: 1.7rem; margin-bottom: 0.45rem; }
.tietosivu__sisalto p + p { margin-top: 1rem; }
.tietosivu__sisalto ul { margin-top: 1rem; display: grid; gap: 0.5rem; }
.tietosivu__sisalto li { position: relative; padding-left: 1.4rem; }
.tietosivu__sisalto li::before {
  content: "";
  position: absolute;
  left: 0.2rem;
  top: 0.78em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--oranssi);
}
.tietosivu__sisalto a {
  color: var(--sininen);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

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

.js .reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.85s var(--ease), transform 0.85s var(--ease);
}
.js .reveal.in { opacity: 1; transform: none; }
.delay-1 { transition-delay: 0.1s; }
.delay-2 { transition-delay: 0.2s; }

/* ----------------------------- Media queries ---------------------------- */
@media (min-width: 640px) {
  .kentta-pari { grid-template-columns: 1fr 1fr; }
  .palvelukortit { grid-template-columns: repeat(2, 1fr); }
  /* Kolme saraketta rinnakkain. Sarakeväli hoidetaan padingilla eikä
     column-gapilla, jotta pystyviiva asettuu tasan sarakkeiden puoliväliin. */
  .lupaus__rivi { grid-template-columns: repeat(3, 1fr); column-gap: 0; row-gap: 0; }
  /* Pystyviiva jokaisen kohdan vasemmalla puolella, jolloin viivat jakautuvat
     tasavälein. Sisennys on sama molemmin puolin, joten myös tekstipalstat
     ovat samanlevyiset. */
  .lupaus__kohta {
    padding-top: 0;
    border-top: 0;
    border-left: 1px solid var(--viiva-tumma);
    padding-inline: 1.8rem;
  }
  .galleria { grid-template-columns: repeat(3, 1fr); }
  .footer__grid { grid-template-columns: repeat(3, 1fr); }
  .footer__brandi { grid-column: 1 / -1; }
}

@media (min-width: 981px) {
  .palvelukortit { grid-template-columns: repeat(4, 1fr); gap: 1.4rem; }

  /* Kuva venytetään täsmälleen askelten korkuiseksi. Kuva irrotetaan
     normaalivirrasta, jotta sen oma korkeus ei kasvata riviä. */
  .etenee__grid { grid-template-columns: 0.95fr 1.15fr; align-items: stretch; }
  .etenee__kuva { position: relative; height: 100%; }
  .etenee__kuva img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
  }

  .yhteys__grid { grid-template-columns: 0.8fr 1.2fr; }
  .osio-otsikko--rivi { grid-template-columns: 1fr auto; }
  .osio-otsikko--rivi .osio-otsikko__lead { margin-top: 0; max-width: 46ch; }
  .footer__grid { grid-template-columns: 1.6fr repeat(3, 1fr); }
  .footer__brandi { grid-column: auto; }
}

@media (min-width: 981px) {
  .lupaus__kohta { padding-inline: 2.6rem; }
}

@media (max-width: 980px) {
  /* Logo ja hampurilainen jäävät valikkopaneelin päälle, muuten sulkunappiin
     ei pääse käsiksi kun valikko on auki */
  .menu-toggle { display: block; position: relative; z-index: 101; }
  .logo { position: relative; z-index: 101; }
  .header.valikko-auki { background: var(--valkoinen); }
  .header.valikko-auki .logo__teksti { color: var(--muste); }
  .header.valikko-auki .menu-toggle span { background: var(--muste); }

  .nav {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(88vw, 380px);
    background: var(--valkoinen);
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    padding: calc(var(--header-korkeus) + 1.5rem) 1.75rem 2rem;
    transform: translateX(100%);
    transition: transform 0.45s var(--ease);
    z-index: 99;
    overflow-y: auto;
  }
  .nav.open { transform: translateX(0); }
  .nav__links {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    border-top: 1px solid var(--viiva);
  }
  .nav__links a {
    color: var(--muste);
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: -0.03em;
    padding: 1.05rem 0;
    border-bottom: 1px solid var(--viiva);
  }
  .nav__links a::after { display: none; }

  /* Paneelissa alavalikko on auki sisennettynä listana, ei pudotusvalikkona */
  .nav__pudotus { display: block; }
  .nav__pudotus > a { display: flex; justify-content: space-between; }
  .nav__nuoli { display: none; }
  .nav__pudotus::after { display: none; }
  .nav__valikko {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    min-width: 0;
    padding: 0;
    background: none;
    border-radius: 0;
    box-shadow: none;
    gap: 0;
  }
  .nav__links .nav__valikko a {
    padding: 0.85rem 0 0.85rem 1rem;
    border-radius: 0;
    border-bottom: 1px solid var(--viiva);
    font-size: 1rem;
    font-weight: 500;
    color: var(--teksti);
  }
  .nav__links .nav__valikko a:hover { background: none; color: var(--muste); }
  .nav__actions { flex-direction: column; align-items: stretch; gap: 1rem; margin-top: 1.8rem; }
  .nav__phone { color: var(--muste); font-size: 1.05rem; }
  .header .btn-musta,
  .header.scrolled .btn-musta { background: var(--muste); color: var(--valkoinen); }
}

@media (max-width: 767px) {
  .hero { height: 97vh; height: 97svh; min-height: 560px; }
  /* Mobiilissa teksti on kapeammalla ja kuva rajautuu tiukemmin, joten
     tummennus on kauttaaltaan vahvempi. Painotus alareunaan ja vasempaan
     laitaan, missä otsikko ja painikkeet ovat. */
  .hero__media::after {
    background:
      linear-gradient(to bottom, rgba(12, 14, 17, 0.55) 0%, rgba(12, 14, 17, 0.38) 30%, rgba(12, 14, 17, 0.95) 100%),
      linear-gradient(to right, rgba(12, 14, 17, 0.66) 0%, rgba(12, 14, 17, 0.26) 60%, rgba(12, 14, 17, 0.04) 100%),
      linear-gradient(rgba(12, 14, 17, 0.14), rgba(12, 14, 17, 0.14));
  }
  .hero__cta .btn { width: 100%; }
  /* Mobiilissa herossa on vain yksi toimintakehotus. "Palvelumme"-linkki
     piilotetaan, koska sivua voi selata alaspäin muutenkin. */
  .hero__link { display: none; }
  .cta__napit .btn { width: 100%; }
}

/* Mobiilissa kortti on kaksisarakkeinen: otsikko ja leipäteksti ylhäällä
   vasemmalla koko leveydeltä, "Kysy lisää" alavasemmalla ja kuvake samassa
   koossa alaoikealla. */
@media (max-width: 639px) {
  .palvelukortti {
    display: grid;
    grid-template-columns: 1fr 118px;
    grid-template-rows: auto auto auto;
    column-gap: 1rem;
  }
  /* Mobiilissa otsikolla on koko kortin leveys käytössä, joten se saa olla
     selvästi isompi kuin työpöydän neljän sarakkeen ruudukossa. */
  .palvelukortti h3 {
    grid-column: 1 / -1;
    font-size: 1.3rem;
    line-height: 1.3;
    margin-bottom: 0.7rem;
  }
  .palvelukortti p { grid-column: 1 / -1; }
  .palvelukortti__linkki {
    grid-column: 1;
    grid-row: 3;
    align-self: end;
    margin-top: 1.3rem;
  }
  .palvelukortti__kuvake {
    grid-column: 2;
    grid-row: 3;
    align-self: end;
    justify-self: end;
    margin-bottom: 0;
    margin-top: 1.3rem;
  }
}

/* ---- Palvelusivut ---- */
@media (min-width: 760px) {
  .svc-lista--kaksi { grid-template-columns: 1fr 1fr; }
  /* Neljä askelta kahteen sarakkeeseen. Yläviivat riittävät, koska listan
     oma alaviiva sulkee ruudukon alareunan. */
  .askeleet--rivi { grid-template-columns: 1fr 1fr; column-gap: clamp(2rem, 4vw, 4rem); }
}

/* UKK kahteen sarakkeeseen heti kun tilaa on. Raja on 900 px eikä 981 px,
   koska laatikot ovat kapeampia kuin palvelukortit ja mahtuvat aiemmin. */
@media (min-width: 900px) {
  .ukk__lista { grid-template-columns: 1fr 1fr; gap: 1.1rem; }
}

@media (min-width: 981px) {
  /* Teksti saa hieman enemmän tilaa kuin kuva, jotta rivit eivät jää
     liian lyhyiksi */
  .svc-jako { grid-template-columns: 1.08fr 0.92fr; }
  /* Palvelusivulla ristiinlinkitetään kolme muuta palvelua, ei neljää */
  .svc-muut .palvelukortit { grid-template-columns: repeat(3, 1fr); }
}

/* Mobiilissa osion järjestys on sama kuin lähdekoodissa: ensin otsikko,
   leipäteksti, lista ja toimintakehotus, ja kuva osion alimpana. Siksi
   tässä ei ole order-sääntöä lainkaan. */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .reveal { opacity: 1 !important; transform: none !important; }
  .karuselli__rata { animation: none; }
}