/* =========================================================================
   Saneeraus ja Laatoitus Kosonen Oy
   Brändi: Poppins · #0057B8 / #003B73 · vaalea teema · terävä pääpainike
   ========================================================================= */

:root {
  /* Värit */
  --blue:        #0057B8;
  --blue-dark:   #00478F;
  --navy:        #003B73;
  --navy-deep:   #002E5A;
  --white:       #FFFFFF;
  --tint:        #F4F7FB;
  --tint-strong: #EAF0F8;
  --line:        #E1E8F1;
  --line-mid:    #D6E0EC;
  --line-strong: #C9D6E6;
  --ink:         #003B73;
  --ink-body:    #46586E;
  --ink-muted:   #5C6B7E;  /* 5,4:1 valkoisella — pienet selitteet läpäisevät AA:n */
  --on-dark-soft: #BFD3EA;  /* footerin leipäteksti, 8,9:1 */

  /* Tekstit ja hiusviivat sinisen osion päällä. Vaalea sävy on valittu niin,
     että kontrasti #0057B8:n päällä on 5,4:1 (leipäteksti) ja 6,9:1 (valkoinen). */
  --on-blue:       #FFFFFF;
  --on-blue-soft:  #D6E4F5;
  --on-blue-line:  rgba(255, 255, 255, 0.26);
  --on-blue-faint: rgba(255, 255, 255, 0.14);

  /* Mitat */
  --shell:    1220px;
  --gutter:   clamp(1.25rem, 5vw, 3.5rem);
  --header-h: 78px;
  --radius:   4px;
  --section-y: clamp(4.5rem, 9vw, 8.5rem);

  /* Tekstikoot */
  --fs-h1:    clamp(2.35rem, 6.2vw, 3.55rem);   /* ~38 → 57px */
  --fs-h2:    clamp(1.6rem, 3.2vw, 2.2rem);     /* ~26 → 35px */
  --fs-body:  1rem;
  --fs-lead:  clamp(1.0625rem, 1.5vw, 1.1875rem);
  --fs-small: 0.8125rem;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1rem);
}

body {
  margin: 0;
  background: var(--white);
  color: var(--ink-body);
  font-family: "Poppins", "Helvetica Neue", Arial, sans-serif;
  font-size: var(--fs-body);
  line-height: 1.72;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  margin: 0;
  color: var(--ink);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.02em;
}

p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
address { font-style: normal; }
img { display: block; max-width: 100%; height: auto; }

a { color: var(--blue); text-decoration: none; }
a:hover { color: var(--blue-dark); }

:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
}

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--navy);
  color: var(--white);
  padding: 0.75rem 1.25rem;
}
.skip-link:focus {
  left: 0;
  color: var(--white);
}

/* ------------------------------- Yleiset -------------------------------- */

.eyebrow {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 1.35rem;
}
.section { padding-block: var(--section-y); }

.section-title { font-size: var(--fs-h2); }
.section-title span { display: block; }

.section-lead {
  font-size: var(--fs-lead);
  max-width: 46ch;
  color: var(--ink-body);
}

.section-head { margin-bottom: clamp(3rem, 6vw, 5rem); }
.section-title + .section-lead { margin-top: 1.5rem; }
.section-head--wide .section-title { max-width: 24ch; }

.section-head--split {
  display: grid;
  gap: 2rem;
}

.prose > p + p { margin-top: 1.1rem; }

/* ------------------------------ Painikkeet ----------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 46px;
  padding: 0.7rem 1.4rem;
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

/* Brändin mukaan: pääpainike terävä, toissijainen pyöreä */
.btn--primary {
  background: var(--blue);
  color: var(--white);
  border-radius: 0;
}
.btn--primary:hover { background: var(--navy); color: var(--white); }

.btn--secondary {
  background: var(--white);
  color: var(--blue);
  border-color: var(--line-strong);
  border-radius: 100px;
}
.btn--secondary:hover {
  border-color: var(--blue);
  background: var(--tint);
  color: var(--blue);
}

.btn--light {
  background: var(--white);
  color: var(--navy);
  border-radius: 0;
}
.btn--light:hover { background: var(--tint-strong); color: var(--navy); }

/* Kuvan päällä: valkoinen pääpainike ja läpinäkyvä toissijainen.
   Muotokieli säilyy brändin mukaisena — pääpainike terävä, toissijainen pyöreä. */
.btn--ghost {
  background: transparent;
  color: var(--white);
  border-color: rgba(255, 255, 255, 0.65);
  border-radius: 100px;
}
.btn--ghost:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: var(--white);
  color: var(--white);
}

.btn--lg { min-height: 54px; padding: 0.9rem 1.9rem; font-size: 1rem; }
.btn--block { width: 100%; }

/* ----------------------------- Kuvapaikat ------------------------------ */

.ph {
  position: relative;
  display: grid;
  place-content: center;
  gap: 0.4rem;
  aspect-ratio: var(--ratio, 3 / 2);
  margin: 0;
  background: var(--tint);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  text-align: center;
  overflow: hidden;
}
.ph::after {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px solid var(--line-mid);
  pointer-events: none;
}
.ph__label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
/* Hierarkia tulee koosta ja lihavuudesta, ei haalennetusta väristä. */
.ph__ratio {
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  color: var(--ink-muted);
}

/* Kun oikea kuva lisätään <figure>-elementin sisään, paikanpitäjä väistyy.
   Rajauksen tarkennuspiste annetaan kuvakohtaisesti --focus-muuttujalla
   (samaan tapaan kuin --ratio), esim. style="--focus: 50% 25%". */
/* Absoluuttinen sijoitus, ei grid-solu: .ph käyttää place-content: center
   paikanpitäjän tekstille, jolloin height: 100% jäisi kehämääritykseksi eikä
   kuva täyttäisi laatikkoa. */
.ph > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--focus, 50% 50%);
}
/* Reunus pois kokonaan, ei vain läpinäkyväksi — muuten kuva jää 2 px
   laatikkoa pienemmäksi. */
.ph:has(img) { background: none; border: 0; }
.ph:has(img)::after,
.ph:has(img) .ph__label,
.ph:has(img) .ph__ratio { display: none; }

/* ------------------------------- Header -------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--white);
  border-bottom: 1px solid var(--line);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  min-height: var(--header-h);
}

.wordmark {
  display: inline-flex;
  align-items: stretch;
  gap: 0.85rem;
  color: var(--ink);
  padding-block: 0.35rem;
}
.wordmark__rule {
  width: 3px;
  background: var(--blue);
  flex: none;
}
.wordmark__text { display: grid; }
.wordmark__over {
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--ink-muted);
  line-height: 1.5;
}
.wordmark__name {
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.25;
  color: var(--ink);
}

.nav { display: flex; align-items: center; gap: 2.25rem; }
.nav__list { display: flex; align-items: center; gap: 1.6rem; }
.nav__list a {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--ink);
  padding-block: 0.35rem;
  white-space: nowrap;
  border-bottom: 1px solid transparent;
}
.nav__list a:hover,
.nav__list a.is-active { color: var(--blue); border-bottom-color: var(--blue); }

.nav__cta { display: flex; align-items: center; gap: 0.75rem; }

/* Palkin soittopainike näkyy vasta mobiilissa. */
.header-call { display: none; }

.nav-toggle {
  display: none;
  align-items: center;
  gap: 0.6rem;
  background: none;
  border: 1px solid var(--line-strong);
  border-radius: 100px;
  padding: 0.6rem 1.05rem;
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  min-height: 44px;
}
.nav-toggle__bars { display: grid; gap: 5px; width: 18px; }
.nav-toggle__bars span {
  display: block;
  height: 2px;
  background: var(--blue);
  transition: transform 0.25s ease;
}
body.nav-open .nav-toggle__bars span:first-child { transform: translateY(3.5px) rotate(45deg); }
body.nav-open .nav-toggle__bars span:last-child { transform: translateY(-3.5px) rotate(-45deg); }

/* --------------------------------- Hero -------------------------------- */

/* Kuva täyttää koko hero-osion. Toteutus <img> + object-fit: cover, jotta
   kuvalla on alt-teksti ja se löytyy kuvahausta — taustakuva ei kumpaakaan tee. */
.hero {
  position: relative;
  display: flex;
  align-items: center;
  /* Täyttää näkyvän alueen headerin alta, joten seuraava osio paljastuu vasta
     vierittämällä. dvh ottaa huomioon mobiilin osoitepalkin; vh on varalla
     vanhemmille selaimille. Alaraja pitää sisällön mahtuvana hyvin matalissa
     ikkunoissa (esim. puhelin vaaka-asennossa). */
  min-height: 30rem;
  min-height: max(30rem, calc(100vh - var(--header-h)));
  min-height: max(30rem, calc(100dvh - var(--header-h)));
  padding-block: clamp(4rem, 9vw, 7rem);
  overflow: hidden;
  background: var(--navy-deep); /* näkyy sekunnin murto-osan ennen kuvan latautumista */
}

.hero__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 45%;
}

/* Hero-animaation lähtötila. Luokka on <html>-elementissä vain silloin, kun
   animaatio todella ajetaan (ks. index.html:n inline-skripti), joten ilman
   JavaScriptiä tai GSAP:ia mikään ei jää piiloon. */
.hero-anim .hero__image,
.hero-anim .hero__body > * { opacity: 0; }

/* Tummansininen kalvo: vahvin tekstin takana vasemmalla, kevenee oikealle
   niin että sauna ja suihkutila jäävät näkyviin. */
.hero__overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      100deg,
      rgba(0, 34, 68, 0.86) 0%,
      rgba(0, 38, 74, 0.80) 34%,
      rgba(0, 46, 90, 0.44) 56%,
      rgba(0, 59, 115, 0.12) 76%,
      rgba(0, 59, 115, 0.00) 100%
    );
}

.hero__inner { position: relative; width: 100%; }
.hero__body { max-width: 36rem; }

.hero .eyebrow { color: #CFE0F4; }

/* Monikoti-logo hero-tekstin yläpuolella. Koko on sidottu leveyteen, ei
   korkeuteen: näin logon vasen reuna osuu täsmälleen samaan linjaan H1:n,
   leipätekstin ja CTA-painikkeiden kanssa, ja korkeus tulee kuvasuhteesta
   4.07:1 — logo ei siis veny. display: block poistaa inline-kuvan
   rivilaatikon, ja Cloudinaryn e_trim leikkaa logotiedostossa olleen
   läpinäkyvän reunuksen (vasemmalla 77/800 px = 9,6 %), joka muuten
   työnsi näkyvän logon tekstin linjasta oikealle.
   Kunnes logotiedosto on lisätty, tyhjä paikka piiloutuu eikä jätä aukkoa. */
.hero__logo {
  /* Väljempi väli otsikkoon irrottaa logon omaksi elementikseen. Hero on
     pystysuunnassa keskitetty, joten kasvanut väli nostaa samalla logoa. */
  margin-bottom: clamp(2rem, 3.5vw, 2.75rem);
  line-height: 0;
}
.hero__logo:empty { display: none; }
.hero__logo img {
  display: block;
  width: clamp(13rem, 19.6vw, 18.1rem);
  height: auto;
  max-width: 100%;
}
.hero__title { color: var(--white); }
.hero__lead { color: #E7EEF8; }

.hero__title {
  font-size: var(--fs-h1);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.04;
}
.hero__title > span { display: block; }         /* rivit */
.hero__word { display: inline-block; }          /* animoitavat sanat */

.hero__lead {
  margin-top: 1.85rem;
  font-size: var(--fs-lead);
  max-width: 44ch;
}

.hero__actions {
  margin-top: 2.4rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
}

/* ------------------------------- Palvelut ------------------------------
   Epäsymmetrinen kaksipalstainen asettelu: vasemmalla yksi iso pääpalvelu
   (kuva 4:3 + sininen sisältöalue), oikealla kaksi vaakakorttia päällekkäin
   (kuva vasemmalla, sininen tekstialue oikealla). Palstat on mitoitettu niin,
   että ne päättyvät samalle riville.
   ----------------------------------------------------------------------- */

.services {
  background: var(--white);
  padding-block: clamp(2.75rem, 5.2vw, 4.25rem);
}

/* Yläosa: label · otsikko, alla ohut sininen viiva */
.services__head {
  display: grid;
  grid-template-columns: 6.5rem minmax(0, 1fr);
  gap: clamp(1rem, 3vw, 2.5rem);
  align-items: baseline;
  padding-bottom: clamp(1rem, 2vw, 1.5rem);
  border-bottom: 1px solid rgba(0, 87, 184, 0.3);
}
.services__head .eyebrow { margin-bottom: 0; }

.services__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
  gap: clamp(0.9rem, 1.5vw, 1.25rem);
  margin-top: clamp(1.5rem, 2.8vw, 2.25rem);
}

/* 01 — pääpalvelu, osion visuaalinen pääelementti. Kuva istuu lohkon
   yläreunassa täydellä leveydellä: sinistä ei jää kuvan vasemmalle, oikealle
   eikä yläpuolelle, vaan pinta alkaa vasta kuvan alta ja kantaa tekstin.
   Kulmat pysyvät terävinä eikä lohkolle tule reunusta tai varjoa. */
.service-main {
  display: flex;
  flex-direction: column;
  background: var(--navy);
  color: var(--on-blue-soft);
}
.service-main__media {
  border: 0;
  border-radius: 0;
  background: var(--navy-deep); /* näkyy kunnes kuva on latautunut */
}
/* Numero ja otsikko koko leveydelle, teksti vasemmalle ja CTA oikeaan
   alakulmaan — sama rytmi kuin referenssissä. */
.service-main__body {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-content: start;
  gap: 0 clamp(1rem, 1.8vw, 1.5rem);
  padding: clamp(1.5rem, 2.4vw, 2rem);
}
.service-main__title {
  grid-column: 1 / -1;
  font-size: clamp(1.35rem, 2.2vw, 1.75rem);
  color: var(--on-blue);
  margin-bottom: 0.8rem;
}
.service-main__text {
  font-size: 0.9375rem;
  max-width: 42ch;
}
.service-main .service-link { align-self: end; justify-self: end; }

/* 02 ja 03 — kaksi täysin identtistä vaakakorttia. Vaalea pinta irrottaa ne
   valkoisesta taustasta ilman erillistä reunusta, ja kuva istuu kiinni kortin
   vasemmassa reunassa.

   repeat(2, 1fr) on tässä olennainen: se pakottaa molemmille korteille saman
   korkeuden riippumatta siitä, kuinka monelle riville teksti kussakin
   kortissa menee. Kun kuvapalstan osuus on myös sama, kuvapinnoista tulee
   pikselilleen samankokoiset ja niiden ylä- ja alareunat asettuvat samoihin
   linjoihin. Palsta venyy pääkortin korkuiseksi, joten kummankin kortin kuva
   täyttää oman korkeutensa kokonaan — kortteihin ei jää tyhjää tilaa. */
.service-rows {
  display: grid;
  grid-template-rows: repeat(2, 1fr);
  gap: clamp(0.9rem, 1.5vw, 1.25rem);
}
.service-row {
  display: grid;
  grid-template-columns: minmax(0, 1.22fr) minmax(0, 1fr);
  align-items: stretch;
  background: var(--navy);
  color: var(--on-blue-soft);
  overflow: hidden;
}
/* Kuvasuhde tulee kortin korkeudesta, ei --ratio-muuttujasta: 4:3-lähdekuva
   rajautuu object-fit: cover -säännöllä keskeltä. --ratio jää mobiilia
   varten, jossa kuva on täysleveä. Kuva peittää oman palstansa kokonaan,
   joten sininen pinta näkyy vain tekstialueen alla — kuvan päälle ei tule
   sinistä sävytystä. */
.service-row__media {
  aspect-ratio: auto;
  border: 0;
  border-radius: 0;
  background: var(--navy-deep); /* näkyy kunnes kuva on latautunut */
}
.service-row__body {
  align-self: center;
  padding: clamp(1.1rem, 1.7vw, 1.4rem) clamp(1.15rem, 1.8vw, 1.5rem);
}
.service-row__title {
  font-size: clamp(1.1rem, 1.5vw, 1.3rem);
  color: var(--on-blue);
  margin-bottom: 0.5rem;
}
.service-row__text {
  font-size: 0.9375rem;
  margin-bottom: 0.9rem;
}

/* Yhteiset osat */
.service-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--blue);
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
  white-space: nowrap;
}
.service-link span { transition: transform 0.2s ease; }
.service-link:hover { border-bottom-color: currentColor; }
.service-link:hover span { transform: translateX(3px); }

.service-link--light { color: var(--on-blue); border-bottom-color: rgba(255, 255, 255, 0.45); }
.service-link--light:hover { color: var(--on-blue); border-bottom-color: var(--on-blue); }

/* --------------------------- Avaimet käteen ---------------------------- */

.turnkey {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: start;
}
.turnkey__title {
  font-size: var(--fs-h2);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.16;
}
.turnkey__title span { display: block; }
.turnkey__text {
  margin-top: 1.75rem;
  font-size: var(--fs-lead);
  max-width: 44ch;
}
/* Osio alkaa suoraan leipätekstillä, joten ylimääräistä väliä ei tarvita. */
.turnkey__text:first-child { margin-top: 0; }
.turnkey .btn { margin-top: 2.25rem; }

.turnkey__list { display: grid; }
.turnkey__list li {
  padding: 1.6rem 0;
  border-top: 1px solid var(--on-blue-line);
}
.turnkey__list li:last-child { border-bottom: 1px solid var(--on-blue-line); }
.turnkey__list h3 {
  font-size: 1.0625rem;
  font-weight: 600;
  margin-bottom: 0.45rem;
}
.turnkey__list p { font-size: 0.9375rem; max-width: 42ch; }

/* -------------------------------- Meistä ------------------------------- */

.about {
  background: var(--white);
  /* Tiiviimpi kuin oletusosio: vähemmän tyhjää ylä- ja alapuolella. Kuva on
     pystykuva 4:5, joten osio on jo itsessään korkea. */
  padding-block: clamp(3rem, 6vw, 5rem);
}

/* Kuva vasemmalla, teksti oikealla. Pystykuva on selvästi tekstiblokkia
   korkeampi, joten kuvapalsta on kapeampi kuin tekstipalsta ja teksti
   keskitetään pystysuunnassa kuvaa vasten — näin kummankaan optinen
   painopiste ei jää ylös eikä alas. */
.about__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.78fr) minmax(0, 1fr);
  column-gap: clamp(2rem, 3.5vw, 3.25rem);
  align-items: center;
}
.about__media .ph { border-color: var(--line-mid); }
/* Rivinpituus pysyy luettavana vaikka tekstipalsta on leveä. */
.about__body .prose { margin-top: 1.25rem; max-width: 36rem; }

/* ------------------------------ Prosessi ------------------------------- */

.steps { position: relative; padding-top: 2.25rem; }
.steps__list {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0;
}
.steps__track {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--line);
}
/* Kiinteä korostusviiva vaiherivin yläpuolella (ei animaatiota). */
.steps__progress {
  display: block;
  height: 1px;
  background: var(--blue);
  transform-origin: left center;
}

.step { padding-right: 1.75rem; }
.step:not(:first-child) {
  padding-left: 1.75rem;
  border-left: 1px solid var(--line);
}
.step__num {
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--tint-strong);
  line-height: 1;
  margin-bottom: 1.1rem;
}
.step__title {
  font-size: 1.0625rem;
  font-weight: 600;
  margin-bottom: 0.55rem;
}
.step__text { font-size: 0.9375rem; }

/* ------------------------------- Galleria ------------------------------
   Tiivis masonry: kuvat sijoitetaan pystysarakkeisiin niiden omien
   kuvasuhteiden mukaan (JS jakaa aina lyhyimpään sarakkeeseen), joten mitään
   kuvaa ei venytetä eikä rajata. Sarakkeet alkavat samalta viivalta ja välit
   ovat kapeat, jolloin ruudukko on ryhdikäs ja helppo lukea. Ilman
   JavaScriptiä .gallery on tavallinen CSS-monipalsta ja kaikki kuvat näkyvät.
   ----------------------------------------------------------------------- */

.gallery-section { background: var(--white); }

.gallery__head { max-width: 44ch; }
.gallery__head .section-title { margin-bottom: 1.25rem; }

/* Sivunumero ja nuolet omalla rivillään, erotettuna hiusviivalla. */
.gallery__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  margin-top: clamp(2.25rem, 4vw, 3.25rem);
  padding-top: clamp(1.25rem, 2.5vw, 1.75rem);
  border-top: 1px solid var(--line);
}

.gallery__count {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
}
.gallery__count b { font-weight: 600; }
.gallery__count span { color: var(--ink-muted); font-weight: 500; }

.gallery__nav { display: flex; gap: 0.6rem; }

.gallery__arrow {
  width: 3rem;
  height: 3rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  color: var(--blue);
  background: var(--white);
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}
.gallery__arrow:hover:not(:disabled) { border-color: var(--blue); background: var(--tint); }
.gallery__arrow:disabled { color: var(--line-strong); border-color: var(--line); cursor: default; }

/* Kuvaruudukko */
.gallery {
  --gallery-gap: clamp(0.5rem, 0.9vw, 0.85rem);
  margin-top: clamp(1.5rem, 3vw, 2rem);
  columns: 3;
  column-gap: var(--gallery-gap);
}
/* JS ottaa asettelun haltuun: sarakkeet ovat oikeita elementtejä, jolloin
   kuvien järjestys ja sarakkeiden porrastus ovat hallittavissa. */
.gallery.is-paged {
  columns: auto;
  display: flex;
  align-items: flex-start;
  gap: var(--gallery-gap);
}
.gallery__col {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--gallery-gap);
}
.gallery__item {
  position: relative;
  margin: 0 0 var(--gallery-gap);
  break-inside: avoid;
}
.gallery.is-paged .gallery__item { margin: 0; }

/* Kuva on painike, jotta lightbox toimii myös näppäimistöllä. */
.gallery__open {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
  font: inherit;
}
.gallery__open img {
  width: 100%;
  height: auto;          /* kuvasuhde säilyy sellaisenaan */
  display: block;
  transition: opacity 0.3s ease;
}
.gallery__open:hover img { opacity: 0.92; }
.gallery__open:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }

/* Sivunvaihdon paljastus: lyhyt häivytys ja pieni nousu, porrastettuna. */
.gallery__item.is-entering {
  opacity: 0;
  transform: translateY(14px);
}
.gallery.is-paged .gallery__item {
  transition: opacity 0.42s ease, transform 0.42s ease;
  transition-delay: calc(var(--i, 0) * 45ms);
}

/* --------------------------------- Lightbox ---------------------------- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(0, 20, 40, 0.92);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.lightbox.is-open { opacity: 1; }
.lightbox img {
  max-width: min(100%, 68rem);
  max-height: 88vh;
  width: auto;
  height: auto;
  object-fit: contain;
}
.lightbox__btn {
  position: absolute;
  width: 3rem;
  height: 3rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  color: var(--white);
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 50%;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}
.lightbox__btn:hover { background: rgba(255, 255, 255, 0.22); border-color: var(--white); }
.lightbox__btn:focus-visible { outline: 2px solid var(--white); outline-offset: 2px; }
.lightbox__close { top: clamp(1rem, 3vw, 2rem); right: clamp(1rem, 3vw, 2rem); }
.lightbox__prev { left: clamp(0.75rem, 3vw, 2rem); top: 50%; transform: translateY(-50%); }
.lightbox__next { right: clamp(0.75rem, 3vw, 2rem); top: 50%; transform: translateY(-50%); }
body.lightbox-open { overflow: hidden; }

/* Kapealla työpöydällä tekstipalsta kaipaa hieman lisää tilaa, jotta rivejä
   ei tule liikaa. Kuvapalstan osuus on silti sama molemmissa korteissa. */
@media (max-width: 1200px) {
  .service-row { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
}

/* Tabletti: palstat pinoutuvat, mutta hierarkia säilyy — pääpalvelu ensin
   isona ja sen alla kaksi vaakakorttia. Koko rivin levyisenä kuva mahtuu
   omaan 4:3-suhteeseensa, joten kortin korkeus tulee kuvasta. */
@media (max-width: 940px) {
  .services__grid { grid-template-columns: minmax(0, 1fr); }
  .service-row { grid-template-columns: minmax(0, 0.6fr) minmax(0, 1fr); }
  .service-row__media { aspect-ratio: var(--ratio); }

  /* Meistä pinoutuu samassa kohdassa: kuva ensin, teksti sen alle. Pystykuvaa
     rajoitetaan leveydeltä, ettei siitä tule koko rivin levyisenä liian
     korkeaa. */
  .about__grid {
    grid-template-columns: minmax(0, 1fr);
    row-gap: clamp(1.75rem, 4vw, 2.5rem);
    align-items: start;
  }
  .about__media { max-width: 28rem; }
  .about__body .prose { max-width: none; }
}

/* Ilman JavaScriptiä (CSS-monipalsta) sarakemäärä kapenee näytön mukana.
   JS-tilassa sarakkeet luodaan elementteinä, ks. script.js. */
@media (max-width: 940px) { .gallery { columns: 2; } }
@media (max-width: 620px) { .gallery { columns: 1; } }

/* ----------------------------- Yhteydenotto ---------------------------- */

.contact__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2.5rem, 6vw, 5.5rem);
  align-items: start;
}

.contact__list { margin-top: 2.75rem; border-top: 1px solid var(--line); }
.contact__list li {
  display: grid;
  grid-template-columns: 8.5rem minmax(0, 1fr);
  gap: 1rem;
  align-items: baseline;
  padding: 1.1rem 0;
  border-bottom: 1px solid var(--line);
}
.contact__label {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.contact__value { font-size: 1rem; font-weight: 500; color: var(--ink); }
a.contact__value:hover { color: var(--blue); }
.contact__value--big {
  font-size: clamp(1.25rem, 2.4vw, 1.5rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--blue);
}

/* Lomake */
.form-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(1.5rem, 3.5vw, 2.5rem);
  scroll-margin-top: calc(var(--header-h) + 1.5rem);
}
.form-card__title { font-size: 1.25rem; margin-bottom: 0.4rem; }
.form-card__note { font-size: var(--fs-small); color: var(--ink-muted); margin-bottom: 1.75rem; }

.form { display: grid; gap: 1.15rem; }
.field { display: grid; gap: 0.4rem; }
.field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.15rem; }

.field label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: 0.01em;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 48px;
  padding: 0.7rem 0.85rem;
  font: inherit;
  font-size: 1rem;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  transition: border-color 0.18s ease;
}
.field textarea { min-height: 132px; resize: vertical; line-height: 1.6; }
.field select {
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1.5 6 6.5l5-5' fill='none' stroke='%230057B8' stroke-width='1.6'/></svg>");
  background-repeat: no-repeat;
  background-position: right 0.9rem center;
  padding-right: 2.25rem;
}
.field input::placeholder,
.field textarea::placeholder { color: var(--ink-muted); opacity: 0.8; }
.field input:focus,
.field select:focus,
.field textarea:focus { border-color: var(--blue); outline: none; }
.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }

.field--check {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 0.7rem;
  margin-top: 0.35rem;
}
.field--check input {
  width: 20px;
  height: 20px;
  min-height: 0;
  margin: 0.2rem 0 0;
  accent-color: var(--blue);
  padding: 0;
}
.field--check label { font-weight: 400; font-size: 0.875rem; color: var(--ink-body); line-height: 1.55; }
.field--check .field__error { grid-column: 1 / -1; }

.field__error {
  font-size: var(--fs-small);
  color: #B3261E;
  min-height: 0;
}
.field__error:empty { display: none; }
.field.has-error input,
.field.has-error select,
.field.has-error textarea { border-color: #B3261E; }

.form__hint { font-size: var(--fs-small); color: var(--ink-muted); }
.form__status { font-size: 0.875rem; font-weight: 500; color: var(--blue); }
.form__status:empty { display: none; }

/* -------------------------------- Footer ------------------------------- */

.site-footer {
  background: var(--navy-deep);
  color: var(--on-dark-soft);
  padding-top: clamp(3rem, 6vw, 4.5rem);
}
.site-footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
}
.site-footer__name {
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--white);
  margin-bottom: 0.75rem;
}
.site-footer__tag { font-size: 0.9375rem; max-width: 38ch; }
.site-footer__heading {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--on-dark-soft);
  margin-bottom: 1.1rem;
}
.site-footer ul { display: grid; gap: 0.6rem; font-size: 0.9375rem; }
.site-footer a { color: var(--white); }
.site-footer a:hover { color: var(--on-dark-soft); }

.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  font-size: var(--fs-small);
}
.to-top { color: var(--white); }

/* ============================== Responsiivinen ========================== */

@media (max-width: 1280px) {
  .nav__list { gap: 1.2rem; }
  .nav { gap: 1.5rem; }
  .nav__list a { font-size: 0.8125rem; }
}

/* Navigaatio siirtyy valikkopainikkeen taakse, ennen kuin linkit ahtautuvat. */
@media (max-width: 1100px) {
  :root { --header-h: 66px; }

  .nav-toggle { display: inline-flex; }

  .nav {
    position: fixed;
    top: var(--header-h);
    left: 0;
    right: 0;
    max-height: calc(100dvh - var(--header-h));
    overflow-y: auto;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--white);
    border-bottom: 1px solid var(--line);
    padding: 0.5rem var(--gutter) 1.5rem;
    visibility: hidden;
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s;
  }
  body.nav-open .nav { visibility: visible; opacity: 1; transform: none; }

  .nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__list a {
    display: block;
    padding: 0.95rem 0;
    font-size: 1rem;
    border-bottom: 1px solid var(--line);
  }
  .nav__list a { white-space: normal; }
  .nav__list a:hover, .nav__list a.is-active { border-bottom-color: var(--line); }
  .nav__list li:last-child a { border-bottom: 0; }

  /* Soittopainike siirtyy paneelista palkkiin, joten paneeliin jää vain
     pääpainike koko leveydeltä. */
  .nav__cta {
    flex-direction: column;
    align-items: stretch;
    gap: 0.85rem;
    margin-top: 1.25rem;
  }
  .nav__cta .btn--secondary { display: none; }

  .site-header__inner { gap: 0.6rem; }
  .wordmark { flex: none; }
  .header-call {
    display: inline-flex;
    margin-left: auto;
    min-height: 44px;
    padding: 0.55rem 1.05rem;
    font-size: 0.875rem;
  }

  /* Kapeammalla näytöllä rajaus siirtyy oikealle: suihkutila ja sauna
     pysyvät kuvassa, eikä pelkkä lattia täytä alaosaa. */
  .hero__image { object-position: 55% 45%; }
  .hero__body { max-width: 34rem; }

  .turnkey,
  .contact__grid { grid-template-columns: minmax(0, 1fr); }

  /* Palvelut: label omalle rivilleen, otsikko sen alle */
  .services__head {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 0.75rem;
  }
  .services__head .eyebrow { margin-bottom: 0.35rem; }


  .steps__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem 0; }
  .step { padding-bottom: 1.75rem; }
  .step:nth-child(even) { padding-left: 1.75rem; border-left: 1px solid var(--line); }
  .step:nth-child(odd) { padding-left: 0; border-left: 0; }

  .site-footer__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .site-footer__brand { grid-column: 1 / -1; }
}

@media (max-width: 620px) {
  :root { --fs-h1: clamp(2.05rem, 9vw, 2.6rem); }

  /* Puhelimessa teksti kattaa koko leveyden, joten kalvo tummenee alaspäin
     vaakasuunnan sijaan. */
  .hero { padding-block: clamp(3rem, 12vw, 4.5rem); }
  /* Kapeasta rajauksesta jää näkyviin allaskaluste, peili ja saunan ovi. */
  .hero__image { object-position: 52% 45%; }
  .hero__overlay {
    background:
      linear-gradient(
        170deg,
        rgba(0, 34, 68, 0.52) 0%,
        rgba(0, 40, 78, 0.66) 45%,
        rgba(0, 34, 68, 0.82) 100%
      );
  }
  .hero__actions .btn { width: 100%; }


  /* Palvelut mobiilissa: yksi kortti riviä kohti, kuva aina täysleveänä
     kortin päällä 4:3-suhteessa. */
  .services__head { row-gap: 0.6rem; }

  .service-main__body {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }
  .service-main__text { max-width: none; }
  .service-main .service-link { justify-self: start; margin-top: 1.25rem; }

  /* Pinossa korttien ei tarvitse enää olla saman korkuisia, joten kumpikin
     saa oman luonnollisen korkeutensa ja kuva pysyy tarkasti 4:3:na. */
  .service-rows { grid-template-rows: auto auto; }
  .service-row {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-items: start;
  }

  /* Kuvakehys saa mobiilissa korkeutensa aina omasta kuvasuhteestaan.
     Tämä on kirjoitettava tähän auki, koska .service-row__media nollaa
     .ph:n kuvasuhteen (aspect-ratio: auto) työpöytäasettelua varten. Kehyksen
     ainoa lapsi on absoluuttisesti sijoitettu <img>, joten ilman omaa
     kuvasuhdetta kehykselle ei jää lainkaan sisältökorkeutta: pinotussa
     asettelussa kuva ja teksti ovat eri riveillä, eikä tekstipalsta enää
     venytä kuvariviä auki — kehys litistyy nollaan ja kuva katoaa.
     Kaikki kolme korttia käyttäytyvät nyt täsmälleen samoin. */
  .service-main__media,
  .service-row__media {
    display: block;          /* ei grid-keskitystä eikä .ph:n gapia */
    width: 100%;
    aspect-ratio: 4 / 3;
    min-height: 0;
    margin: 0;
  }
  .service-main__media > img,
  .service-row__media > img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* Sininen tekstialue alkaa heti kuvan alareunasta, ilman väliä. */
  .service-row__body { align-self: start; }

  .steps__list { grid-template-columns: minmax(0, 1fr); }
  .step,
  .step:nth-child(even),
  .step:nth-child(odd) {
    padding: 1.35rem 0 1.35rem 0;
    border-left: 0;
    border-bottom: 1px solid var(--line);
  }
  .step__num { font-size: 1.35rem; margin-bottom: 0.6rem; color: var(--blue); }

  .field-row { grid-template-columns: minmax(0, 1fr); }
  .contact__list li { grid-template-columns: minmax(0, 1fr); gap: 0.35rem; }

  .site-footer__grid { grid-template-columns: minmax(0, 1fr); }
  .site-footer__bottom { justify-content: flex-start; }
}

/* Kapea puhelin: valikkopainike pelkällä kuvakkeella, jotta logo ja
   soittopainike mahtuvat palkkiin puristumatta. Saavutettava nimi tulee
   painikkeen aria-labelista. */
@media (max-width: 480px) {
  .site-header__inner { gap: 0.5rem; }
  .header-call { padding: 0.55rem 0.9rem; }
  .nav-toggle { padding: 0.6rem 0.85rem; }
  .nav-toggle__label { display: none; }
}

/* Kaikkein kapeimmilla näytöillä palkkiin ei mahdu logon rinnalle sekä
   soittopainiketta että valikkopainiketta, joten soitto palaa valikkoon. */
@media (max-width: 374px) {
  .header-call { display: none; }
  .nav__cta .btn--secondary { display: inline-flex; }
}

/* ==========================================================================
   SINISET OSIOT — sivun visuaalinen rytmi
   valkoinen (hero, palvelut) → sininen (avaimet käteen) → valkoinen (meistä)
   → sininen (remontin kulku) → valkoinen (galleria) → sininen (yhteydenotto)
   → tumma sininen (footer).

   Nämä säännöt ovat tiedoston lopussa, jotta ne voittavat myös
   responsiivisissa lohkoissa määritellyt hiusviivojen värit.
   ========================================================================== */

.section--blue {
  background: var(--blue);
  color: var(--on-blue-soft);
}

/* Otsikot valkoisina, selitteet vaaleana sinisenä */
.section--blue h2,
.section--blue h3,
.section--blue .section-title,
.section--blue .turnkey__title { color: var(--on-blue); }

.section--blue .eyebrow,
.section--blue .section-lead,
.section--blue .turnkey__text { color: var(--on-blue-soft); }

/* Hiusviivat kääntyvät läpikuultavaksi valkoiseksi */
.section--blue .contact__list { border-top-color: var(--on-blue-line); }

.section--blue .contact__list li { border-bottom-color: var(--on-blue-line); }

/* Remontin kulku */
.section--blue .steps__track { background: var(--on-blue-faint); }
.section--blue .steps__progress { background: var(--on-blue); }
.section--blue .step,
.section--blue .step:nth-child(odd),
.section--blue .step:nth-child(even) { border-color: var(--on-blue-line); }
.section--blue .step__num { color: rgba(255, 255, 255, 0.42); }
.section--blue .step__title { color: var(--on-blue); }
.section--blue .step__text { color: var(--on-blue-soft); }

/* Yhteystiedot */
.section--blue .contact__label { color: var(--on-blue-soft); }
.section--blue .contact__value,
.section--blue .contact__value--big { color: var(--on-blue); }
.section--blue a.contact__value:hover { color: var(--on-blue-soft); }

/* Valkoinen lomakekortti sinisen päällä säilyttää oman väriskaalansa */
.section--blue .form-card {
  border-color: transparent;
  color: var(--ink-body);
}
.section--blue .form-card__title { color: var(--ink); }
.section--blue .form-card__note,
.section--blue .form__hint { color: var(--ink-muted); }
.section--blue .field label { color: var(--ink); }
.section--blue .field--check label { color: var(--ink-body); }
.section--blue .form__status { color: var(--blue); }
.section--blue .field__error { color: #B3261E; }

/* Näppäimistöfokus näkyy myös sinisellä pohjalla */
.section--blue a:focus-visible,
.section--blue button:focus-visible { outline-color: var(--on-blue); }

/* Käyttäjä on pyytänyt vähemmän liikettä */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

@media print {
  .site-header, .nav, .nav-toggle, .to-top, .form-card { display: none; }
  body { color: #000; }
}