/* ============================================================
   BEAUTIQUE KIARA - style.css
   Tumma luksus -design (design_handoff_studio_demo)
   Jost, ohut letterspaced-versaali, greige + tummat inverse-osiot.
   Ei pyöristyksiä, ei varjoja (paitsi gallerian tekstivarjo).
   ============================================================ */

/* ---------- Custom properties ---------- */
:root {
  /* Vaaleat pinnat */
  --color-bg:           #e9e6e0;  /* sivun pohja, greige */
  --color-bg-card:      #f6f4f0;  /* palvelulaatat, UKK-laatikot */
  --color-hairline:     #d6d1c8;  /* 1px rajat laattojen välissä */

  /* Tummat pinnat */
  --color-ink:          #1e1c19;  /* inverse-osiot */
  --color-ink-line:     #35312a;  /* footerin jakoviiva */

  /* Teksti vaalealla */
  --color-text:         #26231f;
  --color-text-body:    #55504a;
  --color-text-soft:    #6f6a62;
  --color-eyebrow:      #8d857a;
  --color-divider:      #c5beb1;

  /* Teksti tummalla */
  --color-on-ink:       #f2efe9;
  --color-on-ink-head:  #ece8e0;
  --color-on-ink-body:  rgba(236, 232, 224, .75);
  --color-on-ink-lead:  rgba(242, 239, 233, .8);
  --color-on-ink-eyebrow: #98907f;
  --color-on-ink-border:  rgba(242, 239, 233, .55);
  --color-on-ink-border-soft: rgba(236, 232, 224, .5);
  --color-on-ink-underline: rgba(236, 232, 224, .6);

  /* Roosa aksentti (hienovarainen, brändin puuterisävy) */
  --color-accent:       #b98d84;  /* dusty rose: tähdet, listamerkit, pikkukorostukset */
  --color-accent-deep:  #96685e;  /* tumma roosa: hover-tilat */
  --color-rose-tint:    #f1e9e5;  /* hyvin vaalea roosa, kortit ja korostuspinnat */
  --color-rose-line:    #e3d4cd;  /* 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);
  --overlay-hero: linear-gradient(180deg, rgba(20,18,15,.62) 0%, rgba(20,18,15,.38) 50%, rgba(20,18,15,.15) 100%);
  --overlay-hero-mobile: linear-gradient(180deg, rgba(20,18,15,.72) 0%, rgba(20,18,15,.5) 50%, rgba(20,18,15,.28) 100%);
  --overlay-card: linear-gradient(to top, rgba(20,18,15,.88) 0%, rgba(20,18,15,.25) 52%, rgba(20,18,15,0) 100%);
  --shadow-gallery-word: 0 2px 30px rgba(0, 0, 0, .25);

  --font-body: 'Jost', system-ui, -apple-system, sans-serif;
  --font-display: 'Cormorant 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;
}

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

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 15px;
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
}

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

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, #instagram, #ukk, #yhteystiedot { scroll-margin-top: 72px; }

.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: 88px;
  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;
}
.header.scrolled .wordmark__img { height: 42px; }
.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(20, 18, 15, .45);
  opacity: 0;
  visibility: hidden;
  transition: opacity .42s ease, visibility .42s;
}
.nav-backdrop.open { opacity: 1; visibility: visible; }
body.nav-open { overflow: hidden; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  height: calc(100vh - 26px);
  overflow: hidden;
  background: var(--color-ink);
}
/* Kuva on heroa korkeampi, jotta parallax-siirtymä ei paljasta reunoja */
.hero__img {
  position: absolute;
  top: -160px;
  left: 0;
  width: 100%;
  height: calc(100% + 160px);
  object-fit: cover;
  will-change: transform;
}
.hero__overlay {
  position: absolute;
  inset: 0;
  background: var(--overlay-hero);
  pointer-events: none;
}
.hero__content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--color-on-ink);
  padding: 0 80px;
  /* Sisältö 26px alemmas, jotta fixed-navbar ei ahdista tekstejä */
  transform: translateY(26px);
}
.hero__content h1 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 66px;
  line-height: 1.18;
  letter-spacing: .06em;
  text-transform: uppercase;
  max-width: 900px;
}
.hero__lead {
  margin: 24px 0 0;
  font-size: 16px;
  letter-spacing: .06em;
  line-height: 1.8;
  color: var(--color-on-ink-lead);
  max-width: 420px;
}
.hero__cta {
  display: flex;
  gap: 18px;
  margin-top: 42px;
}
/* Arvostelu-eyebrow vain mobiilissa (piilotettu desktopilla) */
.hero__rating { display: none; }

/* ---------- Palvelut (immersiiviset kuvakortit, vaalea tausta) ---------- */
.services {
  background: var(--color-bg);
  padding: var(--spacing-2xl) var(--pad-section-x);
}
.services__head {
  text-align: center;
  max-width: 620px;
  margin: 0 auto 58px;
}
.services__head h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 48px;
  letter-spacing: .05em;
  text-transform: uppercase;
  margin-top: 14px;
  line-height: 1.08;
}
.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;
}
@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-display);
  font-weight: 500;
  font-size: 25px;
  letter-spacing: .06em;
  text-transform: uppercase;
  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) ---------- */
.about {
  background: var(--color-ink);
}
/* Tumma tausta jää täysleveäksi, sisältö rajautuu keskitettyyn kolumniin */
.about__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  max-width: var(--max-width);
  margin: 0 auto;
}
.about__img {
  width: 100%;
  height: 560px;
  object-fit: cover;
}
.about__body {
  color: var(--color-on-ink-head);
  padding: 90px 80px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}
.about__body h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 40px;
  line-height: 1.24;
  letter-spacing: .05em;
  text-transform: uppercase;
  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;
}

/* ---------- Asiakkaat / palaute ---------- */
.reviews {
  background: var(--color-bg);
  color: var(--color-text);
  padding: var(--spacing-2xl) var(--pad-section-x);
}
.reviews__head { text-align: center; margin-bottom: 58px; }
.reviews__head h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 40px;
  letter-spacing: .05em;
  text-transform: uppercase;
  margin-top: 14px;
  line-height: 1.08;
}
.reviews__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  max-width: 1000px;
  margin: 0 auto;
}
.review {
  margin: 0;
  text-align: center;
  padding-top: 34px;
  border-top: 1px solid var(--color-divider);
}
.review p {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 24px;
  line-height: 1.5;
  color: var(--color-text);
  margin: 0;
}
.review cite {
  display: block;
  font-style: normal;
  font-size: 10px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--color-eyebrow);
  margin-top: 26px;
}

/* ---------- 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(20, 18, 15, .5), rgba(20, 18, 15, 0));
}
.gallery__fade--right {
  right: 0;
  background: linear-gradient(270deg, rgba(20, 18, 15, .5), rgba(20, 18, 15, 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; }
.gallery__ig {
  position: absolute;
  right: var(--pad-nav-x);
  bottom: 26px;
  font-size: 10px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--color-white);
  border-bottom: 1px solid var(--color-white-line);
  padding-bottom: 5px;
}

/* ---------- Instagram-syöte ---------- */
.insta {
  background: var(--color-white);
  padding: var(--spacing-2xl) var(--pad-section-x);
}
.insta__head {
  text-align: center;
  max-width: 620px;
  margin: 0 auto 54px;
}
.insta__head h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 40px;
  letter-spacing: .05em;
  text-transform: uppercase;
  margin-top: 14px;
  line-height: 1.08;
}
.insta__lead {
  font-size: 15px;
  line-height: 1.9;
  color: var(--color-text-body);
  margin: 22px 0 0;
}
.insta__grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 24px;
  max-width: var(--max-width);
  margin: 0 auto;
}
/* Instagramin upotus asettelee itsensä flex-kohteena; margin nollataan */
.insta__grid .instagram-media {
  flex: 0 1 340px;
  margin: 0 !important;
}
.insta__link {
  display: block;
  width: fit-content;
  margin: 48px auto 0;
  font-size: 10px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--color-text);
  border-bottom: 1px solid var(--color-divider);
  padding-bottom: 5px;
}

/* ---------- UKK ---------- */
.faq {
  background: var(--color-bg);
  padding: var(--spacing-xl) var(--pad-section-x);
}
.faq__head {
  text-align: center;
  margin-bottom: 46px;
}
.faq__head h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 40px;
  letter-spacing: .05em;
  text-transform: uppercase;
  margin-top: 14px;
  line-height: 1.08;
}
.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; }

/* Viivalistavariantti alasivuille: ei laatikoita, kysymykset
   hiusviivoin eroteltuina ja otsake vasemmalle linjattuna */
.faq--lines { background: var(--color-bg); }
.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: 40px;
  letter-spacing: .04em;
  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;
}
.contact__info h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 37px;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.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;
}
.contact__rows h3 {
  font-weight: 400;
  font-size: 9.5px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--color-on-ink-eyebrow);
  margin-bottom: 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);
}
.site-footer__logo {
  display: block;
  width: auto;
  height: 62px;
}
.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,
   Skin Club). Sama muotokieli kuin etusivulla: Cormorant-versaalit,
   greige + tummat inverse-osiot, terävät kulmat.
   ============================================================ */

/* ---------- Matala alasivuhero ---------- */
.subhero {
  position: relative;
  height: 540px;
  overflow: hidden;
  background: var(--color-ink);
}
/* Pidempi otsikko rivittyy kahdelle riville (esim. kestopigmentointi),
   jolloin hero tarvitsee lisää korkeutta ettei CTA jää alareunaan kiinni */
.subhero--tall { height: 610px; }
.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(20, 18, 15, .58) 0%, rgba(20, 18, 15, .44) 55%, rgba(20, 18, 15, .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(20, 18, 15, .7) 0%, rgba(20, 18, 15, .56) 55%, rgba(20, 18, 15, .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-display);
  font-weight: 600;
  font-size: 58px;
  line-height: 1.1;
  letter-spacing: .06em;
  text-transform: uppercase;
  max-width: 940px;
  /* Pehmeä varjo pitää valkoisen tekstin luettavana myös kuvan vaaleissa kohdissa */
  text-shadow: 0 2px 30px rgba(20, 18, 15, .55), 0 1px 3px rgba(20, 18, 15, .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(20, 18, 15, .6), 0 1px 3px rgba(20, 18, 15, .3);
}
.subhero__cta { margin-top: 30px; }

/* ---------- 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-display);
  font-weight: 600;
  font-size: 47px;
  letter-spacing: .04em;
  text-transform: uppercase;
  line-height: 1.08;
  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: 600;
  font-size: 80px;
  line-height: .82;
  letter-spacing: .02em;
  color: var(--color-accent);
}
.menu__side h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 34px;
  line-height: 1.08;
  letter-spacing: .04em;
  text-transform: uppercase;
  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-display);
  font-weight: 600;
  font-size: 19.5px;
  line-height: 1.3;
  letter-spacing: .02em;
  color: var(--color-ink);
  margin: 0;
}
.mrow__price {
  font-family: var(--font-display);
  font-weight: 600;
  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;
}
/* Nostettu hoito: roosa merkkiviiva ja pientagi nimen perässä */
.badge {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 8.5px;
  font-weight: 500;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--color-accent-deep);
  border: 1px solid var(--color-rose-line);
  background: var(--color-rose-tint);
  padding: 4px 9px 3px;
  margin-left: 12px;
  vertical-align: 3px;
  white-space: nowrap;
}
.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);
}

/* 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%);
}
/* Kaksiosainen kaista: pystykuvat rajautuvat luontevasti puolikkaassa
   leveydessä, kun yksi täysleveä kuva zoomaisi liikaa */
.photo-band--duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* Ilman eksplisiittista rivikorkeutta rivi venyisi pystykuvan omaan
     korkeuteen, jolloin kuvasta nakyisi vain ylareuna eika object-position
     (--rajaus-y) vaikuttaisi lainkaan */
  grid-template-rows: 100%;
  gap: 2px;
  height: 520px;
}
.photo-band::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to top, rgba(20, 18, 15, .55) 0%, rgba(20, 18, 15, .12) 32%, rgba(20, 18, 15, 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(20, 18, 15, .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-display);
  font-weight: 600;
  font-size: 40px;
  letter-spacing: .04em;
  text-transform: uppercase;
  line-height: 1.1;
  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(20, 18, 15, .5) 0%, rgba(20, 18, 15, .74) 100%);
}
.cta-band__inner {
  position: relative;
  z-index: 2;
  max-width: 640px;
  margin: 0 auto;
}
.cta-band h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 36px;
  letter-spacing: .05em;
  text-transform: uppercase;
  line-height: 1.18;
  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-display);
  font-weight: 600;
  font-size: 32px;
  letter-spacing: .05em;
  text-transform: uppercase;
  margin-top: 14px;
  line-height: 1.12;
}
.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-display);
  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-display);
  font-weight: 500;
  font-size: 29px;
  line-height: 1.22;
  letter-spacing: .05em;
  text-transform: uppercase;
  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-display);
  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: 4 / 5;
  object-fit: cover;
  object-position: var(--rajaus, 50%) var(--rajaus-y, 50%);
}
.feature__body .eyebrow { color: var(--color-accent-deep); }
.feature__body h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 36px;
  line-height: 1.1;
  letter-spacing: .04em;
  text-transform: uppercase;
  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: 600;
  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 {
  position: relative;
}
:is(.intro-ed, .feature--alt, .steps:not(.steps--alt), .faq--lines, .prose-split) + .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-display);
  font-weight: 600;
  font-size: 40px;
  letter-spacing: .04em;
  text-transform: uppercase;
  line-height: 1.1;
  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-display);
  font-weight: 600;
  font-size: 30px;
  letter-spacing: .05em;
  text-transform: uppercase;
  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-display);
  font-weight: 600;
  font-size: 30px;
  letter-spacing: .05em;
  text-transform: uppercase;
  line-height: 1.15;
  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: 600;
  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;
}
.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; }

/* ---------- 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-display);
  font-weight: 500;
  font-size: 46px;
  letter-spacing: .1em;
  text-transform: uppercase;
  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; }

/* ============================================================
   Responsiivisuus (prototyyppi oli desktop-only, 1200 px)
   ============================================================ */
/* Viisi navilinkkia + 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: 34px; }

  /* Mobiilissa sisältö vasempaan reunaan, ~16px reunoihin, ei keskitystä */
  .hero { height: 90vh; }
  /* Tummempi overlay: valkoinen teksti erottuu pienellä ruudulla paremmin */
  .hero__overlay { background: var(--overlay-hero-mobile); }
  .hero__content { padding: 0 16px; align-items: flex-start; text-align: left; }
  .hero__rating {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
  }
  .hero__rating-stars {
    color: var(--color-accent);
    font-size: 14px;
    letter-spacing: 3px;
  }
  .hero__rating-text {
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 400;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--color-on-ink-lead);
  }
  .hero__content h1 { font-size: 44px; }
  .about__body h2 { font-size: 31px; }
  .reviews blockquote { font-size: 24px; }
  .contact__info h2 { font-size: 30px; }

  .services { padding: 72px 16px; }
  .services__head { text-align: left; max-width: none; margin-left: 0; margin-right: 0; }
  .services__head h2 { font-size: 36px; }
  .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; }
  .about__img { order: 2; height: 380px; }
  .about__body { order: 1; padding: 56px 16px 64px; }

  .reviews { padding: 72px 16px; }
  .reviews__head { text-align: left; }
  .reviews__head h2 { font-size: 28px; }
  .reviews__grid { gap: 40px; }
  .review { text-align: left; }
  .review p { font-size: 20px; }

  .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; }

  .insta { padding: 72px 16px; }
  .insta__head { text-align: left; max-width: none; margin-left: 0; margin-right: 0; }
  .insta__head h2 { font-size: 28px; }
  .insta__link { margin-left: 0; margin-right: 0; }

  .faq { padding: 64px 16px; }
  .faq__head { text-align: left; margin-bottom: 34px; }
  .faq__head h2 { font-size: 30px; }
  .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__map { min-height: 360px; }

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

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

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

  .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: 26px; margin-top: 14px; padding-top: 14px; }
  .mrow__name { font-size: 17.5px; }
  .mrow__price { font-size: 18px; }
  .mrow__desc { margin-top: 6px; }
  .badge { margin-left: 8px; }

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

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

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

  .related { padding: 64px 16px; }
  .related__head h2 { font-size: 26px; }
  .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: 24px; }

  .faq--lines .faq__head h2 { font-size: 28px; }
  .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: 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: 28px; }
  .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: 28px; }
  .cols__grid { grid-template-columns: 1fr; gap: 34px; }

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

  .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: 24px; letter-spacing: .04em; }
  .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) {
  .hero__content h1 { font-size: 30px; }
  .hero__cta { flex-direction: column; gap: 14px; align-items: flex-start; }

  .subhero { height: 450px; }
  .subhero--tall { height: 500px; }
  .subhero__content { padding: 88px 16px 40px; }
  .subhero h1 { font-size: 28px; }
  .subhero__lead { font-size: 14px; }
  .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; }

  .reviews__grid { grid-template-columns: 1fr; gap: 44px; }

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

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