/* =========================================================
   Hiljan Hetki — hieronta- ja hyvinvointidemo

   Vaalea, ilmava paletti: luonnonvalkoinen pohja, salvia
   rakenteena ja savi ainoana aksenttina. Ei mustaa, ei
   puhdasta valkoista, ei laatikkorajoja — vain ohuita viivoja
   ja kaaria.

   Sivun oma kieli kolmessa kohdassa:
   1. Navi ei ole kiinnitetty. Nimi on keskellä, linkit sen alla.
   2. Hero on yksi keskitetty sarake, ja kuva tulee tekstin alle
      koko wrapin levyisenä kaarena.
   3. Hinnat ovat pieniä valintoja hoidon tekstin alla, eivät
      pistejohtimilla piirrettyä hinnastoa.
   ========================================================= */

:root{
  --serif:'Newsreader', Georgia, 'Times New Roman', serif;
  --sans:'Karla', ui-sans-serif, system-ui, sans-serif;

  /* pinnat */
  --paper:#FBF9F5;
  --paper-2:#F4F1EA;
  --wash:#EAEEE7;
  --wash-deep:#E5EADF;

  /* teksti */
  --ink:#332E29;
  --ink-soft:#6B635A;          /* 5,6:1 pohjaa vasten */

  /* salvia = rakenne, savi = aksentti.
     Vaaleat sävyt ovat koristeita, tummat tekstiä varten. */
  --sage:#6B7F6E;
  --sage-deep:#4E6152;         /* 6,3:1 — turvallinen tekstille */
  --clay:#B4735A;
  --clay-ink:#8F5540;          /* 5,7:1 — turvallinen tekstille */

  --line:rgba(51,46,41,.14);
  /* Hiusviiva riittää erottimeksi, muttei painikkeen reunaksi: WCAG 1.4.11
     vaatii kontrolleilta 3:1. Tämä yltää 3,8:1 luonnonvalkoista vasten. */
  --line-strong:rgba(51,46,41,.6);

  /* Tekstikoot. Kahdeksan askelta, ei enempää — lähekkäiset koot
     (.94/.95/.96/.98) eivät erotu toisistaan, ne vain sotkevat rytmin. */
  --t-caps:.74rem;
  --t-xs:.88rem;
  --t-sm:.95rem;
  --t-lead:1.15rem;
  --t-price:1.12rem;
  --t-md:1.3rem;
  --t-lg:1.5rem;

  --max:1080px;
  --r-soft:20px;
  --r-btn:12px;
  --r-panel:28px;
  --r-arch:200px 200px 24px 24px;
  /* Pehmeä ja tasainen käyrä, ei loppuun kimmahtavaa. */
  --ease:cubic-bezier(.4,.16,.2,1);
}

*{ box-sizing:border-box; margin:0; padding:0; }

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

body{
  font-family:var(--sans);
  font-size:1.0625rem;
  line-height:1.75;
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
}

img{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }

:focus-visible{
  outline:2px solid var(--clay-ink);
  outline-offset:3px;
  border-radius:4px;
}

.wrap{ max-width:var(--max); margin:0 auto; padding:0 24px; }

/* Navi ei ole kiinnitetty, joten ankkurin alle ei tarvita palkin verran
   tilaa — pelkkä hengitysvara riittää. */
section{ padding:clamp(68px,9vw,122px) 0; scroll-margin-top:24px; }
main{ scroll-margin-top:24px; }
main:focus{ outline:none; }

.skip{ position:absolute; left:-9999px; top:0; z-index:100; }
.skip:focus{
  left:14px; top:14px;
  background:var(--ink); color:var(--paper);
  padding:12px 18px; border-radius:var(--r-btn);
  font-size:var(--t-sm);
}

/* ---------- Toistuvat typografiset elementit ---------- */

/* Osion yläotsikko on kursivoitu sana, ei versaaliriviä hiusviivan kanssa.
   Sivun ääni on käsin kirjoitettu, ei ladottu. */
.label{
  font-family:var(--serif); font-style:italic; font-weight:400;
  font-size:1.08rem; line-height:1.4; color:var(--clay-ink);
}

.sec-title{
  font-family:var(--serif); font-weight:300;
  font-size:clamp(2.1rem,4.6vw,3.2rem);
  line-height:1.12; letter-spacing:-.012em;
  margin:10px 0 24px; max-width:24ch;
}

.sec-intro{
  max-width:58ch; font-size:var(--t-lead); color:var(--ink-soft);
  margin-bottom:clamp(40px,5vw,68px);
}

/* Nappi on pehmeä suorakaide, ei kapseli: samat 12 px:n kulmat toistuvat
   hintavalinnoissa ja ohitusiinkissä. */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--sans); font-size:var(--t-sm); font-weight:500;
  padding:15px 28px; border-radius:var(--r-btn);
  border:1px solid transparent; cursor:pointer;
  transition:background .22s var(--ease), color .22s var(--ease);
}
.btn-solid{ background:var(--sage-deep); color:#fff; }
.btn-solid:hover{ background:#3F5244; }
.btn-wide{ margin-top:32px; }

/* ---------- Navigaatio ---------- */

.nav{ padding:clamp(26px,3.4vw,40px) 0 clamp(18px,2.4vw,26px); }
.nav-inner{
  display:flex; flex-direction:column; align-items:center;
  gap:10px; text-align:center;
}
.nav-logo{ font-family:var(--serif); font-weight:400; font-size:1.45rem; line-height:1.2; }
.nav-logo em{ font-style:italic; color:var(--clay-ink); }

/* Hover on pelkkä värinvaihto. Ei alleviivausta, ei skaalausta. */
.nav-links{
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:6px 26px; font-size:var(--t-sm);
}
.nav-links a{
  padding:3px 0; color:var(--ink-soft);
  transition:color .22s var(--ease);
}
.nav-links a:hover,
.nav-links a.is-active{ color:var(--clay-ink); }

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

.hero{ padding:clamp(20px,3vw,34px) 0 clamp(56px,7vw,92px); }

.hero-inner{
  display:flex; flex-direction:column; align-items:center;
  text-align:center;
}

.hero-title{
  font-family:var(--serif); font-weight:300;
  font-size:clamp(3rem,9vw,5.6rem);
  line-height:1.02; letter-spacing:-.022em;
}
.hero-title em{ font-style:italic; color:var(--clay-ink); }

/* Ei versaalia eikä harvennusta täälläkään — sivulla ei ole yhtään
   ladottua pikkuotsikkoa. */
.hero-sub{
  margin-top:8px;
  font-size:var(--t-sm); color:var(--sage-deep);
}

.hero-lead{
  margin-top:26px; max-width:50ch;
  font-size:var(--t-lead); line-height:1.7; color:var(--ink-soft);
}

/* Aukiolotilanne on kursivoitu lause, ei värillinen piste kapselissa. */
.hero-status{
  margin-top:20px;
  font-family:var(--serif); font-style:italic; font-weight:300;
  font-size:1.15rem; color:var(--ink);
}

.hero-inner .btn{ margin-top:30px; }

/* Kuva on koko wrapin levyinen kaari heron alla. */
.hero-figure{ margin-top:clamp(44px,6vw,76px); }
.hero-figure img{
  /* height:auto pakollinen: kuvalla on HTML-attribuutti height="1000", joka
     muuten jyrää aspect-ration ja pakottaisi kuvan kiinteään 1000px:n
     korkeuteen leveydestä riippumatta. */
  width:100%; height:auto; aspect-ratio:2/1; object-fit:cover; object-position:center 58%;
  border-radius:clamp(120px,24vw,300px) clamp(120px,24vw,300px) 24px 24px;
}

.hero-facts{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:24px;
  margin-top:clamp(40px,5vw,64px);
  text-align:center;
}
.hero-facts li{ font-size:var(--t-sm); color:var(--ink-soft); }
.hero-facts strong{
  display:block; font-family:var(--serif); font-weight:400;
  font-size:var(--t-md); line-height:1.25; color:var(--ink);
}
.hero-facts span{ display:block; }

/* ---------- Hoitaja ---------- */

.hilja-inner{
  display:grid; grid-template-columns:.82fr 1.18fr;
  gap:clamp(34px,5.5vw,84px); align-items:start;
}
.hilja-media{ position:relative; }
.hilja-media img{
  position:relative; z-index:1;
  width:100%; height:auto; aspect-ratio:10/13; object-fit:cover;
  border-radius:var(--r-arch);
}

.hilja-text > p:not(.label):not(.sign){ color:var(--ink-soft); margin-bottom:16px; max-width:58ch; }

.pull{
  font-family:var(--serif); font-style:italic; font-weight:300;
  font-size:clamp(1.32rem,2.4vw,1.6rem); line-height:1.5;
  color:var(--ink); border-left:2px solid var(--clay);
  padding-left:24px; margin:32px 0; max-width:44ch;
}

.sign{
  margin-top:32px; padding-top:24px; border-top:1px solid var(--line);
  font-family:var(--serif); font-size:var(--t-md);
}
.sign span{
  display:block; margin-top:4px;
  font-family:var(--serif); font-style:italic; font-weight:300;
  font-size:var(--t-sm); color:var(--sage-deep);
}

/* ---------- Tila ---------- */

.tila{ background:var(--paper-2); }
.tila-grid{
  display:grid; grid-template-columns:1.2fr 1fr;
  gap:clamp(16px,2.4vw,26px); align-items:start;
}
.tila-col{ display:grid; gap:clamp(16px,2.4vw,26px); }
.tila-col-offset{ margin-top:clamp(0px,5vw,64px); }
/* height:auto pakollinen: ilman sitä jokaisen kuvan HTML-height-attribuutti
   (700–1000px) jää kiinteäksi korkeudeksi riippumatta kuvan todellisesta
   leveydestä sarakkeessa, ja koska object-fit puuttuu, selain venyttäisi
   kuvan vääriin mittoihin sen sijaan että kuva näkyisi omissa mitoissaan. */
.tila-grid img{ width:100%; height:auto; border-radius:var(--r-soft); }
.tila-grid img.arch{ border-radius:var(--r-arch); }

/* ---------- Hoidot ja hinnat ---------- */

.treat{
  display:grid; grid-template-columns:.92fr 1.08fr;
  gap:clamp(28px,4.5vw,66px); align-items:center;
}
.treat + .treat{ margin-top:clamp(52px,7vw,96px); }
.treat-flip .treat-media{ order:2; }

.treat-media img{
  width:100%; height:auto; aspect-ratio:9/7; object-fit:cover;
  border-radius:var(--r-soft);
}

.treat-body h3{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(1.5rem,2.6vw,1.85rem); line-height:1.2;
}
.treat-body p{ margin-top:16px; color:var(--ink-soft); max-width:46ch; }

/* Kesto ja hinta rinnakkain yhtenä rivinä, kolme pientä valintaa tekstin
   alla. Ei pistejohtimia. */
.prices{
  display:flex; flex-wrap:wrap; gap:10px;
  margin-top:24px;
}
.prices li{
  display:inline-flex; align-items:baseline; gap:7px;
  padding:7px 15px;
  border:1px solid var(--line); border-radius:var(--r-btn);
  background:var(--paper-2);
  font-size:var(--t-sm); color:var(--ink-soft);
  white-space:nowrap;
}
.sep{ color:var(--clay-ink); }
.amt{
  font-family:var(--serif); font-weight:400; font-size:var(--t-price);
  color:var(--clay-ink);
}

.rows{ margin-top:clamp(64px,8vw,108px); }
.rows-title{
  font-family:var(--serif); font-weight:300; font-size:var(--t-lg);
  padding-bottom:16px; border-bottom:1px solid var(--line);
}
.row{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:28px; padding:24px 0; border-bottom:1px solid var(--line);
}
.row-text h4{ font-family:var(--serif); font-weight:400; font-size:var(--t-md); line-height:1.25; }
.row-text p{ margin-top:8px; color:var(--ink-soft); max-width:52ch; }
.row-meta{ font-size:var(--t-sm); color:var(--ink-soft); white-space:nowrap; }

.notes{
  margin-top:clamp(44px,5vw,64px);
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(20px,3vw,40px);
  padding:clamp(24px,3vw,34px);
  background:var(--paper-2); border-radius:var(--r-panel);
}
.notes p{ font-size:var(--t-sm); color:var(--ink-soft); max-width:56ch; }
.notes strong{ color:var(--ink); font-weight:500; }

/* ---------- Palautteet ---------- */

.palautteet{ background:var(--wash); }
/* Kolme saraketta tai yksi. auto-fit antaisi välikokoisilla ruuduilla
   kaksi saraketta, jolloin kolmas palaute jäisi yksin riville. */
.rev-grid{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:clamp(26px,3.5vw,48px);
}
.rev{ border-top:1px solid var(--line); padding-top:24px; }
.rev-mark{
  display:block; font-family:var(--serif); font-size:2.8rem;
  line-height:.6; color:var(--clay); margin-bottom:20px;
}
.rev figcaption{
  margin-top:16px; font-family:var(--serif); font-style:italic;
  font-size:var(--t-sm); color:var(--sage-deep);
}

/* ---------- Ajanvaraus ---------- */

.contact-grid{
  display:grid; grid-template-columns:1.08fr .92fr;
  gap:clamp(32px,5vw,72px); align-items:start;
}

.contact-list{ border-top:1px solid var(--line); }
.contact-list > div{
  display:grid; grid-template-columns:118px 1fr; gap:20px;
  padding:20px 0; border-bottom:1px solid var(--line);
}
.contact-list dt{
  font-family:var(--serif); font-style:italic;
  font-size:var(--t-sm); color:var(--sage-deep); padding-top:3px;
}
.contact-list dd span{ display:block; margin-top:6px; font-size:var(--t-sm); color:var(--ink-soft); }
/* Linkin väri on sama kuin leipätekstin, joten alleviivauksen on erotuttava:
   hiusviiva jäisi 1,3:1-kontrastiin eikä kertoisi mitään. */
.contact-list a{ border-bottom:1px solid var(--line-strong); padding-bottom:2px; transition:color .2s var(--ease), border-color .2s var(--ease); }
.contact-list a:hover{ color:var(--clay-ink); border-color:var(--clay-ink); }

.hours{ background:var(--wash); border-radius:var(--r-panel); padding:clamp(28px,3.4vw,40px); }
.hours h3{ font-family:var(--serif); font-weight:300; font-size:var(--t-lg); }
.hours-list{ margin:20px 0 24px; }
.hours-list li{
  display:flex; justify-content:space-between; gap:16px;
  padding:12px 0; border-bottom:1px solid var(--line);
}
.hours-list li:last-child{ border-bottom:0; }
.hours-list li span:first-child{ color:var(--ink-soft); }
.hours-list li span:last-child{ font-weight:500; white-space:nowrap; }
.hours-note{ font-size:var(--t-sm); color:var(--ink-soft); }
.hours-note + .hours-note{ margin-top:12px; }
.hours-note strong{ color:var(--ink); font-weight:500; }

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

.footer{ background:var(--wash-deep); padding:clamp(48px,6vw,72px) 0 clamp(36px,4vw,52px); }
.footer-inner{
  display:flex; flex-direction:column; align-items:center;
  gap:12px; text-align:center;
}
.footer-logo{ font-family:var(--serif); font-size:1.6rem; line-height:1.2; }
.footer-logo em{ font-style:italic; color:var(--clay-ink); }
.footer-line{ font-size:var(--t-sm); color:var(--ink-soft); max-width:44ch; }
.footer-meta{ font-size:var(--t-sm); color:var(--ink-soft); }
.footer-meta a{
  transition:color .2s var(--ease);
  text-decoration:underline; text-decoration-thickness:1px;
  text-underline-offset:4px; text-decoration-color:var(--line-strong);
}
.footer-meta a:hover{ color:var(--clay-ink); text-decoration-color:var(--clay-ink); }
.footer-fine{
  margin-top:14px; padding-top:18px;
  border-top:1px solid var(--line);
  font-size:var(--t-xs); color:var(--ink-soft);
}
.footer-fine strong{ color:var(--ink); font-weight:500; }

/* ---------- Esiin häivytys ----------
   Pelkkä läpinäkyvyys, ei nostoa. Ilmavalla sivulla sisältö ilmestyy
   paikalleen, se ei liu'u sinne. */

.js .fade{
  opacity:0;
  transition:opacity 1s var(--ease);
}
.js .fade.is-shown{ opacity:1; }

/* =========================================================
   Isot näytöt: pehmeä salviantäyttö hoitajan kuvan takana.
   Vain täällä, koska negatiivinen inset vaatii tilaa
   .wrap-paddingista.
   ========================================================= */
@media (min-width:881px){
  .hilja-media::before{
    content:''; position:absolute; inset:-22px -22px 42% -22px;
    background:var(--wash); border-radius:var(--r-arch);
  }
}

/* ---------- Tabletti ja mobiili ---------- */

@media (max-width:880px){
  .treat{ grid-template-columns:1fr; gap:24px; }
  .treat-flip .treat-media{ order:0; }

  .notes{ grid-template-columns:1fr; }

  .hilja-inner{ grid-template-columns:1fr; gap:32px; }
  .hilja-media{ max-width:420px; }

  /* Yksi palaute per rivi, hiusviivalla erotettuna. Kahden sarakkeen
     ruudukko jättäisi kolmannen palautteen yksin puolikkaalle riville. */
  .rev-grid{ grid-template-columns:1fr; gap:0; }
  .rev{ padding:24px 0; }
  .rev blockquote p{ max-width:58ch; }

  .contact-grid{ grid-template-columns:1fr; }
}

@media (max-width:640px){
  .wrap{ padding:0 20px; }

  .nav-links{ gap:4px 18px; font-size:var(--t-xs); }

  .hero-figure img{ aspect-ratio:4/3; }
  .hero-facts{ grid-template-columns:1fr; gap:0; }
  .hero-facts li{ padding:16px 0; border-top:1px solid var(--line); }
  .hero-facts li:first-child{ border-top:0; padding-top:0; }

  .tila-grid{ grid-template-columns:1fr; }
  .tila-col-offset{ margin-top:0; }

  .row{ flex-direction:column; align-items:flex-start; gap:10px; }

  .contact-list > div{ grid-template-columns:1fr; gap:6px; }
  .contact-list dt{ padding-top:0; }
}

@media (max-width:400px){
  .hero-inner .btn,
  .btn-wide{ width:100%; }
  .pull{ padding-left:16px; }
}

/* ---------- Liikkeen vähentäminen ---------- */

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