/* =========================================================
   Studio Roosa — kosmetologidemo

   KARAMELLI, EI KYNTTILÄÄ.

   Sisardemo Hiljan Hetki hoitaa saman toimialan naapurin
   (hoitola, yksi tekijä) hiljaisella salvia-minimalismilla.
   Tämä sivu menee tarkoituksella vastakkaiseen suuntaan:
   kylläinen pinkki, pyöreät muodot, kallistetut tarrat ja
   juokseva nauha. Kaksi hoitolaa ei saa näyttää samalta,
   koska juuri se on demojen myyntiargumentti.

   Ilmeen kolme kantavaa valintaa:

   1. MUOTO. Mikään ei ole suorakulmio. Hero-kuva on
      epäsymmetrinen blob, napit ovat täysiä pillereitä ja
      paneelit pyöristyvät 28–40 pikseliä.
   2. KAKSI ÄÄNTÄ. Bodoni Moda kursiivina otsikoissa antaa
      muotilehden, Figtree leipätekstissä pitää sen luettavana.
   3. KALLISTUS. Tarrat, polaroidit ja nauha ovat vinossa.
      Kulmat ovat pieniä (2–4°) — enemmän näyttäisi vialta.

   Kontrasti: --plum on tekstiväri, --magenta on ainoa pinkki
   jota saa käyttää tekstinä tai kontrollin reunana (5,0:1
   kermaa vasten). --hot ja --bubble ovat pelkkiä täyttöjä.
   ========================================================= */

:root{
  --display:'Bodoni Moda', Georgia, 'Times New Roman', serif;
  --body:'Figtree', ui-sans-serif, system-ui, -apple-system, sans-serif;

  /* Pinnat */
  --cream:#FFF6F3;
  --blush:#FFE9F0;
  --bubble:#FFC9DE;
  --plum-deep:#2E0A1C;

  /* Teksti */
  --plum:#3A0D24;            /* 15,6:1 kermaa vasten */
  --plum-soft:#6E4257;       /* 7,7:1 kermaa vasten */
  --cream-on-dark:#FFEFF5;   /* 15,0:1 luumua vasten */
  --soft-on-dark:#E7BDCF;    /* 9,9:1 luumua vasten */

  /* Pinkit. Vain --magenta kelpaa tekstiksi ja kontrollin reunaksi. */
  --magenta:#D0135F;         /* 5,0:1 kermaa vasten, valkoinen päällä 5,3:1 */
  --hot:#FF4D9D;             /* koriste */
  --glow:#FFB6D5;            /* koriste */

  --line:rgba(58,13,36,.14);
  /* Kontrollin reuna, ei koriste: ghost-napin ja välilehtipillerin
     hahmottaminen lepää yksin tämän varassa, joten sen on yllettävä
     WCAG 1.4.11:n 3:1:een. Kermaa vasten litistettynä tämä on 3,9:1
     — .42:n läpinäkyvyydellä oltiin 2,6:1:ssä eli reilusti alle. */
  --line-strong:rgba(58,13,36,.55);

  --max:1180px;
  --pad:24px;

  --r-pill:999px;
  --r-card:28px;
  --r-panel:40px;

  --ease:cubic-bezier(.34,.12,.2,1);
  --shadow:0 18px 44px -24px rgba(58,13,36,.42);
  --shadow-lift:0 26px 60px -26px rgba(58,13,36,.5);
}

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

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

body{
  margin:0;
  background:var(--cream);
  color:var(--plum);
  font-family:var(--body);
  font-size:1.0625rem;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

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

h1,h2,h3{
  font-family:var(--display);
  font-weight:600;
  line-height:1.05;
  letter-spacing:-.015em;
  margin:0;
}
h1{ font-size:clamp(2.7rem,6.4vw,4.6rem); }
/* Bodoni Modan opsz-akseli ohentaa hiusviivat sitä enemmän mitä
   suurempi kirjasinkoko on. Selaimen automatiikka asettaa opsz:n
   pistekoon mukaan, jolloin 45 pikselin otsikko piirtyy lehden
   kansikirjasimena ja katoaa vaaleaa pohjaa vasten. Otsikoille
   pakotetaan siksi pienempi opsz ja isompi paino — h1 saa jäädä
   automatiikkaan, koska se on tarpeeksi suuri kantaakseen ohuen
   piirron. */
h2{
  font-size:clamp(2rem,4.2vw,3.05rem);
  font-weight:700;
  font-variation-settings:"opsz" 26;
}
h3{ font-size:1.35rem; line-height:1.2; font-variation-settings:"opsz" 18; }

/* Kursiivi on tämän sivun korostuskeino. Se ei ole koriste vaan
   ainoa tapa jolla otsikko nostaa yhden sanan muiden yli. */
h1 em, h2 em{
  font-style:italic;
  font-weight:500;
  color:var(--magenta);
}

p{ margin:0 0 1em; }
a{ color:inherit; }

.wrap{
  width:min(100% - var(--pad)*2, var(--max));
  margin-inline:auto;
}

.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--plum); color:var(--cream-on-dark);
  padding:14px 20px; border-radius:0 0 var(--r-card) 0;
  font-weight:600; text-decoration:none;
}
.skip:focus{ left:0; }

/* Ruudunlukijalle näkyvä, silmälle piilotettu teksti. Käytössä
   tähtiriveissä: ★-merkit ovat aria-hidden, koska ruudunlukija
   sanoisi ne yksitellen "musta tähti, musta tähti…". */
.sr-only{
  position:absolute; width:1px; height:1px;
  margin:-1px; padding:0; border:0;
  clip-path:inset(50%); overflow:hidden; white-space:nowrap;
}

:where(a,button,summary,input,[tabindex]):focus-visible{
  outline:3px solid var(--magenta);
  outline-offset:3px;
  border-radius:6px;
}

.kicker{
  font-size:.76rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  font-weight:700;
  color:var(--magenta);
  margin:0 0 14px;
}
.kicker-light{ color:var(--glow); }

.sec-head{ max-width:44ch; margin-bottom:44px; }
.sec-lead{ color:var(--plum-soft); font-size:1.08rem; margin:16px 0 0; }

/* ===== NAPIT =============================================== */

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--body); font-weight:700; font-size:.98rem;
  padding:13px 26px;
  border-radius:var(--r-pill);
  border:2px solid transparent;
  text-decoration:none;
  cursor:pointer;
  transition:transform .22s var(--ease), background-color .22s var(--ease), color .22s var(--ease);
}
.btn-lg{ padding:16px 32px; font-size:1.02rem; }
.btn-block{ width:100%; }

.btn-pink{ background:var(--magenta); color:#fff; }
.btn-ghost{ background:transparent; color:var(--plum); border-color:var(--line-strong); }
.btn-dark{ background:var(--plum); color:var(--cream-on-dark); }

@media (hover:hover){
  .btn:hover{ transform:translateY(-2px); }
  .btn-pink:hover{ background:#B00E51; }
  .btn-ghost:hover{ background:var(--blush); border-color:var(--magenta); }
  .btn-dark:hover{ background:var(--plum-deep); }
}

/* ===== NAVIGAATIO ========================================== */

.nav{
  position:sticky; top:0; z-index:60;
  background:rgba(255,246,243,.86);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.nav-in{
  display:flex; align-items:center; gap:20px;
  min-height:74px;
}
.logo{
  display:flex; align-items:center; gap:11px;
  text-decoration:none; font-weight:700;
  letter-spacing:.01em;
  margin-right:auto;
}
.logo-mark{
  display:grid; place-items:center;
  width:34px; height:34px;
  border-radius:12px;
  background:var(--magenta); color:#fff;
  font-family:var(--display); font-style:italic; font-size:1.25rem;
  line-height:1;
  padding-bottom:2px;
}
.logo-text{ font-size:1.05rem; }

.nav-links{ display:flex; gap:28px; }
.nav-links a{
  text-decoration:none; font-weight:600; font-size:.96rem;
  color:var(--plum-soft);
  padding:6px 0;
  border-bottom:2px solid transparent;
}
@media (hover:hover){
  .nav-links a:hover{ color:var(--magenta); border-bottom-color:var(--magenta); }
}

.nav-end{ display:flex; align-items:center; gap:12px; }

.burger{
  display:none;
  width:44px; height:44px;
  border:2px solid var(--line-strong);
  border-radius:14px;
  background:transparent;
  cursor:pointer;
  padding:0;
  place-items:center;
  gap:5px;
}
.burger span{
  display:block; width:18px; height:2px;
  background:var(--plum); border-radius:2px;
  transition:transform .24s var(--ease), opacity .18s var(--ease);
}
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

.mobmenu{
  position:fixed; inset:74px 0 0; z-index:55;
  background:var(--cream);
  padding:32px var(--pad);
  overflow-y:auto;
}
.mobmenu-in{ display:flex; flex-direction:column; gap:4px; }
.mobmenu-in a{
  font-family:var(--display);
  font-size:1.9rem;
  text-decoration:none;
  padding:12px 0;
  border-bottom:1px solid var(--line);
}
.mobmenu-tel{ color:var(--magenta); font-family:var(--body)!important; font-size:1.1rem!important; font-weight:700; border-bottom:0!important; }

@media (max-width:900px){
  .nav-links{ display:none; }
  .burger{ display:grid; }
}
@media (max-width:420px){
  .nav-cta{ display:none; }
}

/* ===== HERO ================================================ */

.hero{
  position:relative;
  padding:clamp(46px,7vw,86px) 0 clamp(60px,8vw,104px);
  overflow:hidden;
}
/* Kaksi sumeaa hehkua pohjalla. Ne antavat pinkille syvyyttä
   ilman että kuvia tarvitsee ladata lisää. */
.hero::before,
.hero::after{
  content:""; position:absolute; z-index:0;
  border-radius:50%;
  filter:blur(70px);
  opacity:.55;
  pointer-events:none;
}
.hero::before{ width:520px; height:520px; background:var(--glow); top:-180px; right:-120px; }
.hero::after{ width:380px; height:380px; background:var(--bubble); bottom:-160px; left:-140px; opacity:.45; }

.hero-in{
  position:relative; z-index:1;
  display:grid;
  grid-template-columns:1fr minmax(0,470px);
  gap:clamp(32px,5vw,72px);
  align-items:center;
}
/* Leveys on mitoitettu otsikon mukaan: kapeammalla palstalla
   "Lähdet ovesta" katkeaa kahdelle riville ja otsikosta tulee
   kolmirivinen torni. */
.hero-copy{ max-width:30rem; }
.hero h1{ margin-bottom:22px; }
.hero-lead{ font-size:1.12rem; color:var(--plum-soft); max-width:38ch; }
.hero-cta{ display:flex; flex-wrap:wrap; gap:12px; margin-top:30px; }

.hero-trust{
  list-style:none; margin:30px 0 0; padding:0;
  display:flex; flex-wrap:wrap; gap:10px 22px;
  font-size:.92rem; font-weight:600; color:var(--plum-soft);
}
.hero-trust li{ display:flex; align-items:center; gap:8px; }
.hero-trust svg{ width:17px; height:17px; color:var(--magenta); flex:none; }

.hero-art{ position:relative; }
.hero-blob{
  /* Epäsymmetrinen pyöristys on koko ilmeen tunnusmerkki: sama
     muoto toistuu polaroidien takana olevassa hehkussa. */
  border-radius:58% 42% 46% 54% / 44% 52% 48% 56%;
  overflow:hidden;
  aspect-ratio:4/5;
  box-shadow:var(--shadow-lift);
  transform:rotate(-2deg);
}
.hero-blob img{ width:100%; height:100%; object-fit:cover; }

.hero-badge{
  position:absolute; top:-14px; left:-18px;
  width:112px; height:112px;
  display:grid; place-content:center; gap:2px;
  text-align:center;
  border-radius:50%;
  background:var(--plum);
  color:var(--cream-on-dark);
  transform:rotate(-11deg);
  margin:0;
  box-shadow:var(--shadow);
  /* Katkoviivarengas tarran sisällä — halvin tapa saada
     tarramainen reunus ilman kuvaa. */
  outline:2px dashed var(--glow);
  outline-offset:-9px;
}
.hero-badge span{ font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; font-weight:700; line-height:1.35; }
.hero-badge b{ font-family:var(--display); font-size:1.5rem; font-weight:600; }

.hero-chip{
  position:absolute; right:-6px; bottom:14px;
  display:flex; align-items:center; gap:11px;
  background:#fff;
  border-radius:var(--r-pill);
  padding:12px 20px 12px 16px;
  box-shadow:var(--shadow);
  font-size:.86rem; line-height:1.35;
  transform:rotate(2deg);
}
.hero-chip b{ font-weight:700; }
.hero-chip-dot{
  width:10px; height:10px; border-radius:50%;
  background:var(--magenta); flex:none;
  box-shadow:0 0 0 5px rgba(208,19,95,.18);
}

@media (max-width:900px){
  .hero-in{ grid-template-columns:1fr; }
  .hero-copy{ max-width:none; }
  .hero-art{ width:min(82vw,420px); margin-inline:auto; }
  .hero-badge{ width:96px; height:96px; left:-10px; }
}

/* ===== JUOKSEVA NAUHA ====================================== */

.marquee{
  background:var(--magenta);
  color:#fff;
  padding:15px 0;
  overflow:hidden;
  transform:rotate(-1.1deg) scale(1.03);
  margin-block:10px;
}
.marquee-track{
  display:flex; width:max-content;
  animation:slide 34s linear infinite;
}
.marquee-track span{
  font-family:var(--display);
  font-style:italic;
  font-size:1.5rem;
  white-space:nowrap;
  padding-right:8px;
}
@keyframes slide{ to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion:reduce){
  .marquee-track{ animation:none; }
}

/* ===== HOIDOT ============================================== */

.hoidot{ padding:clamp(64px,9vw,116px) 0; }

.tablist{
  display:flex; flex-wrap:wrap; gap:10px;
  margin-bottom:34px;
}
.tab{
  font-family:var(--body); font-size:.96rem; font-weight:700;
  padding:11px 22px;
  border-radius:var(--r-pill);
  border:2px solid var(--line-strong);
  background:transparent; color:var(--plum);
  cursor:pointer;
  transition:background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.tab.is-on{ background:var(--magenta); border-color:var(--magenta); color:#fff; }
@media (hover:hover){
  .tab:not(.is-on):hover{ border-color:var(--magenta); color:var(--magenta); }
}

.panel{
  display:grid;
  grid-template-columns:1fr minmax(0,400px);
  gap:clamp(28px,4vw,56px);
  align-items:start;
}
.panel[hidden]{ display:none; }

.menu{ list-style:none; margin:0; padding:0; }
.menu li{
  display:grid;
  grid-template-columns:1fr auto;
  grid-template-areas:
    "name price"
    "desc time";
  gap:2px 18px;
  padding:20px 0;
  border-bottom:1px solid var(--line);
}
.menu li:first-child{ border-top:1px solid var(--line); }
.menu-name{ grid-area:name; font-weight:700; font-size:1.1rem; }
.menu-desc{ grid-area:desc; color:var(--plum-soft); font-size:.94rem; }
.menu-time{ grid-area:time; color:var(--plum-soft); font-size:.88rem; text-align:right; white-space:nowrap; }
.menu-price{
  grid-area:price;
  font-family:var(--display); font-size:1.4rem; font-weight:600;
  color:var(--magenta);
  white-space:nowrap;
}

.panel-shot{ margin:0; position:sticky; top:100px; }
.panel-shot img{
  width:100%;
  border-radius:var(--r-panel);
  aspect-ratio:4/3; object-fit:cover;
  box-shadow:var(--shadow);
}
.panel-shot figcaption{
  margin-top:16px;
  font-size:.9rem; color:var(--plum-soft);
  padding-left:16px;
  border-left:3px solid var(--bubble);
}

@media (max-width:820px){
  .panel{ grid-template-columns:1fr; }
  .panel-shot{ position:static; order:-1; }
}

/* ===== STUDIO ============================================== */

.studio{
  background:var(--blush);
  padding:clamp(64px,9vw,116px) 0;
}
.studio-in{
  display:grid;
  grid-template-columns:minmax(0,400px) 1fr;
  gap:clamp(32px,6vw,80px);
  align-items:center;
}
.studio-photo{ position:relative; }
.studio-photo img{
  width:100%;
  aspect-ratio:4/5; object-fit:cover; object-position:50% 32%;
  border-radius:46% 54% 52% 48% / 40% 40% 60% 60%;
  box-shadow:var(--shadow-lift);
}
.studio-tag{
  position:absolute; right:-8px; bottom:18px;
  margin:0;
  background:#fff;
  border-radius:var(--r-card);
  padding:14px 20px;
  font-weight:700; line-height:1.3;
  box-shadow:var(--shadow);
  transform:rotate(-2.5deg);
}
.studio-tag small{ font-weight:500; color:var(--plum-soft); font-size:.82rem; }

.studio-copy p{ color:var(--plum-soft); max-width:52ch; }
.studio-copy h2{ margin-bottom:20px; }

/* Ruudukko eikä flex-rivi: kolme lukua pysyy kolmena sarakkeena
   myös puhelimessa, eikä viimeinen putoa yksin omalle rivilleen. */
.facts{
  list-style:none; margin:32px 0 0; padding:0;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(96px,1fr));
  gap:14px;
  max-width:420px;
}
.facts li{
  background:var(--cream);
  border-radius:var(--r-card);
  padding:16px 18px;
  display:grid; gap:2px;
}
.facts b{ font-family:var(--display); font-size:1.7rem; color:var(--magenta); }
.facts span{ font-size:.85rem; color:var(--plum-soft); }

@media (max-width:860px){
  .studio-in{ grid-template-columns:1fr; }
  .studio-photo{ width:min(80vw,380px); margin-inline:auto; }
}

/* ===== GALLERIA ============================================ */

.galleria{ padding:clamp(64px,9vw,110px) 0; }

.polaroids{
  list-style:none; margin:0; padding:0;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:clamp(14px,2.4vw,26px);
}
.pola{
  background:#fff;
  padding:12px 12px 4px;
  border-radius:20px;
  box-shadow:var(--shadow);
  transition:transform .3s var(--ease);
}
.pola img{
  width:100%; aspect-ratio:4/5; object-fit:cover;
  border-radius:12px;
}
.pola p{
  margin:0;
  padding:12px 4px;
  font-family:var(--display); font-style:italic; font-size:1.05rem;
  text-align:center;
}
/* Kallistukset ovat käsin valittuja eivätkä nth-childillä
   generoituja: rivin pitää näyttää siltä että kuvat on
   pudotettu pöydälle, ei siltä että ne heiluvat vuorotellen. */
.pola-a{ transform:rotate(-3deg); }
.pola-b{ transform:rotate(1.6deg) translateY(14px); }
.pola-c{ transform:rotate(-1.2deg) translateY(-6px); }
.pola-d{ transform:rotate(2.8deg) translateY(8px); }

@media (hover:hover){
  .pola:hover{ transform:rotate(0deg) translateY(-6px) scale(1.02); }
}
@media (max-width:820px){
  .polaroids{ grid-template-columns:repeat(2,1fr); }
}
@media (prefers-reduced-motion:reduce){
  .pola{ transform:none!important; }
}

/* ===== KYSELY ============================================== */

.kysely{ padding:0 0 clamp(64px,9vw,110px); }

.quiz{
  background:var(--plum);
  color:var(--cream-on-dark);
  border-radius:var(--r-panel);
  padding:clamp(32px,5vw,60px);
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);
  gap:clamp(28px,4vw,56px);
  align-items:start;
}
.quiz h2{ color:var(--cream-on-dark); }
.quiz-lead{ color:var(--soft-on-dark); margin-top:16px; }

.quiz-form{ display:grid; gap:26px; }
.quiz-step{ border:0; margin:0; padding:0; }
.quiz-step legend{
  font-weight:700; font-size:.95rem;
  padding:0; margin-bottom:12px;
  color:var(--cream-on-dark);
}
.quiz-opts{ display:flex; flex-wrap:wrap; gap:9px; }
.quiz-opts label{ cursor:pointer; }
/* Radio piilotetaan visuaalisesti mutta jää tavutettavaksi:
   focus-tila piirretään labelin spaniin. */
.quiz-opts input{
  position:absolute; opacity:0; width:1px; height:1px;
}
.quiz-opts span{
  display:inline-block;
  padding:10px 18px;
  border-radius:var(--r-pill);
  border:2px solid rgba(255,239,245,.45);
  font-size:.93rem; font-weight:600;
  transition:background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.quiz-opts input:checked + span{
  background:var(--hot); border-color:var(--hot); color:var(--plum-deep);
}
.quiz-opts input:focus-visible + span{ outline:3px solid var(--glow); outline-offset:3px; }
@media (hover:hover){
  .quiz-opts label:hover span{ border-color:var(--glow); }
}

.quiz-status{ font-size:.88rem; color:var(--soft-on-dark); margin:0; }
.quiz-status[hidden]{ display:none; }

.quiz-result{
  background:rgba(255,239,245,.08);
  border:1px solid rgba(255,239,245,.22);
  border-radius:var(--r-card);
  padding:24px 26px;
}
.quiz-result[hidden]{ display:none; }
.quiz-result-label{
  font-size:.72rem; letter-spacing:.18em; text-transform:uppercase;
  font-weight:700; color:var(--glow); margin:0 0 8px;
}
.quiz-result-name{
  font-family:var(--display); font-size:1.75rem; line-height:1.1;
  margin:0 0 6px;
}
.quiz-result-meta{ color:var(--glow); font-weight:700; margin:0 0 12px; }
.quiz-result-why{ color:var(--soft-on-dark); font-size:.95rem; margin:0 0 20px; }

@media (max-width:820px){
  .quiz{ grid-template-columns:1fr; }
}

/* ===== ARVOSTELUT ========================================== */

.arvot{ padding:0 0 clamp(64px,9vw,110px); }
.quotes{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:clamp(16px,2.4vw,26px);
}
.quotes li{
  background:var(--blush);
  border-radius:var(--r-card);
  padding:30px 28px;
  display:flex; flex-direction:column; gap:14px;
}
.stars{ margin:0; color:var(--magenta); letter-spacing:.16em; font-size:.95rem; }
.quotes blockquote{
  margin:0;
  font-family:var(--display); font-size:1.16rem; line-height:1.42;
}
.quote-by{ margin:auto 0 0; font-size:.85rem; color:var(--plum-soft); font-weight:600; }

@media (max-width:820px){ .quotes{ grid-template-columns:1fr; } }

/* ===== LAHJAKORTTI ========================================= */

.lahja{ padding:0 0 clamp(64px,9vw,110px); }
.lahja-in{
  background:
    radial-gradient(120% 140% at 88% 12%, var(--glow) 0%, transparent 58%),
    var(--bubble);
  border-radius:var(--r-panel);
  padding:clamp(30px,4.5vw,52px);
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:24px;
}
.lahja-copy{ max-width:48ch; }
.lahja-copy h2{ margin-bottom:12px; }
.lahja-copy p{ margin:0; color:var(--plum); }

/* ===== UKK ================================================= */

.ukk{ padding:0 0 clamp(64px,9vw,110px); }
.ukk-in{
  display:grid; grid-template-columns:minmax(0,340px) 1fr;
  gap:clamp(28px,5vw,64px);
  align-items:start;
}
.ukk .sec-head{ margin-bottom:0; }

.faq details{
  border-top:1px solid var(--line);
  padding:6px 0;
}
.faq details:last-child{ border-bottom:1px solid var(--line); }
.faq summary{
  cursor:pointer;
  list-style:none;
  padding:18px 40px 18px 0;
  font-weight:700; font-size:1.06rem;
  position:relative;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:"+";
  position:absolute; right:6px; top:50%;
  transform:translateY(-50%);
  font-family:var(--display); font-size:1.6rem; line-height:1;
  color:var(--magenta);
}
.faq details[open] summary::after{ content:"–"; }
.faq p{
  margin:0 0 20px;
  color:var(--plum-soft);
  max-width:62ch;
  padding-right:40px;
}
@media (hover:hover){ .faq summary:hover{ color:var(--magenta); } }
@media (max-width:820px){ .ukk-in{ grid-template-columns:1fr; } }

/* ===== VARAUS ============================================== */

.varaus{
  background:var(--plum);
  color:var(--cream-on-dark);
  padding:clamp(64px,9vw,110px) 0;
}
.varaus-in{
  display:grid; grid-template-columns:1fr minmax(0,360px);
  gap:clamp(32px,5vw,72px);
  align-items:start;
}
.varaus h2{ color:var(--cream-on-dark); margin-bottom:20px; }
.varaus-copy p{ color:var(--soft-on-dark); max-width:50ch; }

.varaus-links{ list-style:none; margin:30px 0 0; padding:0; display:grid; gap:14px; }
.varaus-links li{ display:flex; align-items:center; gap:13px; font-weight:600; }
.varaus-links svg{ width:20px; height:20px; color:var(--glow); flex:none; }
.varaus-links a{ color:var(--cream-on-dark); text-decoration-color:rgba(255,239,245,.4); text-underline-offset:4px; }
@media (hover:hover){ .varaus-links a:hover{ color:var(--glow); } }

.hours{
  background:rgba(255,239,245,.07);
  border:1px solid rgba(255,239,245,.2);
  border-radius:var(--r-card);
  padding:28px 28px 26px;
}
.hours h3{ margin-bottom:16px; }
.hours dl{ margin:0 0 18px; display:grid; gap:9px; }
.hours dl > div{
  display:flex; justify-content:space-between; gap:16px;
  font-size:.95rem;
  padding-bottom:9px;
  border-bottom:1px solid rgba(255,239,245,.14);
}
.hours dt{ color:var(--soft-on-dark); }
.hours dd{ margin:0; font-weight:700; }
.hours-note{ font-size:.85rem; color:var(--soft-on-dark); }

@media (max-width:860px){ .varaus-in{ grid-template-columns:1fr; } }

/* ===== FOOTER ============================================== */

.foot{
  background:var(--plum-deep);
  color:var(--soft-on-dark);
  padding:44px 0;
}
.foot-in{ display:grid; gap:14px; }
.foot-logo{
  display:flex; align-items:center; gap:11px;
  margin:0;
  color:var(--cream-on-dark); font-weight:700; font-size:1.05rem;
}
.foot-addr{ margin:0; font-size:.92rem; line-height:1.7; }
.foot-fine{ margin:0; font-size:.82rem; opacity:.75; }

/* ===== REVEAL ==============================================
   Piilotus tehdään vain kun JS on käytössä (.js html:ssä), ja
   liike jätetään pois jos käyttäjä on pyytänyt vähemmän liikettä. */

.js .reveal{
  opacity:0;
  transform:translateY(22px);
  transition:opacity .6s var(--ease), transform .6s var(--ease);
}
.js .reveal.is-in{ opacity:1; transform:none; }

@media (prefers-reduced-motion:reduce){
  .js .reveal{ opacity:1; transform:none; transition:none; }
  .btn, .pola, .tab{ transition:none; }
}