/* ===== Fontit omalta palvelimelta, vain latin-osajoukko ===== */
@font-face { font-family:'Cormorant Garamond'; font-style:normal; font-weight:300 700; font-display:swap;
  src:url('https://carolanne.fi/fonts/cormorant-normal.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:'Cormorant Garamond'; font-style:italic; font-weight:300 700; font-display:swap;
  src:url('https://carolanne.fi/fonts/cormorant-italic.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:'Manrope'; font-style:normal; font-weight:200 800; font-display:swap;
  src:url('https://carolanne.fi/fonts/manrope-normal.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; }

/* ===== Paletti ja perusteksti: suoraan design-mallista ===== */
:root{
  --paper:#f3efe8; --paper-deep:#e6ded2; --ink:#2c2825;
  --wine:#613d42; --stone:#9b9188; --line:#2c28252e; --white:#fffdf9;
  --display:'Cormorant Garamond',Georgia,serif;
  --ui:'Manrope',system-ui,-apple-system,sans-serif;
}
*{box-sizing:border-box}
body{background:var(--paper);color:var(--ink);margin:0;font-family:var(--ui);font-size:1rem;line-height:1.65}
/* Ylavalikon kaksi kohtaa hyppaa nyt saman sivun osioihin, joten hyppy pehmennetaan ja osion
   ylle jatetaan ilmaa. prefers-reduced-motion kunnioitetaan: silloin hyppy on valiton. */
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

img,video{display:block;max-width:100%}
a{color:inherit}

/* Naytto-otsikot: tiukka kirjainvali ja alle 1 rivivali, kuten mallissa */
.hero h1,.intro h2,.section-heading h2,.about h2,.visit h2{
  font-family:var(--display); font-weight:400; letter-spacing:-.035em; line-height:.92; margin:0;
}
.hero h1 em,.about h2 em,.intro h2 em{font-style:italic;color:var(--wine);font-weight:400}
.about h2 em{color:#ddcfc5}

/* Pikkuotsikot: versaali, 0.2em vali ja 32px hiusviiva ennen tekstia */
.eyebrow,.section-label{
  font-size:.68rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase;
  margin:0 0 clamp(1.5rem,3vw,2.75rem);
}
.eyebrow::before,.section-label::before{
  content:""; display:inline-block; width:32px; height:1px; margin-right:.9rem;
  vertical-align:middle; background:currentColor;
}

/* Painikkeet ja tekstilinkit */
.button{
  display:inline-flex; align-items:center; justify-content:center; gap:.75rem;
  min-height:48px; padding:0 1.6rem; border:1px solid var(--ink);
  font-size:.72rem; font-weight:600; letter-spacing:.13em; text-transform:uppercase;
  text-decoration:none; transition:transform .2s, background .2s, border-color .2s;
}
.button-dark{background:var(--ink);color:var(--white)}
.button:hover{transform:translateY(-2px)}
.button-dark:hover{background:var(--wine);border-color:var(--wine)}
.text-link{
  display:inline-flex; align-items:center; gap:.65rem; padding:.55rem 0 .35rem;
  border-bottom:1px solid; font-size:.74rem; font-weight:600; letter-spacing:.13em;
  text-transform:uppercase; text-decoration:none;
}
.light-link{border-bottom-color:#ffffff66}

/* ===== Header: sivuston oma valikkorakenne, uudelleen tyylitelty ===== */
/* Header pysyy nakyvissa vain kapeilla naytoilla, joissa se on matala ja valikko on
   hampurilaisen takana. Tyopoydalla se on korkea rivi kymmenella nimikkeella, ja jatkuvasti
   naytolla se soisi liikaa tilaa — siella se vierii pois normaalisti.
   z-index jaa lightboxin ja merkintakerroksen alle, jotta ne peittavat sen kun ne ovat auki. */
header.site-header{border-bottom:1px solid var(--line);background:var(--paper);padding:.9rem clamp(1rem,4vw,3rem);
  position:sticky;top:0;z-index:100}
@media (min-width:992px){
  header.site-header{position:static}
}
header.site-header .navbar{gap:.6rem 1rem}
/* Ajanvaraus on valikon viimeinen kohta, ei erillinen iso nappula: tarkalleen .nav-linkin
   fontti ja kirjainvali, mutta varit kaannettyna, jotta se lukee toimintona eika sivuna. */
header.site-header .header-book{white-space:nowrap;font-size:.7rem;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;text-decoration:none;
  background:var(--ink);color:var(--white);padding:.5rem .8rem;
  border:1px solid var(--ink);transition:background .2s,color .2s}
header.site-header .header-book:hover,
header.site-header .header-book:focus-visible{background:transparent;color:var(--ink)}
/* Leveilla naytoilla valikko on rivissa ja ajanvaraus sen oikealla puolella. Raja on sama
   kuin navbar-expand-lg:lla, jotta jarjestys patee tasan silloin kun valikko on rivissa. */
@media (min-width:992px){
  header.site-header .navbar-collapse{order:2}
  header.site-header .header-book{order:3;margin-left:auto}
}
/* Ajanvaraus on oikeanpuoleisin elementti joka leveydella: leveilla naytoilla valikkorivin
   perassa, kapeilla valikkonapin oikealla puolella. Nappula ei siis vaihda puolta ikkunan
   koon mukana — vain valikkorivi ilmestyy sen vasemmalle puolelle. */
@media (max-width:991.98px){
  header.site-header .navbar-toggler{margin-left:auto}
}
/* Sticky header peittaisi ankkurin kohteen, joten jokainen hyppykohde varaa headerin
   korkeuden plus ilmaa. Korkeus tulee muuttujasta jonka site.js mittaa headerista: se
   riippuu ikkunan leveydesta, koska valikko rivittyy. Varamitta 6.5rem on leveimman
   naytonpalkki siina tapauksessa ettei JavaScript aja. */
:root{--header-h:6.5rem}
#treatments,#body{scroll-margin-top:calc(var(--header-h) + 3rem)}
.menu-body,.page-hero,.prose h2,.menu-item{scroll-margin-top:calc(var(--header-h) + 1.25rem)}
header.site-header .navbar{padding:0}
header.site-header .navbar-brand img{max-height:74px;width:auto}
/* Tunnuslause logon alle, Carolin toive 2026-09-07. Brand on Bootstrapin navbar-brand,
   joten pystysuunta tulee flexista; tyyli on sama kuin footerin .tag, jotta sama lause
   nayttaa samalta sivun molemmissa paissa. */
header.site-header .navbar-brand{display:inline-flex;flex-direction:column;align-items:center;gap:.35rem}
header.site-header .brand-tag{font-family:var(--ui);font-size:.58rem;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--stone);white-space:nowrap}
header.site-header .nav-link{
  font-size:.7rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink); padding:.5rem .7rem;
}
header.site-header .nav-link:hover{color:var(--wine);text-decoration:none}
header.site-header .navbar-toggler{border-color:var(--line)}

/* Kielivalitsin tekstina, ei lippuina.
   Liput olivat 18:11 (FI) ja 2:1 (GB) suorakaiteita 40x40 ympyrassa
   object-fit:cover -asetuksella, eli reunoista rajautui n. 40 % pois ja
   kuviot menivat tunnistamattomiksi. Teksti ei voi vaaristya, se skaalautuu
   fonttikoon mukana ja ruudunlukija lukee sen kielena eika kuvana.
   Lisaksi lippu tarkoittaa maata eika kielta: brittilippu Carolin
   englannille on erityisen harhaanjohtava, koska han on amerikkalainen. */
.language-switch{display:flex;align-items:center;gap:.75rem;
  font-size:.7rem;font-weight:600;letter-spacing:.16em}
.language-switch a,.language-switch span{text-decoration:none;padding:.25rem 0}
.language-switch a{color:var(--ink);border-bottom:1px solid transparent}
.language-switch a:hover,.language-switch a:focus-visible{color:var(--wine);border-bottom-color:currentColor}
.language-switch span[aria-current]{color:var(--stone)}
.language-switch a::after{content:"·";margin-left:.75rem;color:var(--line);border:0}

/* ===== Hero: kolme palstaa ja pystyraide, kuten mallissa ===== */
.hero{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(420px,.95fr) 58px;
  min-height:calc(100vh - 120px);border-bottom:1px solid var(--line)}
.hero-copy{display:flex;flex-direction:column;justify-content:center;
  padding:clamp(3rem,7vw,7.5rem) clamp(1.5rem,6vw,6.5rem)}
.hero h1{max-width:30ch;margin-bottom:2.4rem;font-size:clamp(1.7rem,3.6vw,3.3rem);line-height:.96}
.hero-lead{max-width:39rem;margin:0 0 2.25rem;font-size:clamp(.92rem,1.15vw,1.02rem);line-height:1.75}
.hero-lead .sep{color:var(--stone);padding:0 .3em}
/* Ajanvaraus ei ole enaa herossa vaan hoito-osion alussa, juuri ennen osion nimiketta:
   siina kohtaa lukija on jo lukenut mita tarjolla on. */
.section-book{margin-bottom:clamp(1.75rem,3.5vw,2.75rem)}
.hero-image-wrap{position:relative;overflow:hidden;background:#c7bbb0;margin:2rem 0}
.hero-image-wrap video{width:100%;height:100%;object-fit:cover;filter:saturate(.8) brightness(1.1)}
.hero-image-wrap::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(#0000 62%,#1f181626)}
.hero-note{position:absolute;bottom:2rem;left:2rem;z-index:2;color:#fff;display:flex;flex-direction:column}
.hero-note span{font-size:.63rem;letter-spacing:.2em;text-transform:uppercase}
.hero-note strong{font-family:var(--display);font-size:1.3rem;font-weight:500;line-height:1.2}
.hero-rail{border-left:1px solid var(--line);display:flex;flex-direction:column;
  justify-content:space-between;align-items:center;padding:2rem 0}
.hero-rail a,.hero-rail span{writing-mode:vertical-rl;transform:rotate(180deg);
  font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;text-decoration:none}

/* ===== Intro ===== */
.intro{padding:clamp(4rem,8vw,8rem) clamp(1.5rem,7vw,7rem);border-bottom:1px solid var(--line)}
.intro-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(2rem,5vw,5rem);align-items:start}
.intro h2{font-size:clamp(1.7rem,3.1vw,2.8rem);max-width:22ch}
.intro-copy p{margin:0 0 1.6rem;max-width:46ch;font-size:.95rem}
.principles{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;
  margin-top:clamp(3rem,7vw,6rem);padding-top:1.4rem;border-top:1px solid var(--line);
  font-size:.7rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase}

/* ===== Hoidot ===== */
/* Kolme hoito-osiota ovat yksi kokonaisuus: ryhman sisainen vali on pienempi kuin sen
   ymparille jaava ilma, jotta ne lukevat rinnakkaisina eivatka kolmena eri asiana. */
.treatments{padding:clamp(4rem,8vw,8rem) clamp(1.5rem,7vw,7rem) 0}
.treatments + .treatments{padding-top:clamp(1.5rem,3vw,2.75rem)}
.section-heading{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(2rem,5vw,5rem);
  align-items:end;margin-bottom:clamp(1.5rem,3vw,2.5rem)}
.section-heading h2{font-size:clamp(1.7rem,3.1vw,2.8rem)}
.section-heading > p{margin:0;max-width:44ch;font-size:.88rem;color:#5c554f}
.treatment-list{display:grid;gap:0}
.treatment-card{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(1.5rem,4vw,4rem);border-top:1px solid var(--ink);padding:2.2rem 0}
.treatment-image-link{position:relative;display:block;overflow:hidden;background:#ded4c8}
.treatment-image-link img{width:100%;height:100%;min-height:260px;object-fit:cover;
  filter:sepia(.12) saturate(.85);transition:transform .8s,filter .4s}
.treatment-card:hover .treatment-image-link img{transform:scale(1.025);filter:sepia(0) saturate(.95)}
.treatment-image-link > span{position:absolute;top:1rem;left:1rem;color:#fff;
  font-size:.68rem;font-weight:600;letter-spacing:.18em}
.treatment-content{position:relative;padding:0 5.25rem 1rem 0}
.treatment-content h3{margin:0 0 1rem;font-family:var(--display);font-weight:500;
  font-size:clamp(1.6rem,2.7vw,2.7rem);line-height:1}
.treatment-content h3 a{text-decoration:none}
.treatment-content h3 a:hover{color:var(--wine)}
.treatment-content > p{margin:0;max-width:38rem}
.treatment-content ul{display:flex;flex-wrap:wrap;gap:.45rem;margin:1.6rem 0 0;padding:0;list-style:none}
.treatment-content li{border:1px solid var(--line);padding:.42rem .65rem;
  font-size:.65rem;letter-spacing:.08em;text-transform:uppercase}
.treatment-content li a{text-decoration:none}
.treatment-content li a:hover{color:var(--wine)}
.circle-link{position:absolute;right:0;bottom:1rem;display:grid;place-items:center;
  width:48px;height:48px;border:1px solid var(--ink);border-radius:50%;
  text-decoration:none;transition:background .2s,color .2s}
.circle-link:hover{background:var(--ink);color:var(--white)}

/* ===== Hoitohaitari =====
   <details>/<summary>: natiivi avaus, ei JavaScriptia. Summary on grid, jotta
   nimi ja hinta+plus pysyvat samalla perusviivalla myos kun nimi rivittyy. */
/* Alaosan ilma tuli ennen .menu-foot -linkkilohkosta, joka poistettiin, ja osion oma
   padding-bottom on 0 — siksi viimeinen hoito osui kiinni seuraavaan osioon. */
.menu{margin-top:clamp(1rem,3vw,2rem);padding-bottom:clamp(1.25rem,2.5vw,2rem)}
.treatments:last-of-type .menu{padding-bottom:clamp(3rem,6vw,6rem)}
.menu-item{border-top:1px solid var(--ink)}
.menu-item:last-of-type{border-bottom:1px solid var(--ink)}
.menu-item summary{display:grid;grid-template-columns:1fr auto;align-items:baseline;
  gap:1.5rem;padding:1.5rem 0;cursor:pointer;list-style:none}
.menu-item summary::-webkit-details-marker{display:none}
.menu-item summary:hover .menu-name{color:var(--wine)}
.menu-name{font-family:var(--display);font-weight:500;line-height:1.05;
  font-size:clamp(1.12rem,1.7vw,1.5rem);letter-spacing:-.02em}
.menu-alt{display:block;margin-top:.5rem;font-family:var(--ui);font-weight:600;
  font-size:.63rem;letter-spacing:.18em;text-transform:uppercase;color:var(--stone)}
.menu-meta{display:flex;align-items:center;gap:1.25rem;white-space:nowrap}
.menu-price{font-family:var(--ui);font-weight:600;font-size:.68rem;
  letter-spacing:.14em;text-transform:uppercase}
.plus{position:relative;display:inline-block;width:16px;height:16px;flex:0 0 auto}
.plus::before,.plus::after{content:"";position:absolute;background:currentColor;
  transition:transform .2s,opacity .2s}
.plus::before{top:7.5px;left:0;width:16px;height:1px}
.plus::after{top:0;left:7.5px;width:1px;height:16px}
.menu-item[open] > summary .plus::after{transform:rotate(90deg);opacity:0}
.menu-body{padding:0 0 2rem;max-width:70ch}
.menu-body p{font-size:.93rem}
/* Hintalistat: vartalohoidoissa on hoitoja joilla on nelja kestoa ja viela sarjahinnat, jotka
   eivat mahdu summaryn yhteen hintakenttaan. Ne luetellaan avatussa lohkossa. */
.menu-sublabel{margin:0 0 .5rem;font-family:var(--ui);font-size:.6rem;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--stone)}
.menu-durations{list-style:none;margin:0 0 1.35rem;padding:0;display:grid;gap:.35rem;
  font-family:var(--ui);font-size:.73rem;letter-spacing:.05em}
.menu-durations li{display:flex;gap:.9rem;align-items:baseline}
.menu-durations li span{flex:0 0 4.5rem;font-size:.63rem;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--stone)}
/* Hoitolohkojen linkit ilman viivaa (Carol 2026-09-08): osiossa on kymmenia naita
   nimikelinkkeja, ja jokainen alleviivattuna teki avatusta hoidosta rauhattoman. Ne
   tunnistaa yha versaaleista ja kirjainvalista. Viiva tulee vain hoverissa ja
   fokuksessa, ja transparentti vari pitaa asettelun paikallaan — ei hyppya. */
/* Kaksi linkkia peräkkäin luki yhtena rivina ("Discover DMK enzyme therapy See before and after
   pictures"), koska .text-link on inline-flex eika niiden valissa ollut muuta kuin valilyonti.
   Nyt jokainen linkki on omalla rivillaan: nimikkeet ovat pitkia, joten erotinmerkki olisi
   pakottanut ne rivittymaan kesken nimen kapealla naytolla. width:fit-content pitaa hoverin
   alleviivauksen nimikkeen levyisena eika koko palstan. */
.menu-body .text-link{border-bottom-color:transparent;display:flex;width:fit-content;
  color:var(--wine)}
.menu-body .text-link + .text-link{margin-top:.15rem}
/* Pelkka versaali nimike ei erottunut linkiksi kun viiva otettiin pois. Nyt tunnisteet ovat
   aksenttivari ja nuoli — .text-link on inline-flex jossa on jo gap, joten nuoli asettuu
   valmiiseen paikkaan eika markupia tarvitse koskea. Hoverissa viiva palaa ja nuoli nytkahtaa. */
.menu-body .text-link::after{content:"\2192";transition:transform .2s}
.menu-body .text-link:hover::after,
.menu-body .text-link:focus-visible::after{transform:translateX(.22rem)}
.menu-body .text-link:hover,.menu-body .text-link:focus-visible{border-bottom-color:currentColor;color:var(--wine)}

/* Ryhmaotsikot ja DMK:n alataso (Carolin valikkoluonnos 2026-09-08). Ryhmat ovat kevyt
   jaottelu saman haitarin sisalla, eivat oma navigaatio. Alataso perii saman
   <details>-logiikan: ohuemmat viivat, pienempi nimi ja hiukan sisennysta, jotta
   hierarkia lukee ilman uutta komponenttia. */
.menu-group{margin:clamp(2.25rem,4vw,3.25rem) 0 .1rem;font-family:var(--ui);font-size:.6rem;
  font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--stone)}
.menu-group:first-child{margin-top:0}
.menu-body-group{padding-bottom:1.5rem;max-width:none}
.menu-sub{padding-left:clamp(0px,1.6vw,1.5rem)}
.menu-item-sub{border-top-color:var(--line)}
.menu-sub .menu-item:last-of-type{border-bottom-color:var(--line)}
.menu-item-sub summary{padding:1.05rem 0}
.menu-item-sub .menu-name{font-size:clamp(.95rem,1.25vw,1.18rem)}
.menu-item-sub .plus{width:13px;height:13px}
.menu-item-sub .plus::before{top:6px;width:13px}
.menu-item-sub .plus::after{left:6px;height:13px}
.menu-item-sub .menu-body{padding-bottom:1.5rem}
/* Varmistus niille selaimille jotka eivat vielä avaa suljettua details-lohkoa
   fragmenttinavigoinnissa: targetoitu sisalto nakyy silti, ja plus kaantyy
   miinukseksi :has()-valitsimella jottei tila nayta ristiriitaiselta. */
.menu-body:target{display:block}
.menu-item:has(> .menu-body:target) > summary .plus::after{transform:rotate(90deg);opacity:0}
/* Hinnastosta tullaan hoidon otsikkoon (#slug on <details>-elementilla), ja hoito avautuu
   kohdistuksesta. Aiemmin linkki osoitti sisaltoon, jolloin otsikko jai ruudun ylapuolelle. */
.menu-item:target > .menu-body{display:block}
.menu-item:target > summary .plus::after{transform:rotate(90deg);opacity:0}
.menu-body p{margin:0 0 1rem}
.best-for{font-size:.88rem;color:#5c554f}
.best-for span{display:inline-block;margin-right:.55rem;font-family:var(--ui);font-weight:600;
  font-size:.63rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink)}

/* ===== Sitaatti ===== */
.quote-section{background:var(--paper-deep);text-align:center;padding:clamp(2.75rem,6vw,6rem) 1.5rem}
.quote-mark{color:var(--wine);font-family:var(--display);font-size:4rem;line-height:.55;margin:0 0 1rem}
blockquote{max-width:1060px;margin:0 auto 2rem;font-family:var(--display);font-style:italic;
  font-weight:400;font-size:clamp(1.2rem,2.4vw,2.3rem);line-height:1.2;letter-spacing:-.02em}
.quote-author{margin:0;font-size:.65rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase}
/* Loput palautteet: sama kirjaintyyppi ja kursiivi kuin nostossa, mutta
   pienempana ja kolmella palstalla, jotta kaikki mahtuvat nakyviin. */
/* ===== Palautekaruselli =====
   Rata on scroll-snap: yksi palaute kerrallaan, pyyhkaisy toimii ilman koodia. site.js
   vaihtaa korttia ajastimella ja lopettaa vaihdon heti kun kayttaja koskee rataan tai vie
   osoittimen sen paalle — automatiikka ei saa vieda lukijalta lausetta kesken. */
.quote-carousel{max-width:56rem;margin:0 auto}
.quote-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
  scrollbar-width:none}
.quote-track::-webkit-scrollbar{display:none}
.quote-slide{flex:0 0 100%;scroll-snap-align:center;margin:0;padding:0 clamp(.5rem,3vw,2rem);
  box-sizing:border-box}
.quote-slide blockquote{margin:0 auto 1.25rem;max-width:34ch}
.quote-slide figcaption{font-family:var(--ui);font-size:.65rem;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:#5c554f}
.quote-dots{display:flex;justify-content:center;gap:.55rem;margin-top:clamp(1.5rem,3vw,2.25rem)}
.quote-dots button{width:.5rem;height:.5rem;padding:0;border-radius:50%;cursor:pointer;
  border:1px solid var(--ink);background:transparent;transition:background .2s,transform .2s}
.quote-dots button.is-current{background:var(--ink);transform:scale(1.3)}

/* ===== About: viinipunainen vyö ===== */
.about{position:relative;overflow:hidden;display:grid;grid-template-columns:1fr 1fr;
  background:var(--wine);color:var(--white);min-height:700px}
/* Logo vesileimana. Ei maskia: maski leikkaa alfan mukaan, ja se litisti piirroksen yhdeksi
   tasaiseksi laikaksi. Nyt kuva on sellaisenaan ja sulautuu taustaan soft-light -sekoituksella,
   jolloin kehyksen viivat ja kasvojen savyt sailyvat. Tiedosto on se jossa on oikeasti
   lapinakyvyys — logo-header.png on valkopohjainen. */
.about-monogram{display:grid;place-items:center;user-select:none;pointer-events:none}
.about-monogram::before{content:"";display:block;width:min(70%,22rem);aspect-ratio:512/640;
  background:url('https://carolanne.fi/images/carol_anne_logo_transparent.png') center/contain no-repeat;
  mix-blend-mode:soft-light;opacity:.55}
.about-copy{align-self:center;max-width:50rem;padding:clamp(3rem,7vw,7rem) clamp(1.5rem,8vw,9rem) clamp(3rem,7vw,7rem) 2rem}
.about h2{margin-bottom:2rem;font-size:clamp(1.85rem,3.4vw,3rem)}
.about-copy > p:not(.section-label){color:#ffffffd1;max-width:35rem}
.credentials{display:flex;flex-wrap:wrap;gap:.75rem 1.5rem;margin:2.5rem 0;padding:1.5rem 0;
  border-top:1px solid #ffffff40;border-bottom:1px solid #ffffff40;
  font-size:.67rem;letter-spacing:.13em;text-transform:uppercase}

/* ===== Luettavaa ===== */
.reading{padding:clamp(3.5rem,7vw,7rem) clamp(1.5rem,7vw,7rem);border-bottom:1px solid var(--line)}
.reading-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,3vw,3rem);margin-top:2rem}
.reading-card{display:block;padding:1.6rem 1.8rem;border:1px solid var(--line);text-decoration:none;
  transition:border-color .2s,background .2s}
.reading-card:hover{border-color:#2c282580;background:#fffdf980}
.reading-card .k{display:block;margin-bottom:.7rem;font-size:.63rem;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--stone)}
.reading-card .t{display:block;font-family:var(--display);font-size:1.2rem;line-height:1.25}

/* ===== Visit ===== */
.visit{position:relative;display:grid;grid-template-columns:1.05fr .95fr;column-gap:7vw;
  padding:clamp(4rem,9vw,9rem) clamp(1.5rem,7vw,7rem)}
.visit h2{font-size:clamp(1.8rem,3.4vw,3rem)}
.visit-details{display:grid;grid-template-columns:repeat(2,1fr);gap:2rem 3rem;align-content:center}
.visit-details div{border-top:1px solid var(--line);padding-top:1rem}
.visit-details span{font-size:.65rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase}
.visit-details p{margin-top:.8rem;margin-bottom:0}
/* Visit-lohkon linkit olivat ilman alleviivausta, joten "Book online" ja "contact me" eivat
   nayttaneet klikattavilta lainkaan. Alleviivaus offsetilla (ei border-bottom, joka katkeaa
   rivinvaihdossa vaarin), vaimealla viivalla ja hoverissa sivuston aksenttivarilla. Sama
   kohtelu kaikille lohkon linkeille: puhelin, viestilinkki ja ajanvaraus. */
.visit-details a{text-decoration:underline;text-decoration-thickness:1px;
  text-underline-offset:.2em;text-decoration-color:#2c282566;transition:color .2s}
.visit-details a:hover,.visit-details a:focus-visible{color:var(--wine);text-decoration-color:currentColor}
/* Painike oli mallissa position:absolute (bottom:5rem;right:7vw), mikä toimi
   siella kolmella tietolohkolla. Meilla on nelja, joten oikea palsta on
   korkeampi ja absoluuttinen painike osui vaaraan kohtaan. Nyt se on
   normaalissa virtauksessa otsikon alla: lukujarjestys on nimio -> otsikko ->
   toimintakutsu, se linjautuu otsikon vasempaan reunaan, eika tarvita
   maagisia lukuja eika varattua alapaddingia. */
.visit-button{margin-top:clamp(2rem,4vw,3rem);align-self:start}

footer.site-footer{background:var(--paper-deep);color:var(--ink);text-align:center;
  padding:4rem clamp(1.5rem,4vw,4rem) 2rem}
footer.site-footer .fw{font-family:var(--display);font-size:2rem;letter-spacing:.13em}
footer.site-footer .tag{font-size:.6rem;letter-spacing:.23em;text-transform:uppercase;color:#2c282599}
footer.site-footer .links{display:flex;justify-content:center;flex-wrap:wrap;gap:1.5rem;margin:2.5rem 0 1.5rem;
  font-size:.7rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase}
footer.site-footer .links a{text-decoration:none}
footer.site-footer .copyright{font-size:.65rem;letter-spacing:.1em;color:#2c28258a}

/* Mobiilissa sticky header ei voi olla 104 px korkea: logo 74 -> 38 px, tunnuslause pois ja
   padding kiristyy, jolloin palkki on noin 58 px. Ankkurivarat pienenevat samassa suhteessa,
   muuten hyppy jattaisi puolet ruudusta tyhjaa. */
@media (max-width:575.98px){
  header.site-header{padding:.5rem .9rem}
  header.site-header .navbar-brand{gap:0}
  header.site-header .navbar-brand img{max-height:30px}
  header.site-header .brand-tag{display:none}
  header.site-header .header-book{font-size:.6rem;padding:.4rem .55rem;letter-spacing:.1em}
  /* Mobiilissa varamitta on matalampi; mitattu arvo ohittaa taman joka tapauksessa. */
  :root{--header-h:3.5rem}
}

@media (max-width:1200px){
  .hero{grid-template-columns:1fr 1fr 48px}
  .hero h1{font-size:clamp(1.6rem,3.5vw,2.8rem)}
}
@media (max-width:900px){
  .hero{grid-template-columns:1fr;min-height:auto}
  .hero-copy{padding:3.5rem 1.5rem 2.5rem}
  .hero h1{font-size:clamp(1.5rem,5.4vw,2.25rem);max-width:none}
  .hero-image-wrap{height:64vh;min-height:420px;margin:0 1rem 1rem}
  .hero-rail{display:none}
  .intro-grid,.section-heading,.about,.visit,.treatment-card,.reading-grid{grid-template-columns:1fr}
  .principles{grid-template-columns:1fr;gap:.8rem}
  .treatment-content{padding-right:4.2rem}
  .about{min-height:auto}
  .about-monogram{position:absolute;inset:0}
  .about-monogram::before{width:min(78%,17rem);opacity:.45}
  .about-copy{position:relative;z-index:1;padding:4.5rem 1.5rem}
  .visit{gap:3rem}
  .visit-details{grid-template-columns:1fr}
}

/* ===== Kapean nayton header ja osionappi =====
   Nama ovat tarkoituksella tyylitiedoston lopussa. Perussaannot
   (header.site-header .navbar-brand img{max-height:74px} ja
   .section-book{margin-bottom:clamp(...)}) ovat tassa tiedostossa myohempana kuin
   992 px:n media-lohko, ja koska tarkkuus on sama, myohempi voittaa: samat saannot
   aiemmin kirjoitettuina eivat purreet lainkaan. Media-ehto ei kasvata tarkkuutta. */
@media (max-width:991.98px){
  /* Tassa leveydessa header on sticky, eli se on naytolla koko ajan ja jokainen pystypikseli
     on pois sisallosta. Ratkaisu ei ole kutistaa tunnusta vaan antaa sille oma rivi: ylhaalla
     se nakyy keskitettyna ja kunnollisen kokoisena, ja vierittaessa koko rivi painuu kasaan.
     Hampurilainen ja ajanvaraus jaavat omalle rivilleen, eli ne ovat kaytettavissa koko ajan. */
  header.site-header{padding:.6rem 1rem}
  header.site-header .navbar{flex-wrap:wrap}
  header.site-header .brand-tag{display:none}

  /* Avoin korkeus tulee muuttujasta, ei omasta saannostaan. Kun etusivun isompi korkeus
     kirjoitettiin selektoriin body.page-index ... .navbar-brand, se oli tarkempi kuin
     .is-scrolled-saanto ja voitti sen: kuva haipyi mutta rivin korkeus jai paikalleen.
     Muuttujana korkeus ei osallistu tarkkuuskilpaan lainkaan. */
  header.site-header .navbar-brand{
    flex:0 0 100%; margin:0 0 .45rem; max-height:var(--brand-h,5rem); opacity:1; overflow:hidden;
    transition:max-height .22s ease, opacity .16s ease, margin-bottom .22s ease, visibility 0s}
  header.site-header .navbar-brand img{max-height:56px}

  /* Etusivulla tunnus saa olla isompi kuin alasivuilla: se on siella sivuston nimikilpi eika
     kilpaile oman otsikon kanssa, ja koska se katoaa heti vierittaessa, se ei vie tilaa
     lukemiselta. Alasivuilla sama koko jaisi paallekkain sivun oman otsikon kanssa. */
  /* --brand-h on rivin avoin korkeus, eli myos se raja johon overflow:hidden leikkaa. Sen on
     oltava logoa suurempi tai tunnus jaa katki. Kuvan luontainen korkeus on 183 px, joten
     176 px on viela sen alla eika skaalaudu ylospain. */
  body.page-index{--brand-h:12rem}
  body.page-index header.site-header .navbar-brand img{max-height:176px}

  /* visibility viivastetaan siirtyman loppuun: ilman sita piilotettu linkki jaisi
     nappainjarjestykseen, eli tab veisi kohteeseen jota ei nay. */
  header.site-header.is-scrolled .navbar-brand{
    max-height:0; opacity:0; margin-bottom:0; visibility:hidden;
    transition:max-height .22s ease, opacity .12s ease, margin-bottom .22s ease,
               visibility 0s linear .22s}

  /* Hampurilainen vasemmalle, ajanvaraus oikealle. Ajanvaraus on yha rivin oikeanpuoleisin
     elementti, mutta margin-left:auto kasaisi molemmat oikeaan reunaan ja jattaisi
     kutistuneen palkin vasemman puolen tyhjaksi. */
  header.site-header .navbar-toggler{margin-left:0}

  /* Ajanvarausnapin alamarginaali on clamp(1.75rem,3.5vw,2.75rem), ja koska 3.5vw jaa
     alarajan alle kaikilla alle 800 px levyisilla naytoilla, mobiili sai aina 28 px kun
     tyopoyta sai 44. Tummaa 48 px korkeaa nappia seuraava iso otsikko tarvitsee saman. */
  .section-book{margin-bottom:2.5rem}
}

@media (max-width:575.98px){
  header.site-header .navbar-brand img{max-height:48px}
  body.page-index header.site-header .navbar-brand img{max-height:144px}
}

@media (prefers-reduced-motion:reduce){
  header.site-header .navbar-brand{transition:none}
}