/* ===========================================================
   Kotihoito Herttuatar
   Brändiarvot käännetty Lovable-suunnitelman styles.css:stä.
   Alkuperäisessä oli --background, --foreground ja --brand-cream
   käytössä mutta määrittelemättä, ja brändivärit kahteen kertaan.
   Tässä ne on määritelty kertaalleen ja loppuun asti.
   =========================================================== */

:root {
  /* Brändi */
  --brand-blue:        #1d3e6f;
  --brand-blue-deep:   #152c50;
  --brand-pink:        #f72585;
  --brand-pink-soft:   #f8e1ec;
  --brand-cream:       #fdfaf7;

  /* Pinnat ja teksti */
  --background:        #fdfaf7;
  --foreground:        #1b2431;
  --card:              #ffffff;
  --muted-foreground:  #5b6673;
  --border:            #e6e3de;

  /* Typografia */
  --font-serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-sans:  "Montserrat", -apple-system, "Helvetica Neue", Arial, sans-serif;

  /* Muoto */
  --radius:     0.75rem;
  --radius-lg:  1.5rem;
  --radius-xl:  2rem;
  --pad:        clamp(1.25rem, 4vw, 1.5rem);
  --maxw:       72rem;
}

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

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

body {
  margin: 0;
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.65;
  /* Playfair Displayn oletusnumerot ovat vanhatyyliset: osa istuu
     matalina ja osa laskeutuu peruslinjan alle. Puhelinnumerossa ja
     kelloajoissa se lukee epätasaisena, ja kohderyhmä on ikääntyneet.
     Tasakorkeat numerot kaikkialle. Montserratissa ne ovat jo
     oletuksena tasakorkeat, joten tämä ei muuta leipätekstiä. */
  font-variant-numeric: lining-nums;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}

h1, h2, h3, h4 {
  font-family: var(--font-serif);
  font-weight: 500;
  line-height: 1.1;
  color: var(--brand-blue);
  margin: 0;
  text-wrap: balance;
}

p { margin: 0; }
/* height:auto on pakollinen: HTML:n height-attribuutti toimii
   esitysvihjeenä, ja jos korkeus on määritetty, aspect-ratio ohitetaan */
img { max-width: 100%; height: auto; display: block; }

a { color: var(--brand-blue); }
a:hover { color: var(--brand-pink); }

:focus-visible {
  outline: 3px solid var(--brand-pink);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------- apurit ---------- */

.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--pad);
}
.wrap-narrow { max-width: 56rem; }
.wrap-tight  { max-width: 44rem; }

.eyebrow {
  font-size: 0.75rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  font-weight: 600;
  color: rgb(29 62 111 / 0.7);
}

.lead {
  font-size: 1.125rem;
  color: var(--muted-foreground);
  max-width: 30rem;
}

.italic-pink { font-style: italic; color: var(--brand-pink); }

.skip {
  position: absolute;
  left: -9999px;
}
.skip:focus {
  left: 1rem;
  top: 0.5rem;
  z-index: 60;
  background: #fff;
  padding: 0.75rem 1rem;
  border-radius: var(--radius);
  box-shadow: 0 4px 16px rgb(0 0 0 / 0.18);
}

/* ---------- napit ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0.75rem 1.75rem;
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color 0.2s, box-shadow 0.2s, border-color 0.2s;
}

.btn-pink {
  background: var(--brand-pink);
  color: #fff;
  box-shadow: 0 4px 12px rgb(247 37 133 / 0.25);
}
.btn-pink:hover {
  background: #dc1f76;
  color: #fff;
  box-shadow: 0 8px 20px rgb(247 37 133 / 0.32);
}

.btn-outline {
  background: #fff;
  color: var(--brand-blue);
  border-color: rgb(29 62 111 / 0.3);
}
.btn-outline:hover {
  border-color: var(--brand-blue);
  background: rgb(29 62 111 / 0.05);
  color: var(--brand-blue);
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 2rem;
}

/* ---------- header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgb(253 250 247 / 0.95);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgb(230 227 222 / 0.6);
}
.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 0.85rem;
}
.logo-link { display: inline-flex; }
.logo-link img { height: 3rem; width: auto; object-fit: contain; }

.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1px solid rgb(29 62 111 / 0.2);
  border-radius: var(--radius);
  background: #fff;
  color: var(--brand-blue);
  cursor: pointer;
}
.nav-toggle svg { width: 22px; height: 22px; }
.nav-toggle .icon-close { display: none; }
.nav-toggle[aria-expanded="true"] .icon-open  { display: none; }
.nav-toggle[aria-expanded="true"] .icon-close { display: block; }

.nav a {
  font-family: var(--font-sans);
  font-size: 0.875rem;
  letter-spacing: 0.02em;
  color: var(--brand-blue);
  text-decoration: none;
}
.nav a:hover { color: var(--brand-pink); }
.nav a[aria-current="page"] { color: var(--brand-pink); font-weight: 600; }
.nav .btn { color: #fff; }
.nav .btn[aria-current="page"] { color: #fff; }

/* mobiili ja tabletti: valikko avautuu pystyyn. Kuusi linkkiä ja
   painike eivät mahdu riville alle 1024 pikselin. */
@media (max-width: 63.99em) {
  .nav {
    position: absolute;
    inset-inline: 0;
    top: 100%;
    display: none;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.75rem var(--pad) 1.25rem;
    background: var(--background);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 12px 24px rgb(0 0 0 / 0.08);
  }
  .nav[data-open="true"] { display: flex; }
  .nav a {
    padding: 0.85rem 0.25rem;
    font-size: 1.0625rem;
    border-bottom: 1px solid var(--border);
  }
  .nav .btn {
    margin-top: 0.75rem;
    padding: 0.75rem 1.75rem;
    border-bottom: 0;
    align-self: flex-start;
  }
}

/* työpöytä: rivi, ei painiketta */
@media (min-width: 64em) {
  .nav-toggle { display: none; }
  .nav {
    display: flex;
    align-items: center;
    gap: 1.5rem;
  }
}
@media (min-width: 48em) {
  .logo-link img { height: 3.5rem; }
}

/* ---------- hero ---------- */

.hero { padding-top: clamp(2.5rem, 6vw, 4rem); }
.hero-grid {
  display: grid;
  gap: 2.5rem;
  align-items: center;
}
.hero h1 {
  margin-top: 1rem;
  font-size: clamp(2.5rem, 7vw, 3.75rem);
  line-height: 1.05;
}
.hero .lead { margin-top: 1.5rem; }

.hero-figure { position: relative; }
.hero-figure::before {
  content: "";
  position: absolute;
  inset: -1rem;
  border-radius: var(--radius-xl);
  background: var(--brand-pink-soft);
  z-index: -1;
}
.hero-figure img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 40px rgb(27 36 49 / 0.18);
}

@media (min-width: 48em) {
  .hero-grid { grid-template-columns: 1fr 1fr; }
}

/* ---------- osiot ---------- */

.section { margin-top: clamp(4rem, 10vw, 6rem); }

.panel {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: clamp(2rem, 5vw, 3rem);
  box-shadow: 0 2px 8px rgb(27 36 49 / 0.04);
}

/* arvot */
.values-title { text-align: center; font-size: clamp(1.5rem, 4vw, 1.875rem); }
.values {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
  margin-top: 2.5rem;
}
.value { text-align: center; }
.value .icon-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 4rem;
  border-radius: var(--radius-lg);
  background: var(--brand-pink-soft);
  color: var(--brand-blue);
}
.value .icon-box svg { width: 1.75rem; height: 1.75rem; }
.value span {
  display: block;
  margin-top: 0.75rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--brand-blue);
}
@media (min-width: 48em) {
  .values { grid-template-columns: repeat(5, 1fr); }
}

/* sitaattilaatikko */
.quote {
  display: grid;
  gap: 0;
  overflow: hidden;
  border-radius: var(--radius-xl);
  background: var(--brand-blue);
  color: #fff;
}
.quote-body { padding: clamp(2rem, 5vw, 3.5rem); }
.quote-body .eyebrow { color: var(--brand-pink-soft); }
.quote-body blockquote {
  margin: 1rem 0 0;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1.5rem, 4vw, 2.25rem);
  line-height: 1.3;
}
.quote-body p.after { margin-top: 1.5rem; color: rgb(255 255 255 / 0.85); }
.quote img { width: 100%; height: 100%; object-fit: cover; min-height: 16rem; }
@media (min-width: 48em) {
  .quote { grid-template-columns: 1fr 1fr; align-items: center; }
}

/* palvelukortit */
/* flex eikä grid, jotta vajaa rivi (1 tai 2 korttia) asettuu keskelle */
.cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5rem;
  margin-top: 3rem;
}
.cards > * { flex: 0 0 100%; }
.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
  box-shadow: 0 2px 8px rgb(27 36 49 / 0.04);
  transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.card:hover {
  transform: translateY(-4px);
  border-color: rgb(247 37 133 / 0.4);
  box-shadow: 0 14px 28px rgb(27 36 49 / 0.1);
}
.card .icon-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: var(--radius);
  background: var(--brand-pink-soft);
  color: var(--brand-blue);
  transition: background-color 0.2s, color 0.2s;
}
.card .icon-box svg { width: 1.5rem; height: 1.5rem; }
.card:hover .icon-box { background: var(--brand-pink); color: #fff; }
.card h3 { margin-top: 1.25rem; font-size: 1.5rem; }
.card p { margin-top: 0.75rem; font-size: 1rem; color: var(--muted-foreground); }
@media (min-width: 40em) { .cards > * { flex-basis: calc((100% - 1.5rem) / 2); } }
@media (min-width: 64em) { .cards > * { flex-basis: calc((100% - 3rem) / 3); } }
/* Yksi kortti yksin: leveä luettelokortti, ei kapeaa orpoa saraketta. */
.cards-single > * { flex-basis: 100% !important; max-width: 40rem; }

/* pinkki kutsulaatikko */
.cta-soft {
  background: var(--brand-pink-soft);
  border-radius: var(--radius-xl);
  padding: clamp(2rem, 6vw, 3.5rem);
  text-align: center;
}
.cta-soft h2 { font-size: clamp(1.5rem, 4vw, 1.875rem); }
.cta-soft p { margin: 1rem auto 0; max-width: 34rem; color: var(--muted-foreground); }
.cta-soft > .btn { margin-top: 1.75rem; }

/* keskitetty lopetus */
.cta-center { text-align: center; }
.cta-center h2 { font-size: clamp(1.875rem, 5vw, 2.25rem); }
.cta-center p { margin: 1rem auto 0; max-width: 32rem; color: var(--muted-foreground); }
.cta-center .btn { margin-top: 2rem; }

/* tekstisisältö */
.prose { margin-top: 2.5rem; display: grid; gap: 1.5rem; }
.prose p { font-size: 1.125rem; line-height: 1.7; color: rgb(27 36 49 / 0.85); }
/* Teresan tarina Meistä-sivulla */
.story-title { margin-top: 0.75rem; font-size: clamp(1.75rem, 4.5vw, 2.25rem); }
.story { gap: 1.25rem; }
.story h3 { margin-top: 1.25rem; font-size: 1.5rem; }
.story-quote {
  margin: 0.5rem 0;
  padding: 1.5rem 1.75rem;
  background: var(--brand-pink-soft);
  border-radius: var(--radius-lg);
}
.story-quote p {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.5rem;
  line-height: 1.4;
  color: var(--brand-blue);
}
.story .signature {
  margin-top: 0.5rem;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.375rem;
  line-height: 1.3;
  color: var(--brand-blue);
}
.story .signature span { font-family: var(--font-sans); font-style: normal; font-size: 0.9375rem; color: var(--muted-foreground); }
.prose .pullquote {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.5rem;
  color: var(--brand-pink);
}

.promise {
  display: grid;
  gap: 2rem;
  align-items: center;
}
.promise-logo { display: flex; justify-content: center; }
.promise-logo img { height: 5rem; width: auto; object-fit: contain; }
.promise h2 { font-size: 1.5rem; }
.promise ul { margin: 1rem 0 0; padding: 0; list-style: none; color: var(--muted-foreground); }
.promise li { margin-bottom: 0.75rem; padding-left: 1rem; position: relative; }
/* Piste on tyylissä eikä tekstissä, jotta jatkorivi alkaa samasta kohdasta
   kuin ensimmäisen rivin teksti. */
.promise li::before { content: "·"; position: absolute; left: 0.25rem; }
@media (min-width: 48em) {
  .promise { grid-template-columns: auto 1fr; gap: 2.5rem; }
}

/* ---------- yhteystiedot ---------- */

.contact-grid {
  display: grid;
  gap: 2.5rem;
  margin-top: 3rem;
}
@media (min-width: 48em) {
  .contact-grid { grid-template-columns: 1fr 1fr; }
}

.contact-row {
  display: flex;
  /* Keskitys, ei flex-start: tekstilohko on 57 px ja kuvake 44, joten
     ylälaitaan ladottu kuvake jäi 6 px korkealle parin keskikohdasta
     ja näytti irralliselta arvosta. */
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.contact-row .icon-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--radius);
  background: var(--brand-blue);
  color: #fff;
}
.contact-row .icon-box svg { width: 1.25rem; height: 1.25rem; }
.contact-row dt {
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgb(29 62 111 / 0.7);
  font-weight: 600;
}
.contact-row dd {
  margin: 0.25rem 0 0;
  font-family: var(--font-serif);
  /* Montserrat eikä Playfair: nämä ovat dataa, eivät otsikkotekstiä.
     Playfair on korkeakontrastinen otsikkofontti, jonka ohuet viivat
     tekevät numeroista hankalasti luettavia, ja puhelinnumero on tämän
     sivun tärkein tieto. Playfair jää otsikoihin ja sitaatteihin.

     Arvot ovat 18 px. Sähköpostiosoite on ainoa pitkä merkkijono ja
     se on eriytetty omaksi kokoonsa alempana, koska Montserrat on
     leveämpi kuin Playfair ja 375 pikselin näytöllä osoite ylitti
     palstan. Muiden arvojen ei kannata kärsiä siitä. */
  font-family: var(--font-sans);
  font-size: 1.125rem;
  font-weight: 500;
  color: var(--brand-blue);
  /* Sähköpostiosoite on yhtenäinen merkkijono eikä katkea itsestään.
     390 px leveydellä se mahtuu 20 px varaa, mutta kapeammalla ei,
     joten sallitaan katkaisu tarvittaessa. */
  overflow-wrap: anywhere;
}
/* Puhelinnumero on sivun tärkein tieto, joten se on lihavoitu. */
.contact-row dd a[href^="tel:"] {
  font-weight: 600;
}

/* Sähköpostiosoite on 30 merkkiä eikä katkea itsestään. 16 px on
   suurin koko jolla se mahtuu yhdelle riville 375 pikselin näytöllä,
   joka on yleisin pieni puhelin. */
.contact-row dd a[href^="mailto:"] {
  font-size: 1rem;
  /* Pienempi fontti kutisti kosketusalueen 42 pikseliin, minimi on 44.
     Lisää pehmustetta, ja negatiivinen marginaali kumoaa sen vaikutuksen
     ladontaan kuten muillakin linkeillä. */
  padding-block: 0.65rem;
  margin-block: -0.65rem;
}

.contact-row dd a {
  display: inline-block;
  /* Pehmuste antaa kosketusalueen, negatiivinen marginaali kumoaa sen
     vaikutuksen ladontaan. Näin linkkirivit ovat tarkalleen yhtä korkeita
     kuin pelkkää tekstiä sisältävät rivit, eikä kuvake jää irralleen. */
  margin-block: -0.5rem;
  padding-block: 0.5rem;
  text-decoration: none;
}
.contact-row dd a:hover { text-decoration: underline; }

.quote-soft {
  margin-top: 2rem;
  background: var(--brand-pink-soft);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
}
.quote-soft blockquote {
  margin: 0;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.25rem;
  color: var(--brand-blue);
}
.quote-soft p { margin-top: 0.5rem; font-size: 0.875rem; color: var(--muted-foreground); }

/* lomake */
.form-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: clamp(1.5rem, 4vw, 2rem);
  box-shadow: 0 2px 8px rgb(27 36 49 / 0.04);
}
.form-card h2 { font-size: 1.5rem; }
.fields { display: grid; gap: 1rem; margin-top: 1.25rem; }
.field label {
  display: block;
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  font-weight: 600;
  color: var(--brand-blue);
}
.field input,
.field textarea {
  width: 100%;
  margin-top: 0.375rem;
  padding: 0.75rem 1rem;
  font-family: inherit;
  font-size: 0.9375rem;
  color: var(--foreground);
  background: var(--background);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  outline: none;
  transition: border-color 0.2s;
}
.field input:focus,
.field textarea:focus { border-color: var(--brand-pink); }
.field textarea { resize: vertical; min-height: 7rem; }
.form-note { margin-top: 0.5rem; font-size: 0.8125rem; color: var(--muted-foreground); }

/* ---------- footer ---------- */

.site-footer {
  margin-top: clamp(4rem, 10vw, 6rem);
  background: var(--brand-blue);
  color: #fff;
}
.footer-grid {
  display: grid;
  gap: 2.5rem;
  padding-block: 3.5rem;
}
/* Puhelimessa kuusi sivulinkkiä kahteen sarakkeeseen, ettei lista vie koko
   näyttöä. Kolme asiakirjalinkkiä ovat liian pitkiä puoleen leveyteen, joten
   ne jäävät täysleveiksi alle. */
@media (max-width: 47.99em) {
  .footer-links { display: grid; grid-template-columns: 1fr 1fr; column-gap: 1.5rem; }
  .footer-links li:nth-child(n+7) { grid-column: 1 / -1; }
}
@media (min-width: 48em) {
  .footer-grid { grid-template-columns: repeat(3, 1fr); }
}
.footer-logo {
  display: inline-block;
  background: #fff;
  border-radius: var(--radius);
  padding: 1rem;
}
.footer-logo img { height: 3rem; width: auto; }
.footer-grid p.blurb {
  margin-top: 1rem;
  max-width: 20rem;
  font-size: 0.9375rem;
  color: rgb(255 255 255 / 0.8);
}
.site-footer h2 {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  color: var(--brand-pink);
  margin: 0;
}
.site-footer ul { margin: 1rem 0 0; padding: 0; list-style: none; font-size: 0.9375rem; }
.site-footer li { margin-bottom: 0.5rem; color: rgb(255 255 255 / 0.9); }
.site-footer a {
  display: inline-block;
  padding-block: 0.65rem;
  color: #fff;
  text-decoration: none;
}
.site-footer a:hover { color: var(--brand-pink); text-decoration: underline; }
.footer-tagline {
  border-top: 1px solid rgb(255 255 255 / 0.15);
  padding-block: 1rem;
  text-align: center;
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--brand-pink-soft);
}

/* ---------- asiakirjasivu (omavalvontasuunnitelma) ---------- */

.doc { margin-top: 2.5rem; }
.section.doc { margin-top: clamp(4rem, 10vw, 6rem); }
.doc > section + section { margin-top: 2.75rem; }
.doc h2 {
  font-size: 1.375rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--brand-pink-soft);
}
.doc h3 {
  margin-top: 1.75rem;
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 600;
  color: var(--brand-blue);
}
.doc p, .doc ul, .doc ol { margin-top: 0.75rem; color: var(--muted-foreground); }
.doc ul, .doc ol { padding-left: 1.25rem; }
.doc li { margin-bottom: 0.4rem; }
.doc h2 + p, .doc h3 + p { margin-top: 0.75rem; }

.doc dl {
  margin: 1rem 0 0;
  display: grid;
  gap: 0.25rem 1.5rem;
}
.doc dl dt {
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  color: rgb(29 62 111 / 0.7);
}
.doc dl dd { margin: 0 0 0.75rem; color: var(--foreground); }

/* Tietolistojen puhelin- ja sähköpostilinkit ovat oikeita
   yhteydenottolinkkejä, ja ilman pehmustetta ne olivat 20 px korkeita
   kun minimi on 44. Pehmuste antaa kosketusalueen ja negatiivinen
   marginaali kumoaa sen vaikutuksen ladontaan.

   Huom: leipätekstin sisäisiä linkkejä ei pehmustettu. WCAG rajaa
   lauseen sisäiset linkit vaatimuksen ulkopuolelle, ja pehmuste
   rikkoisi rivirytmin. */
.doc dl dd a[href^="tel:"],
.doc dl dd a[href^="mailto:"] {
  display: inline-block;
  padding-block: 0.75rem;
  margin-block: -0.75rem;
}
@media (min-width: 40em) {
  .doc dl { grid-template-columns: 12rem 1fr; }
  .doc dl dt { padding-top: 0.15rem; }
  /* Saman otsikon alla voi olla useita arvoja (kaksi vastuuhenkilöä). */
  .doc dl dd + dd { grid-column: 2; }
}

.doc-meta {
  margin-top: 1.5rem;
  background: var(--brand-pink-soft);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
}
.doc-meta p { margin-top: 0; color: var(--brand-blue); font-size: 0.9375rem; }
.doc-meta p + p { margin-top: 0.5rem; }

/* ---------- yläpalkki ---------- */

.topbar {
  background: var(--brand-blue);
  color: #fff;
  font-size: 0.875rem;
}
.topbar .wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.25rem 1.5rem;
  padding-block: 0.5rem;
  text-align: center;
}
.topbar a {
  color: #fff;
  font-weight: 600;
  display: inline-block;
  padding-block: 0.5rem;
  margin-block: -0.5rem;
}
.topbar a:hover { color: var(--brand-pink-soft); }
.topbar .hours { white-space: nowrap; }
/* Puhelimessa yläpalkissa vain soittolinkki, ettei palkki vie kolmea riviä.
   Soittoajat ovat yhteystietosivulla. */
@media (max-width: 39.99em) {
  .topbar-promo, .topbar .hours { display: none; }
}

/* ---------- osion otsikko ---------- */

.section-head { text-align: center; max-width: 40rem; margin-inline: auto; }
.section-head h2 { margin-top: 0.75rem; font-size: clamp(1.75rem, 4.5vw, 2.25rem); }
.section-head p { margin-top: 1rem; color: var(--muted-foreground); }

/* kortin "lue lisää" -linkki */
.card .more {
  display: inline-block;
  margin-top: 1rem;
  padding-block: 0.6rem;
  margin-bottom: -0.6rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--brand-pink);
  text-decoration: none;
}
.card .more:hover { text-decoration: underline; }
.card ul {
  margin: 0.75rem 0 0;
  padding-left: 1.1rem;
  font-size: 1rem;
  color: var(--muted-foreground);
}

/* ---------- vaiheet ---------- */

.steps {
  list-style: none;
  margin: 3rem 0 0;
  padding: 0;
  display: grid;
  gap: 1.5rem;
  counter-reset: step;
}
.steps li {
  counter-increment: step;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
}
.steps li::before {
  content: counter(step);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 999px;
  background: var(--brand-pink);
  color: #fff;
  font-weight: 700;
}
.steps h3 { margin-top: 1rem; font-size: 1.375rem; }
.steps p { margin-top: 0.5rem; font-size: 1rem; color: var(--muted-foreground); }
@media (min-width: 48em) { .steps { grid-template-columns: repeat(3, 1fr); } }

/* ---------- syyt valita ---------- */

.reasons {
  display: grid;
  gap: 1.75rem;
  margin-top: 2.5rem;
}
.reason { display: flex; gap: 1rem; align-items: flex-start; }
.reason .icon-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 3rem;
  height: 3rem;
  border-radius: var(--radius);
  background: var(--brand-pink-soft);
  color: var(--brand-blue);
}
.reason .icon-box svg { width: 1.5rem; height: 1.5rem; }
.reason h3 { font-family: var(--font-sans); font-size: 1rem; font-weight: 600; }
.reason p { margin-top: 0.25rem; font-size: 1rem; color: var(--muted-foreground); }
@media (min-width: 48em) { .reasons { grid-template-columns: repeat(2, 1fr); } }

/* ---------- meistä-nosto ---------- */

.about {
  display: grid;
  gap: 2.5rem;
  align-items: center;
}
.about h2 { margin-top: 0.75rem; font-size: clamp(1.75rem, 4.5vw, 2.25rem); }
.about p { margin-top: 1rem; color: var(--muted-foreground); }

/* ---------- luottamusrivi ---------- */

.trust {
  display: grid;
  gap: 1.25rem;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding-block: 2rem;
  text-align: center;
}
.trust strong { display: block; font-size: 0.75rem; letter-spacing: 0.18em; text-transform: uppercase; color: rgb(29 62 111 / 0.7); }
.trust span { display: block; margin-top: 0.35rem; color: var(--brand-blue); font-weight: 500; }
@media (min-width: 48em) { .trust { grid-template-columns: repeat(3, 1fr); } }

/* ---------- hinnasto ---------- */

.price-group + .price-group { margin-top: 2rem; }
.price-group h2 { font-size: 1.5rem; }
.price-group > p { margin-top: 0.5rem; color: var(--muted-foreground); font-size: 0.9375rem; }
.prices {
  margin: 1.25rem 0 0;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.prices div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.9rem 1.25rem;
}
.prices div + div { border-top: 1px solid var(--border); }
.prices dt { color: var(--foreground); }
.prices dd { margin: 0; font-weight: 600; color: var(--brand-blue); text-align: right; white-space: nowrap; }
.price-note { margin-top: 2rem; font-size: 0.9375rem; color: var(--muted-foreground); }

/* ---------- usein kysyttyä ---------- */

.faq { margin-top: 1.5rem; }
.faq details {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.faq details + details { margin-top: 0.75rem; }
.faq summary {
  cursor: pointer;
  padding: 1rem 3rem 1rem 1.25rem;
  min-height: 48px;
  font-weight: 600;
  color: var(--brand-blue);
  list-style: none;
  position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
/* Oma nuoli oikeaan reunaan selaimen kolmion tilalle; kääntyy auki-tilassa. */
.faq summary::after {
  content: "";
  position: absolute;
  right: 1.35rem;
  top: 50%;
  width: 0.55rem;
  height: 0.55rem;
  border-right: 2px solid var(--brand-pink);
  border-bottom: 2px solid var(--brand-pink);
  transform: translateY(-70%) rotate(45deg);
  transition: transform 0.2s;
}
.faq details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.faq details p { padding: 0 1.25rem 1.25rem; color: var(--muted-foreground); }

/* ---------- paikkamerkki, poista kun tiedot ovat oikeat ---------- */

.todo {
  background: #fff3cd;
  color: #6b4b00;
  border-bottom: 2px dotted #b8860b;
  padding: 0 0.15em;
  font-style: normal;
}
.site-footer .todo, .quote .todo { color: #6b4b00; }

/* Tulostus ja omavalvontasuunnitelman PDF. PDF tehdään tästä sivusta
   headless Chromella (ohje README:ssä), jotta PDF ja sivu pysyvät samoina. */
.print-only { display: none; }
@media print {
  .print-only { display: block; margin-bottom: 1.5rem; font-weight: 600; color: var(--brand-blue); }
  @page { margin: 18mm 16mm; }
  .skip, .topbar, .site-header, .site-footer, .no-print { display: none !important; }
  body { background: #fff; }
  .hero { padding-top: 0; }
  .doc-meta { background: none; border: 1px solid var(--border); }
  /* Ruudukko ei pilkkoudu sivuille, vaan siirtyy kokonaan seuraavalle. */
  .doc dl { display: block; }
  .doc dl dt { margin-top: 0.6rem; }
  .doc dl dd + dd { margin-top: 0.5rem; }
  .doc h2, .doc h3, .doc dt { break-after: avoid; }
  .doc p, .doc dd, .doc li { orphans: 3; widows: 3; }
}