/* ProNeuron – etusivuluonnos, suunta "Sanat"
   Ideana ProNeuronin omat sanat: työpajan valokuvatut muistilaput (ILO, SUUNTA, TUKI, YHTEYS) ja arvot.
   Väripaletti logon mukaan: logon vihreä #91D300 ("Pro") ja logon sininen #01A5C6 ("Neuron"). H1, uutisotsikot,
   siniset painikkeet ja rekrykortti ovat logon sinisen silmälle samaa sävyä #01A2C3 (3:1 isolle tekstille), ja
   H2-otsikot ovat mustetta. Rekrykortin leipäteksti jää 3,01:1:een asiakkaan värivalinnan vuoksi. Ajanvaraus- ja
   soittopainikkeet ovat logon vihreitä mustalla tekstillä. Linkit ja kohdistuksen rengas ovat logon sinisen
   tummennettua sävyä #00728A (AA-kontrasti).
   Vaaleat pinnat on johdettu samoista väreistä: taivas (Kela ja palautteet) ja limenvihreät sävyt (ohjain, Vaihe 2).
   Värillisillä kaistoilla ja korteissa otsikot ovat mustetta. Lisäksi lämmin aprikoosi (yhteydenottokaista, arvokortti
   ja ryhmäkuvan taustalaatta) ja tumma muste valkoisella pohjalla. AivoSi-kortissa
   AivoSin syvä turkoosi vaaleana sävynä ja aivokuvio turkoosista lilaan (graafinen ohje 2026).
   --cream on vain kuvien latausväri.
   Kuvamuodot: kaari-ikkuna ja ympyrä tiloille, kokonaan näkyvä suorakaide ihmisille ja sanoille.
   Fontit (itse isännöity): Bricolage Grotesque 600/800 otsikoihin, Open Sans 400/600/700 leipätekstiin.
   Kokoyksiköt rem, jotta selaimen fonttikokoasetus vaikuttaa.

   Kontrastit (WCAG, laskettu Pythonilla):
   ink #0F2B37 / paper 14.78 · ink-2 #3B5561 / paper 7.90 · blue #00728A / paper 5.56 · white / blue 5.56
   brand-cyan #01A2C3 / paper 3.01 ja white / brand-cyan 3.01 (logon siniset otsikot ja painikkeet; painikkeen teksti
   19 px lihavoitu = iso teksti, vaatimus 3:1) · white / brand-cyan 3.01 myös rekrykortissa (leipäteksti alle 4.5, asiakkaan valinta) · ink / lime 8.11
   (vihreät painikkeet) · ink / white 14.78 (valkoinen painike)
   ink / sky #D6F0F5 12.41 · blue / sky 4.67 · ink / lime-tint #E6F5C6 12.84 · blue / lime-tint 4.83
   ink / apricot #FDBE82 9.05 · ink-2 / apricot 4.84 · blue-deep #005D70 / apricot 4.59
   Taivaalla linkit ovat mustetta, ja aprikoosilla yhteydenottokaistalla mustetta tai blue-deep-sävyä
   (blue jäisi 3,41:1:een). */

:root {
  --paper: #ffffff;
  --cream: #eee6da;
  --ink: #0f2b37;
  --ink-2: #3b5561;
  --blue: #00728a;        /* logon sinisen tummennettu sävy: linkit, rekrykortti ja kohdistuksen rengas */
  --blue-deep: #005d70;
  --brand-cyan: #01a2c3;  /* logon sininen #01A5C6 silmälle samana: 3,01:1 valkoista vasten (iso teksti), otsikot ja painikkeet */
  --lime: #91d300;        /* logon "Pro" */
  --lime-tint: #e6f5c6;
  --sky: #d6f0f5;
  --apricot: #fdbe82;
  /* Vaalennettu sävy: aprikoosi puoliksi valkoiseen (ryhmäkuvan taustalaatta) */
  --apricot-band: #fedbba;
  --line: rgba(15, 43, 55, 0.14);
  --line-strong: rgba(15, 43, 55, 0.32);
  --focus: var(--blue);

  --display: "Bricolage Grotesque", "Open Sans", system-ui, sans-serif;
  --font: "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  --content: 1360px;
  --gutter: clamp(16px, 5vw, 48px);
  --section: 64px;
  --bar-h: 64px;
  --r: 24px;
  --r-btn: 12px; /* painikkeet, hakukenttä, valintasirut ja muut ohjaimet: pyöristetty suorakulmio */
  --lead: clamp(1.125rem, 1rem + 0.3vw, 1.25rem);
  --stack: clamp(32px, 4vw, 48px);
  --note-w: clamp(72px, 8vw, 120px);
  color-scheme: only light;
}
@media (min-width: 40em) { :root { --section: 80px; } }
@media (min-width: 51.25em) { :root { --section: 96px; } }
@media (min-width: 75em) { :root { --section: 112px; } }

*, *::before, *::after { box-sizing: border-box; }
/* Ankkurikohteet sekä sisällön ja footerin kohdistettavat elementit pysähtyvät ylätunnisteen alapuolelle. --hdr on
   ylätunnisteen mitattu korkeus (luonnos.js), joten tämä toimii suurennetullakin tekstillä. Juuren scroll-padding-top
   koskisi myös ylätunnisteen omia painikkeita, ja sivu hyppäisi, kun kohdistus siirtyy ylätunnisteeseen. */
html { -webkit-text-size-adjust: 100%; scroll-padding-bottom: 64px; }
main, main [id], main a, main button, main input, main select, main textarea, main summary, main [tabindex],
.site-footer, .site-footer [id], .site-footer a, .site-footer button { scroll-margin-top: calc(var(--hdr, var(--bar-h)) + 16px); }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: 1.125rem;
  line-height: 1.6;
  overflow-wrap: break-word;
}
img { max-width: 100%; display: block; }
a { color: var(--blue); text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
a:hover { color: var(--blue-deep); text-decoration-thickness: 2px; }
button { font: inherit; color: inherit; }
p { margin: 0; }
h1, h2, h3, h4 {
  margin: 0; color: var(--brand-cyan);
  font-family: var(--display); font-weight: 800; line-height: 1; letter-spacing: -0.02em;
  font-optical-sizing: auto; overflow-wrap: break-word;
}
/* H2-otsikot ovat mustetta; H1 ja uutisotsikot logon sinisiä */
h2 { color: var(--ink); }

:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 4px; }
/* Sivun sisäisen linkin kohde (main, osio, footer) saa kohdistuksen vain siirtymän ajaksi; se ei ole säädin. */
:not(a, button, input, select, textarea, summary)[tabindex="-1"]:focus { outline: none; }

.wrap { max-width: calc(var(--content) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* Sanaparit pysyvät yhdessä, kun tilaa on; erittäin suurella tekstikoolla kapealla näytöllä ne saavat rivittyä */
@media (min-width: 20em) { .nowrap { white-space: nowrap; } }
.tile__desc, .value__desc, .news__sum, .places__svc, .aivosi__svc, .footer-contact__list li, .faq__item summary { text-wrap: pretty; }
/* Pitkä yhdyssana saa katketa vain, jos se ei muuten mahdu (esim. 200 %:n tekstikoko kapealla näytöllä) */
.arrow-link { text-wrap: balance; }
.arrow-link, .pill, .btn, .chip span, .fgroup a, .mm-sub a, .dropdown a, .mega__list a { overflow-wrap: anywhere; }

.skip-link {
  position: absolute; left: 12px; top: -100px; z-index: 1000;
  background: var(--ink); color: #fff; padding: 12px 20px; border-radius: var(--r-btn);
  font-weight: 700; text-decoration: none;
}
.skip-link:focus { top: 12px; color: #fff; }

/* Ilman JavaScriptiä (html.no-js) avattavat valikot ja kielivalinta eivät toimi. Ylätunnisteessa on silloin Valikko-linkki,
   joka vie sivun lopussa näkyvään, auki olevaan valikkoon. Ylätunnisteen haku riittää, joten valikon hakukenttä piilotetaan. */
.menu-link { text-decoration: none; }
.js .menu-link { display: none; }
.no-js .menu-link { display: inline-flex !important; }
.no-js button.menu-toggle, .no-js .mainnav, .no-js .lang__btn, .no-js .util__btn, .no-js .mm-search, .no-js .review { display: none !important; }
.no-js .mobile-menu[hidden], .no-js .mobile-menu [hidden] { display: block !important; }
.no-js .mobile-menu { position: static; border-top: 1px solid var(--line); }
.no-js .site-header { position: relative; }
.no-js .fgroup__btn { display: none !important; }
.no-js .fgroup__label { display: block; margin: 14px 0 8px; font-weight: 700; }
@media (min-width: 75em) { .no-js .brand { margin-right: auto; } }

/* ---------- Yhteiset elementit ---------- */
/* Leipätekstin ja painikkeiden pitkissä yhdyssanoissa tavutuskohtaa (­) käytetään vain kapeimmilla näytöillä
   (noin 320 px tai suurennettu teksti). Muuten sana siirtyy kokonaisena seuraavalle riville. */
.hy { hyphens: none; }
@media (max-width: 20.5em) { .hy { hyphens: manual; } }
.sec-title {
  font-size: clamp(2rem, 1.3rem + 1.8vw, 2.875rem); line-height: 1.04; letter-spacing: -0.026em;
  text-wrap: balance; hyphens: manual; overflow-wrap: anywhere;
}
.sec-head { margin-bottom: clamp(32px, 4vw, 56px); }
.sec-head--split { display: flex; flex-wrap: wrap; align-items: flex-end; align-items: last baseline; justify-content: space-between; gap: 12px 32px; }

/* Asiakaspolun vaihe: sama merkki kaikissa kolmessa vaiheessa */
.step { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 0 0 22px; font-size: 1.125rem; line-height: 1.3; color: var(--ink); }
.step__n {
  display: inline-grid; place-items: center; flex: none; width: 44px; height: 44px; margin-right: 4px;
  border-radius: 4px; background: var(--ink); color: #fff; transform: rotate(-4deg);
  font-family: var(--display); font-weight: 800; font-size: 1.375rem; line-height: 1;
}
.step__of { font-weight: 600; color: var(--ink-2); }
.step__sep { color: var(--ink-2); }
.step__name { font-weight: 700; }
/* Kapeassa näkymässä vaihe ja sen nimi pinotaan, jottei välimerkki jää roikkumaan rivin loppuun */
@media (max-width: 29.99875em) {
  .step { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 14px; row-gap: 0; }
  .step__n { grid-row: 1 / span 2; }
  .step__of { align-self: end; font-size: 1rem; }
  .step__name { align-self: start; }
  .step__sep { display: none; }
}

.btn {
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6em;
  min-height: 56px; padding: 0 30px; border-radius: var(--r-btn); border: 2px solid transparent;
  font-family: var(--font); font-weight: 700; font-size: 1.1875rem; line-height: 1.2; text-decoration: none; text-align: center;
  cursor: pointer;
  transition: background-color 160ms ease, color 160ms ease, translate 220ms cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 220ms ease, scale 120ms ease;
}
/* Hiiren alla painike nousee, saa oman värinsä hehkun ja vaalea kiilto pyyhkäisee sen yli. Painikkeen väri pysyy
   logon värinä. Vain hiirellä (hover: hover), jottei kosketus jätä painiketta koholle. Painettaessa painike painuu. */
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, 0.42) 50%, transparent 65%);
  translate: -101% 0;
}
@media (hover: hover) {
  .btn:hover { translate: 0 -2px; box-shadow: 0 14px 24px -12px var(--btn-glow, rgba(15, 43, 55, 0.5)); }
  .btn:hover::before { translate: 101% 0; transition: translate 700ms cubic-bezier(0.2, 0.7, 0.2, 1); }
}
.btn:active { translate: 0 0; scale: 0.98; box-shadow: none; }
/* Painikkeen teksti on 19 px lihavoituna (WCAG:n iso teksti), jotta valkoinen teksti logon sinisellä täyttää 3:1:n */
@media (max-width: 22.49875em) { .btn { padding: 0 20px; } }
.btn--primary, .btn--primary:hover { --btn-glow: rgba(1, 165, 198, 0.7); background: var(--brand-cyan); color: #fff; }
/* Yhteydenottoon kehottavat painikkeet (ajanvaraus ja soitto) logon vihreällä. Teksti on mustetta (8,11:1),
   koska valkoinen jäisi vihreällä 1,82:1:een. */
.btn--cta, .btn--cta:hover { --btn-glow: rgba(104, 156, 0, 0.65); background: var(--lime); color: var(--ink); }
.btn--light { background: #fff; color: var(--ink); }
.btn--light:hover { background: var(--sky); color: var(--ink); }
/* Painikkeen kuvake (ajanvarauksen kalenteri): sama viivakuvake kuin reittikortissa, tekstin värillä */
.btn__icon { width: 1.25em; height: 1.25em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
/* Kapeimmalla näytöllä (alle 380 px) ylätunnisteen painike on ilman kuvaketta, jotta Valikko-painike mahtuu viereen */
@media (max-width: 23.74875em) { .topbar .btn--book .btn__icon { display: none; } }

/* Nuolilinkki: nuoli on rivinsisäinen, joten se pysyy aina viimeisen sanan perässä */
.arrow-link { display: inline; padding-block: 10px; font-weight: 700; color: var(--blue); text-decoration: none; }
.arrow-link::after, .pill::after {
  content: ""; display: inline-block; width: 1.05em; height: 1.05em; margin-left: 0.4em; vertical-align: -0.17em;
  background: currentColor;
  -webkit-mask: url("../img/nuoli.svg") center / contain no-repeat;
          mask: url("../img/nuoli.svg") center / contain no-repeat;
  transition: transform 160ms ease;
}
.arrow-link:hover { text-decoration: underline; text-decoration-thickness: 2px; }
.arrow-link:hover::after, .pill:hover::after { transform: translateX(4px); }

.pill {
  display: inline-block; max-width: 100%; min-height: 48px; padding: 12px 20px; text-wrap: balance;
  border: 1.5px solid rgba(15, 43, 55, 0.5); border-radius: var(--r-btn); color: var(--ink);
  font-weight: 700; font-size: 1.0625rem; line-height: 1.25; text-decoration: none;
  transition: background-color 160ms ease, color 160ms ease;
}
.pill:hover { background: var(--ink); color: #fff; }

/* Valokuvatut muistilaput: ProNeuronin oma työpajakuva, rajattu irti */
.note { position: absolute; z-index: 3; height: auto; pointer-events: none; filter: drop-shadow(0 4px 6px rgba(15, 43, 55, 0.16)); }

/* Kuvamuodot. Muoto on muuttujassa --shape, jotta kuvan takana oleva värilaatta noudattaa samaa ääriviivaa.
   Kaaren pystysäde --arch-y = 50 % × leveys / korkeus. */
.ph { position: relative; isolation: isolate; margin: 0; --shape: var(--r); }
.ph > picture { display: block; height: 100%; }
.ph > img, .ph > picture > img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  border-radius: var(--shape); background: var(--cream);
}
.ph--arch { --shape: 50% 50% var(--r) var(--r) / var(--arch-y, 40%) var(--arch-y, 40%) var(--r) var(--r); }
.ph--circle { --shape: 50%; aspect-ratio: 1; }
.ph--tone::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  border-radius: var(--shape); background: var(--tone, var(--apricot));
  transform: translate(16px, 16px);
}
.ph--ring > img { box-shadow: 0 0 0 var(--ring, 8px) var(--paper); }
.collage { position: relative; isolation: isolate; }

/* =========================================================
   YLÄTUNNISTE
   ========================================================= */
.site-header { position: relative; z-index: 50; background: var(--paper); }
.site-header.is-scrolled { box-shadow: 0 12px 30px -24px rgba(15, 43, 55, 0.5); }
.topbar { display: flex; align-items: center; gap: 6px; min-height: var(--bar-h); }
.brand { display: inline-flex; align-items: center; flex: 0 1 150px; min-width: 104px; margin-right: auto; padding: 6px 0; }
.brand img { width: 100%; max-width: 150px; height: auto; }

.topbar .btn--book { flex: none; min-height: 44px; padding: 0 12px; font-size: 1rem; }
/* Apupalkki näkyy 720 px:stä alkaen; Ammattilaisille ja Meille töihin 1200 px:stä alkaen */
.util { display: none; }
.menu-toggle {
  display: inline-flex; flex: none; align-items: center; gap: 6px;
  min-height: 44px; padding: 0 10px;
  background: transparent; border: 2px solid var(--ink); border-radius: var(--r-btn);
  font-weight: 700; font-size: 1rem; color: var(--ink); cursor: pointer; white-space: nowrap;
}
.menu-toggle:hover { background: var(--sky); }
.menu-toggle svg { width: 20px; height: 20px; flex: none; }
.menu-toggle .icon-close { display: none; }
.menu-toggle[aria-expanded="true"] .icon-open { display: none; }
.menu-toggle[aria-expanded="true"] .icon-close { display: inline; }

/* Haku */
.search { display: flex; align-items: center; gap: 14px; }
.search__label { font-weight: 700; font-size: 1rem; white-space: nowrap; color: var(--ink); }
.search__field {
  position: relative; flex: 1; min-width: 0; display: flex; align-items: center;
  border: 1.5px solid #6b7f88; border-radius: var(--r-btn); background: #fff;
}
.search__field:focus-within { border-color: var(--blue); box-shadow: 0 0 0 1px var(--blue); outline: none; }
.search__icon { position: absolute; left: 16px; top: 50%; width: 20px; height: 20px; transform: translateY(-50%); color: var(--ink); pointer-events: none; }
.search input {
  flex: 1; min-width: 0; width: 100%; min-height: 46px; border: 0; background: transparent;
  padding: 0 8px 0 46px; font: inherit; font-size: 1rem; color: var(--ink); border-radius: var(--r-btn);
}
.search input::placeholder { color: #566a73; opacity: 1; }
/* Kapeimmassa näkymässä hakukentän sisäväliä tiivistetään, jotta lyhyt ohjeteksti mahtuu kokonaan */
@media (max-width: 22.49875em) {
  .search input { padding: 0 2px 0 40px; }
  .search__icon { left: 13px; }
  .search button { min-width: 52px; padding: 0 12px; }
}
.search input:focus { outline: none; }
.search button {
  flex: none; min-width: 56px; min-height: 40px; margin: 3px; padding: 0 16px;
  border: 0; border-radius: calc(var(--r-btn) - 3px); background: var(--sky); color: var(--ink);
  font-weight: 700; font-size: 1rem; cursor: pointer;
}
.search button:hover { background: var(--ink); color: #fff; }

.search-row-wrap { background: var(--paper); }
.search-row { padding-top: 4px; padding-bottom: 14px; }

/* Kielivalinta */
.lang { position: relative; }
.lang__btn {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 44px; padding: 0 12px; background: transparent; border: 0; border-radius: var(--r-btn);
  font-weight: 700; font-size: 1rem; cursor: pointer; color: var(--ink); white-space: nowrap;
}
.lang__btn:hover { background: var(--sky); }
.lang__btn svg { width: 20px; height: 20px; }
.lang__menu {
  position: absolute; right: 0; top: calc(100% + 8px); min-width: 280px; z-index: 70;
  background: #fff; border-radius: 18px; padding: 8px; margin: 0; list-style: none;
  box-shadow: 0 24px 48px -16px rgba(15, 43, 55, 0.35), 0 0 0 1px var(--line);
}
.lang__menu a { display: block; padding: 10px 14px; border-radius: 12px; text-decoration: none; color: var(--ink); font-size: 1.0625rem; font-weight: 600; }
.lang__menu a:hover { background: var(--sky); }
.lang__menu a[aria-current] { color: var(--blue); font-weight: 700; }
.lang__menu small { display: block; font-size: 1rem; font-weight: 400; color: var(--ink-2); }

/* Päänavigaatio */
.mainnav { display: none; background: var(--paper); border-bottom: 1px solid var(--line); }
.mainnav__list { display: flex; flex-wrap: wrap; align-items: stretch; gap: 0 4px; list-style: none; margin: 0; padding: 0; position: relative; }
.mainnav__item { position: static; display: flex; }
.mainnav__item--rel { position: relative; }
.mainnav__link, .mainnav__btn {
  position: relative; display: inline-flex; align-items: center; gap: 7px;
  min-height: 52px; padding: 0 14px;
  font-size: 1.0625rem; font-weight: 600; color: var(--ink); text-decoration: none;
  background: none; border: 0; cursor: pointer;
}
.mainnav__item:first-child .mainnav__btn { padding-left: 0; }
.mainnav__link::after, .mainnav__btn::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: -1px; height: 4px;
  background: var(--blue); transform: scaleX(0); transform-origin: left; transition: transform 160ms ease;
}
.mainnav__item:first-child .mainnav__btn::after { left: 0; }
.mainnav__link:hover, .mainnav__btn:hover { color: var(--blue); }
.mainnav__btn[aria-expanded="true"] { color: var(--blue); }
.mainnav__btn[aria-expanded="true"]::after, .mainnav__link[aria-current="page"]::after { transform: scaleX(1); }
.chev { width: 14px; height: 14px; transition: transform 160ms ease; flex: none; }
[aria-expanded="true"] > .chev { transform: rotate(180deg); }

/* Megamenu */
.mega {
  position: absolute; left: 0; right: 0; top: 100%; margin-top: 1px; z-index: 60;
  background: #fff; border-radius: 0 0 28px 28px;
  box-shadow: 0 40px 70px -30px rgba(15, 43, 55, 0.45), 0 0 0 1px var(--line);
  max-height: calc(100vh - var(--hdr, 150px) - 16px); overflow-y: auto; overscroll-behavior: contain;
}
.mega[hidden], .dropdown[hidden], .lang__menu[hidden] { display: none; }
.mega__top { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 22px 40px 0; }
.mega__all { font-size: 1.125rem; }
.mega__close {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px;
  background: transparent; border: 2px solid var(--line-strong); border-radius: var(--r-btn);
  color: var(--ink); font-size: 1rem; font-weight: 700; cursor: pointer;
}
.mega__close:hover { background: var(--sky); border-color: var(--ink); }
.mega__close svg { width: 16px; height: 16px; }
.mega__cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: auto auto; gap: 0 40px; padding: 22px 40px 34px; }
.mega__cols > div { display: grid; grid-row: span 2; grid-template-rows: subgrid; align-content: start; }
.mega__h {
  margin: 0 0 12px; align-self: end;
  font-family: var(--display); font-weight: 800; font-size: clamp(1.1875rem, 1.75vw, 1.4375rem); line-height: 1.1; letter-spacing: -0.01em; color: var(--brand-cyan);
  hyphens: manual; overflow-wrap: anywhere;
}
.mega__list { list-style: none; margin: 0; padding: 0; }
.mega__list a { display: block; padding: 10px 0; color: var(--ink); text-decoration: none; font-size: 1.0625rem; line-height: 1.35; }
.mega__list a:hover { color: var(--blue); text-decoration: underline; text-decoration-thickness: 2px; }
.mega__bottom {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 40px;
  background: var(--sky); padding: 14px 40px; border-radius: 0 0 28px 28px; font-size: 1.0625rem;
}
.mega__ages, .mega__extra { display: flex; flex-wrap: wrap; align-items: center; gap: 0 20px; }
.mega__extra { list-style: none; margin: 0; padding: 0; }
.mega__extra { gap: 0 32px; }
.mega__bottom strong { font-weight: 700; }
.mega__bottom ul { display: flex; flex-wrap: wrap; gap: 4px 18px; list-style: none; margin: 0; padding: 0; }
.mega__bottom a { display: inline-block; padding: 10px 0; font-weight: 700; color: var(--blue); text-decoration: none; }
.mega__bottom a:hover { text-decoration: underline; }
/* Avoimen megamenun alla sivu himmenee, jotta paneeli erottuu sisällöstä. Himmennys ottaa napsautuksen vastaan,
   joten sen alla oleva linkki ei aktivoidu, kun valikko suljetaan napsauttamalla sivua. */
body:has(#btn-palvelut[aria-expanded="true"])::after {
  content: ""; position: fixed; inset: 0; z-index: 40; background: rgba(15, 43, 55, 0.28);
}

/* Pienet pudotusvalikot */
.dropdown {
  position: absolute; left: 0; top: 100%; margin: 1px 0 0; min-width: 330px; z-index: 60;
  background: #fff; border-radius: 0 0 20px 20px; padding: 10px; list-style: none;
  box-shadow: 0 30px 60px -24px rgba(15, 43, 55, 0.45), 0 0 0 1px var(--line);
}
.dropdown--right { left: auto; right: 0; }
.util .dropdown--right { left: -12px; right: auto; min-width: 360px; }
.dropdown a { display: block; padding: 12px 14px; border-radius: 12px; text-decoration: none; color: var(--ink); font-size: 1.0625rem; line-height: 1.35; }
.dropdown a:hover { background: var(--sky); color: var(--ink); }
.dropdown__group { margin-top: 6px; }
.dropdown__group ul { list-style: none; margin: 0; padding: 0; }
.dropdown__h { display: block; padding: 10px 14px 2px; font-size: 0.9375rem; font-weight: 700; color: var(--ink-2); }
.dropdown__info { margin-top: 6px; padding: 12px 14px; border-radius: 12px; background: var(--sky); font-size: 1rem; line-height: 1.5; color: var(--ink); }
.dropdown .dropdown__info a { display: inline; padding: 0; border-radius: 0; font-weight: 700; }
.dropdown .dropdown__info a:hover { background: none; text-decoration: underline; }

/* Apupalkki 720 px alkaen: puhelin, kieli ja haku (erillinen hakurivi jää pois). 1200 px alkaen myös .util__wide-kohdat.
   Mobiilivalikko avautuu silloin oikeasta reunasta paneelina himmennetyn sivun päälle. */
@media (min-width: 45em) {
  :root { --hdr: calc(var(--bar-h) + 2.75rem); }
  .util { display: block; background: color-mix(in srgb, var(--sky) 55%, #fff); }
  .util__inner { display: flex; align-items: center; justify-content: flex-end; gap: 10px; min-height: 2.75rem; }
  .util__list { display: flex; align-items: center; gap: 2px; list-style: none; margin: 0; padding: 0; }
  .util__item { position: relative; }
  .util__link, .util__btn, .util .lang__btn {
    display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; border: 0; border-radius: 10px;
    background: none; color: var(--ink); font: inherit; font-size: 0.9375rem; font-weight: 600; text-decoration: none; cursor: pointer; white-space: nowrap;
  }
  .util__link:hover, .util__btn:hover, .util .lang__btn:hover,
  .util__btn[aria-expanded="true"], .util .lang__btn[aria-expanded="true"] { background: #fff; color: var(--ink); }
  .util__tel svg, .util .lang__btn svg:first-child { width: 18px; height: 18px; color: var(--blue); }
  /* Some-ikonit apupalkissa (nimet aria-labelissa) */
  .util__icon { padding: 0 9px; }
  .util__icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .util :focus-visible { outline-offset: 1px; }
  .util .dropdown { top: calc(100% + 6px); border-radius: 20px; }
  .util .lang__menu { top: calc(100% + 6px); }
  .util__search { width: 22rem; margin-left: 6px; }
  .util__search .search__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .util__search .search__field { border-width: 1px; border-color: #788c94; }
  .util__search .search__field:focus-within { border-color: var(--blue); }
  .util__search input { min-height: 34px; padding-left: 38px; font-size: 0.9375rem; }
  .util__search .search__icon { left: 13px; width: 17px; height: 17px; }
  .util__search button { min-width: 0; min-height: 28px; margin: 3px; padding: 0 14px; font-size: 0.9375rem; }

  .util__wide { display: none; }
  .search-row-wrap, .mm-search { display: none; }
  .js .mobile-menu { left: auto; width: min(28rem, 100%); border-top: 0; border-left: 1px solid var(--line); box-shadow: -28px 0 56px -32px rgba(15, 43, 55, 0.45); }
  .js .mobile-menu__inner { max-width: none; padding-top: 20px; }
  html.menu-open body::after { content: ""; position: fixed; left: 0; right: 0; bottom: 0; top: var(--hdr, 108px); z-index: 55; background: rgba(15, 43, 55, 0.28); }
}
/* Työpöydän ylätunniste (1200 px alkaen): ohut apupalkki ja pääpalkki, jossa logo, päävalikko ja Ajanvaraus.
   Raja on myös luonnos.js:ssä (html[data-desktop-mq]). */
@media (min-width: 75em) {
  /* --hdr: oletus ennen kuin luonnos.js mittaa ylätunnisteen (esim. toiselta sivulta tultaessa ankkuriin) */
  :root { --bar-h: 80px; --hdr: calc(var(--bar-h) + 2.75rem); }
  .site-header { position: sticky; top: 0; transition: transform 220ms ease, box-shadow 220ms ease; }
  .site-header.is-hidden { transform: translateY(-100%); }
  .site-header.is-hidden:has(:focus-visible) { transform: none; transition: none; }

  .util__wide { display: block; }

  .topbar { position: relative; gap: 0 20px; }
  .brand { flex: none; margin-right: 12px; }
  .brand img { width: 200px; max-width: none; }
  .mainnav { display: flex; align-self: stretch; margin-right: auto; background: none; border: 0; }
  .mainnav__list { position: static; flex-wrap: nowrap; }
  .mainnav__item { align-items: stretch; }
  .mainnav__link, .mainnav__btn { min-height: var(--bar-h); padding: 0 12px; }
  .mainnav__item:first-child .mainnav__btn { padding-left: 12px; }
  .mainnav__link::after, .mainnav__btn::after, .mainnav__item:first-child .mainnav__btn::after { left: 12px; right: 12px; bottom: 0; }
  /* Megavalikko avautuu pääpalkin alle koko sisältöleveydelle */
  .mega { left: var(--gutter); right: var(--gutter); }
  .topbar .btn--book { min-height: 48px; padding: 0 26px; font-size: 1.0625rem; }
  .menu-toggle, .search-row-wrap, .mobile-menu { display: none !important; }
  /* Pudotusvalikon kohtien teksti alkaa samasta kohdasta kuin painikkeen teksti */
  .mainnav .dropdown { left: -12px; }
  .mainnav { min-width: 0; }
}
/* 1200–1319 px: tiiviimpi pääpalkki, jotta Ajanvaraus mahtuu myös suurennetulla tekstivälistyksellä (WCAG 1.4.12) */
@media (min-width: 75em) and (max-width: 82.49875em) {
  .topbar { gap: 0 10px; }
  .brand { margin-right: 4px; }
  .brand img { width: 168px; }
  .mainnav__link, .mainnav__btn, .mainnav__item:first-child .mainnav__btn { padding: 0 9px; }
  .mainnav__link::after, .mainnav__btn::after, .mainnav__item:first-child .mainnav__btn::after { left: 9px; right: 9px; }
  .mainnav .dropdown { left: -9px; }
  .topbar .btn--book { padding: 0 20px; }
}
@media (max-width: 74.99875em) {
  .site-header { position: sticky; top: 0; transition: box-shadow 220ms ease; }
  .search-row .search__label, .mm-search .search__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
/* Puhelimella Valikko-teksti on kuvakkeen alla, jotta logo (Osa AivoSi-konsernia -teksteineen) mahtuu luettavan kokoisena
   ja Ajanvaraus näkyy 340 px:stä alkaen. Kapeammalla Ajanvaraus on valikon alussa. */
@media (max-width: 29.99875em) {
  .topbar { gap: 8px; }
  .brand { flex: 0 1 148px; min-width: 112px; }
  .brand img { max-width: 148px; }
  .topbar .btn--book { padding: 0 12px; font-size: 0.9375rem; }
  .menu-toggle {
    flex-direction: column; justify-content: center; gap: 2px; min-width: 48px; min-height: 48px; padding: 2px 4px;
    border: 0; border-radius: var(--r-btn); font-size: 0.75rem; line-height: 1;
  }
  .menu-toggle svg { width: 24px; height: 24px; }
}
.mobile-menu__book { display: none; }
@media (max-width: 21.24875em) {
  .topbar .btn--book { display: none; }
  .mobile-menu__book { display: flex; }
}

/* Mobiilivalikko */
.mobile-menu {
  position: fixed; left: 0; right: 0; bottom: 0; top: var(--hdr, var(--bar-h));
  background: var(--paper); overflow-y: auto; overscroll-behavior: contain;
  border-top: 1px solid var(--line); z-index: 60;
}
.mobile-menu[hidden] { display: none; }
.mobile-menu__inner { padding: 14px var(--gutter) 56px; max-width: 760px; }
.mobile-menu__book { width: 100%; margin: 0 0 12px; }
.mm-search { margin-bottom: 14px; }
.mm-lang { margin: 28px 0 8px; }
.mm-some { margin: 24px 0 8px; }
.mm-some p { font-size: 1rem; font-weight: 700; color: var(--ink-2); margin-bottom: 8px; }
.mm-some ul { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.mm-some .follow__link { border: 2px solid var(--line-strong); }
.mm-lang p { font-size: 1rem; font-weight: 700; color: var(--ink-2); margin-bottom: 8px; }
.mm-lang ul { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; list-style: none; margin: 0; padding: 0; }
.mm-lang a { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 2px 12px; min-height: 48px; padding: 11px 18px; border: 2px solid var(--line-strong); border-radius: var(--r-btn); text-decoration: none; color: var(--ink); font-size: 1rem; font-weight: 600; line-height: 1.3; }
.mm-lang a small { font-size: 0.875rem; font-weight: 400; color: var(--ink-2); }
.mm-lang a[aria-current] { border-color: var(--ink); background: var(--ink); color: #fff; }
.mm-list { list-style: none; margin: 14px 0 0; padding: 0; }
.mm-list > li + li { border-top: 1px solid var(--line); }
.mm-link, .mm-btn, .mm-label {
  display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 60px; padding: 10px 2px; background: none; border: 0; text-align: left;
  font-family: var(--display); font-weight: 700; font-size: 1.3125rem; letter-spacing: -0.01em; line-height: 1.15;
  color: var(--ink); text-decoration: none; cursor: pointer; hyphens: manual; overflow-wrap: anywhere;
}
.mm-link:hover, .mm-btn:hover { color: var(--blue); }
.mm-btn .chev { width: 20px; height: 20px; }
.mm-btn[aria-expanded="true"] { color: var(--blue); }
.mm-sub { list-style: none; margin: 0; padding: 0 0 14px; }
.mm-sub[hidden] { display: none; }
.mm-sub a { display: block; padding: 11px 2px 11px 16px; font-size: 1.125rem; color: var(--ink); text-decoration: none; }
.mm-sub a:hover { color: var(--blue); text-decoration: underline; }
.mm-sub .mm-all { font-weight: 700; color: var(--blue); padding-left: 2px; }
.mm-sub__group ul { list-style: none; margin: 0; padding: 0; }
.mm-sub__h { display: block; padding: 12px 2px 2px 16px; font-size: 1rem; font-weight: 700; color: var(--ink-2); }
.mm-sub__group a { padding-left: 30px; }
.mm-label { display: none; cursor: auto; }
.no-js .mm-btn { display: none !important; }
.no-js .mm-label { display: flex; }
.mm-group .mm-btn, .mm-group .mm-label { font-family: var(--font); font-size: 1.1875rem; font-weight: 700; letter-spacing: 0; padding-left: 16px; min-height: 56px; }
.mm-group .mm-sub a { padding-left: 30px; }
.mm-routes { background: var(--sky); border-radius: 18px; padding: 14px 18px; margin: 10px 0 16px; }
.mm-routes p { font-size: 1rem; font-weight: 700; color: var(--ink-2); margin: 4px 0; }
.mm-routes p + ul + p { margin-top: 12px; }
.mm-routes ul { list-style: none; margin: 0; padding: 0; }
.mm-routes a { display: block; padding: 9px 0; font-size: 1.125rem; font-weight: 600; color: var(--ink); text-decoration: none; }
.mm-routes a:hover { color: var(--blue); text-decoration: underline; }
.mm-call { margin-top: 26px; padding: 20px; border-radius: 18px; background: var(--sky); }
.mm-call__btn { width: 100%; }
.mm-call__btn svg { width: 22px; height: 22px; flex: none; }
.mm-call p { margin-top: 10px; font-size: 1rem; color: var(--ink-2); text-align: center; }
/* Vain juuri: jos myös body saisi overflow: hidden, siitä tulisi oma vierityssäiliö ja tarttuva yläpalkki vierisi pois näkyvistä. */
html.menu-open { overflow: hidden; }
html.menu-open .review { display: none; }

/* =========================================================
   HERO – ProNeuronin oma tilakuva koko sivun levyisenä taustana.
   Teksti on valkoisessa paneelissa, joten se on luettavaa kuvan kohdasta riippumatta.
   ========================================================= */
.hero { position: relative; isolation: isolate; overflow-x: clip; }
.hero__media { position: relative; }
.hero__bg { display: block; height: clamp(260px, 70vw, 520px); background: var(--cream); }
.hero__bg img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.hero__inner { position: relative; z-index: 1; width: 100%; }
/* Teksti on valkoisessa paneelissa (ei varjoa, ohut reunaviiva), joten se on luettavaa kuvan kohdasta riippumatta */
.hero__panel {
  position: relative; margin-top: -56px; padding: 24px 20px 28px; border-radius: 24px; container-type: inline-size;
  background: #fff;
}
.hero__eyebrow { display: flex; align-items: flex-start; gap: 10px; font-size: clamp(0.9375rem, 0.9rem + 0.15vw, 1rem); font-weight: 700; line-height: 1.45; color: var(--ink-2); text-wrap: balance; }
/* Sijaintineula: sama viivaikonien tyyli kuin muualla sivulla */
.hero__eyebrow::before {
  content: ""; flex: none; width: 20px; height: 20px; margin-top: 1px;
  background: var(--brand-cyan);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21.2s-6.6-5.7-6.6-11.2a6.6 6.6 0 0 1 13.2 0c0 5.5-6.6 11.2-6.6 11.2z'/%3E%3Ccircle cx='12' cy='10' r='2.5'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21.2s-6.6-5.7-6.6-11.2a6.6 6.6 0 0 1 13.2 0c0 5.5-6.6 11.2-6.6 11.2z'/%3E%3Ccircle cx='12' cy='10' r='2.5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.hero__title {
  margin-top: 14px; font-size: clamp(2.25rem, 10.5cqi, 3.5rem); line-height: 0.98; letter-spacing: -0.03em;
  color: var(--brand-cyan); text-wrap: balance;
}
.swash {
  background: url("../img/alleviivaus.svg") no-repeat 0 100% / 100% 0.3em;
  padding-bottom: 0.16em;
}
.hero__lead { margin-top: 20px; font-size: clamp(1.0625rem, 0.95rem + 0.45vw, 1.3125rem); line-height: 1.55; max-width: 27em; text-wrap: pretty; }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 28px; margin-top: 28px; }
.hero__actions .arrow-link { font-size: 1.125rem; }
/* Painike, jonka perässä on nuoli (heron pääpainike) */
.btn--arrow::after {
  content: ""; flex: none; width: 1.1em; height: 1.1em; background: currentColor;
  -webkit-mask: url("../img/nuoli.svg") center / contain no-repeat;
          mask: url("../img/nuoli.svg") center / contain no-repeat;
  transition: transform 160ms ease;
}
.btn--arrow:hover::after { transform: translateX(3px); }
/* ILO-lappu on pienenä kuvan puolella, jottei se peitä otsikkoa eikä kuvan olennaisia kohtia */
.note--hero { width: clamp(52px, 5.5vw, 84px); top: 14px; right: var(--gutter); transform: rotate(8deg); }
/* Hillitty esiintulo: paneelin sisältö nousee näkyviin porrastetusti (ei vähennetyn liikkeen asetuksella) */
@keyframes hero-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  .hero__panel > * { animation: hero-rise 520ms cubic-bezier(0.2, 0.7, 0.2, 1) both; }
  .hero__panel > :nth-child(2) { animation-delay: 50ms; }
  .hero__panel > :nth-child(3) { animation-delay: 100ms; }
  .hero__panel > :nth-child(4) { animation-delay: 150ms; }
}
.hero__notes { padding-block: 16px; }
[data-notes="off"] .hero__notes { display: none; }
.hero__notes p + p { margin-top: 10px; }
@media (max-width: 59.99875em) { .hero__inner { padding-bottom: 28px; } }
@media (max-width: 44.99875em) { .hero__br { display: none; } .hero__title { font-size: clamp(2rem, 13.5cqi, 3.5rem); } }
/* Tabletilla pystyssä kuva on tekstin yläpuolella, jotta paneeli ei peitä kuvan ihmisiä */
@media (min-width: 45em) and (max-width: 59.99875em) { .hero__panel { padding: 32px 36px 36px; border-radius: 28px; } }

/* 960 px alkaen kuva täyttää koko heron reunasta reunaan, ja tekstipaneeli on sisältöalueen vasemmassa reunassa.
   Kuvan ihmiset ovat oikealla paneelin vieressä. Otsikko on kahdella rivillä. */
@media (min-width: 60em) {
  .hero { display: grid; align-items: center; min-height: clamp(560px, 76vh, 780px); }
  .hero__media { position: absolute; inset: 0; z-index: -1; }
  .hero__bg { height: 100%; }
  .hero__bg img { object-position: 70% 20%; }
  .hero__inner { padding-block: clamp(64px, 7.5vw, 120px); }
  .hero__panel { width: min(700px, 54vw); margin: 0; padding: clamp(28px, 3vw, 44px); border-radius: 28px; }
  .hero__title { margin-top: 16px; font-size: clamp(2.5rem, 9cqi, 4rem); }
  .hero__lead { margin-top: clamp(20px, 2vw, 28px); }
  .hero__actions { margin-top: 28px; }
  .note--hero { top: clamp(20px, 3vw, 40px); right: max(var(--gutter), calc((100% - var(--content)) / 2)); }
}
/* Matala näyttö (esim. 1366 × 768): Kela-kaistan otsikko ja painike näkyvät ilman vieritystä */
@media (min-width: 60em) and (max-height: 51.25em) {
  .hero { min-height: clamp(460px, 66vh, 540px); }
  .hero__inner { padding-block: 44px; }
  .hero__panel { padding: 28px 36px 30px; }
  .hero__title { margin-top: 10px; font-size: clamp(2.5rem, 8cqi, 3.5rem); }
  .hero__lead { margin-top: 18px; }
  .hero__actions { margin-top: 22px; }
  main > .kela { padding-top: 36px; }
}

/* =========================================================
   KELA-ASIAKKAALLE – heti heron alla
   ========================================================= */
.kela { --focus: var(--ink); background: var(--sky); padding: clamp(40px, 5vw, 64px) 0; }
.kela__inner { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px 48px; }
.kela__logo { display: block; width: auto; height: clamp(34px, 3vw, 44px); margin-bottom: clamp(24px, 2.6vw, 34px); }
.kela__title { margin-top: 6px; font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.5rem); line-height: 1.08; letter-spacing: -0.024em; color: var(--ink); text-wrap: balance; }
.kela__lead { margin-top: 14px; font-size: var(--lead); line-height: 1.55; max-width: 36em; text-wrap: pretty; }
.kela__services { margin-top: 12px; font-size: 1rem; line-height: 1.75; color: var(--ink-2); max-width: 48em; text-wrap: pretty; }
.kela__services strong { color: var(--ink); }
/* Palvelut ovat lauseen sisäisiä linkkejä (WCAG 2.5.8 -poikkeus), jotta kaista pysyy matalana myös puhelimella */
.kela__services a { color: var(--ink); font-weight: 600; text-decoration: underline; text-decoration-color: rgba(15, 43, 55, 0.45); text-underline-offset: 0.22em; }
.kela__services a:hover { color: var(--blue-deep); text-decoration-color: currentColor; text-decoration-thickness: 2px; }
.kela__actions { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.kela__actions .btn { margin-bottom: 10px; }
.kela__actions .arrow-link { color: var(--blue); font-size: 1.0625rem; }
@media (max-width: 44.99875em) { .kela { padding-block: 36px; } }
.kela__note { grid-column: 1 / -1; }
@media (min-width: 60em) {
  .kela__inner { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
  .kela__actions { padding-left: clamp(24px, 3vw, 48px); }
}

/* =========================================================
   VAIHE 1: PALVELUT – muistilappuseinä
   ========================================================= */
.services { padding: var(--section) 0; }
.tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.tile { container-type: inline-size; --tone: var(--sky); --tilt: 0deg; }
.tile:nth-child(even) { --tone: var(--lime-tint); }
/* Kapeassa näkymässä laatta on matala rivi: nimi ja kuvaus vasemmalla, nuoli oikealla */
.tile__link {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; align-items: center;
  height: 100%; padding: 20px 18px 20px 22px;
  background: var(--tone); color: var(--ink); text-decoration: none; border-radius: 3px;
  transform: rotate(var(--tilt));
  transition: transform 180ms ease, box-shadow 180ms ease;
}
.tile__link:hover { color: var(--ink); transform: translateY(-3px) rotate(var(--tilt)); box-shadow: 0 18px 30px -22px rgba(15, 43, 55, 0.55); }
.tile__link:focus-visible { outline: 3px solid var(--ink); outline-offset: 5px; }
.tile__name {
  grid-column: 1; font-family: var(--display); font-weight: 800; letter-spacing: -0.02em; line-height: 1.04;
  font-size: clamp(1.375rem, 6.8cqi, 1.75rem); hyphens: manual; overflow-wrap: anywhere;
}
.tile__desc { grid-column: 1; margin-top: 8px; font-size: 1.0625rem; line-height: 1.45; max-width: 26em; }
.tile__go {
  grid-column: 2; grid-row: 1 / span 2;
  display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%;
  background: var(--ink); color: var(--paper);
  transition: transform 180ms ease;
}
.tile__go::after {
  content: ""; width: 1.15rem; height: 1.15rem; background: currentColor;
  -webkit-mask: url("../img/nuoli.svg") center / contain no-repeat;
          mask: url("../img/nuoli.svg") center / contain no-repeat;
}
.tile__link:hover .tile__go { transform: translateX(4px); }
.tile--index .tile__link { background: transparent; box-shadow: inset 0 0 0 1.5px rgba(15, 43, 55, 0.5); }
.tile--index .tile__name { color: var(--blue); }
.tile--index .tile__link:hover { background: var(--sky); box-shadow: inset 0 0 0 2px var(--ink), 0 18px 30px -22px rgba(15, 43, 55, 0.55); }

/* Hyvin kapeassa näkymässä nuolipallo väistyy pienen nuolen tieltä, jotta kuvaus mahtuu leveämmälle */
@media (max-width: 29.99875em) {
  .tile__link { grid-template-columns: minmax(0, 1fr); padding: 18px 20px; }
  .tile__go { display: none; }
  .tile__name { text-wrap: balance; }
  .tile__name::after {
    content: ""; display: inline-block; width: 0.8em; height: 0.8em; margin-left: 0.3em; vertical-align: -0.04em;
    background: currentColor;
    -webkit-mask: url("../img/nuoli.svg") center / contain no-repeat;
            mask: url("../img/nuoli.svg") center / contain no-repeat;
  }
}

/* Palveluohjaimen jälkeen: "Tai valitse palvelu suoraan" */
.tiles__h { margin: clamp(48px, 6vw, 72px) 0 clamp(20px, 2.4vw, 28px); font-size: clamp(1.375rem, 1.1rem + 0.8vw, 1.75rem); line-height: 1.15; letter-spacing: -0.02em; color: var(--ink); }
.quick { margin-top: clamp(36px, 4vw, 48px); display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
.quick__row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.quick__label { width: 100%; font-weight: 700; font-size: 1.125rem; }
.quick__list { display: flex; flex-wrap: wrap; gap: 10px 12px; list-style: none; margin: 0; padding: 0; }
.services .draft-note { margin-top: 22px; }

/* Leveämmässä näkymässä laatta on muistilappu: nimi ylhäällä, kuvaus alhaalla nuolen vieressä */
@media (min-width: 40em) {
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
  .tile:nth-child(odd) { --tilt: -0.5deg; }
  .tile:nth-child(even) { --tilt: 0.4deg; }
  .tile__link {
    display: flex; flex-direction: column; align-items: flex-start; min-height: 236px; padding: 30px 30px 28px;
    background-image: linear-gradient(rgba(15, 43, 55, 0.05), transparent 28px);
    box-shadow: 0 14px 22px -18px rgba(15, 43, 55, 0.45);
  }
  .tile--index .tile__link { background-image: none; }
  .tile__name { font-size: clamp(1.625rem, 8cqi, 2.25rem); margin-bottom: 20px; }
  .tile__desc { margin-top: auto; padding-right: 72px; }
  .tile__go { position: absolute; right: 24px; bottom: 24px; width: 52px; height: 52px; }
  .quick__label { width: auto; min-width: 16em; }
}
/* Pikalinkit alkavat laattaruudukon toisen sarakkeen kohdalta */
@media (min-width: 60em) {
  .quick__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; align-items: start; }
  .quick__label { min-width: 0; line-height: 48px; }
}
@media (min-width: 75em) {
  .quick__row { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 28px; }
  .quick__list { grid-column: 2 / -1; }
}
/* 960–1439 px: kolme pilleriä eivät mahdu kahteen laattasarakkeeseen, joten ne ovat yhdellä rivillä otsikon alla */
@media (min-width: 60em) and (max-width: 89.99875em) {
  .quick__row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; }
  .quick__label { width: 100%; min-width: 0; line-height: 1.4; }
}
@media (min-width: 40em) and (max-width: 74.99875em) {
  .tile:nth-child(4n+1), .tile:nth-child(4n) { --tone: var(--sky); }
  .tile:nth-child(4n+2), .tile:nth-child(4n+3) { --tone: var(--lime-tint); }
}
@media (min-width: 75em) {
  .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
  .tile:nth-child(3n+1) { --tilt: -0.6deg; }
  .tile:nth-child(3n+2) { --tilt: 0deg; }
  .tile:nth-child(3n) { --tilt: 0.5deg; }
  .tile__link { min-height: 248px; padding: 32px; }
  .tile__name { font-size: clamp(1.75rem, 7.6cqi, 2.375rem); }
}
.tiles > .tile--index { --tilt: 0deg; }

/* =========================================================
   PALVELUOHJAIN ("Mistä aloitan?") – Vaihe 1:ssä palvelulaattojen alla
   ========================================================= */
.finder { position: relative; margin-top: 0; padding: clamp(22px, 3vw, 36px); border-radius: var(--r); background: var(--lime-tint); }
.finder__head { margin-bottom: 24px; }
.finder__h { font-size: clamp(1.625rem, 1.2rem + 1vw, 2.125rem); line-height: 1.08; letter-spacing: -0.022em; color: var(--ink); text-wrap: balance; }
.finder__intro { margin-top: 8px; font-size: var(--lead); line-height: 1.55; color: var(--ink-2); max-width: 34em; text-wrap: pretty; }
.note--finder { display: none; }
@media (min-width: 40em) {
  .finder__head { padding-right: 120px; }
  .note--finder { display: block; top: -30px; right: clamp(20px, 3vw, 40px); width: var(--note-w); transform: rotate(6deg); }
}
.finder__form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; align-content: start; }
.finder__set { min-width: 0; margin: 0; padding: 0; border: 0; }
.finder__q { display: flex; align-items: center; gap: 12px; padding: 0; margin-bottom: 12px; font-family: var(--display); font-weight: 800; font-size: 1.25rem; line-height: 1.2; letter-spacing: -0.01em; color: var(--ink); }
.finder__n {
  display: inline-grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 3px;
  background: var(--ink); color: #fff; transform: rotate(-4deg); font-size: 1.0625rem; line-height: 1;
}
.finder__opts { display: flex; flex-wrap: wrap; gap: 8px 10px; }
.chip { position: relative; display: inline-flex; max-width: 100%; }
.chip input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.chip span {
  display: inline-block; min-height: 44px; padding: 10px 16px; border: 1.5px solid rgba(15, 43, 55, 0.56); border-radius: var(--r-btn);
  font-weight: 600; font-size: 1rem; line-height: 1.3; color: var(--ink); text-wrap: balance;
  transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease;
}
.chip:hover span { border-color: var(--ink); background: var(--sky); }
.chip input:checked + span { background: var(--ink); border-color: var(--ink); color: #fff; }
.chip input:focus-visible + span { outline: 3px solid var(--ink); outline-offset: 3px; }
.finder__out { margin-top: 24px; }
.finder__empty { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 14px; background: #fff; font-size: 1rem; line-height: 1.5; color: var(--ink); }
.finder__empty[hidden] { display: none; }
.finder__ico { flex: none; width: 28px; height: 28px; }
.finder__empty span { text-wrap: pretty; }
.finder__nojs { padding: 14px 16px; border-radius: 14px; background: #fff; font-size: 1rem; line-height: 1.5; color: var(--ink); }
.no-js .finder__form, .no-js .finder__out { display: none; }
.finder__title { margin: 0 0 4px; font-family: var(--display); font-weight: 800; font-size: 1.25rem; line-height: 1.2; letter-spacing: -0.01em; color: var(--ink); }
.finder__list { list-style: none; margin: 8px 0 0; padding: 0; }
.finder__list li { padding: 10px 0; }
.finder .finder__link { font-weight: 700; font-size: 1.125rem; line-height: 1.35; color: var(--blue); text-decoration: underline; text-underline-offset: 0.2em; }
.finder .finder__link:hover { color: var(--blue-deep); text-decoration-thickness: 2px; }
.finder__list p { margin-top: 2px; font-size: 1rem; line-height: 1.5; color: var(--ink-2); text-wrap: pretty; }
.finder__hint { margin-top: 8px; font-size: 1rem; color: var(--ink-2); }
.finder__hint a { font-weight: 700; color: var(--blue); }
.finder__reset {
  display: inline-flex; align-items: center; min-height: 44px; margin-top: 6px; padding: 0; border: 0; background: none;
  font: inherit; font-size: 1rem; font-weight: 700; color: var(--ink); text-decoration: underline; text-underline-offset: 0.2em; cursor: pointer;
}
.finder__reset:hover { color: var(--blue-deep); text-decoration-thickness: 2px; }

/* =========================================================
   VAIHE 2: VARAA AIKA TAI KYSY NEUVOA – limenvihreä kaista
   ========================================================= */
.start { --focus: var(--ink); background: var(--lime-tint); padding: var(--section) 0; overflow-x: clip; }
.start a:not(.btn) { color: var(--ink); }
.start .sec-title { color: var(--ink); }
.start .step__of, .start .step__sep { color: var(--ink); }
/* Ajanvaraus- ja puhelinkortit: sama rakenne (ikoni, otsikko, teksti), painikkeet kortin alareunassa samalla tasolla */
.routes { list-style: none; margin: clamp(32px, 4vw, 56px) 0 0; padding: 0; display: grid; gap: 16px; }
.route { display: flex; flex-direction: column; gap: 12px; padding: 26px 24px 28px; border-radius: 24px; background: #fff; }
.route__icon { display: block; color: var(--blue); line-height: 0; }
.route__icon svg { width: 34px; height: 34px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.route__title { margin-top: 4px; font-size: clamp(1.375rem, 1.1rem + 0.6vw, 1.625rem); line-height: 1.15; letter-spacing: -0.02em; color: var(--ink); text-wrap: balance; }
.route__text { font-size: 1.0625rem; line-height: 1.55; color: var(--ink-2); max-width: 32em; text-wrap: pretty; }
.route__more summary {
  display: inline-flex; align-items: center; gap: 10px; padding: 6px 0; cursor: pointer; list-style: none;
  font-weight: 700; color: var(--ink);
}
.route__more summary::-webkit-details-marker { display: none; }
.route__more summary::before {
  content: ""; width: 8px; height: 8px; margin: 0 2px 3px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(-45deg); transition: transform 160ms ease;
}
.route__more[open] summary::before { transform: rotate(45deg); margin-bottom: 6px; }
.route__more summary:hover { text-decoration: underline; }
.route__more p { margin-top: 6px; font-size: 1rem; line-height: 1.55; color: var(--ink-2); max-width: 34em; }
.route__more a { font-weight: 700; text-decoration: underline; }
/* Linkkirivi ja painike ovat kortin alareunassa, joten molempien korttien painikkeet ovat samalla tasolla */
.route__link { margin-top: auto; padding-top: 4px; }
.route__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.start .route .arrow-link { color: var(--blue); font-size: 1.0625rem; }
.btn__ico { width: 1.15em; height: 1.15em; flex: none; }

/* Usein kysyttyä: kolme avattavaa kysymystä; otsikko kortin 1 ja lista kortin 2 linjassa */
.faq { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px clamp(16px, 2vw, 28px); margin-top: clamp(40px, 5vw, 64px); }
.faq__title { font-size: clamp(1.5rem, 1.15rem + 0.9vw, 2rem); line-height: 1.1; letter-spacing: -0.02em; color: var(--ink); }
.faq__links { display: flex; flex-wrap: wrap; gap: 0 28px; list-style: none; margin: 10px 0 0; padding: 0; }
.faq__links .arrow-link { display: inline-block; font-size: 1.125rem; }
.faq__list { display: grid; gap: 10px; }
.faq__item { border-radius: 16px; background: #fff; }
.faq__item summary {
  display: flex; align-items: center; gap: 14px; min-height: 56px; padding: 14px 20px; border-radius: 16px;
  font-weight: 700; font-size: 1.0625rem; line-height: 1.4; color: var(--ink); cursor: pointer; list-style: none;
}
.faq__item summary::-webkit-details-marker { display: none; }
/* Plus- ja miinusmerkki tummassa ympyrässä */
.faq__item summary::before {
  content: ""; flex: none; width: 22px; height: 22px; border-radius: 50%;
  background: linear-gradient(#fff, #fff) center / 10px 2px no-repeat, linear-gradient(#fff, #fff) center / 2px 10px no-repeat, var(--ink);
}
.faq__item[open] summary::before { background: linear-gradient(#fff, #fff) center / 10px 2px no-repeat, var(--ink); }
.faq__item summary:hover { text-decoration: underline; }
.faq__answer { padding: 0 20px 20px 56px; }
.faq__answer p { font-size: 1rem; line-height: 1.6; color: var(--ink-2); max-width: 40em; text-wrap: pretty; }
.faq__answer p + p { margin-top: 8px; }
.faq__answer a { font-weight: 700; color: var(--blue); text-decoration: underline; }
@media (min-width: 45em) {
  .routes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .faq { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
}
@media (min-width: 60em) {
  .routes { gap: clamp(16px, 2vw, 28px); }
  .route { padding: clamp(26px, 2.6vw, 36px); }
}
/* Työpöydällä (1200 px alkaen) ohjaimen ehdotukset näkyvät valintojen vieressä; kapeammalla valintojen alla */
@media (min-width: 75em) {
  .js .finder { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); column-gap: clamp(32px, 4vw, 64px); padding: clamp(28px, 3vw, 44px); }
  .finder__head { grid-column: 1 / -1; }
  .finder__out { margin-top: 0; display: flex; flex-direction: column; }
  .finder__empty { flex: 1; flex-direction: column; justify-content: center; gap: 14px; padding: 32px; border-radius: 18px; text-align: center; }
  .finder__empty span { max-width: 20em; }
  .finder__ico { width: 44px; height: 44px; }
}

/* =========================================================
   VAIHE 3: TOIMIPISTEET JA AIVOSI-KONSERNI
   ========================================================= */
.places { padding: var(--section) 0; overflow-x: clip; }
.places__head { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(32px, 4vw, 56px); }
.places__lead { margin-top: 14px; font-size: var(--lead); line-height: 1.55; max-width: 36em; text-wrap: pretty; }
.places__list {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px 40px;
}
.places__list > li { display: flex; flex-direction: column; }
.places__city { order: -1; font-weight: 700; font-size: 1rem; color: var(--ink-2); }
.places__name { font-family: var(--display); font-weight: 800; font-size: clamp(1.375rem, 1rem + 0.6vw, 1.625rem); line-height: 1.1; letter-spacing: -0.02em; color: var(--ink); margin: 2px 0 6px; }
.places__addr { font-size: 1.0625rem; }
.places__svc { font-size: 1rem; color: var(--ink-2); }
/* Ennen käyntiä -solussa ei ole kaupunkiriviä, joten otsikko laskeutuu samalle tasolle kuin muiden solujen nimet */
.places__before .places__name { margin-top: calc(1rem * 1.6 + 2px); }
.places__before-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; align-items: flex-start; }
.places__before-list .arrow-link { display: inline-block; padding-block: 6px; font-size: 1.0625rem; }
.places .draft-note { margin-top: 28px; }
@media (min-width: 22.5em) and (max-width: 34.99875em) {
  .places__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 20px; }
  .places__list .places__remote, .places__list .places__before { grid-column: 1 / -1; }
  .places__before .places__name { margin-top: 2px; }
}
@media (min-width: 35em) { .places__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 60em) { .places__list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* AivoSi-konserni: matala nauha toimipisteiden jälkeen (aivokuvio, luvut, Silmuke ja SUJU, linkki).
   Vaalea syvä turkoosi ja kuvio turkoosista lilaan AivoSin graafisen ohjeen (2026) mukaan; lila vain grafiikassa. */
.aivosi {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 12px clamp(16px, 2.4vw, 32px);
  margin-top: clamp(40px, 5vw, 64px); padding: clamp(20px, 2.6vw, 32px) clamp(20px, 3vw, 40px); border-radius: var(--r);
  background: color-mix(in srgb, #1a99c4 12%, #fff);
}
.aivosi__art {
  width: clamp(56px, 6vw, 84px); aspect-ratio: 960 / 811; align-self: start;
  background: linear-gradient(120deg, color-mix(in srgb, #1a99c4 70%, #fff) 40%, color-mix(in srgb, #a680c7 80%, #fff) 85%);
  -webkit-mask: url("../img/aivosi-kuvio-960.png") center / contain no-repeat;
          mask: url("../img/aivosi-kuvio-960.png") center / contain no-repeat;
}
.aivosi__title { font-size: clamp(1.375rem, 1.1rem + 0.8vw, 1.75rem); line-height: 1.15; letter-spacing: -0.02em; color: var(--ink); text-wrap: balance; }
.aivosi__lead { margin-top: 8px; font-size: 1.0625rem; line-height: 1.6; max-width: 50em; text-wrap: pretty; }
.aivosi__lead a { font-weight: 700; color: var(--ink); text-decoration: underline; text-decoration-color: rgba(15, 43, 55, 0.45); text-underline-offset: 0.2em; }
.aivosi__lead a:hover { color: var(--blue-deep); text-decoration-color: currentColor; text-decoration-thickness: 2px; }
.aivosi__more { grid-column: 2; justify-self: start; font-size: 1.0625rem; }
.aivosi__note { grid-column: 1 / -1; }
@media (max-width: 44.99875em) {
  .aivosi { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .aivosi__art { width: 56px; }
  .aivosi__more { grid-column: 1; }
}
@media (min-width: 60em) {
  .aivosi { grid-template-columns: auto minmax(0, 1fr) auto; }
  .aivosi__more { grid-column: 3; justify-self: end; padding-left: 16px; }
}

/* =========================================================
   PRONEURON LYHYESTI JA ARVOT – valkoisella pohjalla: kuvaus ja ryhmäkuva, alla kolme arvoa muistilappuina.
   Valkoista osiota seuraava valkoinen osio alkaa ilman yläväliä, jotta osioiden väli on aina yksi --section.
   Värikaistat (Kela, Vaihe 2, asiakkaiden kokemukset, footer) pitävät omat välinsä.
   ========================================================= */
.about { padding: var(--section) 0; }
.places + .about { padding-top: 0; }
.about__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; }
.about__media { margin: 0; }
.about__ph { aspect-ratio: 4 / 3; --tone: var(--apricot-band); margin: 0 16px 16px 0; }
.about__media .draft-note { margin-top: 30px; }
.about__lead {
  margin-top: 30px; font-family: var(--display); font-weight: 600;
  font-size: clamp(1.3125rem, 1rem + 0.6vw, 1.625rem); line-height: 1.32; letter-spacing: -0.015em; color: var(--ink);
}
.about__text p + p { margin-top: 22px; }
.about__text p { max-width: 31em; }
.about__links { display: flex; flex-wrap: wrap; gap: 4px 34px; margin-top: 30px; }
.about__links .arrow-link { font-size: 1.125rem; }
@media (min-width: 45em) {
  .about__media { max-width: 34rem; }
}
@media (min-width: 56.25em) {
  .about__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
  .about__media { order: -1; max-width: none; }
}
@media (min-width: 73.75em) {
  .about__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

/* Arvot: kolme tiivistä muistilappua (sävytetty paperi, pieni kallistus ja pehmeä varjo kuten palvelulaatoissa) */
.about__values { margin-top: clamp(48px, 6vw, 80px); }
.about__values-title { margin-bottom: clamp(20px, 2.4vw, 28px); font-size: clamp(1.375rem, 1.1rem + 0.8vw, 1.75rem); line-height: 1.15; letter-spacing: -0.02em; color: var(--ink); }
.values__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
.value {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 10px 14px; padding: 20px 22px 22px; container-type: inline-size;
  background: var(--tone); color: var(--ink); border-radius: 4px; transform: rotate(var(--tilt));
  box-shadow: 0 1px 2px rgba(15, 43, 55, 0.06), 0 16px 28px -22px rgba(15, 43, 55, 0.42);
}
.value--sky { --tone: var(--sky); --tilt: -0.8deg; }
.value--apricot { --tone: color-mix(in srgb, var(--apricot) 45%, #fff); --tilt: 0.6deg; }
.value--lime { --tone: var(--lime-tint); --tilt: -0.4deg; }
.value__icon { display: block; color: var(--ink); line-height: 0; }
.value__icon svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.value__word {
  color: var(--ink); font-size: clamp(1.25rem, 7cqi, 1.5rem); line-height: 1.1; letter-spacing: -0.02em;
  hyphens: manual; overflow-wrap: anywhere;
}
.value__desc { grid-column: 1 / -1; font-size: 1rem; line-height: 1.55; max-width: 32em; }
.values__note { margin-top: 24px; }
@media (min-width: 56.25em) {
  .values__list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 2.2vw, 32px); }
  .value { padding: clamp(22px, 2.2vw, 30px); }
}

/* =========================================================
   ASIAKKAIDEN KOKEMUKSIA – taivaansininen kaista, palautteet puhekuplina
   ========================================================= */
.voices { --focus: var(--ink); background: var(--sky); padding: var(--section) 0; }
.voices__head { display: flex; flex-wrap: wrap; align-items: flex-end; align-items: last baseline; justify-content: space-between; gap: 12px 32px; margin-bottom: clamp(32px, 4vw, 56px); }
.voices .sec-title { color: var(--ink); }
.voices__lead { margin-top: 14px; font-size: var(--lead); line-height: 1.55; max-width: 34em; text-wrap: pretty; }
.voices__head .arrow-link { font-size: 1.125rem; color: var(--blue-deep); }
.voices__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; }
.voice figure { display: flex; flex-direction: column; height: 100%; margin: 0; }
.voice blockquote {
  position: relative; flex: 1; margin: 0 0 22px; padding: clamp(24px, 2.6vw, 36px);
  border-radius: var(--r); background: #fff;
}
/* Puhekuplan kärki */
.voice blockquote::after {
  content: ""; position: absolute; left: 36px; bottom: -14px; width: 28px; height: 28px;
  background: #fff; border-radius: 0 0 6px 0; transform: skewX(-24deg) rotate(45deg) scale(0.7);
}
.voice blockquote p {
  font-family: var(--display); font-weight: 600; font-size: clamp(1.25rem, 1.05rem + 0.6vw, 1.5625rem);
  line-height: 1.3; letter-spacing: -0.012em; color: var(--ink); text-wrap: pretty;
}
.voice figcaption { padding-left: clamp(24px, 2.6vw, 36px); font-size: 1rem; font-weight: 700; color: var(--ink-2); }
@media (min-width: 56.25em) {
  .voices__list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 2.4vw, 36px); }
}

/* =========================================================
   REKRY – sininen kortti paperipohjalla
   ========================================================= */
.recruit { padding: var(--section) 0; }
.recruit__card {
  --focus: var(--ink); position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; align-items: center;
  background: var(--brand-cyan); color: #fff; border-radius: 32px; padding: clamp(28px, 6vw, 96px);
}
.recruit h2 { color: #fff; font-size: clamp(1.75rem, 1.3rem + 1.8vw, 2.875rem); line-height: 1.04; letter-spacing: -0.026em; text-wrap: balance; hyphens: manual; overflow-wrap: anywhere; }
.recruit p { margin-top: 24px; font-size: var(--lead); line-height: 1.6; max-width: 30em; color: #fff; }
.recruit__quote { margin: 26px 0 0; padding-left: 18px; border-left: 4px solid var(--lime); }
.recruit__quote blockquote { margin: 0; }
.recruit .recruit__quote p { margin: 0; font-family: var(--display); font-weight: 700; font-size: clamp(1.25rem, 1rem + 0.6vw, 1.5rem); line-height: 1.25; letter-spacing: -0.01em; }
.recruit__quote figcaption { margin-top: 6px; font-size: 1rem; color: #fff; }
.recruit .btn--light { margin-top: 32px; }
.recruit__media { margin: 0 16px 16px 0; }
.recruit__ph { aspect-ratio: 4 / 3; --tone: var(--lime); }
.note--rekry { width: var(--note-w); top: -30px; right: clamp(20px, 5vw, 72px); transform: rotate(-6deg); }
@media (max-width: 51.24875em) { .note--rekry { top: -46px; right: 14px; } }
.recruit .btn--light { padding-inline: clamp(20px, 2.2vw, 30px); }
@media (max-width: 26.24875em) { .recruit__card { padding-inline: 22px; } }
.recruit__media .draft-note { margin-top: 30px; }
@media (min-width: 51.25em) {
  .recruit__card { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 96px); }
}

/* =========================================================
   AJANKOHTAISTA
   ========================================================= */
.news { padding: var(--section) 0; }
/* Rekrykortin YHTEYS-lappu nousee kortin yläpuolelle, joten edellisen osion ja kortin väliin jätetään lapun verran lisätilaa */
.news + .recruit { padding-top: clamp(40px, 5vw, 64px); }
.news__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 48px; }
.news__meta { font-size: 1rem; font-weight: 700; color: var(--ink); }
.news__title { margin-top: 12px; font-weight: 600; font-size: clamp(1.5rem, 1.05rem + 0.9vw, 2rem); line-height: 1.14; letter-spacing: -0.02em; text-wrap: pretty; hyphens: manual; overflow-wrap: anywhere; }
.news__title a { display: inline-block; padding-block: 4px; color: var(--brand-cyan); text-decoration: none; }
.news__title a:hover { text-decoration: underline; text-decoration-thickness: 3px; }
.news__sum { margin-top: 12px; font-size: 1.125rem; max-width: 32em; }
.news .sec-head--split .arrow-link { font-size: 1.125rem; }
/* Tabletilla uusin nosto koko leveydeltä ja kaksi muuta sen alla; työpöydällä kolme rinnakkain */
@media (min-width: 51.25em) {
  .news__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px clamp(32px, 4vw, 56px); }
  .news__item:first-child { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(32px, 4vw, 56px); align-items: end; }
  .news__item:first-child .news__sum { grid-column: 2; grid-row: 1 / span 2; margin-top: 0; }
}
@media (min-width: 75em) {
  .news__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .news__item:first-child { grid-column: auto; display: block; }
}
[data-news="off"] .news { display: none; }
/* Some: seuraa-rivi uutisten alla (palaveri 17:43). Syöte tulee WordPress-vaiheessa; luonnoksessa vain paikkamerkki. */
.follow {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px;
  margin: 0 0 clamp(32px, 4vw, 48px); padding: 18px 18px 18px clamp(20px, 2.4vw, 32px);
  border-radius: var(--r); background: color-mix(in srgb, var(--sky) 55%, #fff);
}
.follow__label { font-family: var(--display); font-weight: 800; font-size: clamp(1.375rem, 1.1rem + 0.6vw, 1.75rem); line-height: 1.1; letter-spacing: -0.02em; color: var(--ink); }
.follow__list { display: flex; flex-wrap: wrap; gap: 10px 12px; list-style: none; margin: 0; padding: 0; }
@media (max-width: 29.99875em) {
  .follow__list { column-gap: 8px; }
  .follow { padding: 16px; }
  .follow .follow__link { padding: 0 12px; gap: 8px; }
}
.follow__link {
  display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 22px 0 18px;
  border-radius: var(--r-btn); background: #fff; color: var(--ink); font-weight: 700; font-size: 1.0625rem; text-decoration: none;
  transition: background-color 160ms ease, color 160ms ease;
}
.follow__link svg { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.follow__link { border: 1.5px solid rgba(15, 43, 55, 0.5); }
.follow__link:hover { background: var(--ink); border-color: var(--ink); color: #fff; }
.feed { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: calc(16px - clamp(32px, 4vw, 48px)) 0 clamp(32px, 4vw, 48px); }
.feed__tile {
  display: grid; place-items: center; aspect-ratio: 4 / 5; padding: 8px; text-align: center;
  border: 1px dashed #c9961a; border-radius: 4px; background: #fff4d6; color: #5b3a00; font-size: 1rem; font-weight: 600; line-height: 1.3;
  min-width: 0; overflow-wrap: anywhere;
}

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer { background: var(--paper); }
.footer-band { background: var(--apricot); }
/* Yhteydenottokaista: otsikko ja saate vasemmalla, yhteystiedot yhdessä valkoisessa kortissa oikealla */
.footer-contact { --focus: var(--ink); display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; padding-block: clamp(56px, 7vw, 104px); }
.footer-contact a:not(.footer-contact__tel) { color: var(--blue-deep); }
.footer-contact__q { font-size: clamp(2rem, 1.3rem + 1.8vw, 2.875rem); line-height: 1.04; letter-spacing: -0.026em; color: var(--ink); text-wrap: balance; max-width: 14em; }
.footer-contact__lead { margin-top: 16px; font-size: var(--lead); line-height: 1.55; color: var(--ink); max-width: 28em; text-wrap: pretty; }
.footer-contact__people { display: inline-block; margin-top: 18px; font-size: 1.125rem; }
.footer-contact__card { position: relative; padding: 28px 24px 30px; border-radius: 24px; background: #fff; box-shadow: 0 24px 48px -32px rgba(15, 43, 55, 0.45); }
.note--footer { width: var(--note-w); top: -30px; right: 16px; transform: rotate(-7deg); }
@media (min-width: 51.25em) { .note--finder, .note--rekry, .note--footer { top: -34px; right: clamp(16px, 2.4vw, 32px); } }
.footer-contact__label { font-size: 1rem; font-weight: 700; color: var(--ink-2); }
.footer-contact__tel {
  display: inline-flex; align-items: center; gap: 12px; min-height: 52px; margin-top: 4px;
  font-family: var(--display); font-weight: 800; font-size: clamp(2rem, 1.4rem + 1.6vw, 2.75rem); letter-spacing: -0.03em; line-height: 1.05;
  color: var(--ink); text-decoration: none;
}
.footer-contact__tel svg { width: 0.7em; height: 0.7em; flex: none; }
.footer-contact__tel:hover { text-decoration: underline; text-decoration-thickness: 3px; }
.footer-contact__hours { margin-top: 4px; font-size: 1.0625rem; line-height: 1.55; color: var(--ink-2); }
.footer-contact__list { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 12px; }
.footer-contact__list li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; align-items: start; font-size: 1.0625rem; line-height: 1.55; }
.footer-contact__list svg { width: 22px; height: 22px; margin-top: 2px; fill: none; stroke: var(--ink); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.footer-contact__card .draft-note { margin-top: 18px; }
@media (min-width: 51.25em) {
  .footer-contact { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
  .footer-contact__card { padding: clamp(32px, 3.4vw, 48px); }
}

.footer-groups { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; padding-block: 24px 12px; }
.fgroup + .fgroup { border-top: 1px solid var(--line-strong); }
.fgroup__h { margin: 0; font-family: var(--font); font-size: 1.125rem; letter-spacing: 0; color: var(--ink); line-height: 1.3; }
.fgroup__btn {
  display: flex; width: 100%; align-items: center; justify-content: space-between;
  min-height: 56px; padding: 0; background: none; border: 0; text-align: left;
  font-weight: 700; font-size: 1.125rem; color: var(--ink); cursor: pointer;
}
.fgroup__btn .chev { width: 18px; height: 18px; }
.fgroup__label { display: none; }
.fgroup ul { list-style: none; margin: 0; padding: 0 0 8px; }
.fgroup > ul, .fgroup__body { padding-bottom: 16px; }
.fgroup ul[hidden], .fgroup__body[hidden] { display: none; }
.fgroup li { padding: 0; }
.fgroup a {
  display: inline-block; padding: 8px 0; font-size: 1.0625rem; color: var(--ink);
  text-decoration: underline; text-decoration-color: var(--ink-2); text-underline-offset: 0.25em;
}
.fgroup a:hover { color: var(--blue); text-decoration-color: currentColor; }
.fgroup__text { padding: 6px 0 4px; font-size: 1.0625rem; line-height: 1.75; color: var(--ink-2); }
.fgroup .draft-note { margin-top: 8px; }
@media (min-width: 45em) {
  .footer-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 48px; padding-block: 48px 24px; }
  .fgroup + .fgroup { border-top: 0; }
  .fgroup__btn { display: none; }
  .fgroup__label { display: block; margin-bottom: 8px; font-weight: 700; }
  .fgroup ul[hidden], .fgroup__body[hidden] { display: block; }
}
@media (min-width: 67.5em) { .footer-groups { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.footer-base {
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px 40px;
  position: relative; padding-block: 26px 104px; font-size: 1rem; color: var(--ink-2);
}
.footer-base::before { content: ""; position: absolute; top: 0; left: var(--gutter); right: var(--gutter); border-top: 1px solid var(--line); }
.footer-base__logo { padding: 8px 0; }
.footer-base__logo img { width: 200px; height: auto; }
.footer-base__group { flex: 1 1 300px; line-height: 1.7; }
@media (max-width: 74.99875em) { .footer-base__group { flex: 1 1 calc(100% - 260px); } }
.footer-base__group a { color: var(--ink); }
.footer-base ul { display: flex; flex-wrap: wrap; gap: 0 20px; list-style: none; margin: 0; padding: 0; }
.footer-base ul a { display: inline-block; padding: 10px 0; color: var(--ink); text-underline-offset: 0.25em; }
@media (min-width: 45em) { .footer-base { padding-bottom: 40px; } }

/* =========================================================
   LUONNOSMERKINNÄT JA KATSELMOINTIPANEELI (ei osa julkista ulkoasua)
   ========================================================= */
.draft-note {
  display: inline-block; margin-top: 12px; overflow-wrap: anywhere;
  font-family: var(--font); font-size: 1rem; line-height: 1.4; font-weight: 600; letter-spacing: 0; text-transform: none;
  color: #5b3a00; background: #fff4d6; border: 1px dashed #c9961a; border-radius: 4px; padding: 4px 10px;
}
.draft-note--block { display: block; }
[data-notes="off"] .draft-note,
[data-notes="off"] p:has(> .draft-note:only-child),
[data-notes="off"] [data-draft-only] { display: none !important; }

.review { position: fixed; right: 12px; bottom: 12px; z-index: 900; font-size: 1rem; line-height: 1.4; }
.review :focus-visible { outline: 3px solid #5b3a00; outline-offset: 2px; box-shadow: 0 0 0 6px #fff; }
.review__btn {
  min-height: 40px; padding: 0 16px; border-radius: 22px; border: 1px solid #c9961a;
  background: #fff4d6; color: #5b3a00; font-weight: 700; font-size: 1rem; cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
}
.review__panel {
  position: absolute; right: 0; bottom: 52px; width: min(340px, calc(100vw - 24px));
  background: #fff; border: 1px solid #d9c38a; border-radius: 12px; padding: 14px 16px;
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.18); color: #2b2b2b;
}
.review__panel[hidden] { display: none; }
.review__title, .review__sub { margin: 0 0 6px; font-weight: 700; }
.review__sub { margin-top: 10px; }
.review__panel label { display: flex; gap: 8px; align-items: center; min-height: 36px; cursor: pointer; }
.review__links { display: flex; flex-wrap: wrap; gap: 4px 6px; list-style: none; margin: 0; padding: 0; }
.review__links a { display: inline-flex; align-items: center; min-height: 32px; padding: 0 10px; border-radius: 16px; background: #fbf3dd; color: #5b3a00; font-size: 1rem; text-decoration: none; }
.review__links a:hover { text-decoration: underline; }
.review__small { margin-top: 10px; color: #555; font-size: 1rem; }
@media (max-width: 39.99875em) { .review__btn { min-height: 36px; padding: 0 12px; } }

/* =========================================================
   HAKUTULOSSIVU (haku.html)
   ========================================================= */
.results { padding: 40px 0 var(--section); }
.results h1 { font-size: clamp(2.25rem, 1.4rem + 2.6vw, 3.5rem); line-height: 1.02; letter-spacing: -0.028em; overflow-wrap: anywhere; }
.results__form { margin-top: 22px; max-width: 52rem; flex-wrap: wrap; }
.results__form .search__label { flex: 0 0 100%; }
.results__summary { margin-top: 18px; font-size: 1.125rem; color: var(--ink-2); }
.results__group { margin-top: 40px; }
.results__group h2 { font-size: 1.625rem; margin-bottom: 4px; color: var(--ink); }
.results__list { list-style: none; margin: 0; padding: 0; }
.js #results:empty { min-height: 70vh; }
.results__list li { padding: 16px 0; border-bottom: 1px solid var(--line); }
.results__summary, .results__group, .results__best, .results__empty, .results__error { max-width: 52rem; }
.results__type { display: inline-block; margin-bottom: 2px; font-size: 1rem; font-weight: 600; color: var(--ink-2); }
.results__list a { font-size: 1.1875rem; font-weight: 700; text-decoration: none; }
.results__list a:hover { text-decoration: underline; }
.results__list li[hidden] { display: none; }
.results__more {
  margin-top: 16px; min-height: 44px; padding: 8px 20px; border: 1.5px solid var(--line-strong); border-radius: var(--r-btn);
  background: transparent; font: inherit; font-weight: 700; color: var(--blue); cursor: pointer;
}
.results__more:hover { border-color: var(--blue); background: var(--sky); }
.results__list p { font-size: 1rem; color: var(--ink-2); margin-top: 2px; }
.results__best { margin-top: 24px; padding: 22px 24px; border-radius: var(--r); background: var(--sky); }
.results__best .results__type { display: block; margin: 0 0 4px; font-family: var(--font); font-size: 1rem; font-weight: 600; line-height: 1.4; letter-spacing: 0; color: var(--blue); }
.results__best a { font-family: var(--display); font-weight: 800; font-size: 1.75rem; letter-spacing: -0.02em; text-decoration: none; }
.results__empty, .results__error { margin-top: 26px; padding: 24px 26px; border-radius: var(--r); background: var(--lime-tint); }
.results__empty h2, .results__error h2 { font-size: 1.5rem; color: var(--ink); }
.results__empty ul, .results__error ul { margin: 10px 0 0; padding-left: 20px; }
.results__empty li, .results__error li { margin: 8px 0; }
.results__error { background: #fff4f0; border: 1px solid #f0c4b4; }
.results__error h2 { color: #8a2e0e; }

/* =========================================================
   ANIMAATIOT. Vähennetyn liikkeen asetuksella kaikki animaatiot ja siirtymät poistuvat (sivun lopussa), ja ilman
   JavaScriptiä sisältö näkyy heti (.reveal-luokan ja porrastuksen --reveal-delay lisää luonnos.js).
   Siirto tehdään translate- ja scale-ominaisuuksilla, joten korttien kallistus (transform: rotate) säilyy.
   ========================================================= */
/* Pehmeä vieritys (hiiren rulla ja sivun sisäiset linkit) on luonnos.js:ssä. CSS:n scroll-behavior: smooth jätetään
   pois, jotta suora osoite (#kohta) ja näppäimistön kohdistus siirtyvät heti. */
/* Esiintulo vieritettäessä: nousu ja kevyt suurennus, kuvat avautuvat keskeltä, muistilaput "tarttuvat" kiinni */
.reveal {
  opacity: 0; translate: 0 36px; scale: 0.975;
  transition: opacity 700ms ease, translate 950ms cubic-bezier(0.16, 1, 0.3, 1), scale 950ms cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: var(--reveal-delay, 0ms);
}
.reveal.is-visible { opacity: 1; translate: 0 0; scale: 1; }
.reveal .ph > img { clip-path: inset(8% round var(--r)); transition: clip-path 1200ms cubic-bezier(0.16, 1, 0.3, 1) calc(var(--reveal-delay, 0ms) + 150ms), scale 400ms ease; }
.reveal.is-visible .ph > img { clip-path: inset(0 round var(--r)); }
.reveal .note { opacity: 0; translate: 0 -18px; transition: opacity 400ms ease calc(var(--reveal-delay, 0ms) + 500ms), translate 800ms cubic-bezier(0.34, 1.56, 0.64, 1) calc(var(--reveal-delay, 0ms) + 500ms); }
.reveal.is-visible .note { opacity: 1; translate: 0 0; }
/* Avautuvat kohdat (UKK, peruutusohje) ja ohjaimen tulokset */
@keyframes fold-in { from { opacity: 0; translate: 0 -6px; } to { opacity: 1; translate: 0 0; } }
.faq__item[open] .faq__answer, .route__more[open] > p { animation: fold-in 260ms ease both; }
.faq__item summary::before { transition: transform 200ms ease; }
.faq__item[open] summary::before { transform: rotate(180deg); }
.finder__result > *, .finder__list li { animation: fold-in 320ms ease both; }
.finder__list li:nth-child(2) { animation-delay: 40ms; }
.finder__list li:nth-child(3) { animation-delay: 80ms; }
.finder__list li:nth-child(4) { animation-delay: 120ms; }
.finder__list li:nth-child(n+5) { animation-delay: 160ms; }
/* Valikot avautuvat pehmeästi */
@keyframes menu-in { from { opacity: 0; translate: 0 -6px; } to { opacity: 1; translate: 0 0; } }
.mega:not([hidden]), .dropdown:not([hidden]), .lang__menu:not([hidden]) { animation: menu-in 180ms ease both; }
.js .mobile-menu:not([hidden]) { animation: menu-in 200ms ease both; }
@keyframes panel-in { from { opacity: 0; translate: 24px 0; } to { opacity: 1; translate: 0 0; } }
@media (min-width: 45em) { .js .mobile-menu:not([hidden]) { animation-name: panel-in; animation-duration: 240ms; } }
/* Kuvat kohoavat hieman hiiren alla (ryhmä- ja rekrykuva) */
.about__ph img, .recruit__ph img { transition: scale 400ms ease; }
.about__media:hover .about__ph img, .recruit__media:hover .recruit__ph img { scale: 1.015; }

/* =========================================================
   PRELOADER – AivoSi-konsernin aivokuvio (sama kuin AivoSi-nauhassa, graafinen ohje 2026: syvä turkoosi #1A99C4
   ja purppura lila #A680C7) ja ProNeuronin logo. Kuvio avautuu keskeltä, ja vaalea signaali kulkee sen viivojen läpi.
   luonnos.js pitää preloaderin näkyvissä vähintään 1,2 s ja poistaa sen, kun sivu on ladattu (enintään 6 s). Ilman
   JavaScriptiä se ei näy, ja jos skripti ei lataudu, se häviää itsestään 3 s:ssa. Ei vähennetyn liikkeen asetuksella.
   ========================================================= */
.preloader {
  position: fixed; inset: 0; z-index: 2000; display: grid; place-items: center; background: #fff;
  transition: opacity 450ms ease, visibility 0s linear 450ms;
  animation: preloader-out 400ms ease 3s forwards;
}
.no-js .preloader { display: none; }
.preloader.is-done { opacity: 0; visibility: hidden; }
@keyframes preloader-out { to { opacity: 0; visibility: hidden; } }
.preloader__inner { display: grid; justify-items: center; gap: clamp(18px, 3vw, 26px); transition: scale 450ms ease; }
.preloader.is-done .preloader__inner { scale: 1.06; }
.preloader__brain {
  width: clamp(124px, 34vw, 190px); aspect-ratio: 960 / 811;
  background:
    linear-gradient(100deg, transparent 38%, rgba(255, 255, 255, 0.75) 50%, transparent 62%) -100% 0 / 60% 100% no-repeat,
    linear-gradient(120deg, #1a99c4 30%, #a680c7 85%);
  -webkit-mask: url("../img/aivosi-kuvio-960.png") center / contain no-repeat;
          mask: url("../img/aivosi-kuvio-960.png") center / contain no-repeat;
  clip-path: circle(0% at 50% 55%);
  animation: pl-open 800ms cubic-bezier(0.65, 0, 0.35, 1) forwards, pl-signal 1400ms ease-in-out 300ms infinite;
}
@keyframes pl-open { to { clip-path: circle(75% at 50% 55%); } }
@keyframes pl-signal { from { background-position: -100% 0, 0 0; } to { background-position: 200% 0, 0 0; } }
.preloader__logo { width: clamp(150px, 40vw, 210px); height: auto; opacity: 0; animation: pl-fade 500ms ease 450ms forwards; }
@keyframes pl-fade { to { opacity: 1; } }
/* Heron tekstien esiintulo odottaa, kunnes preloader on poistunut */
.is-preloading .hero__panel > * { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce), (forced-colors: active) { .preloader { display: none; } }

/* =========================================================
   PAKOTETUT VÄRIT (Windowsin kontrastiteemat) JA VÄHENNETTY LIIKE
   ========================================================= */
@media (forced-colors: active) {
  .mega, .dropdown, .lang__menu { border: 1px solid CanvasText; }
  .tile__link, .search button, .pill, .recruit__card, .mm-call, .routes li, .dropdown__info, .value, .aivosi, .faq__item, .voice blockquote, .follow, .follow__link, .finder, .footer-contact__card { border: 2px solid CanvasText; }
  .aivosi__art, .voice blockquote::after { display: none; }
  .mm-lang a[aria-current] { forced-color-adjust: none; background: Highlight; color: HighlightText; border-color: Highlight; }
  .util__tel svg, .util .lang__btn svg, .search__icon, .follow__link svg { color: CanvasText; }
  .footer-contact__list svg { stroke: CanvasText; }
  .faq__item summary::before { forced-color-adjust: none; background: linear-gradient(Canvas, Canvas) center / 10px 2px no-repeat, linear-gradient(Canvas, Canvas) center / 2px 10px no-repeat, CanvasText; }
  .faq__item[open] summary::before { background: linear-gradient(Canvas, Canvas) center / 10px 2px no-repeat, CanvasText; }
  .arrow-link::after, .pill::after, .tile__go::after, .tile__name::after { forced-color-adjust: none; background: LinkText; }
  .step__n { forced-color-adjust: none; background: CanvasText; color: Canvas; }
  .note, .btn::before { display: none; }
  .search__field:focus-within { outline: 2px solid Highlight; outline-offset: 1px; }
  .hero__eyebrow::before { forced-color-adjust: none; background: CanvasText; }
  .hero__panel { border: 2px solid CanvasText; }
  .chip input:checked + span { forced-color-adjust: none; background: Highlight; border-color: Highlight; color: HighlightText; }
}
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal .note { opacity: 1; translate: none; scale: none; }
  .reveal .ph > img { clip-path: none; }
  .btn:hover, .btn:active { translate: none; scale: none; }
}
@media print {
  .preloader { display: none !important; }
  .skip-link, .site-header, .search-row-wrap, .mobile-menu, .review, .note, .draft-note, .finder__form, .finder__empty, .kela__actions .btn, .hero__bg { display: none !important; }
  .hero { min-height: 0 !important; }
  .hero__panel { width: auto !important; margin: 0 !important; padding: 0 !important; background: none !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
  .aivosi__art, .feed, .follow__link svg { display: none !important; }
  body, .start, .values, .about, .kela, .voices, .aivosi, .footer-band, .recruit__card, .routes li, .finder { background: #fff !important; color: #000 !important; }
  .value__word, .value__desc, .recruit h2, .recruit p { color: #000 !important; }
  .value { transform: none !important; box-shadow: none !important; border: 1px solid #999; background: #fff !important; }
  a { color: #000; }
  .tile__link, .routes li, .recruit__card, .voice blockquote, .faq__item { box-shadow: none !important; transform: none !important; border: 1px solid #999; break-inside: avoid; }
  section { break-inside: auto; padding-block: 24px !important; }
  h2, h3 { break-after: avoid; }
  img { break-inside: avoid; max-height: 60vh; }
  .reveal, .reveal .note { opacity: 1 !important; translate: none !important; scale: none !important; }
  .reveal .ph > img { clip-path: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
  .tile__link:hover { transform: rotate(var(--tilt)); }
}