/* ============================================================
   HOITOLA RUUSU - style.css
   Editoriaalinen muotokieli: letterspaced-versaalit, vaaleat pinnat
   + tummat inverse-osiot, terävät kulmat. Ruusun oma ilme: puuterinen
   roosa ja syvä luumu hoitolan omista kuvista. Otsikot Marcellus,
   leipäteksti Figtree ja kursiivisitaatit EB Garamond.
   Ei pyöristyksiä, ei varjoja (paitsi kuvien päällä olevan tekstin varjo).
   ============================================================ */

/* ---------- Fontit (itse ylläpidetyt, ei yhteyttä Googleen) ----------
   Muuttuvat fontit (variable): yksi tiedosto kattaa kaikki painot.
   Latin-osajoukko riittää suomeen (ä, ö, å, €, viivat). */
/* Marcellus: yksi paino (400), ei kursiivia. size-adjust pienentää sen
   versaalikorkeuden samaksi kuin aiemmalla EB Garamondilla (0,650 em),
   joten otsikoiden koot ja rivitykset pysyvät ennallaan. */
@font-face {
  font-family: 'Marcellus';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  size-adjust: 92.9%;
  src: url('/fontit/marcellus-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;
}
/* Birthstone: otsikot (h1, h2 ja isot h3). Kaunokirjoituksen x-korkeus on pieni, joten
   size-adjust suurentaa sitä, jotta otsikot ovat yhtä painavia kuin aiemmat versaalit. */
@font-face {
  font-family: 'Birthstone';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  size-adjust: 130%;
  src: url('/fontit/birthstone-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;
}
/* Marcellusissa ei ole kursiivia: sitaatit EB Garamondin kursiivilla */
@font-face {
  font-family: 'EB Garamond';
  font-style: italic;
  font-weight: 400 500;
  font-display: swap;
  src: url('/fontit/eb-garamond-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;
}
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url('/fontit/figtree-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;
}

/* ---------- Custom properties ----------
   Kontrastit tarkistettu: kaikki tekstivärit täyttävät WCAG AA:n (4.5:1)
   kaikilla vaaleilla pinnoilla. --color-accent on vain koriste (viivat,
   numerot), ei koskaan leipätekstin väri. */
:root {
  /* Vaaleat pinnat */
  --color-bg:           #f2e9e4;  /* sivun pohja, puuterinen kerma (hoitolan seinien sävy) */
  --color-bg-card:      #fbf8f6;  /* palvelulaatat, UKK-laatikot, footer */
  --color-hairline:     #e9dcd6;  /* 1px rajat laattojen välissä */

  /* Tummat pinnat */
  --color-ink:          #2f2226;  /* inverse-osiot: syvä luumu */
  --color-ink-line:     #4a383d;  /* footerin jakoviiva */

  /* Teksti vaalealla */
  --color-text:         #2f2226;
  --color-text-body:    #574549;
  --color-text-soft:    #6d5a5f;
  --color-eyebrow:      #7a5c61;
  --color-divider:      #d9c7c1;

  /* Teksti tummalla */
  --color-on-ink:       #f7f0ec;
  --color-on-ink-head:  #f3eae6;
  --color-on-ink-body:  rgba(243, 234, 230, .78);
  --color-on-ink-lead:  rgba(247, 240, 236, .86);
  --color-on-ink-eyebrow: #c7aeb1;
  --color-on-ink-border:  rgba(247, 240, 236, .6);
  --color-on-ink-border-soft: rgba(243, 234, 230, .5);
  --color-on-ink-underline: rgba(243, 234, 230, .6);

  /* Ruusu-aksentti (brändin roosa, hienovarainen) */
  --color-accent:       #bb7a81;  /* pölyinen roosa: listamerkit, numerot, viivat (3.4:1 valkoisella) */
  --color-accent-deep:  #985560;  /* syvä roosa: hover-tilat, linkit, eyebrow-korostus */
  --color-rose-tint:    #f6e7e5;  /* hyvin vaalea roosa, kortit ja korostuspinnat */
  --color-rose-soft:    #f3dedb;  /* etusivun heron yläosa: selvemmin roosa, eyebrow-teksti vielä AA (4.6:1) */
  --color-rose-line:    #ecd3d0;  /* roosansävyinen hiusviiva korttien rajoihin */

  /* Muut */
  --color-white:        #ffffff;
  --color-white-soft:   rgba(255, 255, 255, .9);
  --color-white-line:   rgba(255, 255, 255, .6);
  /* Alasivujen mobiiliheroissa teksti on alhaalla, joten tummennus painottuu
     alareunaan. Yläreunan kevyt sävy pitää navin luettavana. */
  --overlay-hero-mobile: linear-gradient(180deg, rgba(33,21,25,.55) 0%, rgba(33,21,25,.12) 22%, rgba(33,21,25,.16) 44%, rgba(33,21,25,.7) 70%, rgba(33,21,25,.88) 100%);
  --overlay-card: linear-gradient(to top, rgba(33,21,25,.86) 0%, rgba(33,21,25,.24) 52%, rgba(33,21,25,0) 100%);
  --shadow-gallery-word: 0 2px 30px rgba(0, 0, 0, .25);

  --font-body: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-heading: 'Birthstone', Georgia, 'Times New Roman', serif;
  --font-display: 'Marcellus', Georgia, 'Times New Roman', serif;
  --font-italic: 'EB Garamond', Georgia, 'Times New Roman', serif;

  /* Mitoitus: yhtenäinen sisältöleveys. Instagram-upotukset (3 x 340px +
     2 x 24px väli) keskitetään flexillä, joten ne asettuvat tähän leveyteen
     riippumatta siitä, että sisältö saa levittyä isoilla näytöillä väljemmin. */
  --max-width: 1240px;
  --pad-section-x: 72px;
  --pad-nav-x: 56px;
  --spacing-xs: 8px;
  --spacing-sm: 16px;
  --spacing-md: 26px;
  --spacing-lg: 44px;
  --spacing-xl: 90px;
  --spacing-2xl: 104px;
  /* Etusivun osioiden väljempi rytmi: alareunassa enemmän tilaa kuin ylhäällä,
     jotta osio ehtii "laskeutua" ennen seuraavaa pintaa */
  --spacing-home-top: 136px;
  --spacing-home-bottom: 160px;
}

/* ---------- Reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; }

/* Leipäteksti painolla 400: normaalipaino pitää tekstin luettavana myös iäkkäämmille asiakkaille ja Windows-näytöillä */
body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

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

::selection { background: var(--color-rose-line); color: var(--color-ink); }

/* Puhelinnumero pysyy aina yhdellä rivillä */
a[href^="tel:"] { white-space: nowrap; }
/* Pitää yhdyssanan (esim. "Jane Iredale -mineraalimeikeillä") samalla rivillä */
.ei-katkoa { white-space: nowrap; }

a {
  color: inherit;
  text-decoration: none;
  transition: opacity .15s ease;
}
a:hover { opacity: .75; }
a:focus-visible,
button:focus-visible {
  outline: 1px solid currentColor;
  outline-offset: 4px;
  opacity: 1;
}

h1, h2, h3 { margin: 0; font-weight: 200; }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* Kiinteä navbar peittäisi ankkurikohteet ilman tätä */
section[id], #palvelut, #galleria, #tuotesarjat, #ukk, #yhteystiedot { scroll-margin-top: 84px; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--color-ink);
  color: var(--color-on-ink);
  padding: 12px 24px;
  font-size: 12px;
  letter-spacing: .2em;
  text-transform: uppercase;
}
.skip-link:focus { left: 0; }

/* ---------- Yleiset tekstityylit ---------- */
.eyebrow {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--color-eyebrow);
}
.eyebrow--on-ink { color: var(--color-on-ink-eyebrow); }

/* ---------- Napit ---------- */
.btn {
  display: inline-block;
  padding: 15px 44px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .26em;
  text-transform: uppercase;
  border: 1px solid transparent;
}
.btn--fill {
  background: var(--color-on-ink-head);
  color: var(--color-ink);
}
.btn--line {
  border-color: var(--color-on-ink-border);
  color: var(--color-on-ink);
}
.btn--nav { padding: 11px 28px; }
.btn--contact { padding: 13px 36px; border-color: var(--color-on-ink-border-soft); }

/* ---------- Header / nav (kiinteä, läpinäkyvä ylhäällä, kutistuu scrollatessa) ---------- */
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 30px var(--pad-nav-x);
  color: var(--color-on-ink);
  background-color: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color .55s cubic-bezier(0.4, 0, 0.2, 1), color .55s cubic-bezier(0.4, 0, 0.2, 1), padding .55s cubic-bezier(0.4, 0, 0.2, 1), border-color .55s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Ilman JS:ää .scrolled ei koskaan aktivoidu: navbar jää heron päälle */
html:not(.js) .header { position: absolute; }
.header.scrolled {
  padding: 12px var(--pad-nav-x);
  background-color: var(--color-bg-card);
  color: var(--color-text);
  border-bottom-color: var(--color-hairline);
}
.header.scrolled .btn--line {
  border-color: var(--color-text);
  color: var(--color-text);
}
.header.scrolled .menu-toggle {
  border-color: var(--color-text);
  color: var(--color-text);
}
/* Eksplisiittinen väri molemmissa tiloissa, jotta linkit eivät peri
   headerin hidasta .55s color-siirtymää vaan käyttävät omaa nopeaa transitiota */
.nav-links a { color: var(--color-on-ink); }
.header.scrolled .nav-links a { color: var(--color-text); }
.nav-links {
  display: flex;
  gap: 22px;
  font-size: 9.5px;
  letter-spacing: .24em;
  text-transform: uppercase;
}
/* Viisi linkkiä mahtuu logon vasemmalle vain jos ne eivät rivity */
.nav-links a { white-space: nowrap; }

/* ---------- Palvelut-pudotusvalikko (desktop) ---------- */
.nav-item {
  position: relative;
  display: flex;
  align-items: center;
}
.nav-item > a {
  display: inline-flex;
  align-items: center;
}
/* Chevron kertoo, että linkin alle avautuu lista. Pieni vasen marginaali,
   koska versaalin letter-spacing jättää jo välin viimeisen kirjaimen jälkeen. */
.nav-item__caret {
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  margin-left: 5px;
  margin-bottom: 1px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .2s ease;
}
.nav-item:hover .nav-item__caret,
.nav-item:focus-within .nav-item__caret { transform: rotate(180deg); }

.nav-drop {
  position: absolute;
  top: 100%;
  left: -20px;
  z-index: 10;
  /* Läpinäkyvä silta linkin ja laatikon väliin, jotta hover ei katkea */
  padding-top: 24px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
}
.nav-item:hover .nav-drop,
.nav-item:focus-within .nav-drop {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.nav-drop__inner {
  min-width: 252px;
  padding: 6px 0;
  background: var(--color-bg-card);
  border: 1px solid var(--color-hairline);
}
/* Oma väri ja spesifisyys: laatikko on aina vaalea, myös läpinäkyvän navbarin alla */
.nav-links .nav-drop__inner a {
  display: block;
  padding: 12px 24px;
  font-size: 10px;
  letter-spacing: .22em;
  line-height: 1.5;
  color: var(--color-text-body);
  transition: background-color .2s ease, color .2s ease;
}
.nav-links .nav-drop__inner a:hover {
  background: var(--color-rose-tint);
  color: var(--color-text);
  opacity: 1;
}
.nav-links .nav-drop__inner a[aria-current="page"] {
  color: var(--color-accent-deep);
  background: var(--color-rose-tint);
}
.wordmark {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 30px;
}
.wordmark__img {
  display: block;
  width: auto;
  height: 96px;
  transition: height .55s cubic-bezier(0.4, 0, 0.2, 1), opacity .55s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Tumma logo pinotaan vaalean päälle ja ristiinhäivytetään scrollatessa */
.wordmark__img--dark {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
}
/* Pyöreä badge: alle ~50 px koristekuvio puuroutuu */
.header.scrolled .wordmark__img { height: 52px; }
.header.scrolled .wordmark__img--light { opacity: 0; }
.header.scrolled .wordmark__img--dark { opacity: 1; }
.header__right { display: flex; justify-content: flex-end; }
/* Nav-linkit ja napit häivyttävät värinsä samaa tahtia headerin kanssa */
.nav-links a,
.header .btn--line,
.menu-toggle {
  transition: color .25s cubic-bezier(0.4, 0, 0.2, 1), border-color .25s cubic-bezier(0.4, 0, 0.2, 1), opacity .15s ease;
}

/* Burger: pelkät kolme viivaa, ei taustaa; muuttuu X:ksi avattaessa */
.menu-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 6px;
  width: 40px;
  height: 40px;
  padding: 0;
  background: none;
  border: 0;
  color: var(--color-on-ink);
  cursor: pointer;
  justify-self: end;
}
.menu-toggle__bar {
  display: block;
  width: 26px;
  height: 1.5px;
  background: currentColor;
  transition: transform .35s cubic-bezier(0.4, 0, 0.2, 1), opacity .2s ease, background-color .55s cubic-bezier(0.4, 0, 0.2, 1);
}
.menu-toggle[aria-expanded="true"] .menu-toggle__bar:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle__bar:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] .menu-toggle__bar:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

/* Mobiilivalikko: kiinteä paneeli, liukuu vasemmalta */
.mobile-nav {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 95;
  width: min(82vw, 320px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 26px;
  padding: 40px;
  background: var(--color-ink);
  color: var(--color-on-ink);
  font-size: 12px;
  letter-spacing: .28em;
  text-transform: uppercase;
  transform: translateX(-100%);
  visibility: hidden;
  transition: transform .42s cubic-bezier(0.4, 0, 0.2, 1), visibility .42s;
}
.mobile-nav.open {
  transform: translateX(0);
  visibility: visible;
}
/* Pitkä valikko (palvelulista auki) ei saa leikkautua matalalla näytöllä */
.mobile-nav { overflow-y: auto; }

/* ---------- Palvelut-lista mobiilivalikossa ---------- */
.mnav-group { display: flex; flex-direction: column; }
.mnav-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 300;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--color-on-ink);
  text-align: left;
}
.mnav-toggle__icon {
  position: relative;
  flex: 0 0 11px;
  width: 11px;
  height: 11px;
  transition: transform .2s ease;
}
/* Plus-merkki kahdesta viivasta, kääntyy X:ksi avattaessa */
.mnav-toggle__icon::before,
.mnav-toggle__icon::after {
  content: "";
  position: absolute;
  background: currentColor;
}
.mnav-toggle__icon::before { left: 0; right: 0; top: 5px; height: 1px; }
.mnav-toggle__icon::after { top: 0; bottom: 0; left: 5px; width: 1px; }
.mnav-toggle[aria-expanded="true"] .mnav-toggle__icon { transform: rotate(45deg); }

/* Ilman JS:ää lista on auki; JS sulkee sen oletuksena */
.mnav-sub {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows .25s ease;
}
.js .mnav-sub { grid-template-rows: 0fr; }
.js .mnav-group.open .mnav-sub { grid-template-rows: 1fr; }
.mnav-sub__inner {
  overflow: hidden;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.mobile-nav .mnav-sub__inner a {
  padding: 10px 0 10px 16px;
  font-size: 11px;
  letter-spacing: .2em;
  color: var(--color-on-ink-body);
  border-left: 1px solid var(--color-on-ink-border-soft);
}
.mobile-nav .mnav-sub__inner a:first-child { margin-top: 18px; }
/* Nykyinen sivu: kirkas teksti ja roosa pätkä pystyviivassa */
.mobile-nav .mnav-sub__inner a[aria-current="page"] {
  color: var(--color-on-ink-head);
  border-left-color: var(--color-accent);
  border-left-width: 2px;
  padding-left: 15px;
}

.nav-backdrop {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(33, 21, 25, .45);
  opacity: 0;
  visibility: hidden;
  transition: opacity .42s ease, visibility .42s;
}
.nav-backdrop.open { opacity: 1; visibility: visible; }
body.nav-open { overflow: hidden; }

/* ---------- Hero ----------
   Kaksi kerrosta: ylhäällä kiinteä vaaleanpunainen pinta otsikoineen ja
   nappeineen, alhaalla kuvanauha. Teksti ei ole kuvan päällä. */
.hero {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 26px);
  /* svh: mitoitus pysyy oikeana mobiilissa myös selaimen palkkien ollessa esillä */
  min-height: calc(100svh - 26px);
  background: var(--color-rose-soft);
  color: var(--color-text);
}
/* Vaalealla pohjalla yläpalkki on tumma jo ennen scrollausta */
.hero .header { color: var(--color-text); }
.hero .nav-links > a,
.hero .nav-item > a { color: var(--color-text); }
.hero .header .btn--line,
.hero .menu-toggle { border-color: var(--color-text); color: var(--color-text); }
.hero .wordmark__img--light { opacity: 0; }
.hero .wordmark__img--dark { opacity: 1; }
/* Etusivun yläasennossa logo on isompi; scrollatessa se kutistuu samaan kokoon kuin muilla sivuilla */
.hero .header:not(.scrolled) .wordmark__img { height: 128px; }
/* Mobiilivalikko auki ylhäällä: logo ja X vaaleina tumman paneelin päällä */
body.nav-open .hero .header:not(.scrolled) .wordmark__img--light { opacity: 1; }
body.nav-open .hero .header:not(.scrolled) .wordmark__img--dark { opacity: 0; }
body.nav-open .hero .header:not(.scrolled) .menu-toggle { color: var(--color-on-ink); }

.hero__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  /* Ylätila mitoitettu yläasennon isomman logon mukaan (header n. 188 px) */
  padding: 200px 80px 48px;
}
.hero__content h1 {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 60px;
  line-height: 1.2;
  max-width: 1120px;
  text-wrap: balance;
  color: var(--color-ink);
}
.hero__lead {
  margin: 16px 0 0;
  font-size: 16px;
  letter-spacing: .03em;
  line-height: 1.8;
  color: var(--color-text-body);
  max-width: 560px;
}
.hero__cta {
  display: flex;
  gap: 18px;
  margin-top: 28px;
}
.hero__cta .btn--fill { background: var(--color-ink); color: var(--color-on-ink); }
.hero__cta .btn--line { border-color: var(--color-ink); color: var(--color-ink); }
/* Pieni yläotsake: toimiala ja paikkakunta (tukee myös paikallishakua) */
.hero__eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 18px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--color-eyebrow);
}
.hero__eyebrow::before,
.hero__eyebrow::after {
  content: "";
  width: 34px;
  height: 1px;
  background: var(--color-accent);
}
/* Kuvanauha täyttää heron alaosan. Parallax (script.js) siirtää kuvaa
   alaspäin n. 20 % scrollin nopeudesta, joten kuva jatkuu 140 px nauhan
   yläreunan yli: rako ei ehdi näkyviin niin kauan kuin nauha on ruudulla.
   Kuva (kukkaoksa peilin päällä) on rajattu niin, että piilossa oleva
   yläosa on pelkkää seinää ja oksa näkyy heti nauhan yläreunassa. */
.hero__kuva {
  position: relative;
  flex: 1 0 auto;
  min-height: 44vh;
  min-height: 44svh;
  overflow: hidden;
}
.hero__img {
  position: absolute;
  top: -140px;
  left: 0;
  width: 100%;
  height: calc(100% + 140px);
  object-fit: cover;
  object-position: 50% 0;
  will-change: transform;
}
/* Leveällä näytöllä kuva suurenee ja oksan yläpuolelle jäisi turhan paljon seinää */
@media (min-width: 1800px) {
  .hero__img { object-position: 50% 10%; }
}

/* ---------- Palvelut (immersiiviset kuvakortit, vaalea tausta) ----------
   Sama vaalea pinta kuin scrollatulla navbarilla (--color-bg-card) */
.services {
  background: var(--color-bg-card);
  padding: var(--spacing-home-top) var(--pad-section-x) var(--spacing-home-bottom);
}
.services__head {
  text-align: center;
  max-width: 620px;
  margin: 0 auto 72px;
}
.services__head h2 {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 58px;
  margin-top: 14px;
  line-height: 1.2;
}
.services__lead {
  font-size: 15px;
  line-height: 1.9;
  color: var(--color-text-body);
  margin: 22px 0 0;
}
.services__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  max-width: var(--max-width);
  margin: 0 auto;
}
.svc-card {
  position: relative;
  display: block;
  height: 440px;
  overflow: hidden;
}
.svc-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% var(--rajaus-y, 50%);
}
@media (prefers-reduced-motion: no-preference) {
  .svc-card img { transition: transform .6s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
}
.svc-card:hover img { transform: scale(1.05); }
.svc-card__ov {
  position: absolute;
  inset: 0;
  background: var(--overlay-card);
}
.svc-card__cap {
  position: absolute;
  left: 28px;
  right: 28px;
  bottom: 26px;
  color: var(--color-white);
}
.svc-card__num {
  font-size: 10px;
  letter-spacing: .3em;
  color: var(--color-white-line);
}
.svc-card__cap h3 {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 25px;
  margin: 10px 0 0;
}
.svc-card__go {
  display: inline-block;
  margin-top: 14px;
  font-size: 10px;
  letter-spacing: .28em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--color-white-line);
  padding-bottom: 4px;
}

/* ---------- Meistä (inverse split) ----------
   Kuva täyttää osion vasemman puoliskon reunasta reunaan (vasen reuna, ylä-
   ja alareuna). Teksti pysyy keskitetyn kolumnin oikealla puoliskolla. */
.about {
  position: relative;
  background: var(--color-ink);
}
.about__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  max-width: var(--max-width);
  min-height: 560px;
  margin: 0 auto;
}
.about__img {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 50%;
  height: 100%;
  object-fit: cover;
}
.about__body {
  grid-column: 2;
  color: var(--color-on-ink-head);
  padding: 120px 80px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}
.about__body h2 {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 48px;
  line-height: 1.24;
  margin-top: 22px;
}
.about__body p {
  font-size: 14.5px;
  line-height: 1.9;
  color: var(--color-on-ink-body);
  margin: 26px 0 0;
  max-width: 400px;
}
.link-underline {
  align-self: flex-start;
  font-size: 10px;
  letter-spacing: .3em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--color-on-ink-underline);
  padding-bottom: 5px;
  margin-top: 36px;
}

/* ---------- Tuotesarjat (logonauha etusivulla) ----------
   Kuusi sarjaa hiusviivoin erotettuina laattoina. Logot ovat yksivärisiä
   (--color-ink), jotta erilaiset merkit näyttävät yhtenäiseltä kokonaisuudelta.
   Logojen näkyvä korkeus tasapainotetaan --logo-h-muuttujalla, koska
   leveä sanamerkki näyttää samassa korkeudessa isommalta kuin kapea. */
.brands {
  background: var(--color-bg-card);
  padding: var(--spacing-home-top) var(--pad-section-x) var(--spacing-home-bottom);
}
.brands__head {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 68px;
}
.brands__head h2 {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 48px;
  margin-top: 14px;
  line-height: 1.2;
}
.brands__lead {
  font-size: 15px;
  line-height: 1.9;
  color: var(--color-text-body);
  margin: 22px 0 0;
}
.brands__grid {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: var(--max-width);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--color-hairline);
  border: 1px solid var(--color-hairline);
}
.brands__grid li { background: var(--color-bg-card); }
.brands__grid a {
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  transition: background-color .25s ease, opacity .15s ease;
}
.brands__grid a:hover { background: var(--color-rose-tint); opacity: 1; }
.brands__grid img {
  width: auto;
  height: var(--logo-h, 40px);
  max-width: 82%;
  object-fit: contain;
  opacity: .88;
}

/* ---------- Galleria (kuvakaruselli) ---------- */
.gallery { position: relative; }
.gallery__viewport {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.gallery__viewport::-webkit-scrollbar { display: none; }
.gallery__viewport img {
  flex: 0 0 50%;
  width: 50%;
  height: 470px;
  object-fit: cover;
  scroll-snap-align: start;
}
/* Ei CSS-scroll-behavioria: JS hoitaa pehmeän askelluksen ja tekee loopin
   nollaukset välittömästi (scrollLeft-asetus kunnioittaisi smoothia). */

/* Kevyet gradientit reunoille, jotta nuolinapit erottuvat kuvista */
.gallery__fade {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 140px;
  pointer-events: none;
}
.gallery__fade--left {
  left: 0;
  background: linear-gradient(90deg, rgba(33, 21, 25, .5), rgba(33, 21, 25, 0));
}
.gallery__fade--right {
  right: 0;
  background: linear-gradient(270deg, rgba(33, 21, 25, .5), rgba(33, 21, 25, 0));
}

.gallery__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 1px solid var(--color-white-soft);
  color: var(--color-white);
  cursor: pointer;
  transition: opacity .15s ease;
}
.gallery__nav:hover { opacity: .75; }
.gallery__nav--prev { left: 24px; }
.gallery__nav--next { right: 24px; }
.gallery__nav svg { width: 20px; height: 20px; }
/* Tumma läpikuultava pohja pitää tekstin luettavana myös vaalean kuvan päällä */
.gallery__ig {
  position: absolute;
  right: var(--pad-nav-x);
  bottom: 26px;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--color-white);
  background: rgba(33, 21, 25, .62);
  padding: 9px 12px 8px 15px;
}

/* ---------- UKK ---------- */
.faq {
  background: var(--color-bg);
  padding: var(--spacing-xl) var(--pad-section-x);
}
.faq__head {
  text-align: center;
  margin-bottom: 46px;
}
/* Etusivun UKK väljemmin kuin palvelusivuilla */
.faq.faq--etusivu { padding: var(--spacing-home-top) var(--pad-section-x) var(--spacing-home-bottom); }
.faq--etusivu .faq__head { margin-bottom: 60px; }
.faq__head h2 {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 48px;
  margin-top: 14px;
  line-height: 1.2;
}
.faq__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  max-width: var(--max-width);
  margin: 0 auto;
}
.faq__item {
  background: var(--color-bg-card);
  text-align: center;
  align-self: start;
}
.faq__q {
  position: relative;
  display: block;
  width: 100%;
  background: none;
  border: 0;
  cursor: pointer;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: .2em;
  line-height: 1.7;
  text-transform: uppercase;
  color: var(--color-text);
  text-align: center;
  padding: 26px 56px;
  transition: opacity .15s ease;
}
.faq__q:hover { opacity: .75; }
.faq__icon {
  position: absolute;
  right: 22px;
  top: 50%;
  width: 11px;
  height: 11px;
  margin-top: -5.5px;
  transition: transform .2s ease;
}
/* Plus-merkki kahdesta viivasta, kääntyy avattaessa */
.faq__icon::before,
.faq__icon::after {
  content: "";
  position: absolute;
  background: var(--color-eyebrow);
}
.faq__icon::before { left: 0; right: 0; top: 5px; height: 1px; }
.faq__icon::after { top: 0; bottom: 0; left: 5px; width: 1px; }
.faq__item.open .faq__icon { transform: rotate(45deg); }

/* Vastaus: auki ilman JS:ää, JS sulkee oletuksena ja avaa klikillä */
.faq__a {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows .2s ease;
}
.faq__a-inner { overflow: hidden; min-height: 0; }
.faq__a p {
  font-size: 13.5px;
  line-height: 1.8;
  color: var(--color-text-soft);
  margin: 0;
  padding: 0 34px 28px;
}
.js .faq__a { grid-template-rows: 0fr; }
.js .faq__item.open .faq__a { grid-template-rows: 1fr; }
/* Suljettu vastaus piiloon myös näppäimistöltä ja ruudunlukijalta, jotta sen
   linkit eivät saa fokusta näkymättöminä. Sulkiessa piilotus odottaa animaation loppuun. */
.js .faq__a-inner { visibility: hidden; transition: visibility 0s .2s; }
.js .faq__item.open .faq__a-inner { visibility: visible; transition-delay: 0s; }

/* Viivalistavariantti alasivuille: ei laatikoita, kysymykset
   hiusviivoin eroteltuina ja otsake vasemmalle linjattuna */
.faq--lines { background: var(--color-bg); }
/* Jos edellinen osio on samalla pohjavärillä, hiusviiva erottaa osiot
   (sama periaate kuin .cols-osioissa) */
.faq--lines { --faq-pad-x: var(--pad-section-x); }
:is(.cols, .intro-ed, .steps:not(.steps--alt), .feature--alt) + .faq--lines { position: relative; }
:is(.cols, .intro-ed, .steps:not(.steps--alt), .feature--alt) + .faq--lines::before {
  content: "";
  position: absolute;
  top: 0;
  left: var(--faq-pad-x);
  right: var(--faq-pad-x);
  max-width: var(--max-width);
  margin-inline: auto;
  height: 1px;
  background: var(--color-divider);
}
.faq--lines .faq__head {
  text-align: left;
  max-width: var(--max-width);
  margin: 0 auto 30px;
}
.faq--lines .faq__head .eyebrow { color: var(--color-accent-deep); }
.faq--lines .faq__head h2 {
  color: var(--color-ink);
  font-size: 48px;
  margin-top: 16px;
}
.faq--lines .faq__grid {
  display: block;
  max-width: var(--max-width);
  margin: 0 auto;
}
.faq--lines .faq__item {
  background: none;
  text-align: left;
  border-bottom: 1px solid var(--color-hairline);
}
.faq--lines .faq__item:first-child { border-top: 1px solid var(--color-hairline); }
.faq--lines .faq__q {
  text-align: left;
  padding: 23px 56px 23px 0;
  font-size: 13px;
  letter-spacing: .16em;
  color: var(--color-ink);
}
.faq--lines .faq__icon { right: 6px; }
.faq--lines .faq__a p {
  text-align: left;
  padding: 0 120px 26px 0;
  font-size: 14px;
  max-width: 760px;
}

/* ---------- Yhteystiedot + footer (inverse) ---------- */
.contact {
  background: var(--color-ink);
  color: var(--color-on-ink-head);
}
.contact__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.contact__info {
  padding: 80px var(--pad-section-x);
  /* Sisältö kohdistuu samaan sisältösarakkeeseen kuin muut osiot; kartta jää reunaan */
  padding-left: max(var(--pad-section-x), calc((100vw - var(--max-width)) / 2));
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 26px;
}
/* Etusivun yhteystiedot väljemmin kuin alasivuilla */
.contact--etusivu .contact__info {
  padding-top: 120px;
  padding-bottom: 120px;
}
.contact__info h2 {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 44px;
}
.contact__rows {
  display: flex;
  flex-direction: column;
  gap: 20px;
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--color-on-ink-body);
  font-style: normal;
}
/* Yhteystietojen otsakkeet ovat kappaleita, koska <address> ei saa
   sisältää otsikkoelementtejä */
.contact__rows .contact__label {
  font-weight: 500;
  font-size: 9.5px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--color-on-ink-eyebrow);
  margin: 0 0 6px;
}
.contact .btn--contact { margin-top: 8px; }

.contact__map { min-height: 440px; }
.contact__map iframe {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 440px;
  border: 0;
  /* Mustavalkoinen kartta, sopii sivuston lämpimään teemaan */
  filter: grayscale(1) contrast(1.05);
}

/* ---------- Footer (vaalea) ---------- */
.site-footer {
  background: var(--color-bg-card);
  color: var(--color-text-body);
  border-top: 1px solid var(--color-hairline);
  padding: var(--spacing-xl) var(--pad-nav-x) 0;
}
.site-footer__grid {
  display: grid;
  grid-template-columns: 1.7fr 1fr 1fr 1fr;
  gap: 48px;
  max-width: var(--max-width);
  margin: 0 auto;
  padding-bottom: var(--spacing-lg);
}
/* Akvarellilogo: mitoitus leveyden mukaan, jotta tekstirivi pysyy luettavana */
.site-footer__logo {
  display: block;
  width: 240px;
  height: auto;
}
.site-footer__brand p {
  font-size: 13px;
  line-height: 1.8;
  color: var(--color-text-soft);
  margin: 20px 0 24px;
  max-width: 340px;
}
.site-footer__socials { display: flex; gap: 14px; }
.site-footer__socials a {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-hairline);
  color: var(--color-text);
  transition: background-color .25s ease, color .25s ease, opacity .15s ease;
}
.site-footer__socials a:hover { background: var(--color-ink); color: var(--color-on-ink); opacity: 1; }
.site-footer__socials svg { width: 18px; height: 18px; }
.site-footer__col h3 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--color-text);
  margin: 6px 0 22px;
}
.site-footer__col ul { list-style: none; margin: 0; padding: 0; }
.site-footer__col li {
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-text-soft);
  margin-bottom: 15px;
}
.site-footer__col a { color: var(--color-text-body); }
.site-footer__bottom {
  max-width: var(--max-width);
  margin: 0 auto;
  border-top: 1px solid var(--color-hairline);
  padding: 24px 0;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 11px;
  letter-spacing: .12em;
  color: var(--color-text-soft);
}
.site-footer__bottom p { margin: 0; }
.site-footer__bottom a { color: inherit; text-decoration: none; }
.site-footer__bottom a:hover { color: var(--color-accent-deep); }

/* ============================================================
   Alasivukomponentit (palvelusivut, henkilöstö, lahjakortti,
   tuotesarjat). Sama muotokieli kuin etusivulla: Marcellus-versaalit,
   puuteriset pinnat + tummat inverse-osiot, terävät kulmat.
   ============================================================ */

/* ---------- Matala alasivuhero ---------- */
.subhero {
  position: relative;
  height: 540px;
  overflow: hidden;
  background: var(--color-ink);
}
.subhero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--rajaus, 50%) var(--rajaus-y, 50%);
}
.subhero__overlay {
  position: absolute;
  inset: 0;
  /* Tasaisempi ja tummempi kuin etusivun herossa: matalassa herossa
     teksti osuu kuvan keskelle, joka on usein kuvan vaalein kohta */
  background: linear-gradient(180deg, rgba(33, 21, 25, .58) 0%, rgba(33, 21, 25, .44) 55%, rgba(33, 21, 25, .3) 100%);
  pointer-events: none;
}
/* Palvelusivujen hero hitusen tummempi: otsikko ja leipäteksti erottuvat
   vaaleista hoitolakuvista paremmin */
.subhero--dark .subhero__overlay {
  background: linear-gradient(180deg, rgba(33, 21, 25, .7) 0%, rgba(33, 21, 25, .56) 55%, rgba(33, 21, 25, .42) 100%);
}
.subhero__content {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--color-on-ink);
  /* Kiinteä navbar peittäisi otsikon ilman ylätilaa, alatila pitää CTA:n
     irti heron reunasta */
  padding: 96px var(--pad-section-x) 48px;
}
.subhero h1 {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 65px;
  line-height: 1.2;
  max-width: 940px;
  /* Pehmeä varjo pitää valkoisen tekstin luettavana myös kuvan vaaleissa kohdissa */
  text-shadow: 0 2px 30px rgba(33, 21, 25, .55), 0 1px 3px rgba(33, 21, 25, .25);
}
.subhero__lead {
  margin: 18px 0 0;
  font-size: 15.5px;
  line-height: 1.8;
  letter-spacing: .04em;
  color: var(--color-white);
  max-width: 560px;
  text-shadow: 0 1px 18px rgba(33, 21, 25, .6), 0 1px 3px rgba(33, 21, 25, .3);
}
/* Versaaliingressi ("tikkukirjaimet", kuten yläotsakkeet), esim. ripsisivulla.
   Koko sivulauseen mittaisena luettavampi kuin 11 px:n eyebrow, siksi isompi
   ja hieman tiiviimmin harvennettu. */
.subhero__lead--caps {
  font-size: 13px;
  font-weight: 500;
  line-height: 2;
  letter-spacing: .22em;
  text-transform: uppercase;
  max-width: 640px;
}
.subhero__cta { margin-top: 30px; }
.subhero--ala .subhero__content { justify-content: flex-end; padding-bottom: 56px; }
.subhero--ala .subhero__overlay {
  background: linear-gradient(180deg, rgba(33, 21, 25, .5) 0%, rgba(33, 21, 25, .1) 30%, rgba(33, 21, 25, .3) 55%, rgba(33, 21, 25, .82) 100%);
}

/* Muotokuvahero (meikit): vähintään 768 px leveällä kuva on leveä kooste, jossa kuvan
   tausta jatkuu vasemmalle ja henkilö on oikeassa reunassa. Kuva ankkuroidaan oikeaan
   reunaan, ja teksti siirtyy vasemmalle, jotta kasvot jäävät näkyviin. Kapeammalla
   käytössä on pystyrajaus ja subhero--ala (teksti alhaalla, kasvot yläosassa). */
.subhero--muotokuva .subhero__img { object-position: 50% 0; }
@media (min-width: 768px) {
  .subhero--muotokuva .subhero__img { object-position: 100% 50%; }
  .subhero--muotokuva .subhero__overlay {
    background:
      linear-gradient(180deg, rgba(33, 21, 25, .42) 0%, rgba(33, 21, 25, 0) 26%),
      linear-gradient(90deg, rgba(33, 21, 25, .6) 0%, rgba(33, 21, 25, .48) 34%, rgba(33, 21, 25, .1) 60%, rgba(33, 21, 25, 0) 76%);
  }
  .subhero--muotokuva .subhero__content {
    justify-content: center;
    align-items: flex-start;
    text-align: left;
    max-width: calc(var(--max-width) + 2 * var(--pad-section-x));
    margin: 0 auto;
    padding-bottom: 48px;
  }
  .subhero--muotokuva .subhero__lead { max-width: 430px; }
}

/* ---------- Editoriaalinen ingressi (otsikko vasen, teksti oikea) ----------
   Epäsymmetrinen kaksipalstainen avaus: iso väiteotsikko ankkuroi sivun,
   leipäteksti ja poiminnat kulkevat omassa kapeammassa palstassaan. */
.intro-ed {
  background: var(--color-bg);
  padding: 96px var(--pad-section-x) 88px;
}
.intro-ed__grid {
  display: grid;
  grid-template-columns: 1.02fr .98fr;
  gap: 24px 84px;
  max-width: var(--max-width);
  margin: 0 auto;
}
.intro-ed__head { align-self: start; }
.intro-ed__head .eyebrow { color: var(--color-accent-deep); }
.intro-ed h2 {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 56px;
  line-height: 1.2;
  color: var(--color-ink);
  margin-top: 18px;
}
.intro-ed__body { padding-top: 8px; }
.intro-ed__body > p {
  font-size: 14.5px;
  line-height: 1.95;
  color: var(--color-text-body);
  margin: 0 0 18px;
}
.intro-ed__body > p:first-child {
  font-size: 16.5px;
  line-height: 1.85;
  color: var(--color-text);
}
.intro-ed__body > p:last-child { margin-bottom: 0; }

/* Poimintalista roosalla viivamerkillä (käytössä myös proosasivuilla) */
.hi-list {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
}
.hi-list li {
  position: relative;
  padding-left: 22px;
  font-size: 13.5px;
  line-height: 1.75;
  color: var(--color-text-soft);
  margin-bottom: 10px;
}
.hi-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 11px;
  width: 10px;
  height: 1px;
  background: var(--color-accent);
}

/* ---------- Hoitomenu ----------
   Hoidot esitetään menukirjan tapaan: vasemmalla ryhmän jättinumero,
   display-otsikko ja saate, oikealla hoitorivit hiusviivoin eroteltuna.
   Kuvattomuus on tarkoituksellista: hierarkia syntyy typografiasta. */
.menu {
  background: var(--color-white);
  padding: 20px var(--pad-section-x) 76px;
}
.menu__group {
  display: grid;
  grid-template-columns: 330px minmax(0, 1fr);
  gap: 48px 84px;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 72px 0 64px;
  scroll-margin-top: 84px;
}
.menu__group + .menu__group { border-top: 1px solid var(--color-divider); }
.menu__side { align-self: start; position: sticky; top: 96px; }
/* Suuri haalea järjestysnumero antaa osiolle painoarvoa ilman kuvaa */
.menu__num {
  display: block;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 80px;
  line-height: .82;
  letter-spacing: .02em;
  color: var(--color-accent);
}
.menu__side h2 {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 41px;
  line-height: 1.2;
  color: var(--color-ink);
  margin-top: 16px;
  padding-top: 18px;
  border-top: 2px solid var(--color-ink);
}
.menu__side > p {
  font-size: 13.5px;
  line-height: 1.85;
  color: var(--color-text-body);
  margin: 16px 0 0;
  max-width: 300px;
}
.menu__side .btn--ink { margin-top: 24px; padding: 13px 34px; }

/* Hoitorivi: nimi ja hinta samalla baselinellä, pisteviiva välissä */
.mrow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  column-gap: 18px;
  padding: 21px 0 19px;
  border-bottom: 1px solid var(--color-hairline);
}
.menu__rows .mrow:first-child { padding-top: 4px; }
.mrow__name {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 19.5px;
  line-height: 1.3;
  color: var(--color-ink);
  margin: 0;
}
.mrow__price {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 20px;
  letter-spacing: .03em;
  color: var(--color-ink);
  white-space: nowrap;
  margin: 0;
}
.mrow__desc {
  grid-column: 1 / -1;
  font-size: 13.5px;
  line-height: 1.75;
  color: var(--color-text-body);
  margin: 7px 0 0;
  max-width: 580px;
}
.mrow__dur {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--color-accent-deep);
  margin-right: 10px;
}
.menu__note {
  max-width: var(--max-width);
  margin: 0 auto;
  padding-top: 28px;
  font-size: 12.5px;
  line-height: 1.8;
  color: var(--color-text-soft);
}
.menu__note a,
.menu__side > p a,
.prices__foot a,
.prices__group-note a {
  color: var(--color-accent-deep);
  border-bottom: 1px solid var(--color-rose-line);
}

/* Tumma nappi vaalealla pohjalla */
.btn--ink {
  margin-top: 26px;
  background: var(--color-ink);
  border-color: var(--color-ink);
  color: var(--color-on-ink);
  transition: background-color .2s ease, border-color .2s ease, opacity .15s ease;
}
.btn--ink:hover {
  background: var(--color-accent-deep);
  border-color: var(--color-accent-deep);
  color: var(--color-white);
  opacity: 1;
}

/* ---------- Täysleveä tunnelmakaista ----------
   Sivun ainoa sisältökuva: leveä, rauhallinen, pieni kuvateksti kulmassa. */
.photo-band {
  position: relative;
  height: 470px;
  overflow: hidden;
  background: var(--color-ink);
}
.photo-band img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--rajaus, 50%) var(--rajaus-y, 50%);
}
.photo-band::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to top, rgba(33, 21, 25, .55) 0%, rgba(33, 21, 25, .12) 32%, rgba(33, 21, 25, 0) 55%);
  pointer-events: none;
}
.photo-band__cap {
  position: absolute;
  z-index: 2;
  left: var(--pad-section-x);
  right: var(--pad-section-x);
  bottom: 26px;
  color: var(--color-white);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .3em;
  text-transform: uppercase;
  text-shadow: 0 1px 12px rgba(33, 21, 25, .5);
}
.photo-band__cap::before {
  content: "";
  display: inline-block;
  width: 34px;
  height: 1px;
  background: var(--color-white-line);
  margin-right: 14px;
  vertical-align: 3px;
}

/* ---------- Vaiheet ja arvot (viivalla alkavat palstat) ----------
   Laatikottomat kolumnit, joissa 2px musta yläviiva ja iso serif-numero
   tuovat kontrastin. */
.steps {
  background: var(--color-bg);
  padding: var(--spacing-xl) var(--pad-section-x);
}
.steps--alt { background: var(--color-bg-card); }
.steps__head {
  max-width: var(--max-width);
  margin: 0 auto 46px;
}
.steps__head .eyebrow { color: var(--color-accent-deep); }
.steps__head h2 {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 48px;
  line-height: 1.2;
  color: var(--color-ink);
  margin-top: 16px;
  max-width: 720px;
}
.steps__head p {
  font-size: 14.5px;
  line-height: 1.9;
  color: var(--color-text-body);
  margin: 18px 0 0;
  max-width: 620px;
}
.steps__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
  max-width: var(--max-width);
  margin: 0 auto;
}
.steps__grid--3 { grid-template-columns: repeat(3, 1fr); }
.step {
  border-top: 2px solid var(--color-ink);
  padding-top: 20px;
}
.step__num {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 40px;
  line-height: 1;
  color: var(--color-accent-deep);
}
.step h3 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 11.5px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--color-ink);
  margin: 14px 0 0;
}
.step p {
  font-size: 13.5px;
  line-height: 1.8;
  color: var(--color-text-soft);
  margin: 12px 0 0;
}

/* ---------- CTA-banneri taustakuvalla ---------- */
.cta-band {
  position: relative;
  background: var(--color-ink);
  overflow: hidden;
  padding: 96px var(--pad-section-x);
  text-align: center;
  color: var(--color-on-ink-head);
}
.cta-band__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .3;
}
/* Tummennus kuvan päälle: valkoinen teksti tarvitsee tasaisen pohjan */
.cta-band::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(33, 21, 25, .5) 0%, rgba(33, 21, 25, .74) 100%);
}
.cta-band__inner {
  position: relative;
  z-index: 2;
  max-width: 640px;
  margin: 0 auto;
}
.cta-band h2 {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 43px;
  line-height: 1.2;
  margin-top: 14px;
}
.cta-band p {
  font-size: 14.5px;
  line-height: 1.9;
  color: var(--color-on-ink-body);
  margin: 20px 0 32px;
}
.cta-band__row {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 16px;
}

/* ---------- Muut palvelut ---------- */
.related {
  background: var(--color-bg-card);
  padding: var(--spacing-xl) var(--pad-section-x);
}
.related__head {
  text-align: center;
  margin-bottom: 42px;
}
.related__head h2 {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 38px;
  margin-top: 14px;
  line-height: 1.2;
}
.related__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  max-width: var(--max-width);
  margin: 0 auto;
}
.related__card {
  position: relative;
  display: block;
  height: 280px;
  overflow: hidden;
}
.related__card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--rajaus, 50%) var(--rajaus-y, 50%);
}
@media (prefers-reduced-motion: no-preference) {
  .related__card img { transition: transform .6s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
}
.related__card:hover img { transform: scale(1.05); }
.related__card span {
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 22px;
  z-index: 2;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 19px;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--color-white);
}
.related__card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--overlay-card);
}

/* ---------- Sitaattinosto (aito asiakaspalaute palvelusivulla) ---------- */
.quote-band {
  background: var(--color-ink);
  padding: 92px var(--pad-section-x);
}
.quote-band blockquote {
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
}
/* Iso lainausmerkki toimii koristeena otsikon paikalla */
.quote-band blockquote::before {
  content: "\201D";
  display: block;
  font-family: var(--font-display);
  font-size: 78px;
  line-height: .6;
  color: var(--color-accent);
  margin-bottom: 22px;
}
.quote-band p {
  font-family: var(--font-italic);
  font-style: italic;
  font-weight: 400;
  font-size: 30px;
  line-height: 1.42;
  color: var(--color-on-ink-head);
  margin: 0;
}
.quote-band cite {
  display: block;
  font-style: normal;
  font-size: 10px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--color-on-ink-eyebrow);
  margin-top: 26px;
}

/* ---------- Sisältösivu (lahjakortti, henkilöstö) ---------- */
.prose-split {
  background: var(--color-bg);
  padding: var(--spacing-xl) var(--pad-section-x);
}
.prose-split__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 64px;
  align-items: start;
  max-width: var(--max-width);
  margin: 0 auto;
}
.prose-split__media { position: sticky; top: 96px; }
.prose-split__media img {
  width: 100%;
  height: auto;
  object-fit: cover;
}
.prose-split__body h2 {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 35px;
  line-height: 1.22;
  margin: 40px 0 0;
}
.prose-split__body h2:first-of-type { margin-top: 14px; }
.prose-split__body p {
  font-size: 14.5px;
  line-height: 1.9;
  color: var(--color-text-body);
  margin: 18px 0 0;
}
.prose-split__body .hi-list { margin-top: 20px; }

/* Käsiala-aksentti (sitaatit, allekirjoitukset) */
.script-note {
  font-family: var(--font-italic);
  font-style: italic;
  font-weight: 400;
  font-size: 22px;
  line-height: 1.5;
  color: var(--color-text);
  margin: 30px 0 0;
}

/* ---------- Hoitoesittely (kuva + teksti vuorotellen) ----------
   Palvelusivujen pääsisältö: yksi hoito kerrallaan kerrottuna, ei hinnastona.
   Kuva ja teksti vaihtavat puolta joka toisessa lohkossa (.feature--flip). */
.feature {
  background: var(--color-white);
  padding: 92px var(--pad-section-x);
}
.feature--alt { background: var(--color-bg); }
.feature__inner {
  max-width: var(--max-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: 72px;
  align-items: center;
}
/* Käännetyssä lohkossa kuva on oikealla, joten palstojen leveydet vaihtavat
   myös paikkaa: tekstipalsta pysyy aina leveämpänä */
.feature--flip .feature__inner { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); }
.feature--flip .feature__media { order: 2; }
.feature__media img {
  width: 100%;
  /* Nollaa HTML:n height-attribuutin, jotta aspect-ratio määrää rajauksen */
  height: auto;
  aspect-ratio: var(--kuvasuhde, 4 / 5);
  object-fit: cover;
  object-position: var(--rajaus, 50%) var(--rajaus-y, 50%);
}
/* Tuotesarjasivulla kuvan paikalla on merkin logo vaalealla laatalla */
.feature__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 5 / 4;
  background: var(--color-bg-card);
  border: 1px solid var(--color-hairline);
}
.feature--alt .feature__logo { background: var(--color-white); }
/* Korkeampi spesifisyys kuin .feature__media img -säännöillä (myös mobiilissa),
   jotta logo ei saa valokuvien kuvasuhdetta ja rajausta */
.feature__media .feature__logo img {
  width: auto;
  height: var(--logo-h, 56px);
  max-width: 72%;
  aspect-ratio: auto;
  object-fit: contain;
  margin: 0;
}
.feature__body .eyebrow { color: var(--color-accent-deep); }
.feature__body h2 {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 43px;
  line-height: 1.2;
  color: var(--color-ink);
  margin-top: 14px;
}
.feature__body > p {
  font-size: 15px;
  line-height: 1.9;
  color: var(--color-text-body);
  margin: 20px 0 0;
}
/* Ensimmäinen kappale hieman isompana ingressinä */
.feature__body > p:first-of-type {
  font-size: 16.5px;
  color: var(--color-text);
}
.feature__body .hi-list { margin-top: 22px; }
/* Väliotsikko lohkon sisällä, esim. "Näin hoito etenee" */
.feature__sub {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--color-ink);
  margin: 30px 0 0;
  padding-top: 22px;
  border-top: 1px solid var(--color-hairline);
}
/* Faktarivi: kesto, hinta alkaen, kesto tuloksissa */
.feature__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0 44px;
  margin: 26px 0 0;
  padding-top: 22px;
  border-top: 1px solid var(--color-hairline);
}
.feature__facts div { min-width: 0; }
.feature__facts dt {
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--color-eyebrow);
}
.feature__facts dd {
  margin: 6px 0 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 19px;
  letter-spacing: .03em;
  color: var(--color-ink);
}
.feature__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 26px;
  margin-top: 28px;
}
.feature__cta .btn--ink { margin-top: 0; }
/* .link-underline on suunniteltu tummalle pohjalle, joten vaalealla se
   tarvitsee oman värinsä ja nollatun ylämarginaalin napin rinnalla */
.feature__cta .link-underline,
.pricelink .link-underline {
  margin-top: 0;
  align-self: center;
  color: var(--color-text-body);
  border-bottom-color: var(--color-accent);
}
/* Leipätekstin sisäiset linkit erottuvat roosalla alleviivauksella */
.feature__body p a,
.cols__col p a {
  color: var(--color-accent-deep);
  border-bottom: 1px solid var(--color-rose-line);
}

/* ---------- Kaksi palstaa: kenelle sopii / hyvä tietää ---------- */
.cols {
  /* Oma reunusmuuttuja, jotta jakoviiva osuu samaan linjaan sisällön kanssa
     myös kapealla näytöllä, jossa reunus kapenee. */
  --cols-pad-x: var(--pad-section-x);
  background: var(--color-bg);
  padding: var(--spacing-xl) var(--cols-pad-x);
}
/* Jos edellinen osio on samalla greige-taustalla, osiot sulautuisivat yhdeksi
   lohkoksi. Hienovarainen ruskea hiusviiva erottaa ne. Vaalean tai tumman
   taustan jälkeen viivaa ei tule, koska taustaero riittää rajaksi.
   Viiva piirretään pseudoelementtinä eikä reunaviivana, jotta se noudattaa
   sisällön leveyttä eikä ulotu ruudun reunasta reunaan. */
:is(.intro-ed, .feature--alt, .steps:not(.steps--alt), .faq--lines, .prose-split, .cols) + .cols {
  position: relative;
}
:is(.intro-ed, .feature--alt, .steps:not(.steps--alt), .faq--lines, .prose-split, .cols) + .cols::before {
  content: "";
  position: absolute;
  top: 0;
  left: var(--cols-pad-x);
  right: var(--cols-pad-x);
  max-width: var(--max-width);
  margin-inline: auto;
  height: 1px;
  background: var(--color-divider);
}
.cols__head {
  max-width: var(--max-width);
  margin: 0 auto 42px;
}
.cols__head .eyebrow { color: var(--color-accent-deep); }
.cols__head h2 {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 48px;
  line-height: 1.2;
  color: var(--color-ink);
  margin-top: 16px;
  max-width: 760px;
}
.cols__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 48px;
  max-width: var(--max-width);
  margin: 0 auto;
}
.cols__col {
  border-top: 2px solid var(--color-ink);
  padding-top: 22px;
}
.cols__col h3 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 11.5px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--color-ink);
}
.cols__col .hi-list { margin-top: 18px; }
.cols__col > p {
  font-size: 13.5px;
  line-height: 1.85;
  color: var(--color-text-soft);
  margin: 16px 0 0;
}

/* ---------- Nosto hinnastosivulle ---------- */
.pricelink {
  background: var(--color-white);
  padding: 76px var(--pad-section-x);
}
.pricelink__inner {
  max-width: var(--max-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 26px 56px;
  border-top: 2px solid var(--color-ink);
  padding-top: 34px;
}
.pricelink h2 {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 36px;
  color: var(--color-ink);
}
.pricelink p {
  font-size: 14px;
  line-height: 1.85;
  color: var(--color-text-body);
  margin: 12px 0 0;
  max-width: 620px;
}
.pricelink .btn--ink { margin-top: 0; }

/* ---------- Hinnastosivu (kaikki hinnat yhdellä sivulla) ----------
   Kevyt hiusviivataulukko: hoito vasemmalla, hinta oikealla. Sama
   rivityyli toistuu jokaisessa ryhmässä, hierarkia tulee otsikoista. */
.prices {
  background: var(--color-white);
  padding: var(--spacing-xl) var(--pad-section-x);
}
.prices__inner {
  max-width: var(--max-width);
  margin: 0 auto;
}
/* Pikalinkit ryhmiin: pitkä lista pysyy selattavana */
.prices__jump {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding-bottom: 40px;
  margin-bottom: 56px;
  border-bottom: 1px solid var(--color-divider);
}
.prices__jump a {
  padding: 10px 20px;
  border: 1px solid var(--color-hairline);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--color-text-body);
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.prices__jump a:hover {
  background: var(--color-rose-tint);
  border-color: var(--color-rose-line);
  color: var(--color-ink);
  opacity: 1;
}
/* Kiinteä navbar peittäisi ryhmän otsikon ilman tätä */
.prices__group { scroll-margin-top: 92px; }
.prices__group + .prices__group { margin-top: 76px; }
.prices__group-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  padding-bottom: 16px;
  border-bottom: 2px solid var(--color-ink);
}
.prices__group-head h2 {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 36px;
  line-height: 1.2;
  color: var(--color-ink);
}
.prices__more {
  flex: 0 0 auto;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--color-accent-deep);
  border-bottom: 1px solid var(--color-rose-line);
  padding-bottom: 4px;
}
/* Väliotsikko ryhmän sisällä, esim. tuotesarja tai alue */
.prices__sub {
  margin: 36px 0 0;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--color-text-soft);
}
/* Leveällä näytöllä rivit kahteen palstaan: hoidon nimi ja hinta pysyvät
   lähempänä toisiaan eikä pitkä hinnasto veny turhan korkeaksi */
.prices__rows {
  margin: 8px 0 0;
  columns: 2;
  column-gap: 72px;
}
.prices__row {
  break-inside: avoid;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 15px 0;
  border-bottom: 1px solid var(--color-hairline);
}
.prices__row dt {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--color-text-body);
}
.prices__row dd {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 17px;
  letter-spacing: .03em;
  color: var(--color-ink);
  white-space: nowrap;
}
.prices__dur {
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--color-eyebrow);
  margin-left: 10px;
  white-space: nowrap;
}
/* Hintaryhmä ilman hintarivejä (esim. "hinnat puhelimitse") */
.prices__kysy {
  margin: 4px 0 0;
  padding: 15px 0;
  border-bottom: 1px solid var(--color-hairline);
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--color-text-body);
}
.prices__kysy a {
  color: var(--color-accent-deep);
  border-bottom: 1px solid var(--color-rose-line);
  white-space: nowrap;
}
.prices__group-note {
  margin: 18px 0 0;
  font-size: 12.5px;
  line-height: 1.8;
  color: var(--color-text-soft);
}
.prices__foot {
  max-width: var(--max-width);
  margin: 76px auto 0;
  padding-top: 34px;
  border-top: 1px solid var(--color-divider);
}
.prices__foot p {
  margin: 0 0 10px;
  font-size: 13px;
  line-height: 1.85;
  color: var(--color-text-soft);
}
.prices__foot p:last-child { margin-bottom: 0; }

/* ---------- Henkilökunta (kortit) ----------
   Muotokuva 4:5, sen alla musta yläviiva, titteli, nimi ja esittely.
   Sama viivalla alkava palstarakenne kuin vaiheissa ja arvoissa. */
.team {
  background: var(--color-bg);
  padding: var(--spacing-xl) var(--pad-section-x);
}
.team__head {
  max-width: var(--max-width);
  margin: 0 auto 46px;
}
.team__head .eyebrow { color: var(--color-accent-deep); }
.team__head h2 {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 48px;
  line-height: 1.2;
  color: var(--color-ink);
  margin-top: 16px;
}
.team__head p {
  font-size: 14.5px;
  line-height: 1.9;
  color: var(--color-text-body);
  margin: 18px 0 0;
  max-width: 620px;
}
.team__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 48px 28px;
  max-width: var(--max-width);
  margin: 0 auto;
}
.member { margin: 0; }
.member__img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% var(--rajaus-y, 30%);
  background: var(--color-bg-card);
}
.member__body {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 2px solid var(--color-ink);
}
.member__role {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--color-accent-deep);
}
.member h3 {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 26px;
  line-height: 1.2;
  color: var(--color-ink);
  margin-top: 8px;
}
.member p {
  font-size: 13.5px;
  line-height: 1.8;
  color: var(--color-text-soft);
  margin: 12px 0 0;
}

/* ---------- 404 ---------- */
.error-page {
  min-height: 100vh;
  background: var(--color-ink);
  color: var(--color-on-ink);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 40px 24px;
}
.error-page h1 {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 52px;
  line-height: 1.4;
}
.error-page p {
  font-size: 14.5px;
  color: var(--color-on-ink-body);
  max-width: 420px;
}
.error-page .btn { margin-top: 28px; }
.error-page__logo { width: auto; height: 132px; margin-bottom: 28px; }

/* ============================================================
   Responsiivisuus (prototyyppi oli desktop-only, 1200 px)
   ============================================================ */
/* Neljä navilinkkiä + logo + CTA mahtuvat kapeammalle desktopille vain
   tiiviimmällä kirjainvälillä ja pienemmällä reunuksella */
@media (max-width: 1279px) {
  .header { padding: 30px 32px; }
  .header.scrolled { padding: 12px 32px; }
  .nav-links { gap: 18px; font-size: 9px; letter-spacing: .14em; }
  /* Linkit eivät saa rivittyä kahdelle riville kapealla desktopilla */
  .nav-links a { white-space: nowrap; }
  .btn--nav { padding: 11px 20px; }
}

@media (max-width: 1023px) {
  .nav-links, .header__right { display: none; }
  .menu-toggle { display: flex; }
  /* Läpinäkyvä navbar: heron taustakuva näkyy läpi (vaaleaksi vasta scrollatessa) */
  .header {
    grid-template-columns: auto 1fr;
    padding: 18px 16px;
  }
  .header.scrolled { padding: 10px 16px; }
  .wordmark { padding: 0; }
  .wordmark__img { height: 62px; }
  .header.scrolled .wordmark__img { height: 44px; }
  .hero .header:not(.scrolled) .wordmark__img { height: 112px; }

  /* Mobiilissa sisältö vasempaan reunaan, ~16px reunoihin, ei keskitystä */
  .hero__content { padding: 160px 16px 40px; align-items: flex-start; text-align: left; }
  .hero__kuva { min-height: 36vh; min-height: 36svh; }
  .hero__eyebrow { gap: 12px; letter-spacing: .26em; }
  .hero__eyebrow::before { width: 26px; }
  .hero__eyebrow::after { display: none; }
  .hero__content h1 { font-size: 47px; }
  .about__body h2 { font-size: 37px; }
  .contact__info h2 { font-size: 36px; }

  .services { padding: 88px 16px 104px; }
  .services__head { text-align: left; max-width: none; margin-left: 0; margin-right: 0; margin-bottom: 52px; }
  .services__head h2 { font-size: 43px; }
  .services__grid { grid-template-columns: repeat(2, 1fr); }
  /* Matalammat kortit: korkeus n. 3/4 leveydestä */
  .svc-card { height: auto; aspect-ratio: 4 / 3; }

  /* Meistä: teksti ylös, kuva alle (kolumnien järjestys vaihtuu) */
  .about__inner { grid-template-columns: 1fr; min-height: 0; }
  .about__img { position: static; order: 2; width: 100%; height: 380px; }
  .about__body { grid-column: auto; order: 1; padding: 76px 16px 84px; }

  .brands { padding: 88px 16px 104px; }
  .brands__head { text-align: left; max-width: none; margin-left: 0; margin-right: 0; margin-bottom: 48px; }
  .brands__head h2 { font-size: 34px; }
  .brands__grid { grid-template-columns: repeat(2, 1fr); }
  .brands__grid a { height: 118px; padding: 18px; }
  .brands__grid img { height: calc(var(--logo-h, 40px) * .82); }

  .gallery__viewport img { flex-basis: 50%; width: 50%; height: 340px; }
  .gallery__fade { width: 90px; }
  .gallery__nav--prev { left: 14px; }
  .gallery__nav--next { right: 14px; }
  .gallery__ig { right: 16px; }

  .faq { padding: 64px 16px; }
  .faq__head { text-align: left; margin-bottom: 34px; }
  .faq.faq--etusivu { padding: 88px 16px 112px; }
  .faq--etusivu .faq__head { margin-bottom: 44px; }
  .faq__head h2 { font-size: 36px; }
  .faq__item { text-align: left; }
  .faq__q { text-align: left; padding: 22px 46px 22px 18px; }
  .faq__icon { right: 18px; }

  .contact__grid { grid-template-columns: 1fr; }
  .contact__info { padding: 56px 16px; }
  .contact--etusivu .contact__info { padding-top: 76px; padding-bottom: 84px; }
  .contact__map { min-height: 360px; }

  .site-footer { padding: 64px 16px 0; }
  .site-footer__grid { grid-template-columns: 1fr 1fr; gap: 40px; }

  /* Alasivut */
  .subhero { height: 480px; }
  /* Tummempi overlay: valkoinen teksti erottuu pienellä ruudulla paremmin */
  .subhero__overlay { background: var(--overlay-hero-mobile); }
  .subhero--dark .subhero__overlay {
    background: linear-gradient(180deg, rgba(33, 21, 25, .8) 0%, rgba(33, 21, 25, .62) 50%, rgba(33, 21, 25, .42) 100%);
  }
  .subhero__content { padding: 92px 16px 44px; }
  .subhero h1 { font-size: 43px; }

  .intro-ed { padding: 64px 16px 56px; }
  .intro-ed__grid { grid-template-columns: 1fr; gap: 26px; }
  .intro-ed h2 { font-size: 37px; }

  .menu { padding: 0 16px 56px; }
  .menu__group {
    grid-template-columns: 1fr;
    gap: 30px;
    padding: 52px 0 44px;
  }
  .menu__side { position: static; }
  .menu__num { font-size: 60px; }
  .menu__side h2 { font-size: 31px; margin-top: 14px; padding-top: 14px; }
  .mrow__name { font-size: 17.5px; }
  .mrow__price { font-size: 18px; }
  .mrow__desc { margin-top: 6px; }

  .photo-band { height: 300px; }
  .photo-band__cap { left: 16px; right: 16px; bottom: 20px; }

  .steps { padding: 64px 16px; }
  .steps__head h2 { font-size: 34px; }
  .steps__grid,
  .steps__grid--3 { grid-template-columns: 1fr 1fr; gap: 32px 24px; }

  .cta-band { padding: 72px 16px; }
  .cta-band h2 { font-size: 34px; }

  .related { padding: 64px 16px; }
  .related__head h2 { font-size: 31px; }
  .related__grid { grid-template-columns: 1fr; }
  .related__card { height: 240px; }

  .quote-band { padding: 66px 16px; }
  .quote-band p { font-size: 22px; }
  .quote-band blockquote::before { font-size: 58px; margin-bottom: 16px; }

  .prose-split { padding: 64px 16px; }
  .prose-split__inner { grid-template-columns: 1fr; gap: 36px; }
  .prose-split__media { position: static; }
  .prose-split__body h2 { font-size: 29px; }

  .faq--lines { --faq-pad-x: 16px; }
  .faq--lines .faq__head h2 { font-size: 34px; }
  .faq--lines .faq__q { font-size: 12px; padding: 20px 46px 20px 0; }
  .faq--lines .faq__a p { padding-right: 0; }

  /* Hoitoesittely: kuva ylös, teksti alle myös flip-lohkoissa */
  .feature { padding: 56px 16px; }
  .feature__inner,
  .feature--flip .feature__inner { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .feature--flip .feature__media { order: 0; }
  /* Kuvakohtainen --kuvasuhde-mobile pitää korkean aiheen (esim. kulmien kaari)
     kokonaan näkyvissä. Leveysraja estää kuvaa venymästä tabletilla liian isoksi */
  .feature__media img {
    aspect-ratio: var(--kuvasuhde-mobile, 3 / 2);
    max-width: var(--kuva-max-leveys, 100%);
    margin-inline: auto;
  }
  .feature__body h2 { font-size: 34px; }
  .feature__body > p:first-of-type { font-size: 15.5px; }
  .feature__facts { gap: 0 32px; }

  .cols { --cols-pad-x: 16px; padding: 64px var(--cols-pad-x); }
  .cols__head h2 { font-size: 34px; }
  .cols__grid { grid-template-columns: 1fr; gap: 34px; }

  .pricelink { padding: 56px 16px; }
  .pricelink__inner { grid-template-columns: 1fr; gap: 22px; }
  .pricelink h2 { font-size: 29px; }

  .team { padding: 64px 16px; }
  .team__head h2 { font-size: 34px; }
  .team__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 20px; }
  .member h3 { font-size: 22px; }

  .prices { padding: 56px 16px; }
  .prices__jump { gap: 8px; padding-bottom: 32px; margin-bottom: 44px; }
  .prices__jump a { padding: 9px 15px; letter-spacing: .16em; }
  .prices__group + .prices__group { margin-top: 58px; }
  .prices__group-head { flex-direction: column; align-items: flex-start; gap: 12px; }
  .prices__group-head h2 { font-size: 29px; }
  .prices__rows { columns: 1; }
  .prices__row { gap: 12px; }
  .prices__row dt { font-size: 14px; }
  .prices__foot { margin-top: 56px; }
}

@media (max-width: 639px) {
  .steps__grid,
  .steps__grid--3 { grid-template-columns: 1fr; }
  .mrow { column-gap: 14px; }
  /* Kesto omalle rivilleen, ettei hoidon nimi ja hinta puristu yhteen */
  .prices__dur { display: block; margin: 4px 0 0; }
}

@media (max-width: 639px) {
  /* Suomen pitkät yhdyssanat (esim. kestopigmentoinnista) eivät mahdu versaaleina
     kapealle näytölle: tavutetaan vain pitkät sanat, vähintään 4 merkkiä kummallekin puolelle */
  h1, h2, h3 {
    -webkit-hyphens: auto;
    hyphens: auto;
    hyphenate-limit-chars: 10 4 4;
    overflow-wrap: break-word;
  }
  .hero__content h1 { font-size: 36px; }
  .hero__lead { font-size: 15px; }
  /* Napit rinnakkain kapeammalla sisennyksellä, jotta kuvanauha näkyy jo ensimmäisessä näkymässä */
  .hero__cta { flex-wrap: wrap; gap: 12px; }
  .hero__cta .btn { padding: 15px 24px; }

  .subhero { height: 450px; }
  .subhero__content { padding: 88px 16px 40px; }
  .subhero h1 { font-size: 31px; }
  .subhero__lead { font-size: 14px; }
  .subhero__lead--caps { font-size: 12px; letter-spacing: .16em; }
  .cta-band__row { flex-direction: column; align-items: center; }

  .services__grid { grid-template-columns: 1fr; }
  .faq__grid { grid-template-columns: 1fr; }

  .gallery__viewport img { flex-basis: 100%; width: 100%; height: 300px; }
  .gallery__fade { width: 70px; }

  .brands__grid img { height: calc(var(--logo-h, 40px) * .7); max-width: 86%; }

  .site-footer__grid { grid-template-columns: 1fr; gap: 34px; }
  .site-footer__bottom { flex-direction: column; gap: 8px; }

  .team__grid { grid-template-columns: 1fr; gap: 44px; }
  .member { max-width: 440px; }
  .subhero--ala .subhero__content { padding-bottom: 40px; }
}

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