/* Blogi: artikkelilistaukset (grid, list, magazine, compact) ja artikkelinäkymät (classic, hero, sidebar, minimal, magazine).
   Toimii kaikissa teemoissa: teeman muuttujat varmistusarvoilla (--accent, --text, --muted, --bg, --surface, --line, --radius, --font-heading). */
.cms-blog [hidden], .cms-article [hidden] { display: none !important; }

/* ---------- listaus: yhteiset ---------- */
.cms-pad { padding-inline: var(--side, var(--cell-pad, 20px)); }
.cms-blog .cms-blog__wrap { max-width: var(--shell, 1160px); }
.cms-blog__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px; margin-bottom: 24px; }
.cms-blog__head h2 { margin: 0; }
.cms-blog__empty { margin: 0; padding: 32px 24px; border: 1px dashed var(--line, #d9dde3); border-radius: var(--radius, 12px); color: var(--muted, #5d6470); text-align: center; }
.cms-blog__hint { margin: 8px 0 0; font-size: .875rem; color: var(--muted, #5d6470); text-align: center; }
.cms-blog__items { list-style: none; margin: 0; padding: 0; display: grid; gap: 28px; }
.cms-blog__item { margin: 0; min-width: 0; }
.cms-blog__more { display: flex; justify-content: center; margin-top: 36px; }

/* suodattimet */
.cms-blog__filters { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-bottom: 28px; }
.cms-blog__search { flex: 1 1 240px; max-width: 360px; }
.cms-blog__search input, .cms-blog__select select {
  width: 100%; box-sizing: border-box; min-height: 44px; padding: 10px 14px; font: inherit; font-size: .95rem; color: var(--text, #111);
  background: var(--bg, #fff); border: 1px solid var(--line, #d9dde3); border-radius: var(--radius-sm, 8px);
}
.cms-blog__search input:focus, .cms-blog__select select:focus { outline: 2px solid var(--accent, #F54927); outline-offset: 1px; border-color: transparent; }
.cms-blog__cats { display: flex; flex-wrap: wrap; gap: 8px; }
.cms-blog__chip {
  min-height: 36px; padding: 6px 14px; font: inherit; font-size: .875rem; font-weight: 500; color: var(--text, #111); cursor: pointer;
  background: var(--bg, #fff); border: 1px solid var(--line, #d9dde3); border-radius: 999px; transition: background .15s, border-color .15s, color .15s;
}
.cms-blog__chip:hover { border-color: var(--accent, #F54927); }
.cms-blog__chip[aria-pressed="true"] { background: var(--accent, #F54927); border-color: var(--accent, #F54927); color: var(--accent-ink, #fff); }
.cms-blog__chip:focus-visible { outline: 2px solid var(--accent, #F54927); outline-offset: 2px; }
.cms-blog__selects { display: flex; flex-wrap: wrap; gap: 12px; margin-left: auto; }
.cms-blog__select { flex: 1 1 160px; min-width: 160px; }

/* kortti */
.cms-blog-card { position: relative; display: flex; flex-direction: column; height: 100%; }
.cms-blog-card__media { overflow: hidden; border-radius: var(--radius, 12px); background: var(--surface, #f3f4f6); aspect-ratio: 16 / 10; }
.cms-blog-card__media .cms-img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.cms-blog-card:hover .cms-blog-card__media .cms-img { transform: scale(1.03); }
.cms-blog-card__body { display: flex; flex-direction: column; gap: 8px; padding-top: 16px; flex: 1; }
.cms-blog-card__cat { font-size: .75rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--accent, #F54927); }
.cms-blog-card__title { margin: 0; font-size: 1.25rem; line-height: 1.3; }
.cms-blog-card__title a { color: var(--text, #111); text-decoration: none; }
.cms-blog-card__title a::after { content: ""; position: absolute; inset: 0; } /* koko kortti klikattava */
.cms-blog-card__title a:hover { color: var(--accent, #F54927); }
.cms-blog-card__title a:focus-visible { outline: none; }
.cms-blog-card:focus-within { outline: 2px solid var(--accent, #F54927); outline-offset: 6px; border-radius: var(--radius, 12px); }
.cms-blog-card__excerpt { margin: 0; color: var(--muted, #5d6470); font-size: .975rem; line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.cms-blog-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 0; font-size: .85rem; color: var(--muted, #5d6470); }
.cms-blog-card__meta { margin-top: auto; padding-top: 4px; }
.cms-blog-meta__sep { opacity: .6; }

/* ruudukko */
.cms-blog--grid .cms-blog__items { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 40px 28px; }
.cms-blog--grid .cms-blog-card--noimg { padding: 24px; border: 1px solid var(--line, #d9dde3); border-radius: var(--radius, 12px); }
.cms-blog--grid .cms-blog-card--noimg .cms-blog-card__body { padding-top: 0; }

/* lista kuvilla */
.cms-blog--list .cms-blog__items { gap: 0; }
.cms-blog--list .cms-blog__item { padding-block: 28px; border-top: 1px solid var(--line, #d9dde3); }
.cms-blog--list .cms-blog__item:first-child { border-top: 0; padding-top: 0; }
@media (min-width: 700px) {
  .cms-blog--list .cms-blog-card { flex-direction: row; gap: 32px; align-items: flex-start; }
  .cms-blog--list .cms-blog-card__media { flex: 0 0 min(34%, 300px); aspect-ratio: 4 / 3; }
  .cms-blog--list .cms-blog-card__body { padding-top: 0; }
  .cms-blog--list .cms-blog-card__title { font-size: 1.45rem; }
}

/* lehti: iso nosto + ruudukko */
.cms-blog--magazine .cms-blog__items { grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 40px 28px; }
.cms-blog--magazine .cms-blog-card--noimg { padding: 24px; background: var(--surface, #f3f4f6); border-radius: var(--radius, 12px); }
.cms-blog--magazine .cms-blog-card--noimg .cms-blog-card__body { padding-top: 0; }
.cms-blog--magazine .is-lead { grid-column: 1 / -1; }
.cms-blog--magazine .is-lead .cms-blog-card__title { font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem); }
.cms-blog--magazine .is-lead .cms-blog-card__excerpt { -webkit-line-clamp: 4; font-size: 1.05rem; }
@media (min-width: 860px) {
  .cms-blog--magazine .is-lead .cms-blog-card { flex-direction: row; gap: 40px; align-items: center; }
  .cms-blog--magazine .is-lead .cms-blog-card__media { flex: 0 0 58%; aspect-ratio: 16 / 10; }
  .cms-blog--magazine .is-lead .cms-blog-card__body { padding-top: 0; }
  .cms-blog--magazine .is-lead .cms-blog-card--noimg { padding: 40px; }
}

/* tiivis lista */
.cms-blog--compact .cms-blog__items { gap: 0; border-top: 1px solid var(--line, #d9dde3); }
.cms-blog--compact .cms-blog__item { border-bottom: 1px solid var(--line, #d9dde3); }
.cms-blog--compact .cms-blog-card__body { display: grid; grid-template-columns: 1fr; gap: 2px 20px; padding: 14px 4px; }
.cms-blog--compact .cms-blog-card__title { font-size: 1.05rem; font-weight: 600; }
.cms-blog--compact .cms-blog-card__date { font-size: .85rem; color: var(--muted, #5d6470); font-variant-numeric: tabular-nums; }
.cms-blog--compact .cms-blog-card__meta { margin: 0; padding: 0; }
.cms-blog--compact .cms-blog-card:hover .cms-blog-card__title a { color: var(--accent, #F54927); }
.cms-blog--compact .cms-blog-card:focus-within { outline-offset: 0; }
@media (min-width: 700px) {
  .cms-blog--compact .cms-blog-card__body { grid-template-columns: 7.5rem 1fr auto; align-items: baseline; }
  .cms-blog--compact .cms-blog-card__date { grid-row: 1 / span 2; }
  .cms-blog--compact .cms-blog-card__cat { grid-column: 3; grid-row: 1; justify-self: end; }
  .cms-blog--compact .cms-blog-card__title { grid-column: 2; grid-row: 1; }
  .cms-blog--compact .cms-blog-card__meta { grid-column: 2; }
}

/* ---------- artikkeli: yhteiset ---------- */
.cms-article { --cms-article-w: var(--prose, 720px); }
.cms-article__inner { max-width: var(--cms-article-w); }
.cms-article__header { padding-bottom: clamp(24px, 4vw, 40px); }
.cms-article__body > .section:first-child { padding-top: 0; }
.cms-article__crumbs { margin-bottom: 20px; }
.cms-article__cat { display: inline-block; text-decoration: none; }
.cms-article__cat:hover { text-decoration: underline; }
.cms-article__title { margin: 0; font-size: clamp(2rem, 1.4rem + 2.6vw, 3.25rem); line-height: 1.12; letter-spacing: -.01em; text-wrap: balance; }
.cms-article__lead { margin: 18px 0 0; }
.cms-article__meta { margin-top: 20px; font-size: .9rem; }
.cms-article__metabar { padding-block: 0 16px; }
.cms-article__metabar .cms-article__meta { margin-top: 0; }
.cms-article__metabar .cms-article__cat { margin-bottom: 8px; }

.cms-article__figure { margin: 0; }
.cms-article__figure .cms-img { width: 100%; height: auto; border-radius: var(--radius, 12px); }
.cms-article__figure.cms-pad { padding-bottom: clamp(24px, 4vw, 48px); }
.cms-article__figure--wide .cms-img { max-width: 1000px; max-height: 620px; object-fit: cover; }
.cms-article__figure--narrow .cms-img { max-width: var(--cms-article-w); margin-inline: auto; }

.cms-article__lyhyesti { padding-block: 0 8px; }
.cms-article__lyhyesti + .section { padding-top: 24px; }
.cms-article__lyhyesti .lead { margin: 0 0 16px; }
.cms-article__summary { margin: 0 0 8px; padding: 20px 24px; border-left: 4px solid var(--accent, #F54927); border-radius: 0 var(--radius, 12px) var(--radius, 12px) 0; background: var(--surface, #f3f4f6); }
.cms-article__summary > * { margin: 0; }
.cms-article__summary > * + * { margin-top: 10px; }
.cms-article__summary-title { font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text, #111); }
.cms-article__summary p + .cms-article__summary-title { margin-top: 16px; }
.cms-article__summary ul { padding-left: 1.2em; }
.cms-article__summary li + li { margin-top: 4px; }

.cms-article__body h2[id] { scroll-margin-top: 96px; }
.cms-article__extra, .cms-article__foot { padding-block: clamp(8px, 2vw, 16px) clamp(24px, 4vw, 40px); }
.cms-article__faq h2 { margin: 0 0 16px; font-size: 1.5rem; }
.cms-article__faq-item { border-top: 1px solid var(--line, #d9dde3); }
.cms-article__faq-item:last-child { border-bottom: 1px solid var(--line, #d9dde3); }
.cms-article__faq-item summary { position: relative; padding: 16px 36px 16px 0; font-weight: 600; cursor: pointer; list-style: none; }
.cms-article__faq-item summary::-webkit-details-marker { display: none; }
.cms-article__faq-item summary::after { content: "+"; position: absolute; right: 4px; top: 12px; font-size: 1.4rem; line-height: 1; color: var(--accent, #F54927); }
.cms-article__faq-item[open] summary::after { content: "–"; }
.cms-article__faq-item p { margin: 0 0 16px; color: var(--muted, #5d6470); line-height: 1.65; }
.cms-article__tags { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.cms-article__tags .tag-list { margin: 0; }
.cms-article__tags-label { font-size: .875rem; font-weight: 600; color: var(--muted, #5d6470); }
.cms-article__tags .tag { text-decoration: none; }
.cms-article__tags .tag:hover { border-color: var(--accent, #F54927); color: var(--text, #111); }
.cms-article__tags + .cms-share { margin-top: 24px; }

/* jakolinkit */
.cms-share__label { margin: 0 0 10px; font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted, #5d6470); }
.cms-share__list { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.cms-share__btn {
  display: inline-flex; align-items: center; min-height: 38px; padding: 6px 14px; font: inherit; font-size: .875rem; font-weight: 500; line-height: 1.2;
  color: var(--text, #111); text-decoration: none; cursor: pointer; background: var(--bg, #fff); border: 1px solid var(--line, #d9dde3); border-radius: 999px;
}
.cms-share__btn:hover { border-color: var(--accent, #F54927); color: var(--accent, #F54927); }
.cms-share__btn:focus-visible { outline: 2px solid var(--accent, #F54927); outline-offset: 2px; }

/* edellinen / seuraava */
.cms-article__after { padding-block: 0 clamp(32px, 5vw, 56px); }
.cms-article__pn { display: grid; gap: 16px; max-width: var(--shell, 1160px); }
.cms-article__pn-link { display: flex; flex-direction: column; gap: 6px; padding: 18px 20px; border: 1px solid var(--line, #d9dde3); border-radius: var(--radius, 12px); color: var(--text, #111); text-decoration: none; }
.cms-article__pn-link span { font-size: .8rem; color: var(--muted, #5d6470); }
.cms-article__pn-link strong { font-size: 1.05rem; line-height: 1.35; }
.cms-article__pn-link:hover { border-color: var(--accent, #F54927); }
.cms-article__pn-link--next { text-align: right; }
@media (min-width: 700px) { .cms-article__pn { grid-template-columns: 1fr 1fr; } }
.cms-article__related { background: var(--surface, #f3f4f6); }
.cms-article__related .cms-blog__items { grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 32px 24px; }
.cms-article__related .cms-blog-card--noimg { padding: 20px; background: var(--bg, #fff); border-color: transparent; }
.cms-article__related-list { margin: 0; padding: 0; list-style: none; max-width: var(--cms-article-w); }
.cms-article__related-list li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; padding: 12px 0; border-bottom: 1px solid var(--line, #d9dde3); }
.cms-article__related-list a { color: var(--text, #111); font-weight: 600; text-decoration: none; }
.cms-article__related-list a:hover { color: var(--accent, #F54927); }
.cms-article__related-list time { font-size: .85rem; color: var(--muted, #5d6470); }
.cms-article--minimal .cms-article__related { background: transparent; }

/* ---------- hero: iso kansikuva ---------- */
.cms-article__hero { position: relative; display: flex; align-items: flex-end; min-height: clamp(360px, 60vh, 620px); padding: clamp(96px, 12vw, 160px) var(--side, var(--cell-pad, 20px)) clamp(32px, 5vw, 64px); overflow: hidden; background: var(--text, #111); color: #fff; }
.cms-article__hero:not(.has-image) { min-height: 0; background: var(--surface, #f3f4f6); color: var(--text, #111); }
.cms-article__hero-media { position: absolute; inset: 0; }
.cms-article__hero-media .cms-img { width: 100%; height: 100%; object-fit: cover; }
.cms-article__hero.has-image::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, .05) 20%, rgba(0, 0, 0, .72) 100%); }
.cms-article__hero-inner { position: relative; z-index: 1; max-width: 860px; }
.cms-article__hero.has-image .cms-article__title, .cms-article__hero.has-image .cms-article__lead, .cms-article__hero.has-image .cms-blog-meta,
.cms-article__hero.has-image .breadcrumb, .cms-article__hero.has-image .breadcrumb a, .cms-article__hero.has-image .eyebrow { color: #fff; }
.cms-article__hero.has-image .cms-article__lead { opacity: .92; }
.cms-article__hero + .cms-article__body > .section:first-child, .cms-article__hero + .cms-article__body > .cms-article__lyhyesti { padding-top: clamp(32px, 5vw, 56px); }

/* ---------- sivupalkki ---------- */
.cms-article__grid { display: grid; gap: 40px; align-items: start; }
.cms-article__main { min-width: 0; }
.cms-article__main > .section, .cms-article__main > .section > .section__inner { padding-inline: 0; padding-top: 0; padding-bottom: 24px; border: 0; }
.cms-article__main > .section:last-child, .cms-article__main > .section:last-child > .section__inner { padding-bottom: 0; }
.cms-article__main > .cms-article__summary { margin-bottom: 32px; }
.cms-article__main > .cms-article__faq-wrap { margin-top: 8px; margin-bottom: 32px; }
.cms-article__aside { display: grid; gap: 28px; }
.cms-article__sticky { display: grid; gap: 28px; }
.cms-toc { padding: 20px 22px; border: 1px solid var(--line, #d9dde3); border-radius: var(--radius, 12px); }
.cms-toc__title { margin: 0 0 10px; font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted, #5d6470); }
.cms-toc ol { margin: 0; padding: 0; list-style: none; counter-reset: toc; }
.cms-toc li { counter-increment: toc; }
.cms-toc li + li { margin-top: 2px; }
.cms-toc a { display: flex; gap: 10px; padding: 6px 0; color: var(--text, #111); font-size: .925rem; line-height: 1.4; text-decoration: none; }
.cms-toc a::before { content: counter(toc) "."; min-width: 1.2em; color: var(--muted, #5d6470); font-variant-numeric: tabular-nums; }
.cms-toc a:hover { color: var(--accent, #F54927); }
.cms-article__facts { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; margin: 0; font-size: .9rem; }
.cms-article__facts dt { color: var(--muted, #5d6470); }
.cms-article__facts dd { margin: 0; font-weight: 500; }
@media (min-width: 960px) {
  .cms-article__grid { grid-template-columns: minmax(0, 1fr) 280px; gap: 64px; }
  .cms-article__main { max-width: var(--cms-article-w); }
  .cms-article__sticky { position: sticky; top: 96px; }
}

/* ---------- minimalistinen ---------- */
.cms-article--minimal .cms-article__inner, .cms-article--minimal .section__inner { margin-inline: auto; }
.cms-article__header--center { text-align: center; }
.cms-article__header--center .cms-article__inner { margin-inline: auto; }
.cms-article__header--center .cms-blog-meta { justify-content: center; }
.cms-article--minimal .cms-article__title { font-size: clamp(1.9rem, 1.4rem + 2vw, 2.75rem); }
.cms-article--minimal .cms-article__lyhyesti .lead { margin: 0; }
.cms-article--minimal .cms-article__summary { border-left: 0; border-radius: var(--radius, 12px); background: transparent; border: 1px solid var(--line, #d9dde3); }
.cms-article--minimal .cms-share__list { justify-content: center; }
.cms-article--minimal .cms-share__label { text-align: center; }
.cms-article--minimal .cms-article__tags { justify-content: center; }
.cms-article--minimal .cms-article__pn, .cms-article--minimal .cms-blog__wrap { max-width: var(--cms-article-w); margin-inline: auto; }

/* ---------- aikakauslehti ---------- */
.cms-article__header--mag .cms-article__inner { max-width: 980px; }
.cms-article__header--mag .cms-article__title { font-size: clamp(2.25rem, 1.4rem + 3.6vw, 4.25rem); line-height: 1.05; }
.cms-article__mag { display: grid; gap: 28px; padding-bottom: clamp(24px, 4vw, 48px); align-items: center; }
.cms-article__mag .cms-img { width: 100%; height: auto; border-radius: var(--radius, 12px); aspect-ratio: 4 / 3; object-fit: cover; }
.cms-article__mag-side .lead { margin: 0 0 20px; font-size: clamp(1.1rem, 1rem + .5vw, 1.35rem); }
@media (min-width: 900px) { .cms-article__mag { grid-template-columns: 1.4fr 1fr; gap: 48px; } }
.cms-article--magazine .cms-article__body > .section:first-of-type .prose > p:first-child::first-letter {
  float: left; margin: .06em .1em 0 0; font-family: var(--font-heading, inherit); font-size: 3.6em; line-height: .85; font-weight: 700; color: var(--accent, #F54927);
}

/* editorin esikatselu: ei klikattavaa kortin peittoa (muokattavuus) */
[data-bid] .cms-blog-card__title a::after { display: none; }

@media print { .cms-share, .cms-article__pn, .cms-article__related, .cms-blog__filters, .cms-blog__more { display: none !important; } }

/* Evästesuostumus (consent.js). Värit teemasta (--surface, --text, --accent …), toimii myös ilman teemaa. */
.fc-root, .fc-float {
  --fc-bg: var(--surface, var(--bg, #ffffff));
  --fc-text: var(--text, #1c1c1e);
  --fc-muted: var(--muted, #4a4a50);
  --fc-accent: var(--accent, #1f4fd1);
  --fc-accent-ink: var(--accent-ink, #ffffff);
  --fc-line: var(--line, rgba(0, 0, 0, 0.16));
  --fc-radius: var(--radius, 10px);
  z-index: 2147483000;
  font: 15px/1.5 var(--font-body, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
  color: var(--fc-text);
}
.fc-root { position: fixed; inset: auto 0 0 0; pointer-events: none; }
.fc-root[hidden], .fc-root [hidden], .fc-float[hidden] { display: none !important; }
.fc-root *, .fc-root *::before, .fc-root *::after { box-sizing: border-box; }
.fc-dialog, .fc-float { pointer-events: auto; }
.fc-backdrop { display: none; }
.fc-dialog {
  background: var(--fc-bg); color: var(--fc-text); border: 1px solid var(--fc-line);
  box-shadow: 0 -6px 28px rgba(0, 0, 0, 0.16); outline: none; max-height: 85vh; overflow: auto; overscroll-behavior: contain;
}
.fc-title { font: 700 1.1em/1.3 var(--font-heading, inherit); margin: 0 0 6px; color: var(--fc-text); letter-spacing: 0; text-transform: none; }
.fc-desc, .fc-cat-desc, .fc-note, .fc-foot { margin: 0 0 8px; color: var(--fc-muted); font-size: 0.94em; }
.fc-note { font-size: 0.88em; }
.fc-link { color: var(--fc-text); text-decoration: underline; text-underline-offset: 2px; }
.fc-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.fc-btn {
  font-family: inherit; font-size: 0.95em; font-weight: 600; line-height: 1.2; min-height: 44px; padding: 10px 18px; border-radius: var(--fc-radius);
  border: 2px solid var(--fc-accent); cursor: pointer; flex: 1 1 auto; text-align: center; margin: 0;
}
/* Hyväksy ja Hylkää: täsmälleen sama ulkoasu. */
.fc-choice { background: var(--fc-accent); color: var(--fc-accent-ink); }
.fc-outline { background: transparent; color: var(--fc-text); border-color: var(--fc-line); }
.fc-btn:hover { filter: brightness(0.95); }
.fc-btn:focus-visible, .fc-link:focus-visible, .fc-switch:focus-visible, .fc-x:focus-visible, .fc-float:focus-visible, .fc-cookies summary:focus-visible {
  outline: 3px solid var(--fc-accent); outline-offset: 2px;
}

/* Alapalkki: ei peitä koko sivua, sivua voi lukea ja käyttää. */
.fc-layout-bar .fc-dialog { border-width: 1px 0 0; border-radius: 0; }
.fc-layout-bar .fc-main { max-width: 1160px; margin: 0 auto; padding: 16px 20px; display: flex; gap: 20px; align-items: center; }
.fc-layout-bar .fc-main .fc-text { flex: 1 1 auto; min-width: 0; }
.fc-layout-bar .fc-main .fc-actions { flex: 0 0 auto; max-width: 480px; }

/* Nurkkalaatikko */
.fc-layout-box { inset: auto 16px 16px auto; max-width: calc(100vw - 32px); }
.fc-layout-box.fc-pos-left { inset: auto auto 16px 16px; }
.fc-layout-box .fc-dialog { width: 400px; max-width: 100%; border-radius: calc(var(--fc-radius) + 4px); box-shadow: 0 10px 40px rgba(0, 0, 0, 0.22); }
.fc-layout-box .fc-main { padding: 18px; }

/* Keskimodaali ja asetusnäkymä (kaikissa asetteluissa) */
.fc-root.fc-modal { inset: 0; display: flex; align-items: center; justify-content: center; padding: 16px; pointer-events: auto; }
.fc-root.fc-modal .fc-backdrop { display: block; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.45); }
.fc-root.fc-modal .fc-dialog { position: relative; width: 560px; max-width: 100%; max-height: calc(100vh - 32px); border-radius: calc(var(--fc-radius) + 4px); border-width: 1px; box-shadow: 0 16px 60px rgba(0, 0, 0, 0.3); }
.fc-root.fc-modal .fc-main { display: block; padding: 22px; max-width: none; }
.fc-root.fc-modal .fc-main .fc-actions { margin-top: 12px; max-width: none; }
.fc-prefs { padding: 22px; }
.fc-root.fc-modal .fc-dialog:has(.fc-prefs:not([hidden])) { width: 640px; }
.fc-prefs-h { display: flex; align-items: flex-start; gap: 12px; }
.fc-prefs-h .fc-title { flex: 1; }
.fc-x { font-family: inherit; font-size: 26px; line-height: 1; background: none; border: 0; color: var(--fc-text); cursor: pointer; width: 44px; height: 44px; margin: -10px -10px 0 0; border-radius: var(--fc-radius); }
.fc-cats { list-style: none; margin: 14px 0; padding: 0; border-top: 1px solid var(--fc-line); }
.fc-cat { padding: 12px 0; border-bottom: 1px solid var(--fc-line); }
.fc-cat-h { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; }
.fc-cat-name { font-weight: 700; flex: 1; cursor: pointer; }
.fc-always { font-size: 0.85em; font-weight: 600; color: var(--fc-muted); }
.fc-switch {
  appearance: none; -webkit-appearance: none; flex: 0 0 auto; width: 46px; height: 26px; border-radius: 13px; margin: 0;
  background: var(--fc-line); border: 2px solid var(--fc-muted); position: relative; cursor: pointer; transition: background 0.15s;
}
.fc-switch::before { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: var(--fc-bg); border: 1px solid var(--fc-muted); transition: transform 0.15s; }
.fc-switch:checked { background: var(--fc-accent); border-color: var(--fc-accent); }
.fc-switch:checked::before { transform: translateX(20px); border-color: var(--fc-accent); }
.fc-cookies { margin-top: 6px; font-size: 0.9em; }
.fc-cookies summary { cursor: pointer; font-weight: 600; padding: 4px 0; }
.fc-tbl { overflow-x: auto; }
.fc-tbl table { width: 100%; border-collapse: collapse; margin-top: 6px; font-size: 0.92em; }
.fc-tbl th, .fc-tbl td { text-align: left; vertical-align: top; padding: 6px 8px 6px 0; border-bottom: 1px solid var(--fc-line); }
.fc-tbl th { font-weight: 600; color: var(--fc-muted); }
.fc-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; word-break: break-all; }
.fc-id { font-size: 0.8em; word-break: break-all; }
.fc-foot { margin-top: 12px; }

/* Kelluva painike: suostumuksen muutos ja peruminen */
.fc-float {
  position: fixed; bottom: 16px; width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--fc-line);
  background: var(--fc-bg); color: var(--fc-text); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18); cursor: pointer; display: grid; place-items: center; padding: 0;
}
.fc-float-left { left: 16px; }
.fc-float-right { right: 16px; }

@media (max-width: 720px) {
  .fc-layout-bar .fc-main { flex-direction: column; align-items: stretch; gap: 10px; padding: 14px 16px; }
  .fc-layout-bar .fc-main .fc-actions { max-width: none; }
  .fc-btn { flex: 1 1 100%; }
  .fc-layout-box { inset: auto 8px 8px 8px; }
  .fc-layout-box.fc-pos-left { inset: auto 8px 8px 8px; }
  .fc-layout-box .fc-dialog { width: 100%; }
  .fc-root.fc-modal { padding: 8px; }
  .fc-prefs, .fc-root.fc-modal .fc-main { padding: 16px; }
}
@media (prefers-reduced-motion: reduce) { .fc-switch, .fc-switch::before { transition: none; } }
@media print { .fc-root { display: none !important; } }

/* Tyhjä osio (section) ja sen elementit. Toimii kaikissa teemoissa: käytä teeman muuttujia varmistusarvoin,
   esim. var(--fs-2xl, clamp(...)). Julkaistaan tiedostona /assets/cms-blocks.css. Luokkaetuliite cms-.
   Teksti: koko/paino/tasaus ovat esiasetuksia (cms-t-size-*, cms-t-w-*, cms-t-align-*), ei vapaita px-arvoja. */

.cms-sec {
  --cms-primary: var(--color-primary, var(--accent, #F54927));
  --cms-primary-ink: var(--color-primary-ink, var(--color-primary, var(--accent, #C2361A)));
  --cms-tint: var(--color-primary-tint, var(--accent-soft, #FEEDE9));
  --cms-text: var(--color-text, var(--text, #111));
  --cms-muted: var(--color-text-muted, var(--muted, #616161));
  --cms-line: var(--color-line, var(--line, #e6e6e6));
  --cms-line-strong: var(--color-line-strong, var(--line, #d4d4d4));
  --cms-surface: var(--color-surface, var(--surface, #fafafa));
  --cms-radius: var(--radius, 8px);
  --cms-ease: var(--ease, cubic-bezier(.2, .7, .2, 1));
  /* tekstikoot: teeman asteikko, jos sellainen on (--fs-*), muuten yhteensopiva varmistusarvo */
  --cms-fs-s: var(--fs-sm, .875rem);
  --cms-fs-m: var(--fs-base, 1.0625rem);
  --cms-fs-l: var(--fs-lg, clamp(1.25rem, 1.1rem + .6vw, 1.5rem));
  --cms-fs-xl: var(--fs-2xl, clamp(1.75rem, 1.1rem + 2.4vw, 2.625rem));
  --cms-fs-2xl: var(--fs-3xl, clamp(2.25rem, 1.2rem + 4.2vw, 3.875rem));
  --cms-fw-normal: var(--fw-normal, 400);
  --cms-fw-medium: var(--fw-medium, 500);
  --cms-fw-bold: var(--fw-bold, 700);
  --cms-fw-black: var(--fw-black, 800);
  --cms-font-heading: var(--font-heading, var(--font-display, inherit));
  --cms-py-unit: var(--section-y, clamp(56px, 8vw, 104px));
}

/* ---------- Osion kehys ---------- */
.section .cms-sec__inner { max-width: none; min-width: 0; text-align: left; --cms-jc: flex-start; --cms-ml: 0; --cms-mr: auto; }
.cms-sec-align-center .cms-sec__inner { text-align: center; --cms-jc: center; --cms-ml: auto; --cms-mr: auto; }
.cms-sec-align-right .cms-sec__inner { text-align: right; --cms-jc: flex-end; --cms-ml: auto; --cms-mr: 0; }

.section.cms-sec-w-narrow .cms-sec__inner { max-width: var(--prose, 720px); margin-inline: auto; }
.section.cms-sec-w-full { padding-inline: 0; }
.section.cms-sec-w-full .cms-sec__inner { padding-inline: 0; }

/* Pystyväli: teeman --section-y -yksikkö; sisemmän lohkon pystypaddaus siirretään osiolle (kaksi teemarakennetta) */
.section.cms-sec-pad-none > .cms-sec__inner, .section.cms-sec-pad-s > .cms-sec__inner, .section.cms-sec-pad-l > .cms-sec__inner, .section.cms-sec-pad-xl > .cms-sec__inner { padding-block: 0; }
.section.cms-sec-pad-none { padding-block: 0; }
.section.cms-sec-pad-s { padding-block: calc(var(--cms-py-unit) * .5); }
.section.cms-sec-pad-l { padding-block: calc(var(--cms-py-unit) * 1.5); }
.section.cms-sec-pad-xl { padding-block: calc(var(--cms-py-unit) * 2); }

/* Taustat */
.cms-sec.cms-bg-tint { background: var(--cms-tint); }
.cms-sec.cms-bg-dark { background: var(--color-text, var(--text, #111)); color: #fff; }
.cms-bg-dark h1, .cms-bg-dark h2, .cms-bg-dark h3, .cms-bg-dark .prose, .cms-bg-dark .prose *, .cms-bg-dark .cms-el--quote { color: inherit; }
.cms-bg-dark a:not(.btn) { color: #fff; }
.cms-bg-dark .cms-t-tone-muted, .cms-bg-dark .cms-caption { color: rgba(255, 255, 255, .72); }
.cms-bg-dark .cms-t-tone-accent { color: var(--cms-primary); }
.cms-bg-dark .btn-outline, .cms-bg-dark .btn-ghost, .cms-bg-dark .btn-secondary { color: #fff; border-color: rgba(255, 255, 255, .55); background: transparent; }
.cms-bg-dark .cms-el--divider hr { border-top-color: rgba(255, 255, 255, .3); }

/* Elementtien väli */
.cms-sec__inner > .cms-el { margin-block: 0; }
.cms-sec__inner > .cms-el + .cms-el { margin-top: 1rem; }
.cms-sec__inner > .cms-el--heading + .cms-el { margin-top: .75rem; }
.cms-sec__inner > .cms-el + .cms-el--heading { margin-top: 2rem; }
.cms-sec__inner > .cms-el--spacer + .cms-el, .cms-sec__inner > .cms-el + .cms-el--spacer { margin-top: 0; }

/* Elementin oma tasaus ohittaa osion tasauksen */
.cms-el-align-left { text-align: left; --cms-jc: flex-start; --cms-ml: 0; --cms-mr: auto; }
.cms-el-align-center { text-align: center; --cms-jc: center; --cms-ml: auto; --cms-mr: auto; }
.cms-el-align-right { text-align: right; --cms-jc: flex-end; --cms-ml: auto; --cms-mr: 0; }

/* ---------- Teksti: taso (tag) tulee teemalta, koko/paino/tasaus esiasetuksina ---------- */
.cms-el--text, .cms-el--heading { min-width: 0; overflow-wrap: anywhere; }
.cms-el--heading { font-family: var(--cms-font-heading); }
.cms-t-size-s { font-size: var(--cms-fs-s); }
.cms-t-size-m { font-size: var(--cms-fs-m); }
.cms-t-size-l { font-size: var(--cms-fs-l); }
.cms-t-size-xl { font-size: var(--cms-fs-xl); }
.cms-t-size-2xl { font-size: var(--cms-fs-2xl); }
.cms-t-tag-p.cms-t-size-xl, .cms-t-tag-p.cms-t-size-2xl { font-family: var(--cms-font-heading); line-height: 1.12; letter-spacing: -.02em; }
.cms-t-tag-p.cms-t-size-l { line-height: 1.45; }
.cms-t-w-normal { font-weight: var(--cms-fw-normal); }
.cms-t-w-medium { font-weight: var(--cms-fw-medium); }
.cms-t-w-bold { font-weight: var(--cms-fw-bold); }
.cms-t-w-black { font-weight: var(--cms-fw-black); }
.cms-t-align-left { text-align: left; }
.cms-t-align-center { text-align: center; }
.cms-t-align-right { text-align: right; }
.cms-t-tone-muted { color: var(--cms-muted); }
.cms-t-tone-accent { color: var(--cms-primary-ink); }
.cms-el--rich > :first-child { margin-top: 0; }
.cms-el--rich > :last-child { margin-bottom: 0; }

/* ---------- Luettelo ---------- */
.cms-el--list { margin-block: 0; padding-left: 1.25rem; }
.cms-el--list li + li { margin-top: .4rem; }
.cms-list--check { list-style: none; padding-left: 0; }
.cms-list--check li { display: flex; gap: .6rem; align-items: flex-start; }
.cms-list--check li .icon { width: 1.15em; height: 1.15em; flex: none; margin-top: .3em; color: var(--cms-primary); }
.cms-sec-align-center .cms-el--list:not(.cms-el-align-left):not(.cms-el-align-right), .cms-el--list.cms-el-align-center { display: table; margin-inline: auto; text-align: left; }
.cms-sec-align-right .cms-el--list:not(.cms-el-align-left):not(.cms-el-align-center), .cms-el--list.cms-el-align-right { display: table; margin-left: auto; text-align: left; }

/* ---------- Sitaatti ---------- */
.cms-el--quote { padding-left: 1.25rem; border-left: 3px solid var(--cms-primary); font-size: var(--cms-fs-l); font-weight: var(--cms-fw-medium); line-height: 1.4; }
.cms-el--quote p { margin: 0; }
.cms-el--quote footer { margin-top: .5rem; font-size: var(--cms-fs-s); font-weight: var(--cms-fw-normal); color: var(--cms-muted); }
.cms-sec-align-center .cms-el--quote:not(.cms-el-align-left):not(.cms-el-align-right), .cms-el--quote.cms-el-align-center { border-left: 0; padding-left: 0; }
.cms-sec-align-right .cms-el--quote:not(.cms-el-align-left):not(.cms-el-align-center), .cms-el--quote.cms-el-align-right { border-left: 0; padding-left: 0; }

/* ---------- Ikoni ja teksti ---------- */
.cms-el--icontext { display: flex; gap: 1rem; align-items: flex-start; justify-content: var(--cms-jc, flex-start); }
.cms-el--icontext .icon-box { display: inline-grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: var(--cms-radius); background: var(--cms-tint); color: var(--cms-primary); }
.cms-el--icontext .icon { width: 24px; height: 24px; }
.cms-icontext__body { min-width: 0; text-align: left; }
.cms-icontext__title { margin: 0 0 .25rem; font-size: var(--cms-fs-l); line-height: 1.25; }
.cms-icontext__body p { margin: 0; color: var(--cms-muted); }

/* ---------- Kuva ---------- */
.cms-el--image { margin-block: 0; margin-left: var(--cms-ml, 0); margin-right: var(--cms-mr, auto); max-width: 100%; }
.cms-el--image .cms-img { display: block; width: 100%; height: auto; }
.cms-el--image.cms-img-w-l { max-width: 75%; }
.cms-el--image.cms-img-w-m { max-width: 50%; }
.cms-el--image.cms-img-w-s { max-width: 33%; }
.cms-el--image.cms-img-r-16-9 .cms-img, .cms-el--image.cms-img-r-16-9 .cms-img-empty { aspect-ratio: 16 / 9; object-fit: cover; }
.cms-el--image.cms-img-r-4-3 .cms-img, .cms-el--image.cms-img-r-4-3 .cms-img-empty { aspect-ratio: 4 / 3; object-fit: cover; }
.cms-el--image.cms-img-r-1-1 .cms-img, .cms-el--image.cms-img-r-1-1 .cms-img-empty { aspect-ratio: 1 / 1; object-fit: cover; }
.cms-el--image.cms-radius-sm .cms-img, .cms-el--image.cms-radius-sm .cms-img-empty { border-radius: 6px; }
.cms-el--image.cms-radius-lg .cms-img, .cms-el--image.cms-radius-lg .cms-img-empty { border-radius: 16px; }
@media (max-width: 640px) { .cms-el--image.cms-img-w-l, .cms-el--image.cms-img-w-m, .cms-el--image.cms-img-w-s { max-width: 100%; } }
.cms-el--image figcaption { text-align: left; }

/* ---------- Painikkeet ---------- */
.cms-el--button, .cms-el--buttons { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: var(--cms-jc, flex-start); }

/* ---------- Video ---------- */
.cms-el--video { margin-inline: 0; max-width: 60rem; margin-left: var(--cms-ml, 0); margin-right: var(--cms-mr, auto); }
.cms-el--video .cms-frame { border-radius: var(--cms-radius); }

/* ---------- Sarakkeet ---------- */
.cms-el--columns { display: grid; gap: var(--cms-cgap, 2rem); text-align: left; }
.cms-gap-s { --cms-cgap: 1rem; }
.cms-gap-l { --cms-cgap: 3.5rem; }
.cms-el__col { min-width: 0; }
.cms-el__col h3 { margin: 0 0 .5rem; }
.cms-el__col .prose > :first-child { margin-top: 0; }
.cms-el__col .prose > :last-child { margin-bottom: 0; }
.cms-el__col .btn { margin-top: 1rem; }
@media (min-width: 720px) {
  .cms-el--columns.cms-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cms-el--columns.cms-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------- Väli ja erotin ---------- */
.cms-sp-s { height: 1rem; }
.cms-sp-m { height: 2rem; }
.cms-sp-l { height: clamp(2.5rem, 5vw, 4rem); }
.cms-sp-xl { height: clamp(3.5rem, 8vw, 6.5rem); }
.cms-el--divider { padding-block: .5rem; }
.cms-el--divider hr { margin: 0; border: 0; border-top: 1px solid var(--cms-line-strong); }
.cms-el--placeholder { margin: 0; }

/* Piilotus laitteella (_hide) ja lohkojen yhteiset välit (_style): style.css */

/* ---------- Tyhjä osio: julkaistulla sivulla piilossa, editorissa (juurella data-bid) opastava paikkamerkki ---------- */
.cms-sec--empty { display: none; }
[data-bid].cms-sec--empty { display: block; }
[data-bid].cms-sec--empty .cms-sec__inner::before {
  content: "Tyhjä osio – lisää elementtejä vasemmalta (Lisää → Elementit)"; display: block; padding: 2.25rem 1rem; text-align: center; font-size: .9375rem;
  color: var(--cms-muted); border: 2px dashed var(--cms-line-strong); border-radius: var(--cms-radius);
}

/* CMS-lohkojen yhteiset tyylit (extra). Toimii kaikissa teemoissa: käytä CSS-muuttujia varmistusarvoilla,
   esim. color: var(--color-primary, var(--accent, #F54927)). Julkaistaan tiedostona /assets/cms-blocks.css.
   Lohkot: video, columns, tabs, accordion, timeline, stats, icon_list, quote, banner, steps_cta, comparison,
   contact_info, social_links, spacer, countdown, embed. Luokkaetuliite cms-. Fontit periytyvät teemalta. */

/* Muuttujat: teeman muuttujat ensin, sitten vaihtoehtoiset nimet, sitten kiinteä varmistusarvo. */
.cms-columns, .cms-tabs, .cms-accordion, .cms-timeline, .cms-stats, .cms-iconlist-sec, .cms-quote, .cms-banner-sec, .cms-steps,
.cms-compare, .cms-contact, .cms-social-sec, .cms-countdown, .cms-embed-sec, .cms-video-sec {
  --cms-primary: var(--color-primary, var(--accent, #F54927));
  --cms-primary-ink: var(--color-primary-ink, var(--color-primary, var(--accent, #C2361A)));
  --cms-tint: var(--color-primary-tint, #FEEDE9);
  --cms-text: var(--color-text, var(--text, #111));
  --cms-muted: var(--color-text-muted, var(--muted, #616161));
  --cms-line: var(--color-line, var(--line, #e6e6e6));
  --cms-line-strong: var(--color-line-strong, #d4d4d4);
  --cms-surface: var(--color-surface, var(--surface, #fafafa));
  --cms-radius: var(--radius, 8px);
  --cms-pad: var(--cell-pad, 1.5rem);
  --cms-ease: var(--ease, cubic-bezier(.2, .7, .2, 1));
}

.cms-inner { min-width: 0; }
.cms-center { text-align: center; }
.cms-empty { margin: 0; padding: 1.5rem; border: 1px dashed var(--color-line-strong, #d4d4d4); border-radius: var(--radius, 8px); color: var(--color-text-muted, var(--muted, #616161)); text-align: center; font-size: .9375rem; }
.cms-columns [hidden], .cms-tabs [hidden], .cms-countdown [hidden], .cms-embed-sec [hidden] { display: none !important; }

/* Ikonilaatikko varmistukseksi teemoille, joilla .icon-box puuttuu */
.cms-card .icon-box, .cms-iconlist .icon-box, .cms-stat .icon-box {
  display: inline-grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: var(--radius, 8px);
  background: var(--color-primary-tint, #FEEDE9); color: var(--color-primary, var(--accent, #F54927));
}
.cms-card .icon, .cms-iconlist .icon, .cms-stat .icon, .cms-banner .icon { width: 24px; height: 24px; flex: none; }

/* ---------- Sarakkeet ---------- */
.cms-columns__grid { display: grid; gap: var(--cms-pad); }
.cms-col { min-width: 0; }
.cms-col__title { margin: 0 0 .5rem; font-size: var(--fs-lg, 1.25rem); }
.cms-col .prose > :first-child { margin-top: 0; }
.cms-col .prose > :last-child { margin-bottom: 0; }
@media (min-width: 720px) {
  .cms-columns__grid.cms-n-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cms-columns__grid.cms-n-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 960px) {
  .cms-columns__grid.cms-n-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(var(--cms-pad) * 1.5); }
}

/* ---------- Välilehdet ---------- */
.cms-tabs__panel { padding: 1.25rem 0; }
.cms-tabs__panel + .cms-tabs__panel { border-top: 1px solid var(--cms-line); }
.cms-tabs__heading { margin: 0 0 .75rem; font-size: var(--fs-lg, 1.25rem); }
.cms-tabs__panel .prose > :first-child { margin-top: 0; }
.cms-tabs__panel .prose > :last-child { margin-bottom: 0; }
.cms-tabs__wrap.is-enhanced .cms-tabs__list {
  display: flex; gap: .25rem; border-bottom: 1px solid var(--cms-line); overflow-x: auto; scrollbar-width: thin; -webkit-overflow-scrolling: touch;
}
.cms-tabs__tab {
  flex: none; padding: .75rem 1.125rem; margin-bottom: -1px; background: none; border: 0; border-bottom: 3px solid transparent;
  font: inherit; font-weight: 600; color: var(--cms-muted); cursor: pointer; white-space: nowrap;
  transition: color .15s var(--cms-ease), border-color .15s var(--cms-ease);
}
.cms-tabs__tab:hover { color: var(--cms-text); }
.cms-tabs__tab[aria-selected="true"] { color: var(--cms-text); border-bottom-color: var(--cms-primary); }
.cms-tabs__tab:focus-visible, .cms-tabs__panel:focus-visible { outline: 2px solid var(--cms-text); outline-offset: 2px; }
.cms-tabs__wrap.is-enhanced .cms-tabs__heading { display: none; }
.cms-tabs__wrap.is-enhanced .cms-tabs__panel { border-top: 0; padding-top: 1.5rem; }

/* ---------- Haitari (perii .faq-luokat teemalta) ---------- */
.cms-accordion .cms-accordion__list { border-top: 1px solid var(--cms-line); }
.cms-accordion .faq__a > :first-child { margin-top: 0; }
.cms-accordion .faq__a > :last-child { margin-bottom: 0; }

/* ---------- Aikajana ---------- */
.cms-timeline__list { list-style: none; margin: 0; padding: 0; }
.cms-timeline__item { position: relative; display: grid; grid-template-columns: 1fr; gap: .25rem; padding: 0 0 2rem 1.75rem; }
.cms-timeline__item:last-child { padding-bottom: 0; }
.cms-timeline__item::before { content: ""; position: absolute; left: 5px; top: .5rem; bottom: -.5rem; width: 2px; background: var(--cms-line-strong); }
.cms-timeline__item:last-child::before { display: none; }
.cms-timeline__item::after { content: ""; position: absolute; left: 0; top: .45rem; width: 12px; height: 12px; border-radius: 50%; background: var(--cms-primary); box-shadow: 0 0 0 4px #fff; }
.cms-timeline__date { font-family: var(--font-mono, ui-monospace, Consolas, monospace); font-size: .8125rem; letter-spacing: .06em; text-transform: uppercase; color: var(--cms-muted); }
.cms-timeline__title { margin: 0 0 .25rem; font-size: var(--fs-lg, 1.25rem); }
.cms-timeline__body p { margin: 0; color: var(--cms-muted); max-width: 62ch; }
@media (min-width: 640px) {
  .cms-timeline__item { grid-template-columns: 8rem minmax(0, 1fr); gap: 0 2.5rem; padding-left: 0; }
  .cms-timeline__date { text-align: right; padding-top: .3rem; }
  .cms-timeline__item::before { left: calc(8rem + 1.25rem - 1px); }
  .cms-timeline__item::after { left: calc(8rem + 1.25rem - 5px); }
}

/* ---------- Isot luvut ---------- */
.cms-stat { display: grid; gap: .5rem; align-content: start; }
.cms-stat .kpi__value { font-variant-numeric: tabular-nums; }

/* ---------- Ikonilista ---------- */
.cms-iconlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.5rem; }
.cms-iconlist__item { display: flex; gap: 1rem; align-items: flex-start; min-width: 0; }
.cms-iconlist__title { margin: 0 0 .25rem; font-size: 1.125rem; }
.cms-iconlist__item p { margin: 0; color: var(--cms-muted); }
@media (min-width: 720px) { .cms-iconlist.cms-n-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 3rem; } }

/* ---------- Sitaatti ---------- */
.cms-quote__fig { margin: 0 auto; max-width: 52rem; }
.cms-quote__text {
  margin: 0; font-size: clamp(1.5rem, 1.15rem + 1.6vw, 2.25rem); line-height: 1.3; font-weight: 700; letter-spacing: -.02em;
  font-family: var(--font-heading, inherit); color: var(--cms-text); text-wrap: balance;
}
.cms-quote__text::before { content: "\201C"; content: "\201C" / ""; display: block; margin-bottom: .25rem; font-size: 3.5rem; line-height: .7; color: var(--cms-primary); }
.cms-quote__person { display: flex; align-items: center; gap: .875rem; margin-top: 1.5rem; }
.cms-avatar {
  display: grid; place-items: center; width: 48px; height: 48px; flex: none; border-radius: 50%;
  background: var(--color-surface-2, #f4f4f4); border: 1px solid var(--cms-line); font-weight: 800; font-family: var(--font-heading, inherit); color: var(--cms-text);
}
.cms-quote__name { font-weight: 700; }
.cms-quote__role { font-size: .875rem; color: var(--cms-muted); }

/* ---------- Ilmoituspalkki ---------- */
.cms-banner-sec .cms-inner { padding-block: 1rem; }
.cms-banner {
  --b: #1f5fbf; --bg: #eef4ff;
  display: flex; flex-wrap: wrap; align-items: flex-start; gap: .5rem .875rem; padding: .875rem 1.125rem;
  border: 1px solid var(--b); border-left-width: 4px; border-radius: var(--radius, 8px); background: var(--bg); color: var(--color-text, var(--text, #111));
}
.cms-banner--success { --b: var(--color-success, #1E7F4F); --bg: #eaf6ef; }
.cms-banner--warning { --b: #b26a00; --bg: #fff5e0; }
.cms-banner__icon { display: inline-flex; color: var(--b); padding-top: 1px; }
.cms-banner__text { flex: 1 1 16rem; margin: 0; font-size: .9375rem; }
.cms-banner__link { flex: none; font-weight: 700; font-size: .9375rem; color: inherit; text-underline-offset: 3px; }
.cms-banner__link:hover { text-decoration-thickness: 2px; }

/* ---------- Askeleet + painike ---------- */
.cms-steps__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.5rem; counter-reset: cmsstep; }
.cms-steps__item { position: relative; counter-increment: cmsstep; padding-left: 3.5rem; min-width: 0; }
.cms-steps__item::before {
  content: counter(cmsstep); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%;
  background: var(--cms-primary); color: #fff; font-weight: 800; font-family: var(--font-heading, inherit);
}
.cms-steps__title { margin: 0 0 .25rem; font-size: var(--fs-lg, 1.25rem); }
.cms-steps__item p { margin: 0; color: var(--cms-muted); }
.cms-steps__cta { margin-top: 2rem; }
@media (min-width: 760px) {
  .cms-steps__list { grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 2rem; }
  .cms-steps__item { padding-left: 0; padding-top: 3.5rem; }
  .cms-steps__cta { text-align: center; }
}

/* ---------- Vertailu ---------- */
.cms-compare__grid { display: grid; gap: 1rem; }
.cms-compare__col { padding: 1.5rem; border: 1px solid var(--cms-line); border-radius: var(--cms-radius); background: var(--cms-surface); }
.cms-compare__col--yes { border: 2px solid var(--cms-primary); background: #fff; }
.cms-compare__title { margin: 0 0 1rem; font-size: var(--fs-lg, 1.25rem); }
.cms-compare__col--no .cms-compare__title { color: var(--cms-muted); }
.cms-compare__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
.cms-compare__list li { position: relative; padding-left: 1.75rem; }
.cms-compare__list li::before { position: absolute; left: 0; top: 0; font-weight: 800; }
.cms-compare__list--no li { color: var(--cms-muted); }
.cms-compare__list--no li::before { content: "\2715"; content: "\2715" / ""; color: var(--cms-muted); }
.cms-compare__list--yes li::before { content: "\2713"; content: "\2713" / ""; color: var(--cms-primary-ink); }
@media (min-width: 720px) { .cms-compare__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; } }

/* ---------- Yhteystiedot ---------- */
.cms-contact__grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
.cms-card { display: grid; gap: .5rem; align-content: start; padding: 1.25rem; border: 1px solid var(--cms-line); border-radius: var(--cms-radius); background: #fff; min-width: 0; }
.cms-card__label { margin: .25rem 0 0; font-family: var(--font-mono, ui-monospace, Consolas, monospace); font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--cms-muted); font-weight: 500; }
.cms-card__body { margin: 0; font-style: normal; overflow-wrap: anywhere; }
.cms-card__body a { color: inherit; font-weight: 600; text-underline-offset: 3px; }
.cms-card__body a:hover { color: var(--cms-primary-ink); }
.cms-contact__map { margin: 1.5rem 0 0; }

/* ---------- Somelinkit ---------- */
.cms-social__title { margin: 0 0 .75rem; }
.cms-social { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .625rem; }
.cms-center .cms-social { justify-content: center; }
.cms-social__link {
  display: inline-flex; align-items: center; gap: .625rem; padding: .375rem 1rem .375rem .375rem; border: 1px solid var(--cms-line-strong, #d4d4d4); border-radius: 999px;
  color: var(--color-text, var(--text, #111)); text-decoration: none; font-weight: 600; font-size: .9375rem; background: #fff;
  transition: border-color .15s, background-color .15s;
}
.cms-social__link:hover { border-color: var(--color-text, var(--text, #111)); background: var(--color-surface, #fafafa); }
.cms-social__link:focus-visible { outline: 2px solid var(--color-text, var(--text, #111)); outline-offset: 2px; }
.cms-social__glyph { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: #111; color: #fff; font-size: .75rem; font-weight: 800; letter-spacing: 0; }

/* ---------- Tyhjä väli ---------- */
.cms-spacer--s { height: 1.5rem; }
.cms-spacer--m { height: 3rem; }
.cms-spacer--l { height: 4rem; }
@media (min-width: 720px) { .cms-spacer--l { height: 6rem; } }

/* ---------- Laskuri ---------- */
.cms-countdown__box { max-width: 44rem; margin: 0 auto; padding: 2rem 1.25rem; text-align: center; border: 1px solid var(--cms-line); border-radius: var(--cms-radius); background: var(--cms-surface); }
.cms-countdown__box h2 { margin: 0 0 .5rem; }
.cms-countdown__date { margin: 0 0 1.5rem; color: var(--cms-muted); font-size: 1.0625rem; }
.cms-countdown__units { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5rem; }
.cms-countdown__unit { display: grid; gap: .25rem; padding: .875rem .25rem; background: #fff; border: 1px solid var(--cms-line); border-radius: var(--cms-radius); }
.cms-countdown__num { font-family: var(--font-heading, inherit); font-size: clamp(1.75rem, 1.2rem + 2.6vw, 3rem); font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; color: var(--cms-text); }
.cms-countdown__lbl { font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; color: var(--cms-muted); }
.cms-countdown__done { margin: 1rem 0 0; font-weight: 700; font-size: 1.125rem; }

/* ---------- Video ja upotus: klikkauksella ladattava kehys ---------- */
.cms-video, .cms-embed { max-width: 60rem; margin: 0 auto; }
.cms-video { margin-block: 0; }
.cms-frame { position: relative; overflow: hidden; border-radius: var(--cms-radius); background: linear-gradient(135deg, #111 0%, #3a3a3a 100%); aspect-ratio: 16 / 9; }
.cms-ratio-16-9 { aspect-ratio: 16 / 9; }
.cms-ratio-4-3 { aspect-ratio: 4 / 3; }
.cms-ratio-1-1 { aspect-ratio: 1 / 1; }
.cms-ratio-21-9 { aspect-ratio: 21 / 9; }
.cms-frame__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cms-frame__play { position: absolute; inset: 0; width: 100%; height: 100%; display: grid; place-items: center; background: transparent; border: 0; padding: 0; cursor: pointer; }
.cms-frame__play svg { width: clamp(56px, 12vw, 84px); height: auto; filter: drop-shadow(0 4px 12px rgba(0, 0, 0, .35)); transition: transform .2s var(--cms-ease, ease); }
.cms-frame__play:hover svg { transform: scale(1.08); }
.cms-frame__play:focus-visible { outline: 3px solid #fff; outline-offset: -6px; }
.cms-play-bg { fill: var(--color-primary, var(--accent, #F54927)); }
.cms-play-tri { fill: #fff; }
.cms-frame iframe, .cms-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.cms-frame__note { margin: .5rem 0 0; font-size: .8125rem; color: var(--color-text-muted, var(--muted, #616161)); }
.cms-frame__note a { color: inherit; text-underline-offset: 3px; }
.cms-caption { margin-top: .5rem; font-size: .9375rem; color: var(--color-text-muted, var(--muted, #616161)); }

.cms-embed { position: relative; border: 1px solid var(--cms-line); border-radius: var(--cms-radius); background: var(--cms-surface); overflow: hidden; min-height: 14rem; }
.cms-embed--16-9 { aspect-ratio: 16 / 9; }
.cms-embed--tall { height: 44rem; max-height: 90vh; }
.cms-embed--compact { min-height: 10rem; }
.cms-embed--compact.is-loaded { height: 9.5rem; min-height: 0; }
.cms-embed.is-loaded { border-color: transparent; background: none; }
.cms-embed__gate { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .75rem; padding: 1.25rem; text-align: center; }
.cms-embed--compact .cms-embed__gate { position: static; min-height: 10rem; }
.cms-embed__note { margin: 0; max-width: 34rem; font-size: .9375rem; color: var(--cms-muted); }
.cms-embed__link { font-size: .875rem; color: var(--cms-muted); text-underline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .cms-tabs__tab, .cms-frame__play svg, .cms-social__link { transition: none; }
  .cms-frame__play:hover svg { transform: none; }
}

/* Ravintola- ja tuotenostot (blocks-food.ts): Kategoriarivi, Tuotekortit, Kampanjabanneri, Mosaiikki.
   Mobiili ensin. Teema voi säätää muuttujilla: --card-border, --card-shadow, --radius, --kk-yellow, --kk-dark. */

.cms-chips-sec, .cms-pcards-sec, .cms-promo-sec, .cms-mosaic-sec {
  --fd-radius: var(--radius, 20px);
  --fd-border: var(--card-border, 0);
  --fd-shadow: var(--card-shadow, none);
  --fd-accent: var(--accent, #bf2f24);
  --fd-accent-ink: var(--accent-ink, #fff);
  --fd-yellow: var(--kk-yellow, #efee4b);
  --fd-dark: var(--kk-dark, #2b1a17);
  --fd-text: var(--text, #1a1210);
  --fd-surface: var(--card-surface, var(--surface, #fff3e0));
}

/* Värisävyt (yhteiset) */
.cms-tone-accent { background: var(--fd-accent); color: var(--fd-accent-ink); }
.cms-tone-yellow { background: var(--fd-yellow); color: #1a1210; }
.cms-tone-dark { background: var(--fd-dark); color: #fff; }
.cms-tone-light { background: var(--fd-surface); color: var(--fd-text); }

/* ---------- Kategoriarivi ---------- */
.cms-chips { display: flex; gap: 10px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scroll-padding-inline: var(--gutter, 16px); padding: 4px var(--gutter, 16px) 12px; margin-inline: calc(var(--gutter, 16px) * -1); scrollbar-width: none; }
.cms-chips::-webkit-scrollbar { display: none; }
.cms-chip { flex: 0 0 96px; display: grid; justify-items: center; gap: 10px; text-decoration: none; color: var(--fd-text); scroll-snap-align: start; -webkit-tap-highlight-color: transparent; }
.cms-chip__img { display: grid; place-items: center; width: 96px; height: 96px; padding: 10px; border-radius: var(--fd-radius); background: var(--fd-surface); border: var(--fd-border); box-shadow: var(--fd-shadow); overflow: hidden; transition: transform .15s ease; }
.cms-chip__img .cms-img { width: 100%; height: 100%; object-fit: contain; border-radius: 12px; }
.cms-chip__img .cms-img-empty { width: 100%; min-height: 0; height: 100%; padding: 0; font-size: .6rem; }
.cms-chip__label { font-weight: 600; font-size: .9rem; text-align: center; line-height: 1.2; }
.cms-chip:hover .cms-chip__img { transform: translateY(-3px); }
.cms-chip.is-active .cms-chip__img { background: var(--fd-accent); }
.cms-chip.is-active .cms-chip__label { font-weight: 800; color: var(--fd-accent); }
@media (min-width: 900px) {
  .cms-chips { flex-wrap: wrap; justify-content: center; overflow: visible; margin-inline: 0; padding-inline: 0; gap: 18px; }
  .cms-chip { flex-basis: 132px; }
  .cms-chip__img { width: 132px; height: 132px; padding: 14px; }
}

/* ---------- Tuotekortit ---------- */
.cms-pcards { display: grid; gap: 14px; }
.cms-pcard { position: relative; display: grid; overflow: hidden; border-radius: var(--fd-radius); border: var(--fd-border); box-shadow: var(--fd-shadow); }
.cms-pcard__media { order: -1; position: relative; min-height: 190px; }
.cms-pcard__media .cms-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cms-pcard__media .cms-img-empty { position: absolute; inset: 0; min-height: 0; }
.cms-pcard__body { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 18px 18px 20px; }
.cms-pcard__title { font-family: var(--font-heading, inherit); font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.1rem); line-height: 1.05; text-transform: inherit; color: inherit; }
.cms-pcard__text { font-size: .92rem; opacity: .92; max-width: 34ch; margin: 0; }
.cms-pcard__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; }
.cms-pcard__price { font-family: var(--font-heading, inherit); font-weight: 800; font-size: 1.5rem; letter-spacing: -.01em; }
.cms-pcard__badge { align-self: flex-start; background: #fff; color: var(--fd-accent); }
.cms-pcard__btn { min-height: 46px; border-radius: 999px; background: #fff; border: 2px solid transparent; color: #1a1210; font-weight: 800; padding-inline: 22px; text-decoration: none; }
.cms-pcard__btn:hover { background: #1a1210; color: #fff; }
.cms-tone-yellow .cms-pcard__btn, .cms-tone-light .cms-pcard__btn { background: var(--fd-accent); color: var(--fd-accent-ink); }
.cms-tone-yellow .cms-pcard__btn:hover, .cms-tone-light .cms-pcard__btn:hover { background: #1a1210; color: #fff; }
.cms-tone-yellow .cms-pcard__badge, .cms-tone-light .cms-pcard__badge { background: var(--fd-accent); color: var(--fd-accent-ink); }
@media (min-width: 640px) { .cms-pcards--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) {
  .cms-pcards { gap: 20px; }
  .cms-pcards--banner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cms-pcards--banner .cms-pcard { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 280px; }
  .cms-pcards--banner .cms-pcard__media { order: 0; min-height: 0; }
  .cms-pcards--banner .cms-pcard__body { justify-content: center; padding: 28px 8px 28px 28px; }
  .cms-pcards--banner .cms-pcard:nth-child(even) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .cms-pcards--grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cms-pcards--grid .cms-pcard__media { min-height: 220px; }
}

/* ---------- Kampanjabanneri ---------- */
.cms-promo { position: relative; display: grid; overflow: hidden; border-radius: var(--fd-radius); border: var(--fd-border); box-shadow: var(--fd-shadow); }
.cms-promo__body { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 24px 20px 12px; }
.cms-promo__title { font-family: var(--font-heading, inherit); font-size: clamp(2.4rem, 1.4rem + 4.4vw, 4.4rem); line-height: .95; text-transform: inherit; color: inherit; max-width: 8ch; }
.cms-promo__lines { margin: 0; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; font-size: .9rem; line-height: 1.5; }
.cms-promo__btn { margin-top: 8px; min-height: 52px; border-radius: 999px; background: #1a1210; color: #fff; border: 2px solid #1a1210; font-weight: 800; padding-inline: 26px; text-decoration: none; }
.cms-promo__btn:hover { background: #fff; color: #1a1210; }
.cms-tone-dark .cms-promo__btn { background: var(--fd-accent); border-color: var(--fd-accent); }
.cms-promo__media { position: relative; min-height: 220px; }
.cms-promo__media .cms-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: center bottom; padding: 8px 16px 16px; }
.cms-promo__media .cms-img-empty { position: absolute; inset: 8px; min-height: 0; }
.cms-promo__badge { position: absolute; z-index: 2; top: 14px; right: 14px; display: grid; place-content: center; width: 112px; height: 112px; text-align: center; background: #1a1210; color: #fff; clip-path: polygon(50% 0%, 61% 11%, 75% 5%, 79% 20%, 95% 25%, 89% 40%, 100% 50%, 89% 60%, 95% 75%, 79% 80%, 75% 95%, 61% 89%, 50% 100%, 39% 89%, 25% 95%, 21% 80%, 5% 75%, 11% 60%, 0% 50%, 11% 40%, 5% 25%, 21% 20%, 25% 5%, 39% 11%); transform: rotate(8deg); }
.cms-promo__badge b { font-family: var(--font-heading, inherit); font-size: 1.5rem; line-height: 1; letter-spacing: -.02em; }
.cms-promo__badge small { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.cms-tone-dark .cms-promo__badge { background: var(--fd-yellow); color: #1a1210; }
@media (min-width: 900px) {
  .cms-promo { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); min-height: 380px; }
  .cms-promo__body { justify-content: center; padding: 44px 8px 44px 56px; }
  .cms-promo__media { min-height: 0; }
  .cms-promo__badge { top: 36px; right: auto; left: 46%; width: 150px; height: 150px; }
  .cms-promo__badge b { font-size: 2rem; }
}

/* ---------- Mosaiikki ---------- */
.cms-mosaic { display: grid; gap: 10px; }
.cms-tile { position: relative; display: grid; grid-template-rows: auto 1fr; min-height: 260px; overflow: hidden; border-radius: var(--fd-radius); border: var(--fd-border); box-shadow: var(--fd-shadow); text-decoration: none; color: inherit; }
.cms-tile__text { position: relative; z-index: 1; padding: 20px 20px 0; font-family: var(--font-heading, inherit); font-weight: 800; font-size: clamp(1.6rem, 1.1rem + 2.2vw, 2.4rem); line-height: 1.05; text-transform: inherit; max-width: 12ch; }
.cms-tile__media { position: relative; min-height: 160px; }
.cms-tile__media .cms-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.cms-tile__media .cms-img-empty { position: absolute; inset: 0; min-height: 0; }
.cms-mosaic--3 > .cms-tile:nth-child(2) .cms-tile__text, .cms-mosaic--3 > .cms-tile:nth-child(3) .cms-tile__text { align-self: end; grid-row: 2; padding: 0 20px 20px; }
.cms-mosaic--3 > .cms-tile:nth-child(2), .cms-mosaic--3 > .cms-tile:nth-child(3) { grid-template-rows: 1fr; }
.cms-mosaic--3 > .cms-tile:nth-child(2) .cms-tile__media, .cms-mosaic--3 > .cms-tile:nth-child(3) .cms-tile__media { position: absolute; inset: 0; z-index: 0; }
.cms-mosaic--3 > .cms-tile:nth-child(2)::after, .cms-mosaic--3 > .cms-tile:nth-child(3)::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 35%, rgba(0, 0, 0, .65)); z-index: 0; }
.cms-mosaic--3 > .cms-tile:nth-child(2) .cms-tile__text, .cms-mosaic--3 > .cms-tile:nth-child(3) .cms-tile__text { color: #fff; z-index: 1; }
a.cms-tile:hover .cms-img { transform: scale(1.04); }
.cms-tile .cms-img { transition: transform .4s ease; }
@media (min-width: 640px) {
  .cms-mosaic { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .cms-mosaic > .cms-tile:first-child { grid-column: 1 / -1; grid-template-rows: none; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); min-height: 300px; }
  .cms-mosaic > .cms-tile:first-child .cms-tile__text { align-self: center; padding: 28px; font-size: clamp(2rem, 1.2rem + 2.6vw, 3.4rem); }
  .cms-mosaic > .cms-tile:first-child .cms-tile__media { min-height: 0; }
  .cms-mosaic--3 > .cms-tile:nth-child(2), .cms-mosaic--3 > .cms-tile:nth-child(3) { min-height: 280px; }
}

/* ---------- Ruokalista (menu_board) ---------- */
.cms-menu-sec { --menu-top: var(--sticky-top, 0px); --m-accent: var(--accent, #bf2f24); --m-text: var(--text, #1a1210); --m-muted: var(--muted, #6b5d58); --m-line: var(--menu-line, rgba(0, 0, 0, .1)); --m-bg: var(--menu-bg, var(--bg, #fff)); }
.cms-menu-bar { position: sticky; top: var(--menu-top); z-index: 30; display: flex; flex-direction: column; gap: 10px; margin-inline: calc(var(--gutter, 16px) * -1); padding: 10px var(--gutter, 16px); background: var(--m-bg); }
.cms-menu-nav { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }
.cms-menu-nav::-webkit-scrollbar { display: none; }
.cms-menu-nav a { flex: none; scroll-snap-align: center; padding: 11px 18px; border-radius: 999px; background: var(--menu-chip, rgba(0, 0, 0, .06)); color: var(--m-text); font-weight: 700; font-size: .95rem; text-decoration: none; white-space: nowrap; -webkit-tap-highlight-color: transparent; }
.cms-menu-nav a.is-active { background: var(--m-accent); color: var(--accent-ink, #fff); }
.cms-menu-search input { width: 100%; min-height: 48px; padding: 0 18px; border: 0; border-radius: 999px; background: var(--menu-chip, rgba(0, 0, 0, .06)); color: var(--m-text); font: inherit; font-size: 1rem; }
.cms-menu-search input:focus-visible { outline: 3px solid var(--m-accent); outline-offset: 2px; }
.cms-menu { margin-top: 8px; }
.cms-menu-cat { padding-top: 28px; scroll-margin-top: calc(var(--menu-top) + 120px); }
.cms-menu-cat[hidden], .cms-menu-item[hidden] { display: none; }
.cms-menu-cat__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 8px; }
.cms-menu-cat__no { display: block; font-weight: 800; font-size: .85rem; letter-spacing: .1em; color: var(--m-accent); }
.cms-menu-cat__title { font-family: var(--font-heading, inherit); font-size: clamp(2.2rem, 1.4rem + 4vw, 3.8rem); line-height: .98; letter-spacing: -.03em; color: inherit; }
.cms-menu-cat__count { display: block; margin-top: 6px; font-size: .85rem; color: var(--m-muted); }
.cms-menu-cat__note { margin: 8px 0 0; max-width: 46ch; color: var(--m-muted); font-size: .95rem; }
.cms-menu-cat__media { flex: none; width: min(40vw, 240px); }
.cms-menu-cat__media .cms-img { display: block; width: 100%; height: auto; mix-blend-mode: multiply; }
.cms-menu-items { list-style: none; margin: 0; padding: 0; display: grid; }
.cms-menu-item__row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 4px 14px; padding: 16px 0; color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }
.cms-menu-item + .cms-menu-item .cms-menu-item__row { border-top: 1px solid var(--m-line); }
a.cms-menu-item__row:active { background: var(--menu-chip, rgba(0, 0, 0, .05)); }
.cms-menu-item__media { grid-row: 1 / span 2; width: 64px; height: 64px; border-radius: 50%; overflow: hidden; background: var(--menu-chip, rgba(0, 0, 0, .05)); }
.cms-menu-item__media .cms-img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cms-menu-item__text { grid-column: 2; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; min-width: 0; }
.cms-menu-item__media + .cms-menu-item__text { grid-column: 2; }
.cms-menu-item__row > .cms-menu-item__text:first-child { grid-column: 1 / span 2; }
.cms-menu-item__name { font-weight: 700; font-size: 1.08rem; line-height: 1.25; }
.cms-menu-item__badge { align-self: center; font-size: .68rem; padding: 2px 9px; background: var(--m-accent); color: var(--accent-ink, #fff); }
.cms-menu-item__desc { flex-basis: 100%; font-size: .88rem; line-height: 1.4; color: var(--m-muted); }
.cms-menu-item__price { font-family: var(--font-heading, inherit); font-weight: 800; font-size: 1.15rem; white-space: nowrap; color: var(--m-text); }
.cms-menu-item__go { display: none; font-weight: 700; font-size: .85rem; color: var(--m-accent); white-space: nowrap; }
a.cms-menu-item__row:hover .cms-menu-item__go { text-decoration: underline; }
.cms-menu-empty { padding: 32px 0; text-align: center; color: var(--m-muted); }
@media (min-width: 900px) {
  .cms-menu-bar { flex-direction: row; align-items: center; justify-content: space-between; margin-inline: 0; padding-inline: 0; }
  .cms-menu-search { width: 280px; flex: none; }
  .cms-menu-cat { padding-top: 56px; }
  .cms-menu-items { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 56px; }
  .cms-menu-item:nth-child(2) .cms-menu-item__row { border-top: 0; }
  .cms-menu-item__row { grid-template-columns: auto minmax(0, 1fr) auto auto; padding: 18px 0; }
  .cms-menu-item__go { display: inline; }
  .cms-menu-item__media { width: 72px; height: 72px; }
}

/* Ruokalista: kuvakorttiasettelu */
.cms-menu-items--cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; column-gap: 12px; }
.cms-menu-card { display: flex; flex-direction: column; overflow: hidden; border-radius: var(--fd-radius, 22px); background: var(--card-surface, #fff); color: var(--m-text); border: var(--card-border, 0); box-shadow: var(--card-shadow, none); }
.cms-menu-card__media { position: relative; aspect-ratio: 16 / 10; background: var(--menu-chip, #ececee); }
.cms-menu-card__media .cms-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cms-menu-card__media .cms-img-empty { position: absolute; inset: 0; min-height: 0; }
.cms-menu-card__body { display: flex; flex: 1; flex-direction: column; align-items: flex-start; gap: 6px; padding: 14px 14px 16px; }
.cms-menu-card__badge { background: var(--m-accent); color: var(--accent-ink, #fff); font-size: .68rem; padding: 3px 10px; }
.cms-menu-card__name { font-family: var(--font-heading, inherit); font-weight: 800; font-size: 1.12rem; line-height: 1.08; letter-spacing: -.02em; color: inherit; text-transform: none; }
.cms-menu-card__desc { margin: 0; font-size: .82rem; line-height: 1.35; color: var(--m-muted); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.cms-menu-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; margin-top: auto; padding-top: 10px; }
.cms-menu-card__price { font-family: var(--font-heading, inherit); font-weight: 800; font-size: 1.05rem; white-space: nowrap; }
.cms-menu-card__btn { min-height: 38px; padding: 0 16px; border-radius: 999px; background: var(--m-accent); color: var(--accent-ink, #fff); border: 0; font-weight: 800; font-size: .85rem; text-decoration: none; }
.cms-menu-card__btn:hover { filter: brightness(.9); color: var(--accent-ink, #fff); }
@media (min-width: 700px) { .cms-menu-items--cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; column-gap: 16px; } .cms-menu-card__name { font-size: 1.35rem; } .cms-menu-card__body { padding: 18px 18px 20px; gap: 8px; } .cms-menu-card__desc { font-size: .9rem; } .cms-menu-card__price { font-size: 1.2rem; } .cms-menu-card__btn { min-height: 44px; padding: 0 22px; font-size: .95rem; } }
@media (min-width: 1100px) { .cms-menu-items--cards { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* CMS-lohkojen yhteiset tyylit (forms). Toimii kaikissa teemoissa: käytä CSS-muuttujia varmistusarvoilla,
   esim. color: var(--color-primary, var(--accent, #F54927)). Julkaistaan tiedostona /assets/cms-blocks.css.
   Täydentää teemojen .form-luokkia (form-field, form-label, form-input, form-check, form-error, form-status). */

.cms-form-wrap { max-width: 44rem; }
.cms-form-block .section-head--center + .cms-form-wrap { margin-inline: auto; }

/* Kenttäruudukko: puolileveät kentät vierekkäin leveämmällä ruudulla */
.cms-form-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-5, 1.25rem); }
.cms-form-grid:empty { display: none; }
@media (min-width: 640px) {
  .cms-form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cms-form-field--full, .cms-form-group, .cms-form-consent { grid-column: 1 / -1; }
}
.cms-form-field { min-width: 0; }
.cms-form-field:not(.form-field) { display: grid; gap: .5rem; }

/* Varmistukset, jos teema ei määrittele .form-luokkia */
.cms-form { display: grid; gap: var(--space-5, 1.25rem); }
.cms-form .form-field { display: grid; gap: var(--space-2, .5rem); border: 0; padding: 0; margin: 0; min-width: 0; }
.cms-form .form-label { font-size: var(--fs-sm, .9rem); font-weight: 600; padding: 0; }
.cms-form .form-input, .cms-form .form-select, .cms-form .form-textarea { width: 100%; font: inherit; }
.cms-form .form-hint { font-size: var(--fs-xs, .8rem); color: var(--color-text-muted, #5f5f5f); margin: 0; }

/* Virhetila: teemasta riippumaton */
.cms-form .form-error, .cms-form .cms-form-error { display: none; margin: 0; font-size: var(--fs-xs, .8rem); font-weight: 600; color: var(--color-error, #b3261e); }
.cms-form .form-field.is-invalid .form-error, .cms-form .form-field.is-invalid .cms-form-error { display: block; }
.cms-form .form-field.is-invalid .form-input,
.cms-form .form-field.is-invalid .form-select,
.cms-form .form-field.is-invalid .form-textarea { border-color: var(--color-error, #b3261e); box-shadow: 0 0 0 1px var(--color-error, #b3261e); }
.cms-form .form-field.is-invalid .form-check input { outline: 2px solid var(--color-error, #b3261e); outline-offset: 1px; }

/* Radio- ja checkbox-ryhmät */
.cms-form-group { border: 0; padding: 0; margin: 0; }
.cms-form-group > legend { padding: 0; margin-bottom: .5rem; }
.cms-form-options { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; }
.cms-form-options .form-check { align-items: center; }
.cms-form .form-check { display: flex; gap: .75rem; align-items: flex-start; cursor: pointer; font-size: var(--fs-sm, .9rem); }
.cms-form .form-check input[type="radio"] { width: 20px; height: 20px; flex: none; margin: 1px 0 0; accent-color: var(--color-primary, var(--accent, #F54927)); }
.cms-form .form-check input[type="checkbox"] { width: 20px; height: 20px; flex: none; margin: 1px 0 0; accent-color: var(--color-primary, var(--accent, #F54927)); }
.cms-form .form-check input[type="radio"]:focus-visible, .cms-form .form-check input[type="checkbox"]:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.cms-form-consent .form-check a { text-decoration: underline; }

/* Honeypot: pois näkyvistä, mutta ei display:none (osa roboteista ohittaa piilotetut kentät) */
.cms-form-hp { position: absolute !important; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* Uutiskirjeen rivimuoto */
.cms-form--inline { gap: var(--space-4, 1rem); }
.cms-form-inline-row { display: grid; gap: var(--space-3, .75rem); }
.cms-form-inline-row .form-field { margin: 0; grid-column: auto; }
@media (min-width: 560px) { .cms-form-inline-row { grid-template-columns: minmax(0, 1fr) auto; align-items: start; } .cms-form-inline-row .form-field { grid-column: auto; } }
.cms-form--inline .cms-form-grid { grid-template-columns: 1fr; }

/* Tilat: lähetys, onnistuminen, virhe */
.cms-form-submit[disabled], .cms-form [type="submit"][disabled] { opacity: .65; cursor: progress; }
.cms-form.is-sending { pointer-events: none; }
.cms-form-alert[hidden], .cms-form-success[hidden] { display: none; }
.cms-form-alert { margin: 0; }
.cms-form-success { padding: var(--space-5, 1.25rem); border: 1px solid var(--color-success, #1b7a4a); border-radius: var(--radius, .5rem); background: #EEF8F2; color: var(--color-success, #14603a); font-weight: 600; }
.cms-form-success:focus { outline: 2px solid currentColor; outline-offset: 2px; }
.cms-form-alert { padding: var(--space-4, 1rem); border: 1px solid var(--color-error, #b3261e); border-radius: var(--radius, .5rem); background: #FDF0EE; color: var(--color-error, #b3261e); font-size: var(--fs-sm, .9rem); font-weight: 600; }

/* Ilman JS:ää lähetyksen jälkeinen paluu (#lohkotunnus) näyttää kiitosviestin :target-säännöllä */
.cms-form-block:target:not(.cms-form--js) .cms-form-success[hidden] { display: block; }
/* JS-tila: onnistumisen jälkeen lomake piiloon */
.cms-form-block.is-done .cms-form { display: none; }

@media (prefers-reduced-motion: no-preference) {
  .cms-form-success { animation: cms-form-in .25s ease-out; }
  @keyframes cms-form-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
}

/* CMS-lohkojen yhteiset tyylit (interactive): itsenäiset lomakkeet, vaiheet, laskurit, kyselyt ja äänestykset.
   Toimii kaikissa teemoissa: CSS-muuttujat varmistusarvoin. Julkaistaan tiedostona /assets/cms-blocks.css. */

/* Viittaus ei löydy / arkistoitu: vain editorissa ja esikatselussa ([data-bid]) */
.cms-formref-empty { display: none; }
[data-bid] .cms-formref-empty { display: block; padding: var(--space-5, 1.25rem); border: 1px dashed var(--color-border, #c9ced6); border-radius: var(--radius, .5rem); color: var(--color-text-muted, #5f5f5f); font-size: var(--fs-sm, .9rem); text-align: center; }

/* Vaiheet ja tietotekstit */
.cms-step { border: 0; padding: 0; margin: 0 0 var(--space-5, 1.25rem); min-width: 0; }
.cms-step[hidden] { display: none; }
.cms-step__title { font-weight: 700; font-size: var(--fs-lg, 1.15rem); padding: 0; margin-bottom: var(--space-4, 1rem); }
.cms-optional { font-weight: 400; color: var(--color-text-muted, #5f5f5f); font-size: .85em; }
.cms-step:focus { outline: none; }
.cms-step:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
.cms-step-nav { display: flex; flex-wrap: wrap; gap: var(--space-3, .75rem); align-items: center; }
.cms-step-nav [hidden] { display: none; }
.cms-form-info__title { margin: 0 0 .25rem; font-size: var(--fs-lg, 1.1rem); }
.cms-form-info__text { margin: 0; color: var(--color-text-muted, #5f5f5f); }
.cms-form-field[hidden] { display: none; }

/* Edistymispalkki */
.cms-progress { margin-bottom: var(--space-5, 1.25rem); }
.cms-progress__text { margin: 0 0 .4rem; font-size: var(--fs-sm, .9rem); font-weight: 600; color: var(--color-text-muted, #5f5f5f); }
.cms-progress__track { height: 8px; border-radius: 999px; background: var(--color-border, #e3e6eb); overflow: hidden; }
.cms-progress__bar { height: 100%; width: 0; border-radius: 999px; background: var(--color-primary, var(--accent, #F54927)); }
@media (prefers-reduced-motion: no-preference) { .cms-progress__bar { transition: width .25s ease; } }

/* Kysely: asteikot ja tulos */
.cms-quiz-options { flex-direction: column; gap: .6rem; }
.cms-quiz-options .form-check { padding: .75rem 1rem; border: 1px solid var(--color-border, #c9ced6); border-radius: var(--radius, .5rem); }
.cms-quiz-options .form-check:has(input:checked) { border-color: var(--color-primary, var(--accent, #F54927)); box-shadow: 0 0 0 1px var(--color-primary, var(--accent, #F54927)); }
.cms-quiz-options .form-check:has(input:focus-visible) { outline: 2px solid currentColor; outline-offset: 2px; }
.cms-scale { display: flex; flex-wrap: wrap; gap: .5rem; }
.cms-scale__item { position: relative; cursor: pointer; }
.cms-scale__item input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.cms-scale__item span { display: inline-flex; align-items: center; justify-content: center; min-width: 2.75rem; height: 2.75rem; border: 1px solid var(--color-border, #c9ced6); border-radius: var(--radius, .5rem); font-weight: 600; background: var(--color-bg, #fff); }
.cms-scale__item input:checked + span { background: var(--color-primary, var(--accent, #F54927)); border-color: transparent; color: var(--color-on-primary, #fff); }
.cms-scale__item input:focus-visible + span { outline: 2px solid currentColor; outline-offset: 2px; }
.cms-scale__labels { display: flex; justify-content: space-between; margin-top: .4rem; font-size: var(--fs-xs, .8rem); color: var(--color-text-muted, #5f5f5f); }
.cms-quiz-intro, .cms-calc-intro { margin: 0 0 var(--space-5, 1.25rem); }
.cms-quiz-result { padding: var(--space-6, 1.75rem); border: 1px solid var(--color-border, #c9ced6); border-radius: var(--radius, .5rem); background: var(--color-surface, #f6f7f9); }
.cms-quiz-result[hidden], .cms-poll-results[hidden] { display: none; }
.cms-quiz-result:focus, .cms-poll-results:focus { outline: 2px solid currentColor; outline-offset: 2px; }
.cms-quiz-result__kicker { margin: 0; font-size: var(--fs-sm, .9rem); color: var(--color-text-muted, #5f5f5f); }
.cms-quiz-result__title { margin: .25rem 0 .5rem; font-size: var(--fs-2xl, 1.6rem); }
.cms-quiz-result__text { margin: 0 0 .75rem; }
.cms-quiz-result__score { margin: 0; font-weight: 600; }

/* Äänestys */
.cms-poll-options { flex-direction: column; gap: .6rem; }
.cms-poll-results__title { margin: 0 0 var(--space-4, 1rem); }
.cms-poll-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4, 1rem); }
.cms-poll-row { display: flex; justify-content: space-between; gap: 1rem; margin-bottom: .3rem; font-weight: 600; }
.cms-poll-bar { height: 12px; border-radius: 999px; background: var(--color-border, #e3e6eb); overflow: hidden; }
.cms-poll-fill { height: 100%; border-radius: 999px; background: var(--color-primary, var(--accent, #F54927)); }
.cms-poll-total { margin: var(--space-4, 1rem) 0 0; font-size: var(--fs-sm, .9rem); color: var(--color-text-muted, #5f5f5f); }
.cms-form-block.is-done.cms-sform--poll .cms-form { display: none; }

/* Laskuri */
.cms-calc__grid { display: grid; gap: var(--space-6, 1.75rem); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 760px) { .cms-calc__grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); } }
.cms-calc__inputs { display: grid; gap: var(--space-5, 1.25rem); }
.cms-calc__num { display: flex; align-items: center; gap: .5rem; }
.cms-calc__num .form-input { flex: 1; min-width: 0; }
.cms-calc__unit { color: var(--color-text-muted, #5f5f5f); font-size: var(--fs-sm, .9rem); white-space: nowrap; margin-left: .25rem; }
.cms-calc__num .cms-calc__unit { margin-left: 0; }
.cms-calc__slider { display: flex; align-items: center; gap: 1rem; }
.cms-calc__slider input[type="range"] { flex: 1; min-width: 0; accent-color: var(--color-primary, var(--accent, #F54927)); height: 2rem; }
.cms-calc__sliderval { min-width: 4.5rem; text-align: right; font-weight: 700; }
.cms-calc__panel { padding: var(--space-6, 1.5rem); border: 1px solid var(--color-border, #c9ced6); border-radius: var(--radius, .5rem); background: var(--color-surface, #f6f7f9); }
.cms-calc__title { margin: 0 0 var(--space-4, 1rem); font-size: var(--fs-lg, 1.1rem); }
.cms-calc__results { margin: 0; display: grid; gap: var(--space-4, 1rem); }
.cms-calc__out dt { font-size: var(--fs-sm, .9rem); color: var(--color-text-muted, #5f5f5f); }
.cms-calc__out dd { margin: 0; }
.cms-calc__val { display: block; font-size: var(--fs-xl, 1.5rem); font-weight: 700; line-height: 1.2; }
.cms-calc__out.is-primary .cms-calc__val { font-size: var(--fs-3xl, 2.1rem); color: var(--color-primary, var(--accent, #F54927)); }
.cms-calc__note { display: block; font-size: var(--fs-xs, .8rem); color: var(--color-text-muted, #5f5f5f); margin-top: .15rem; }
.cms-calc__disclaimer { margin: var(--space-4, 1rem) 0 0; font-size: var(--fs-xs, .8rem); color: var(--color-text-muted, #5f5f5f); }
.cms-calc-nojs { margin: 0 0 var(--space-4, 1rem); padding: var(--space-4, 1rem); border: 1px solid var(--color-border, #c9ced6); border-radius: var(--radius, .5rem); }
.cms-calc-quote-bar { margin-top: var(--space-5, 1.25rem); }
.cms-calc-quote { margin-top: var(--space-5, 1.25rem); padding-top: var(--space-5, 1.25rem); border-top: 1px solid var(--color-border, #e3e6eb); display: grid; gap: var(--space-4, 1rem); }
.cms-calc-quote[hidden] { display: none; }
.cms-calc-quote__intro { margin: 0; color: var(--color-text-muted, #5f5f5f); }
/* Tarjouspyynnön jälkeen laskuri jää näkyviin, vain lähetysosa piiloon */
.cms-form-block.is-done.cms-calc .cms-form, .cms-form-block.is-done.cms-calc .cms-calc-form { display: block; }
.cms-form-block.is-done.cms-calc .cms-calc-quote, .cms-form-block.is-done.cms-calc .cms-calc-quote-bar { display: none; }
.cms-form-block.cms-calc .cms-form-success { margin-top: var(--space-5, 1.25rem); }
.cms-sform--calculator .cms-form-wrap { max-width: 64rem; }

/* CMS-lohkojen yhteiset tyylit (media). Toimii kaikissa teemoissa: käytä CSS-muuttujia varmistusarvoilla,
   esim. color: var(--color-primary, var(--accent, #F54927)). Julkaistaan tiedostona /assets/cms-blocks.css. */

/* ---- kuva-elementti ---- */
.cms-img { display: block; width: 100%; height: auto; max-width: 100%; object-fit: cover; background: var(--color-surface, var(--surface, #f3f4f6)); }
.cms-radius-sm { border-radius: 6px; }
.cms-radius-lg { border-radius: 16px; }
.cms-img-empty.cms-radius-sm { border-radius: 6px; }
.cms-img-empty.cms-radius-lg { border-radius: 16px; }

/* Tyhjän kuvan paikkamerkki näkyy vain editorissa (lohkon juurella on data-bid); julkaistulla sivulla se on piilossa. */
.cms-img-empty { display: none; }
[data-bid] .cms-img-empty {
  display: flex; align-items: center; justify-content: center; width: 100%; aspect-ratio: 16 / 10; min-height: 120px; box-sizing: border-box;
  border: 2px dashed var(--color-line-strong, var(--line, #c9ced6)); background: var(--color-surface, var(--surface, #f6f7f9));
  color: var(--color-text-muted, var(--muted, #5d6470)); font: 600 15px/1.2 var(--font-body, var(--font, system-ui, sans-serif)); cursor: pointer; text-align: center;
}
[data-bid] .cms-img-empty:hover { border-color: var(--color-primary, var(--accent, #F54927)); color: var(--color-primary, var(--accent, #F54927)); }
[data-bid] .cms-img-empty span::before { content: "🖼 "; }
[data-bid] .cms-img[data-img] { cursor: pointer; }

/* ---- kuva ---- */
.cms-figure { margin: 0 auto; }
.cms-image--content .cms-figure { max-width: 760px; }
.cms-image--wide .cms-figure { max-width: 1100px; }
.cms-image--full .section__inner { padding-inline: 0; }
.cms-image--full .cms-figure { max-width: none; }
.cms-image--full .cms-img { border-radius: 0; }
.cms-figure__caption { margin-top: 10px; font-size: .9rem; color: var(--color-text-muted, var(--muted, #5d6470)); text-align: center; }
.cms-image--full .cms-figure__caption { padding-inline: 16px; }

/* ---- kuva ja teksti ---- */
.cms-split { display: grid; gap: 28px; align-items: center; }
.cms-split__media .cms-img, .cms-split__media .cms-img-empty { aspect-ratio: 4 / 3; }
.cms-split__body > * + * { margin-top: 14px; }
.cms-split__body h2 { margin: 0; }
.cms-split__body p { margin-bottom: 0; }
@media (min-width: 900px) {
  .cms-split { grid-template-columns: 1fr 1fr; gap: 56px; }
  .cms-split--right .cms-split__media { order: 2; }
}

/* ---- galleria ---- */
.cms-gallery { display: grid; gap: 16px; grid-template-columns: 1fr; margin-top: 8px; }
@media (min-width: 560px) { .cms-gallery { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .cms-gallery--3 { grid-template-columns: repeat(3, 1fr); } .cms-gallery--4 { grid-template-columns: repeat(4, 1fr); } }
.cms-gallery__item { margin: 0; }
.cms-gallery__item .cms-img, .cms-gallery__item .cms-img-empty { aspect-ratio: 4 / 3; }
.cms-gallery__item figcaption { margin-top: 8px; font-size: .875rem; color: var(--color-text-muted, var(--muted, #5d6470)); }
.cms-gallery__link { display: block; overflow: hidden; border-radius: inherit; }
.cms-gallery__link .cms-img { transition: transform .35s ease, filter .2s; }
.cms-gallery__link:hover .cms-img { transform: scale(1.03); }
.cms-gallery__link:focus-visible { outline: 3px solid var(--color-primary, var(--accent, #F54927)); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .cms-gallery__link .cms-img { transition: none; } .cms-gallery__link:hover .cms-img { transform: none; } }

/* ---- lightbox (media.js) ---- */
.cms-lb { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 12px; padding: 24px; background: rgba(8, 10, 14, .92); }
.cms-lb[hidden] { display: none; }
.cms-lb__img { max-width: min(96vw, 1600px); max-height: 80vh; width: auto; height: auto; object-fit: contain; border-radius: 4px; background: #111; }
.cms-lb__cap { max-width: 720px; color: #e8eaee; font-size: .95rem; text-align: center; min-height: 1.4em; }
.cms-lb__btn { position: absolute; display: grid; place-items: center; width: 48px; height: 48px; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .14); color: #fff; font-size: 26px; line-height: 1; cursor: pointer; }
.cms-lb__btn:hover { background: rgba(255, 255, 255, .28); }
.cms-lb__btn:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.cms-lb__close { top: 16px; right: 16px; }
.cms-lb__prev { left: 16px; top: 50%; transform: translateY(-50%); }
.cms-lb__next { right: 16px; top: 50%; transform: translateY(-50%); }
.cms-lb__count { position: absolute; top: 24px; left: 24px; color: #c8ccd4; font-size: .85rem; }
body.cms-lb-open { overflow: hidden; }

/* ---- hero kuvalla ---- */
.cms-hero-img { position: relative; overflow: hidden; }
.cms-hero-img--bg { background: #101216; color: #fff; }
.cms-hero-img__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.cms-hero-img--bg .cms-img-empty { position: absolute; inset: 0; z-index: 0; aspect-ratio: auto; border-radius: 0; opacity: .6; }
.cms-hero-img__shade { position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(8, 10, 14, .85), rgba(8, 10, 14, .35)); }
.cms-ov-40 .cms-hero-img__shade { opacity: .6; }
.cms-ov-80 .cms-hero-img__shade { opacity: 1; background: rgba(8, 10, 14, .82); }
.cms-hero-img--bg .cms-hero-img__inner { position: relative; z-index: 2; padding-block: clamp(56px, 10vw, 120px); max-width: 780px; }
.cms-hero-img--bg h1, .cms-hero-img--bg .lead, .cms-hero-img--bg .eyebrow, .cms-hero-img--bg .breadcrumb, .cms-hero-img--bg .breadcrumb a { color: #fff; }
.cms-hero-img--bg .lead { opacity: .92; }
.cms-hero-img--bg .accent { color: var(--color-primary, var(--accent, #F54927)); }
.cms-hero-img--right .cms-hero-img__inner { display: grid; gap: 32px; align-items: center; }
.cms-hero-img--right .cms-hero-img__media .cms-img, .cms-hero-img--right .cms-hero-img__media .cms-img-empty { aspect-ratio: 4 / 3; }
@media (min-width: 900px) { .cms-hero-img--right .cms-hero-img__inner { grid-template-columns: 1.05fr .95fr; gap: 56px; } }

/* ---- kuvakortit ---- */
.cms-cards { display: grid; gap: 20px; grid-template-columns: 1fr; margin-top: 8px; }
@media (min-width: 640px) { .cms-cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .cms-cards--3 { grid-template-columns: repeat(3, 1fr); } .cms-cards--4 { grid-template-columns: repeat(4, 1fr); } }
.cms-card { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--color-line, var(--line, #e4e6ea)); border-radius: 10px; background: var(--color-bg, #fff); }
.cms-card__media .cms-img, .cms-card__media .cms-img-empty { aspect-ratio: 3 / 2; border-radius: 0; }
.cms-card__body { display: flex; flex-direction: column; gap: 8px; padding: 18px 18px 20px; flex: 1; }
.cms-card__body h3 { margin: 0; font-size: 1.1rem; }
.cms-card__body p { margin: 0; color: var(--color-text-muted, var(--muted, #5d6470)); font-size: .95rem; }
.cms-card__body .link-arrow { margin-top: auto; padding-top: 6px; }

/* ---- logot ---- */
.cms-logos { display: grid; gap: 20px 28px; margin: 8px 0 0; padding: 0; list-style: none; grid-template-columns: repeat(2, 1fr); align-items: center; }
@media (min-width: 640px) { .cms-logos { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 960px) { .cms-logos--3 { grid-template-columns: repeat(3, 1fr); } .cms-logos--4 { grid-template-columns: repeat(4, 1fr); } .cms-logos--5 { grid-template-columns: repeat(5, 1fr); } .cms-logos--6 { grid-template-columns: repeat(6, 1fr); } }
.cms-logos__item { display: flex; align-items: center; justify-content: center; min-height: 64px; }
.cms-logos__item a { display: block; }
.cms-logos__item .cms-img { width: auto; max-width: 100%; max-height: 56px; object-fit: contain; background: transparent; filter: grayscale(1); opacity: .65; transition: filter .2s, opacity .2s; }
.cms-logos__item:hover .cms-img, .cms-logos__item a:focus-visible .cms-img { filter: none; opacity: 1; }
.cms-logos__item .cms-img-empty { aspect-ratio: 3 / 1; min-height: 56px; }
@media (prefers-reduced-motion: reduce) { .cms-logos__item .cms-img { transition: none; } }

/* CMS-valikko (settings.navigation): otsikon valikko (cms-nav-*) ja alatunnisteen valikko (cms-footnav-*).
   Toimii kaikissa teemoissa teeman muuttujilla (--text, --bg, --line, --surface, --accent, --radius … tai flowain --color-*).
   Julkaistaan tiedostona /assets/cms-blocks.css.

   Rakenne "own"-tilassa (sisäänrakennetut teemat): teeman header.html on perusrakenne (logo, .nav-toggle, nav.site-nav).
   CMS-valikolla on oma hampurilainen ja liukupaneeli, ja teeman oma .nav-toggle piilotetaan, jolloin mobiilivalikko on aina yksi.
   "host"-tilassa (teema tuo oman mobiilipaneelin, esim. flowai) lista asuu teeman paneelissa. */

.cms-nav, .cms-footnav {
  --n-fg: var(--text, var(--color-text, #14161a));
  --n-bg: var(--bg, var(--color-bg, #fff));
  --n-surface: var(--surface, var(--color-surface, #f6f7f9));
  --n-line: var(--line, var(--color-line, #e3e6eb));
  --n-muted: var(--muted, var(--color-text-muted, #5b6270));
  --n-accent: var(--accent, var(--color-primary, #2456a6));
  --n-radius: var(--radius, 10px);
  --n-shadow: var(--shadow, 0 14px 36px rgba(20, 22, 26, .16));
  --n-font-body: var(--font-body, inherit);
}

/* ---------- Perusta (työpöytä, "bar"-asettelu) ---------- */
.cms-nav ul { list-style: none; margin: 0; padding: 0; }
.cms-nav__list { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; }
.cms-nav__item { position: relative; display: flex; align-items: center; }
.cms-nav__item--mega { position: static; }
.cms-nav__link { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.cms-nav__link:focus-visible, .cms-nav__expander:focus-visible, .cms-nav__toggle:focus-visible { outline: 2px solid var(--n-accent); outline-offset: 2px; }
.cms-nav__chev { width: 12px; height: 12px; flex: none; opacity: .75; transition: transform .2s ease; }
.cms-nav__item.is-open > .cms-nav__link .cms-nav__chev { transform: rotate(180deg); }
.cms-nav__btn { margin-left: 6px; }
/* Teeman ".site-nav a" -säännöt (väri, hover-tausta) eivät saa pilata painikkeita */
.site-header .cms-nav a.btn.btn-primary, .site-header .cms-nav a.btn.btn-primary:hover, .site-header .cms-nav a.btn.btn-primary:focus-visible { color: var(--accent-ink, #fff); text-decoration: none; }
.site-header .cms-nav a.btn.btn-primary { background: var(--accent, var(--color-primary, #2456a6)); }
.site-header .cms-nav a.btn.btn-primary:hover { background: var(--accent-hover, var(--color-primary-hover, var(--accent, #2456a6))); }
.cms-nav__card a.btn.btn-primary { padding: 9px 16px; }

/* Näppäimistön expander: näkyy vain fokuksessa (työpöydällä), paneelissa aina */
.cms-nav__expander { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); border: 0; background: none; color: var(--n-fg); }
.cms-nav__expander:focus-visible { position: static; width: 28px; height: 28px; margin: 0 0 0 2px; clip-path: none; overflow: visible; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--n-line); border-radius: 6px; background: var(--n-bg); }

.cms-nav__extras { display: flex; align-items: center; gap: 14px; margin-left: 8px; }
.cms-nav__util { display: flex; gap: 14px; }
.cms-nav__util a { font-size: .875rem; color: inherit; opacity: .8; text-decoration: none; }
.cms-nav__util a:hover { opacity: 1; text-decoration: underline; }
.cms-nav__lang { display: flex; gap: 2px; font-size: .8125rem; }
.cms-nav__langlink { display: inline-block; padding: 4px 7px; border-radius: 6px; font-weight: 600; letter-spacing: .04em; text-decoration: none; color: inherit; opacity: .75; }
a.cms-nav__langlink:hover { opacity: 1; box-shadow: inset 0 -2px 0 var(--n-line); border-radius: 0; }
.cms-nav__langlink.is-current { opacity: 1; box-shadow: inset 0 -2px 0 var(--n-accent); border-radius: 0; }
.cms-nav__langlink.is-disabled { opacity: .45; cursor: not-allowed; }
.cms-nav__cta { white-space: nowrap; }
.cms-nav__logo { display: inline-flex; align-items: center; margin-right: auto; font-weight: 700; font-size: 1.1875rem; letter-spacing: -.02em; color: inherit; text-decoration: none; }
.cms-nav__logo-img { display: block; height: 40px; width: auto; max-width: 220px; }
.site-header:has(.cms-nav--has-logo) .site-logo { display: none; }

.cms-nav__toggle { display: none; }
.cms-nav__close, .cms-nav__scrim { display: none; }
.cms-nav__panel { display: contents; }

/* ---------- Teeman kehyksen sovitus ("own"-tila) ---------- */
.site-header:has(.cms-nav[data-mode="own"]) .site-header__inner > .nav-toggle { display: none !important; }
.site-header:has(.cms-nav[data-mode="own"]) .site-nav { display: contents !important; }
.cms-nav[data-mode="own"] { display: contents; }
/* backdrop-filter tekisi headerista position:fixed -lasten viitekehyksen, joten se poistetaan, kun CMS-valikko on käytössä */
.site-header:has(.cms-nav) { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
.site-header:has(.cms-nav[data-sticky="0"]) { position: relative; }
/* Teeman oma CTA (esim. flowai) piiloon, kun CMS-valikossa on oma painike */
.site-header:has(.cms-nav--has-cta) .site-header__cta, .site-header:has(.cms-nav--has-cta) .nav-mobile-cta { display: none !important; }

/* ---------- Alavalikot: pudotusvalikko ---------- */
.cms-nav__sub { display: none; position: absolute; top: 100%; left: 0; z-index: 60; min-width: 280px; max-width: min(92vw, 380px); padding-top: 10px; }
.cms-nav__sub-inner { padding: 8px; background: var(--n-bg); color: var(--n-fg); border: 1px solid var(--n-line); border-radius: var(--n-radius); box-shadow: var(--n-shadow); font-family: var(--n-font-body); }
.cms-nav__item.is-open > .cms-nav__sub { display: block; }
.cms-nav__item--parent.is-open::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 40px; }
.cms-nav__item--mega.is-open::after { display: none; }

.cms-nav__sublist { display: grid; gap: 2px; }
.cms-nav__sublist--l3 { margin: 2px 0 6px 14px; }
.cms-nav__heading, .cms-nav__col-title { display: block; margin: 0; padding: 10px 12px 4px; font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--n-muted); }
.site-header .cms-nav a.cms-nav__sublink, .site-header .cms-nav a.cms-nav__col-title--link {
  display: flex; align-items: center; gap: 12px; padding: 9px 12px; border: 0; border-radius: calc(var(--n-radius) * .6); background: none; box-shadow: none;
  color: var(--n-fg); font: 500 .9375rem/1.3 var(--n-font-body); letter-spacing: normal; text-transform: none; text-decoration: none; text-align: left;
}
.site-header .cms-nav a.cms-nav__sublink::after, .site-header .cms-nav a.cms-nav__col-title--link::after { content: none; }
.site-header .cms-nav a.cms-nav__sublink:hover, .site-header .cms-nav a.cms-nav__sublink:focus-visible,
.site-header .cms-nav a.cms-nav__col-title--link:hover { background: var(--n-surface); color: var(--n-accent); padding-left: 12px; }
.site-header .cms-nav a.cms-nav__sublink.is-current { color: var(--n-accent); font-weight: 600; }
.site-header .cms-nav a.cms-nav__sublink:focus-visible { outline: 2px solid var(--n-accent); outline-offset: -2px; }
.cms-nav__subtext { display: grid; gap: 1px; min-width: 0; }
.cms-nav__desc { display: block; font-size: .8125rem; font-weight: 400; line-height: 1.35; color: var(--n-muted); margin: 0; }
.cms-nav__thumb { width: 44px; height: 44px; flex: none; border-radius: calc(var(--n-radius) * .5); object-fit: cover; background: var(--n-surface); }

/* ---------- Mega-valikko ---------- */
.cms-nav__mega { left: 0; right: 0; max-width: none; min-width: 0; padding: 0; }
.cms-nav__mega-inner {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; box-sizing: border-box; width: 100%; padding: 28px max(20px, var(--side, 32px));
  background: var(--n-bg); color: var(--n-fg); border-top: 1px solid var(--n-line); border-bottom: 1px solid var(--n-line); box-shadow: var(--n-shadow); font-family: var(--n-font-body);
}
.cms-nav__mega-inner:has(.cms-nav__card) { grid-template-columns: minmax(0, 1fr) minmax(240px, 320px); }
.cms-nav__cols { display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); align-content: start; }
.cms-nav__cols[data-cols="1"] { grid-template-columns: minmax(0, 420px); }
.cms-nav__col { min-width: 0; }
.cms-nav__col > .cms-nav__desc { padding: 0 12px 6px; }
.cms-nav__col-title { padding-top: 4px; }
.cms-nav__card { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--n-line); border-radius: var(--n-radius); background: var(--n-surface); }
.cms-nav__card-img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.cms-nav__card-body { display: grid; gap: 8px; padding: 16px; justify-items: start; }
.cms-nav__card-title { margin: 0; font-weight: 700; font-size: 1.0625rem; line-height: 1.25; color: var(--n-fg); }
.cms-nav__card-desc { margin: 0; font-size: .875rem; line-height: 1.45; color: var(--n-muted); }

/* ---------- Keskitetty logo ---------- */
@media (min-width: 821px) {
  .cms-nav--centered .cms-nav__list { order: 1; flex: 1 1 0; justify-content: flex-start; }
  .site-header:has(.cms-nav--centered) .site-header__inner { flex-direction: row; flex-wrap: nowrap; }
  .site-header:has(.cms-nav--centered) .site-logo, .cms-nav--centered .cms-nav__logo { order: 2; margin: 0; }
  .cms-nav--centered .cms-nav__extras { order: 3; flex: 1 1 0; justify-content: flex-end; margin-left: 0; }
}

/* ---------- Pino / liukupaneeli (JS lisää .is-drawer: mobiili tai sivupaneelityyli) ---------- */
/* Ennen JS:n latautumista piilotetaan paneeli, ettei mobiilissa vilku koko valikkopalkki */
@media (max-width: 820px) { .js .cms-nav[data-mode="own"]:not(.is-ready) .cms-nav__panel { display: none; } }
.js .cms-nav--panel:not(.is-ready) .cms-nav__panel { display: none; }
.js .cms-nav--panel .cms-nav__toggle { display: inline-flex; }
.cms-nav--panel .cms-nav__logo { margin-right: auto; }
.site-header:has(.cms-nav--panel) .site-logo { margin-right: auto; }
.cms-nav--panel { --n-order: 9; }
.cms-nav--panel .cms-nav__toggle { order: 9; }

.cms-nav.is-drawer .cms-nav__toggle { display: inline-flex; order: 9; }
.cms-nav.is-drawer .cms-nav__panel {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 90; box-sizing: border-box; width: min(90vw, 420px); display: flex; flex-direction: column; gap: 20px;
  padding: 68px 22px 28px; overflow-y: auto; overscroll-behavior: contain; background: var(--n-bg); color: var(--n-fg); font-family: var(--n-font-body);
  box-shadow: -24px 0 48px rgba(10, 12, 16, .22); transform: translateX(105%); visibility: hidden; transition: transform .28s ease, visibility 0s linear .28s;
}
.cms-nav.is-drawer.is-open .cms-nav__panel { transform: none; visibility: visible; transition-delay: 0s; }
.cms-nav.is-drawer .cms-nav__scrim { display: block; position: fixed; inset: 0; z-index: 89; background: rgba(10, 12, 16, .5); opacity: 0; visibility: hidden; transition: opacity .28s ease, visibility 0s linear .28s; }
.cms-nav.is-drawer.is-open .cms-nav__scrim { opacity: 1; visibility: visible; transition-delay: 0s; }
.cms-nav.is-drawer .cms-nav__close {
  display: inline-flex; align-items: center; justify-content: center; position: absolute; top: 12px; right: 14px; width: 44px; height: 44px; padding: 0; border: 1px solid var(--n-line);
  border-radius: calc(var(--n-radius) * .6); background: var(--n-bg); color: var(--n-fg); font-size: 26px; line-height: 1; cursor: pointer;
}
.cms-nav.is-drawer .cms-nav__close:focus-visible { outline: 2px solid var(--n-accent); outline-offset: 2px; }
body.cms-nav-lock { overflow: hidden; }

.cms-nav.is-drawer .cms-nav__list { flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 0; }
.cms-nav.is-drawer .cms-nav__item { flex-wrap: wrap; border-bottom: 1px solid var(--n-line); }
.cms-nav.is-drawer .cms-nav__item--cta { border-bottom: 0; padding-top: 14px; }
.site-header .cms-nav.is-drawer a.cms-nav__link:not(.btn) {
  display: flex; flex: 1 1 0; align-items: center; justify-content: space-between; gap: 10px; min-height: 48px; padding: 12px 0; border: 0; border-radius: 0; background: none; box-shadow: none;
  color: var(--n-fg); font: 600 1.0625rem/1.3 var(--n-font-body); letter-spacing: normal; text-transform: none; text-decoration: none; text-align: left;
}
.site-header .cms-nav.is-drawer a.cms-nav__link:not(.btn):hover { background: none; color: var(--n-accent); padding-left: 0; }
.site-header .cms-nav.is-drawer a.cms-nav__link:not(.btn)::after { content: none; }
.site-header .cms-nav.is-drawer a.cms-nav__link.is-current:not(.btn) { color: var(--n-accent); }
.cms-nav.is-drawer .cms-nav__btn { flex: 1 1 100%; justify-content: center; margin: 0; }
.cms-nav.is-drawer .cms-nav__link--parent .cms-nav__chev { display: none; }
.cms-nav.is-drawer .cms-nav__expander {
  position: static; width: 48px; height: 48px; margin: 0; overflow: visible; clip-path: none; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; border-radius: 8px;
}
.cms-nav.is-drawer .cms-nav__expander .cms-nav__chev { width: 14px; height: 14px; }
.cms-nav.is-drawer .cms-nav__item.is-open > .cms-nav__expander .cms-nav__chev { transform: rotate(180deg); }
.cms-nav.is-drawer .cms-nav__sub { position: static; flex: 1 1 100%; min-width: 0; max-width: none; padding: 0 0 10px; }
.cms-nav.is-drawer .cms-nav__sub-inner { padding: 0 0 0 4px; border: 0; border-radius: 0; box-shadow: none; background: none; }
.cms-nav.is-drawer .cms-nav__mega-inner { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 0 0 0 4px; border: 0; box-shadow: none; background: none; }
.cms-nav.is-drawer .cms-nav__cols { grid-template-columns: minmax(0, 1fr); gap: 8px; }
.cms-nav.is-drawer .cms-nav__item--parent.is-open::after { display: none; }
.cms-nav.is-drawer .cms-nav__extras { flex-direction: column; align-items: stretch; gap: 16px; margin: 0; padding-top: 4px; }
.cms-nav.is-drawer .cms-nav__util { flex-direction: column; gap: 4px; }
.cms-nav.is-drawer .cms-nav__util a, .site-header .cms-nav.is-drawer .cms-nav__util a { display: block; padding: 8px 0; font-size: 1rem; color: var(--n-muted); opacity: 1; background: none; }
.cms-nav.is-drawer .cms-nav__lang a, .cms-nav.is-drawer .cms-nav__langlink { color: var(--n-fg); }
.cms-nav.is-drawer .cms-nav__lang { justify-content: flex-start; }
.cms-nav.is-drawer .cms-nav__cta { justify-content: center; text-align: center; }
.cms-nav--panel.is-drawer .cms-nav__list .cms-nav__item > a.cms-nav__link:not(.btn) { font-size: 1.25rem; }

/* ---------- "host"-tila (teeman oma paneeli): pinotut alavalikot ---------- */
.cms-nav[data-mode="host"] .cms-nav__panel { display: block; }
.cms-nav[data-mode="host"] .cms-nav__list { list-style: none; }
.cms-nav[data-mode="host"] .cms-nav__extras { margin: 16px 0 0; flex-wrap: wrap; }
.cms-nav[data-mode="host"] .cms-nav__item { flex-wrap: wrap; }
.cms-nav[data-mode="host"] .cms-nav__item--mega { position: static; }
@media (max-width: 899px) {
  .cms-nav[data-mode="host"] .cms-nav__list { display: grid; gap: 0; }
  .cms-nav[data-mode="host"] .cms-nav__link { flex: 1 1 0; }
  .cms-nav[data-mode="host"] .cms-nav__link--parent .cms-nav__chev { display: none; }
  .cms-nav[data-mode="host"] .cms-nav__expander { position: static; width: 48px; height: 48px; margin: 0; overflow: visible; clip-path: none; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
  .cms-nav[data-mode="host"] .cms-nav__sub { position: static; flex: 1 1 100%; min-width: 0; max-width: none; padding: 0 0 10px; }
  .cms-nav[data-mode="host"] .cms-nav__sub-inner, .cms-nav[data-mode="host"] .cms-nav__mega-inner { padding: 0 0 0 4px; border: 0; box-shadow: none; background: none; display: block; }
  .cms-nav[data-mode="host"] .cms-nav__cols { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .cms-nav[data-mode="host"] .cms-nav__card { margin-top: 12px; }
  .cms-nav[data-mode="host"] .cms-nav__item--parent.is-open::after { display: none; }
  .cms-nav[data-mode="host"] .cms-nav__btn { flex: 1 1 100%; justify-content: center; margin: 8px 0 0; }
  .cms-nav[data-mode="host"] .cms-nav__extras { flex-direction: column; align-items: stretch; gap: 12px; margin-top: 20px; }
  .cms-nav[data-mode="host"] .cms-nav__util { flex-direction: column; gap: 2px; }
  .cms-nav[data-mode="host"] .cms-nav__util a { display: block; padding: 8px 0; font-size: 1rem; }
  .cms-nav[data-mode="host"] .cms-nav__cta { justify-content: center; text-align: center; }
}
@media (min-width: 900px) {
  .cms-nav[data-mode="host"] .cms-nav__panel { display: flex; align-items: center; gap: 12px; }
  .cms-nav[data-mode="host"] .cms-nav__extras { margin: 0 0 0 8px; }
}

/* ---------- Sticky, läpinäkyvä header ---------- */
.site-header.cms-header--transparent { position: fixed; top: 0; left: 0; right: 0; }
.site-header.cms-header--transparent:not(.is-solid) { background: transparent !important; border-color: transparent !important; box-shadow: none !important; }
.site-header.cms-header--transparent[data-cms-tone="light"]:not(.is-solid):not(.is-open),
.site-header.cms-header--transparent[data-cms-tone="light"]:not(.is-solid):not(.is-open) .site-logo,
.site-header.cms-header--transparent[data-cms-tone="light"]:not(.is-solid):not(.is-open) .cms-nav__logo,
.site-header.cms-header--transparent[data-cms-tone="light"]:not(.is-solid) .site-nav > .cms-nav > .cms-nav__list > .cms-nav__item > a:not(.btn),
.site-header.cms-header--transparent[data-cms-tone="light"]:not(.is-solid) .cms-nav__util a { color: #fff; }
.site-header.cms-header--transparent[data-cms-tone="light"]:not(.is-solid) .cms-nav__toggle, .site-header.cms-header--transparent[data-cms-tone="light"]:not(.is-solid) .nav-toggle { color: #fff; border-color: rgba(255, 255, 255, .5); background: transparent; }

/* ---------- Alatunnisteen valikko ---------- */
.cms-footnav__list { display: flex; flex-wrap: wrap; gap: 10px 28px; list-style: none; margin: 0; padding: 0; }
.cms-footnav__group { min-width: 150px; }
.cms-footnav__title { display: block; margin-bottom: 8px; font-weight: 700; font-size: .875rem; }
.cms-footnav__group ul { display: grid; gap: 6px; list-style: none; margin: 0; padding: 0; }
.cms-footnav a { text-underline-offset: .18em; }

@media (prefers-reduced-motion: reduce) {
  .cms-nav__panel, .cms-nav__scrim, .cms-nav__chev { transition: none !important; }
}
@media print { .cms-nav__scrim, .cms-nav__toggle, .cms-nav__close { display: none !important; } }

/* CMS-lohkojen yhteiset tyylit (P1): karuselli, toimipisteet, kartta, arvostelut, kuva- ja tekstirivit.
   Toimii kaikissa teemoissa: käyttää teeman muuttujia varmistusarvoilla. Tyylimallit (_variant) ovat tiedostossa variants.css.
   Julkaistaan osana /assets/cms-blocks.css. Luokkaetuliitteet: cms-car, cms-loc, cms-map, cms-rev, cms-fr. */

.cms-car, .cms-loc, .cms-map, .cms-rev, .cms-fr {
  --p1-accent: var(--color-primary, var(--accent, #F54927));
  --p1-text: var(--color-text, var(--text, #14161a));
  --p1-muted: var(--color-text-muted, var(--muted, #5b6270));
  --p1-line: var(--color-line, var(--line, #e3e6eb));
  --p1-surface: var(--color-surface, var(--surface, #f6f7f9));
  --p1-bg: var(--bg, #fff);
  --p1-radius: var(--radius, 10px);
}
.cms-car [hidden], .cms-loc [hidden], .cms-map [hidden], .cms-rev [hidden] { display: none !important; }
.cms-car h3, .cms-loc h3, .cms-rev blockquote, .cms-fr h3 { margin: 0; }

/* Kuvaton media piilotetaan julkaistulla sivulla; editorissa paikkamerkki näkyy. */
.cms-car__media:not(:has(.cms-img)), .cms-loc__media:not(:has(.cms-img)), .cms-fr__media:not(:has(.cms-img)) { display: none; }
[data-bid] .cms-car__media, [data-bid] .cms-loc__media, [data-bid] .cms-fr__media { display: block; }

/* ================= carousel ================= */
.cms-car__wrap { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.cms-car__nav { order: -1; align-self: flex-end; display: flex; gap: 8px; }
.cms-car__btn { display: grid; place-items: center; width: 44px; height: 44px; padding: 0 0 3px; border-radius: 50%; border: 1px solid var(--p1-line); background: var(--p1-bg); color: var(--p1-text); font-family: inherit; font-size: 26px; line-height: 1; cursor: pointer; }
.cms-car__btn:hover:not(:disabled) { border-color: var(--p1-accent); color: var(--p1-accent); }
.cms-car__btn:disabled { opacity: .35; cursor: default; }
.cms-car__btn:focus-visible, .cms-car__track:focus-visible { outline: 3px solid var(--p1-accent); outline-offset: 2px; }
.cms-car__track { display: flex; gap: 16px; margin: 0; padding: 4px 2px 14px; list-style: none; overflow-x: auto; scroll-snap-type: x proximity; scroll-padding-inline: 2px; overscroll-behavior-x: contain; scrollbar-width: thin; }
.cms-car__item { flex: 0 0 min(78%, 300px); min-width: 0; scroll-snap-align: start; }
.cms-car__card { display: flex; flex-direction: column; height: 100%; overflow: hidden; border: 1px solid var(--p1-line); border-radius: var(--p1-radius); background: var(--p1-bg); color: var(--p1-text); }
.cms-car__media .cms-img, .cms-car__media .cms-img-empty { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.cms-car--16-9 .cms-car__media :is(.cms-img, .cms-img-empty) { aspect-ratio: 16 / 9; }
.cms-car--1-1 .cms-car__media :is(.cms-img, .cms-img-empty) { aspect-ratio: 1 / 1; }
.cms-car__body { display: flex; flex: 1; flex-direction: column; gap: 6px; padding: 16px 18px 18px; }
.cms-car__body p { margin: 0; color: var(--p1-muted); font-size: .9375rem; }
.cms-car__body .link-arrow { margin-top: auto; padding-top: 6px; }

/* ================= locations ================= */
.cms-loc__filter { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 20px; }
.cms-loc__chip { padding: 8px 16px; border: 1px solid var(--p1-line); border-radius: 999px; background: var(--p1-bg); color: var(--p1-text); font-family: inherit; font-size: .875rem; font-weight: 600; line-height: 1.2; cursor: pointer; }
.cms-loc__chip:hover { border-color: var(--p1-accent); }
.cms-loc__chip[aria-pressed="true"] { border-color: var(--p1-accent); background: var(--p1-accent); color: var(--accent-ink, #fff); }
.cms-loc__chip:focus-visible, .cms-loc__show:focus-visible { outline: 3px solid var(--p1-accent); outline-offset: 2px; }
.cms-loc__list { display: grid; gap: 20px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.cms-loc__item { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--p1-line); border-radius: var(--p1-radius); background: var(--p1-bg); color: var(--p1-text); }
.cms-loc__item[hidden] { display: none !important; }
.cms-loc__media .cms-img, .cms-loc__media .cms-img-empty { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.cms-loc__body { display: flex; flex: 1; flex-direction: column; gap: 10px; padding: 18px 20px 20px; }
.cms-loc__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; font-size: .8125rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--p1-muted); }
.cms-loc__addr { display: flex; gap: 8px; margin: 0; font-style: normal; }
.cms-loc__addr .icon { flex: none; width: 20px; height: 20px; margin-top: 2px; color: var(--p1-accent); }
.cms-loc__hours { margin: 0; padding: 0; list-style: none; color: var(--p1-muted); font-size: .9375rem; }
.cms-loc__acts { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: auto; padding-top: 6px; }
.cms-loc__tel { display: inline-flex; align-items: center; gap: 6px; color: inherit; font-weight: 600; text-decoration: none; }
.cms-loc__tel .icon { width: 18px; height: 18px; }
.cms-loc__split { display: grid; gap: 20px; grid-template-columns: minmax(0, 1fr); }
.cms-loc__split .cms-loc__list { grid-template-columns: minmax(0, 1fr); }
.cms-loc__aside { min-width: 0; }
.cms-loc__aside .cms-map__embed { --p1-map-h: 320px; }
@media (min-width: 900px) {
  .cms-loc__split { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); align-items: start; }
  .cms-loc__aside { position: sticky; top: 16px; }
  .cms-loc__aside .cms-map__embed { --p1-map-h: 460px; }
  .cms-loc--nomap .cms-loc__split { grid-template-columns: minmax(0, 1fr); }
}

/* ================= map ================= */
.cms-map--s { --p1-map-h: 260px; }
.cms-map--m { --p1-map-h: 380px; }
.cms-map--l { --p1-map-h: 520px; }
.cms-map__wrap { display: grid; gap: 24px; grid-template-columns: minmax(0, 1fr); align-items: center; }
@media (min-width: 900px) { .cms-map__wrap { grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr); gap: 40px; } .cms-map--noframe .cms-map__wrap { grid-template-columns: minmax(0, 1fr); } }
.cms-map__info { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; min-width: 0; }
.cms-map__info h2 { margin: 0; }
.cms-map__addr { display: flex; gap: 8px; margin: 0; font-style: normal; }
.cms-map__addr .icon { flex: none; width: 20px; height: 20px; margin-top: 2px; color: var(--p1-accent); }
.cms-map__acts { display: flex; flex-wrap: wrap; gap: 10px; }
.cms-map__frame { min-width: 0; }
.cms-map__embed { max-width: none; margin: 0; height: var(--p1-map-h, 380px); min-height: 0; background: var(--p1-surface); color: var(--p1-text); }
.cms-map__embed .cms-embed__note { color: var(--p1-muted); }

/* ================= reviews ================= */
.cms-stars { color: #e0a100; letter-spacing: 2px; line-height: 1; white-space: nowrap; }
.cms-stars__off { opacity: .28; }
.cms-rev__sum { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin: 0 0 24px; }
.cms-rev__score { font: 800 clamp(2.5rem, 6vw, 3.5rem)/1 var(--font-heading, inherit); }
.cms-rev__score small { font-size: 1.125rem; font-weight: 600; opacity: .65; }
.cms-rev__sumtxt { display: flex; flex-direction: column; gap: 4px; }
.cms-rev__src { font-size: .875rem; opacity: .75; }
.cms-rev__src a { color: inherit; text-underline-offset: 3px; }
.cms-rev__list { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }
.cms-rev__card { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 20px; border: 1px solid var(--p1-line); border-radius: var(--p1-radius); background: var(--p1-bg); color: var(--p1-text); }
.cms-rev__card blockquote { flex: 1; font-size: 1rem; line-height: 1.55; }
.cms-rev__who { display: flex; align-items: center; gap: 12px; font-size: .875rem; line-height: 1.4; color: var(--p1-muted); }
.cms-rev__who b { color: var(--p1-text); font-weight: 700; }
.cms-rev__av { display: grid; flex: none; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--p1-accent); color: var(--accent-ink, #fff); font-weight: 700; }
.cms-rev__dots { display: flex; justify-content: center; gap: 4px; margin-top: 16px; }
.cms-rev__dot { position: relative; width: 28px; height: 28px; padding: 0; border: 0; background: none; cursor: pointer; }
.cms-rev__dot::before { content: ""; position: absolute; inset: 9px; border-radius: 50%; background: var(--p1-line); }
.cms-rev__dot[aria-current="true"]::before { background: var(--p1-accent); }
.cms-rev__dot:focus-visible { outline: 3px solid var(--p1-accent); outline-offset: 1px; border-radius: 50%; }

/* ================= feature_rows ================= */
.cms-fr__list { display: grid; gap: clamp(40px, 6vw, 88px); counter-reset: cms-fr; }
.cms-fr__row { display: grid; gap: 24px; grid-template-columns: minmax(0, 1fr); align-items: center; counter-increment: cms-fr; }
.cms-fr__media .cms-img, .cms-fr__media .cms-img-empty { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--p1-radius); }
.cms-fr__body { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; min-width: 0; }
.cms-fr__body p { margin: 0; color: var(--p1-muted); }
.cms-fr__media:not(:has(.cms-img)) + .cms-fr__body { grid-column: 1 / -1; max-width: 62ch; }
[data-bid] .cms-fr__media:not(:has(.cms-img)) + .cms-fr__body { grid-column: auto; max-width: none; }
@media (min-width: 800px) {
  .cms-fr__row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); }
  .cms-fr__row--rev .cms-fr__media { order: 2; }
}

@media (prefers-reduced-motion: reduce) {
  .cms-car__track { scroll-behavior: auto; }
}

/* CMS-lohkojen yhteiset tyylit (P2): tapahtumat, lataukset, ennen ja jälkeen, sisällysluettelo, aukioloajat, kirjoittajaesittely.
   Toimii kaikissa teemoissa: käyttää teeman muuttujia varmistusarvoilla. Tyylimallit (_variant) ovat tiedostossa variants.css.
   Julkaistaan osana /assets/cms-blocks.css. Luokkaetuliitteet: cms-ev, cms-dl, cms-ba, cms-pgtoc, cms-oh, cms-ab. */

.cms-ev, .cms-dl, .cms-ba, .cms-pgtoc, .cms-oh, .cms-ab {
  --p2-accent: var(--color-primary, var(--accent, #F54927));
  --p2-ink: var(--accent-ink, #fff);
  --p2-text: var(--color-text, var(--text, #14161a));
  --p2-muted: var(--color-text-muted, var(--muted, #5b6270));
  --p2-line: var(--color-line, var(--line, #e3e6eb));
  --p2-surface: var(--color-surface, var(--surface, #f6f7f9));
  --p2-bg: var(--bg, #fff);
  --p2-radius: var(--radius, 10px);
}
.cms-ev [hidden], .cms-dl [hidden], .cms-ba [hidden], .cms-oh [hidden] { display: none !important; }
.cms-ev h3, .cms-dl h3 { margin: 0; }
:is(h2, h3)[id] { scroll-margin-top: 5rem; }

/* ================= events ================= */
.cms-ev__list { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.cms-ev__item { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px 18px; align-items: start; padding: 16px 18px; border: 1px solid var(--p2-line); border-radius: var(--p2-radius); background: var(--p2-bg); color: var(--p2-text); }
.cms-ev__item:not(:has(.cms-ev__day)) { grid-template-columns: minmax(0, 1fr); }
.cms-ev__day { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 64px; padding: 10px 12px; border-radius: calc(var(--p2-radius) - 2px); background: var(--p2-accent); color: var(--p2-ink); line-height: 1; }
.cms-ev__day b { font: 800 1.75rem/1 var(--font-heading, inherit); }
.cms-ev__day span { margin-top: 4px; font-size: .75rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.cms-ev__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cms-ev__body p { margin: 0; color: var(--p2-muted); font-size: .9375rem; }
.cms-ev__when { font-weight: 600; }
.cms-ev__side { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; grid-column: 1 / -1; }
.cms-ev__none { margin: 0; padding: 20px; border: 1px dashed var(--p2-line); border-radius: var(--p2-radius); color: var(--p2-muted); text-align: center; }
.cms-ev__item--cancelled { opacity: .72; }
.cms-ev__item--cancelled h3 { text-decoration: line-through; }
@media (min-width: 720px) {
  .cms-ev__item { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; }
  .cms-ev__item:not(:has(.cms-ev__day)) { grid-template-columns: minmax(0, 1fr) auto; }
  .cms-ev__side { grid-column: auto; justify-content: flex-end; }
}

/* ================= downloads ================= */
.cms-dl__list { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.cms-dl__item { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px 16px; align-items: center; padding: 14px 18px; border: 1px solid var(--p2-line); border-radius: var(--p2-radius); background: var(--p2-bg); color: var(--p2-text); }
.cms-dl__type { display: grid; place-items: center; min-width: 52px; height: 52px; padding: 0 6px; border-radius: calc(var(--p2-radius) - 2px); background: var(--p2-surface); color: var(--p2-accent); font-size: .75rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.cms-dl__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cms-dl__body p { margin: 0; color: var(--p2-muted); font-size: .9375rem; }
.cms-dl__meta { font-size: .8125rem !important; font-weight: 600; }
.cms-dl__btn { grid-column: 1 / -1; justify-self: start; }
.cms-dl__btn--none { display: none; padding: 8px 14px; border: 1px dashed var(--p2-line); border-radius: 999px; color: var(--p2-muted); font-size: .875rem; }
[data-bid] .cms-dl__btn--none { display: inline-flex; }
@media (min-width: 600px) {
  .cms-dl__item { grid-template-columns: auto minmax(0, 1fr) auto; }
  .cms-dl__btn { grid-column: auto; justify-self: end; }
}

/* ================= before_after ================= */
.cms-ba__fig { margin: 0; }
.cms-ba__stage { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 600px) { .cms-ba__stage { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.cms-ba__pane { position: relative; margin: 0; }
.cms-ba__pane .cms-img, .cms-ba__pane .cms-img-empty { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--p2-radius); }
.cms-ba__pane:not(:has(.cms-img)) { display: none; }
[data-bid] .cms-ba__pane { display: block; }
.cms-ba__lab { position: absolute; left: 10px; top: 10px; z-index: 1; padding: 4px 12px; border-radius: 999px; background: rgba(10, 12, 16, .74); color: #fff; font-size: .8125rem; font-weight: 600; line-height: 1.4; }
.cms-ba__cap { margin-top: 10px; color: var(--p2-muted); font-size: .9375rem; }
/* Skripti (p2.js) vaihtaa liukusäätimeen: kuvat päällekkäin, jakokohta --ba-pos */
.cms-ba__stage.is-slider { display: block; position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--p2-radius); user-select: none; --ba-pos: 50%; }
.is-slider .cms-ba__pane { position: absolute; inset: 0; }
.is-slider .cms-ba__pane .cms-img, .is-slider .cms-ba__pane .cms-img-empty { height: 100%; aspect-ratio: auto; border-radius: 0; }
.is-slider .cms-ba__pane--after { clip-path: inset(0 0 0 var(--ba-pos)); }
.is-slider .cms-ba__pane--after .cms-ba__lab { left: auto; right: 10px; }
.cms-ba__handle { position: absolute; z-index: 2; top: 0; bottom: 0; left: var(--ba-pos); width: 3px; margin-left: -1.5px; background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .25); pointer-events: none; }
.cms-ba__handle::after { content: "\2194"; position: absolute; top: 50%; left: 50%; display: grid; place-items: center; width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%; background: #fff; color: #14161a; font-size: 20px; box-shadow: 0 2px 8px rgba(0, 0, 0, .35); }
.cms-ba__range { position: absolute; z-index: 3; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; opacity: 0; cursor: ew-resize; -webkit-appearance: none; appearance: none; background: none; }
.cms-ba__stage:has(.cms-ba__range:focus-visible) { outline: 3px solid var(--p2-accent); outline-offset: 3px; }
.cms-ba__tg { display: flex; justify-content: center; gap: 0; margin-top: 12px; }
.cms-ba__tg button { padding: 10px 22px; border: 1px solid var(--p2-line); background: var(--p2-bg); color: var(--p2-text); font-family: inherit; font-size: .9375rem; font-weight: 600; cursor: pointer; }
.cms-ba__tg button:first-child { border-radius: 999px 0 0 999px; }
.cms-ba__tg button:last-child { border-radius: 0 999px 999px 0; border-left-width: 0; }
.cms-ba__tg button[aria-pressed="true"] { border-color: var(--p2-accent); background: var(--p2-accent); color: var(--p2-ink); }
.cms-ba__tg button:focus-visible { outline: 3px solid var(--p2-accent); outline-offset: 2px; }
.cms-ba__stage.is-toggle { display: block; position: relative; }
.cms-ba__stage.is-toggle .cms-ba__pane .cms-img, .cms-ba__stage.is-toggle .cms-ba__pane .cms-img-empty { aspect-ratio: 4 / 3; }

/* ================= toc ================= */
.cms-pgtoc__nav { max-width: 42rem; padding: 20px 24px; border: 1px solid var(--p2-line); border-radius: var(--p2-radius); background: var(--p2-surface); color: var(--p2-text); }
.cms-pgtoc__title { margin: 0 0 10px; font: 700 1.0625rem/1.3 var(--font-heading, inherit); }
.cms-pgtoc__list, .cms-pgtoc__list ol { margin: 0; padding-left: 1.4rem; }
.cms-pgtoc__list li { margin: .4rem 0; }
.cms-pgtoc__list ol { margin-top: .3rem; list-style: lower-alpha; font-size: .9375rem; }
.cms-pgtoc a { color: inherit; text-underline-offset: 3px; }
.cms-pgtoc a:hover { color: var(--p2-accent); }
.cms-pgtoc a:focus-visible { outline: 3px solid var(--p2-accent); outline-offset: 2px; border-radius: 2px; }
.cms-pgtoc a[aria-current] { color: var(--p2-accent); font-weight: 700; }
.cms-pgtoc__empty { margin: 0; padding: 16px 20px; border: 1px dashed var(--p2-line); border-radius: var(--p2-radius); color: var(--p2-muted); }
.cms-pgtoc--empty { display: none; }
[data-bid].cms-pgtoc--empty { display: block; }
:where(.cms-pgtoc--sticky) { position: sticky; top: var(--cms-sticky-top, 0); z-index: 20; background: var(--p2-bg); }
[data-bid] :where(.cms-pgtoc--sticky), :where(.cms-pgtoc--sticky)[data-bid] { position: static; }

/* ================= opening_hours ================= */
.cms-oh__box { max-width: 36rem; padding: 22px 24px; border: 1px solid var(--p2-line); border-radius: var(--p2-radius); background: var(--p2-bg); color: var(--p2-text); }
.cms-oh__now { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 14px; padding: 6px 14px; border-radius: 999px; background: #e3f4e8; color: #0b4a22; font-size: .9375rem; font-weight: 700; }
.cms-oh__now::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: currentColor; }
.cms-oh__now.is-closed { background: #fde7e4; color: #8a1c0e; }
.cms-oh__table { width: 100%; border-collapse: collapse; }
.cms-oh__table th, .cms-oh__table td { padding: 9px 0; border-bottom: 1px solid var(--p2-line); font-weight: inherit; text-align: left; vertical-align: top; }
.cms-oh__table td { text-align: right; }
.cms-oh__table tr:last-child :is(th, td) { border-bottom: 0; }
.cms-oh__table tr[aria-current="date"] :is(th, td) { color: var(--p2-accent); font-weight: 700; }
.cms-oh__exc { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--p2-line); color: var(--p2-muted); font-size: .9375rem; }
.cms-oh__exc-title { margin: 0 0 4px; color: var(--p2-text); font-weight: 700; }
.cms-oh__exc ul { margin: 0; padding: 0; list-style: none; }
.cms-oh__exc li[hidden] { display: none !important; }

/* ================= author_box ================= */
.cms-ab__box { display: flex; flex-wrap: wrap; gap: 18px 22px; align-items: flex-start; max-width: 46rem; color: var(--p2-text); }
.cms-ab__media { flex: none; width: 88px; }
.cms-ab__media .cms-img, .cms-ab__media .cms-img-empty { display: block; width: 88px; height: 88px; aspect-ratio: 1; border-radius: 50%; object-fit: cover; overflow: hidden; font-size: .6875rem; text-align: center; }
.cms-ab__av { display: grid; place-items: center; width: 88px; height: 88px; border-radius: 50%; background: var(--p2-accent); color: var(--p2-ink); font: 700 1.75rem/1 var(--font-heading, inherit); }
.cms-ab__body { flex: 1 1 260px; min-width: 0; }
.cms-ab__lab { display: block; color: var(--p2-muted); font-size: .8125rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.cms-ab__name { margin: 2px 0 0; font: 700 1.25rem/1.3 var(--font-heading, inherit); }
.cms-ab__role { margin: 0; color: var(--p2-muted); font-size: .9375rem; }
.cms-ab__bio { margin: 10px 0 0; }
.cms-ab__links { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 12px 0 0; padding: 0; list-style: none; }

/* Rikkaan tekstin (.prose) täydentävät tyylit kaikille teemoille: sisäkkäiset listat, H4, lainauksen kappaleet,
   yliviivaus ja koodi. Valitsimet ovat :where()-kääreessä (tarkkuus 0, paitsi h4), joten teeman omat .prose-tyylit
   voittavat aina; nämä täyttävät vain puuttuvat kohdat. Värit ja fontit teeman muuttujista varmistusarvoin. */

:where(.prose, .faq__a) {
  --cms-prose-accent: var(--color-primary, var(--accent, currentColor));
  --cms-prose-line: var(--color-line-strong, var(--color-line, var(--line, #d4d4d4)));
  --cms-prose-muted: var(--color-text-muted, var(--muted, inherit));
  --cms-prose-surface: var(--color-surface, var(--surface, rgba(0, 0, 0, .05)));
}

/* Listat: sisennys ja sisäkkäiset tasot */
:where(.prose, .faq__a) :where(ul, ol) { padding-left: 1.4em; }
:where(.prose, .faq__a) :where(li > ul, li > ol) { margin-top: .4em; margin-bottom: 0; }
:where(.prose, .faq__a) :where(ul ul) { list-style-type: circle; }
:where(.prose, .faq__a) :where(ul ul ul) { list-style-type: square; }
:where(.prose, .faq__a) :where(ol ol) { list-style-type: lower-alpha; }
:where(.prose, .faq__a) :where(ol ol ol) { list-style-type: lower-roman; }
:where(.prose, .faq__a) :where(li > p) { margin: 0; }

/* Otsikot proosassa: H4 puuttuu useimmista teemoista. Tarkkuus 0,0,1, jotta teeman yleinen h4-koko ei tee siitä H3:a suurempaa (teeman .prose h4 voittaa silti). */
:where(.prose, .faq__a) h4 { font-family: var(--font-heading, var(--font-display, inherit)); font-size: 1.1em; line-height: 1.35; margin-top: 1.6em; margin-bottom: 0; }
:where(.prose, .faq__a) :where(h4 + *) { margin-top: .6em; }

/* Lainaus: useampi kappale lainauksen sisällä */
:where(.prose, .faq__a) :where(blockquote > p) { margin: 0; }
:where(.prose, .faq__a) :where(blockquote > p + p) { margin-top: .6em; }
:where(.prose, .faq__a) :where(blockquote) { margin-inline: 0; padding-left: 1em; border-left: 3px solid var(--cms-prose-accent); }

/* Inline */
:where(.prose, .faq__a) :where(s) { text-decoration-thickness: 1px; color: var(--cms-prose-muted); }
:where(.prose, .faq__a) :where(code) { font-family: var(--font-mono, ui-monospace, "Cascadia Mono", Consolas, monospace); font-size: .9em; background: var(--cms-prose-surface); border-radius: 4px; padding: .1em .35em; }

/* Lohkojen yhteiset ulkoasuasetukset (_style: ylä- ja alatila, leveys) ja laitepiilotus (_hide).
   Toimii kaikissa teemoissa: luokat lisätään lohkon juurielementille (decorateRoot, packages/shared/src/style.ts).
   Välit ovat esiasetuksia: kerroin × teeman --section-y (varmistusarvo kuten elementeissä). Ei vapaita px-arvoja.
   Arvo !important, koska teemojen osioiden väliä säätävät säännöt (esim. peräkkäiset osiot, kk-teemojen taustakaaret) ovat tarkempia. */

[class*="cms-pt-"] { --cms-pt-k: 1; }
[class*="cms-pb-"] { --cms-pb-k: 1; }
.cms-pt-none { --cms-pt-k: 0; } .cms-pt-xs { --cms-pt-k: .25; } .cms-pt-s { --cms-pt-k: .5; } .cms-pt-m { --cms-pt-k: 1; } .cms-pt-l { --cms-pt-k: 1.5; } .cms-pt-xl { --cms-pt-k: 2; }
.cms-pb-none { --cms-pb-k: 0; } .cms-pb-xs { --cms-pb-k: .25; } .cms-pb-s { --cms-pb-k: .5; } .cms-pb-m { --cms-pb-k: 1; } .cms-pb-l { --cms-pb-k: 1.5; } .cms-pb-xl { --cms-pb-k: 2; }

/* Osiot ja herot: väli paddauksena; sisemmän kehyksen pystypaddaus nollataan (teemoissa on kaksi rakennetta) */
.section[class*="cms-pt-"], .hero[class*="cms-pt-"] { padding-top: calc(var(--section-y, clamp(56px, 8vw, 104px)) * var(--cms-pt-k)) !important; }
.section[class*="cms-pb-"], .hero[class*="cms-pb-"] { padding-bottom: calc(var(--section-y, clamp(56px, 8vw, 104px)) * var(--cms-pb-k)) !important; }
.section[class*="cms-pt-"] > .section__inner, .section[class*="cms-pt-"] > .cms-sec__inner { padding-top: 0; }
.section[class*="cms-pb-"] > .section__inner, .section[class*="cms-pb-"] > .cms-sec__inner { padding-bottom: 0; }
/* Muut juurielementit (CTA-palkki, erotin jne.): väli marginaalina, ettei taustallisen laatikon sisus muutu */
[class*="cms-pt-"]:not(.section):not(.hero) { margin-top: calc(var(--section-y, clamp(56px, 8vw, 104px)) * var(--cms-pt-k)) !important; }
[class*="cms-pb-"]:not(.section):not(.hero) { margin-bottom: calc(var(--section-y, clamp(56px, 8vw, 104px)) * var(--cms-pb-k)) !important; }

/* Leveys: sisällön leveys osion paddauksella, joten tausta pysyy koko leveänä riippumatta lohkon sisärakenteesta */
.section.cms-w-narrow { padding-inline: max(var(--gutter, 20px), calc((100% - var(--prose, 700px)) / 2)); }
.section.cms-w-wide { padding-inline: max(var(--gutter, 20px), calc((100% - var(--shell, 1120px) - 240px) / 2)); }
.section.cms-w-full { padding-inline: var(--gutter, 20px); }
.section.cms-w-wide > .section__inner, .section.cms-w-full > .section__inner { max-width: none; }

/* Taustat kaikille osioille (Korostettu, Tumma); sectionin oma .cms-sec-versio on elements.css:ssä */
.section.cms-bg-tint:not(.cms-sec) { background: var(--color-primary-tint, var(--accent-soft, #FEEDE9)); }
.section.cms-bg-dark:not(.cms-sec) { background: var(--color-text, var(--text, #111)); color: #fff; }
.section.cms-bg-dark:not(.cms-sec) :is(.lead, .label, p, li, figcaption, summary) { color: inherit; }
.section.cms-bg-dark:not(.cms-sec) .eyebrow, .section.cms-bg-dark:not(.cms-sec) .accent { color: var(--accent-light, var(--accent, #F54927)); }
.section.cms-bg-dark:not(.cms-sec) :is(.grid-lines > *, .service-card, .pricing-card, .kpi, .feature, .faq-item, .testimonial-card, .team-card, .job-card, .process-step) { background: transparent; border-color: rgba(255, 255, 255, .25); }

/* Piilotus laitteella (_hide): mobiili alle 720 px, tabletti 720–1023 px, työpöytä vähintään 1024 px */
@media (max-width: 719.98px) { .cms-hide-mobile { display: none !important; } }
@media (min-width: 720px) and (max-width: 1023.98px) { .cms-hide-tablet { display: none !important; } }
@media (min-width: 1024px) { .cms-hide-desktop { display: none !important; } }

/* Tekstin muotoilu (valkolista, ks. packages/shared/src/richtext.ts): värit tc-1…tc-4, markeri hl, koko data-fs, linkki napiksi.
   Kaikki arvot tulevat teeman muuttujista varmuusarvoin, joten luokat toimivat jokaisessa teemassa ilman muutoksia.
   Teema voi asettaa paletin omilla muuttujillaan: --cms-tc-1 … --cms-tc-4, --cms-hl, --cms-btn-bg, --cms-btn-ink
   (esim. sites/king-kebab/themes/kk-* /override.css). Ei inline-tyylejä: CSP pysyy tiukkana. */

/* Väripaletti: 1 = pääväri, 2 = toinen väri, 3 = tumma, 4 = vaimea */
.tc-1 { color: var(--cms-tc-1, var(--accent, currentColor)); }
.tc-2 { color: var(--cms-tc-2, var(--accent-hover, var(--accent, currentColor))); }
.tc-3 { color: var(--cms-tc-3, var(--text, currentColor)); }
.tc-4 { color: var(--cms-tc-4, var(--muted, currentColor)); }

/* Markeri (taustakorostus). Alleviivaus on tarkoituksella kielletty: se sekoittuu linkkeihin (WCAG 1.4.1). */
.hl { background: var(--cms-hl, color-mix(in srgb, var(--accent, #f5c400) 22%, transparent)); border-radius: .15em; padding: 0 .12em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }

/* Linkki napin näköisenä (vain proosassa ja pitkissä tekstikentissä) */
a.cms-a-btn { display: inline-block; padding: .6em 1.1em; border-radius: var(--radius-sm, var(--radius, 8px)); background: var(--cms-btn-bg, var(--accent, #111)); color: var(--cms-btn-ink, var(--accent-ink, #fff)); font-weight: 600; line-height: 1.2; text-decoration: none; }
a.cms-a-btn:hover { filter: brightness(.92); text-decoration: none; }
a.cms-a-btn--ghost { background: transparent; color: var(--cms-btn-bg, var(--accent, currentColor)); box-shadow: inset 0 0 0 2px currentColor; }
a.cms-a-btn:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

/* Koko: jatkuva, 5 %:n askelin 50–300 % ympäröivästä koosta (em, joten teeman fluid-tyypografia ja mobiilikoot säilyvät).
   Alle 100 %: luettavuuden lattia 12 px. Otsikoissa sana ei saa ylittää näyttöä. */
[data-fs] { overflow-wrap: break-word; }
:is(h1, h2, h3, h4) [data-fs] { overflow-wrap: anywhere; }
[data-fs="50"] { font-size: max(12px, 0.5em); }
[data-fs="55"] { font-size: max(12px, 0.55em); }
[data-fs="60"] { font-size: max(12px, 0.6em); }
[data-fs="65"] { font-size: max(12px, 0.65em); }
[data-fs="70"] { font-size: max(12px, 0.7em); }
[data-fs="75"] { font-size: max(12px, 0.75em); }
[data-fs="80"] { font-size: max(12px, 0.8em); }
[data-fs="85"] { font-size: max(12px, 0.85em); }
[data-fs="90"] { font-size: max(12px, 0.9em); }
[data-fs="95"] { font-size: max(12px, 0.95em); }
[data-fs="105"] { font-size: 1.05em; }
[data-fs="110"] { font-size: 1.1em; }
[data-fs="115"] { font-size: 1.15em; }
[data-fs="120"] { font-size: 1.2em; }
[data-fs="125"] { font-size: 1.25em; }
[data-fs="130"] { font-size: 1.3em; }
[data-fs="135"] { font-size: 1.35em; }
[data-fs="140"] { font-size: 1.4em; }
[data-fs="145"] { font-size: 1.45em; }
[data-fs="150"] { font-size: 1.5em; }
[data-fs="155"] { font-size: 1.55em; }
[data-fs="160"] { font-size: 1.6em; }
[data-fs="165"] { font-size: 1.65em; }
[data-fs="170"] { font-size: 1.7em; }
[data-fs="175"] { font-size: 1.75em; }
[data-fs="180"] { font-size: 1.8em; }
[data-fs="185"] { font-size: 1.85em; }
[data-fs="190"] { font-size: 1.9em; }
[data-fs="195"] { font-size: 1.95em; }
[data-fs="200"] { font-size: 2.0em; }
[data-fs="205"] { font-size: 2.05em; }
[data-fs="210"] { font-size: 2.1em; }
[data-fs="215"] { font-size: 2.15em; }
[data-fs="220"] { font-size: 2.2em; }
[data-fs="225"] { font-size: 2.25em; }
[data-fs="230"] { font-size: 2.3em; }
[data-fs="235"] { font-size: 2.35em; }
[data-fs="240"] { font-size: 2.4em; }
[data-fs="245"] { font-size: 2.45em; }
[data-fs="250"] { font-size: 2.5em; }
[data-fs="255"] { font-size: 2.55em; }
[data-fs="260"] { font-size: 2.6em; }
[data-fs="265"] { font-size: 2.65em; }
[data-fs="270"] { font-size: 2.7em; }
[data-fs="275"] { font-size: 2.75em; }
[data-fs="280"] { font-size: 2.8em; }
[data-fs="285"] { font-size: 2.85em; }
[data-fs="290"] { font-size: 2.9em; }
[data-fs="295"] { font-size: 2.95em; }
[data-fs="300"] { font-size: 3.0em; }

/* Otsikoissa alle 640 px:n näkymässä yli 150 %:n arvot rajataan 150 %:iin */
@media (max-width: 640px) {
  :is(h1, h2, h3) :is([data-fs="155"], [data-fs="160"], [data-fs="165"], [data-fs="170"], [data-fs="175"], [data-fs="180"], [data-fs="185"], [data-fs="190"], [data-fs="195"], [data-fs="200"], [data-fs="205"], [data-fs="210"], [data-fs="215"], [data-fs="220"], [data-fs="225"], [data-fs="230"], [data-fs="235"], [data-fs="240"], [data-fs="245"], [data-fs="250"], [data-fs="255"], [data-fs="260"], [data-fs="265"], [data-fs="270"], [data-fs="275"], [data-fs="280"], [data-fs="285"], [data-fs="290"], [data-fs="295"], [data-fs="300"]) { font-size: 1.5em; }
}

/* Lohkojen tyylimallit (_variant). Juurielementissä on luokat `cms-b-<tyyppi> cms-v-<avain>` vain kun malli on valittu;
   oletusmallilla (nykyinen ulkoasu) tämä tiedosto ei vaikuta mihinkään.
   Spesifisyys: malliosa kirjoitetaan `:where(.cms-b-X.cms-v-Y)`-muodossa (spesifisyys 0), joten sääntö painaa saman verran kuin
   teeman vastaava luokkavalitsin ja voittaa sen järjestyksessä (cms-blocks.css latautuu teeman jälkeen). Teema ylikirjoittaa mallin
   tarkemmalla valitsimella, esim. `.cms-v-cards.cms-b-services .service-card { … }` omassa tiedostossaan (King Kebab: kk-* override.css).
   Ydin käyttää vain teeman muuttujia (värit, pyöristys, varjo, välit) ja olemassa olevia luokkia. Jokaisen mallin pitää toimia kaikissa teemoissa. */

:where([class*="cms-v-"]) {
  --v-accent: var(--color-primary, var(--accent, #2456a6));
  --v-accent-ink: var(--accent-ink, #fff);
  --v-accent-light: var(--accent-light, var(--v-accent));
  --v-soft: color-mix(in srgb, var(--v-accent) 9%, var(--v-bg));
  --v-text: var(--color-text, var(--text, #14161a));
  --v-muted: var(--color-text-muted, var(--muted, #5b6270));
  --v-bg: var(--bg, #fff);
  --v-tile: color-mix(in srgb, var(--v-text) 5%, var(--v-bg)); /* täyttö, joka erottuu taustasta myös teemoissa, joissa --surface = --bg */
  --v-line: var(--color-line, var(--line, #e3e6eb));
  --v-radius: var(--radius, 12px);
  --v-shadow: 0 1px 2px rgba(20, 22, 26, .05), 0 10px 28px rgba(20, 22, 26, .10); /* kiinteä: teema voi asettaa --shadow: none, mutta korttimalli tarvitsee näkyvän varjon */
  --v-hair: color-mix(in srgb, currentColor 22%, transparent);
  --v-inv: color-mix(in srgb, var(--v-bg) 72%, transparent);
}

/* ================= hero_home ================= */
:where(.cms-b-hero_home.cms-v-split) .hero__inner[class] { max-width: var(--shell, 1160px); text-align: left; }
:where(.cms-b-hero_home.cms-v-split) .lead[class] { margin-inline: 0; }
:where(.cms-b-hero_home.cms-v-split) .btn-group[class] { justify-content: flex-start; }
:where(.cms-b-hero_home.cms-v-split) .hero__trust { flex-direction: column; flex-wrap: nowrap; align-items: flex-start; gap: 14px; margin-top: 32px; padding: 24px 26px; border: 1px solid var(--v-hair); border-radius: var(--v-radius); background: color-mix(in srgb, currentColor 8%, transparent); box-shadow: none; }
@media (min-width: 900px) {
  :where(.cms-b-hero_home.cms-v-split) .hero__inner[class] { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); column-gap: clamp(32px, 5vw, 72px); align-items: center; }
  :where(.cms-b-hero_home.cms-v-split) .hero__inner > * { grid-column: 1; }
  :where(.cms-b-hero_home.cms-v-split) .hero__inner > .pill { justify-self: start; }
  :where(.cms-b-hero_home.cms-v-split) .hero__inner > .hero__trust { grid-column: 2; grid-row: 1 / span 6; margin-top: 0; }
}
:where(.cms-b-hero_home.cms-v-poster) .hero__inner[class] { max-width: none; margin-inline: 0; text-align: left; }
:where(.cms-b-hero_home.cms-v-poster) h1 { max-width: 12ch; font-size: clamp(3rem, 1rem + 11vw, 9rem); line-height: .94; letter-spacing: -.045em; }
:where(.cms-b-hero_home.cms-v-poster) .lead[class] { margin-inline: 0; }
:where(.cms-b-hero_home.cms-v-poster) .btn-group[class] { justify-content: flex-start; margin-top: 32px; }
:where(.cms-b-hero_home.cms-v-poster) .hero__trust { justify-content: flex-start; margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--v-hair); }
@media (min-width: 800px) {
  :where(.cms-b-hero_home.cms-v-poster) .hero__inner[class] { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 40px; align-items: end; }
  :where(.cms-b-hero_home.cms-v-poster) .hero__inner > * { grid-column: 1 / -1; }
  :where(.cms-b-hero_home.cms-v-poster) .hero__inner > .pill { justify-self: start; }
  :where(.cms-b-hero_home.cms-v-poster) .hero__inner > .btn-group { grid-column: 1; margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--v-hair); }
  :where(.cms-b-hero_home.cms-v-poster) .hero__inner > .hero__trust { grid-column: 2; margin-top: 40px; padding-top: 28px; justify-content: flex-end; align-self: stretch; }
}

/* ================= hero_page ================= */
:where(.cms-b-hero_page.cms-v-center) { text-align: center; }
:where(.cms-b-hero_page.cms-v-center) .hero__inner[class] { max-width: 720px; margin-inline: auto; }
:where(.cms-b-hero_page.cms-v-center) .breadcrumb ol, :where(.cms-b-hero_page.cms-v-center) .eyebrow[class], :where(.cms-b-hero_page.cms-v-center) .btn-group[class] { justify-content: center; }
:where(.cms-b-hero_page.cms-v-center) .lead[class] { margin-inline: auto; }
:where(.cms-b-hero_page.cms-v-center) :is(h1, .lead[class], .eyebrow[class]) { text-align: center; }
:where(.cms-b-hero_page.cms-v-band).hero--page { background: var(--v-text); color: var(--v-bg); border-bottom-color: transparent; }
:where(.cms-b-hero_page.cms-v-band) :is(h1, .lead, .breadcrumb a, .breadcrumb ol, .breadcrumb [aria-current]) { color: inherit; }
:where(.cms-b-hero_page.cms-v-band) .lead { opacity: .86; }
:where(.cms-b-hero_page.cms-v-band) :is(.eyebrow, .accent) { color: var(--v-accent-light); }
:where(.cms-b-hero_page.cms-v-band) .btn-primary { background: var(--v-bg); border-color: var(--v-bg); color: var(--v-text); }
:where(.cms-b-hero_page.cms-v-band) :is(.btn-ghost, .btn-ghost-dark) { background: transparent; border-color: var(--v-inv); color: var(--v-bg); }
@media (min-width: 800px) {
  :where(.cms-b-hero_page.cms-v-band) .hero__inner[class] { max-width: var(--shell, 1160px); display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 48px; align-items: end; }
  :where(.cms-b-hero_page.cms-v-band) .hero__inner > * { grid-column: 1; }
  :where(.cms-b-hero_page.cms-v-band) .hero__inner > .btn-group { grid-column: 2; grid-row: 1 / span 6; margin-top: 0; }
}

/* ================= hero_image (kuva: taustakuva `--bg` tai oikealla `--right`) ================= */
:where(.cms-b-hero_image.cms-v-card) { display: flex; align-items: flex-end; min-height: clamp(440px, 62vw, 640px); }
:where(.cms-b-hero_image.cms-v-card).cms-hero-img--bg .cms-hero-img__inner { box-sizing: border-box; width: min(100%, 540px); margin: 0; padding: clamp(24px, 4vw, 40px); border-radius: calc(var(--v-radius) * 1.3); background: var(--v-bg); color: var(--v-text); box-shadow: var(--v-shadow); }
:where(.cms-b-hero_image.cms-v-card).cms-hero-img--bg :is(h1, .lead, .breadcrumb a, .breadcrumb [aria-current]) { color: var(--v-text); }
:where(.cms-b-hero_image.cms-v-card).cms-hero-img--bg .lead { color: var(--v-muted); opacity: 1; }
:where(.cms-b-hero_image.cms-v-card).cms-hero-img--bg .eyebrow { color: var(--v-accent); }
:where(.cms-b-hero_image.cms-v-card).cms-hero-img--bg .accent { color: var(--v-accent); }
:where(.cms-b-hero_image.cms-v-card).cms-hero-img--bg .cms-hero-img__shade { background: linear-gradient(0deg, rgba(8, 10, 14, .45), rgba(8, 10, 14, 0) 60%); }
:where(.cms-b-hero_image.cms-v-card).cms-hero-img--bg .btn-ghost-dark { border-color: var(--v-line); color: var(--v-text); }
:where(.cms-b-hero_image.cms-v-card).cms-hero-img--right .cms-hero-img__text { padding: clamp(24px, 4vw, 40px); border-radius: calc(var(--v-radius) * 1.3); background: var(--v-bg); box-shadow: var(--v-shadow); }
:where(.cms-b-hero_image.cms-v-split-full).hero { padding: 0; }
:where(.cms-b-hero_image.cms-v-split-full) .cms-hero-img__shade { display: none; }
:where(.cms-b-hero_image.cms-v-split-full) .cms-img { border-radius: 0; }
:where(.cms-b-hero_image.cms-v-split-full).cms-hero-img--bg { display: grid; background: var(--v-tile); color: var(--v-text); }
:where(.cms-b-hero_image.cms-v-split-full).cms-hero-img--bg .cms-hero-img__bg { position: static; aspect-ratio: 16 / 10; }
:where(.cms-b-hero_image.cms-v-split-full).cms-hero-img--bg .cms-img-empty { position: static; opacity: 1; aspect-ratio: 16 / 10; }
:where(.cms-b-hero_image.cms-v-split-full).cms-hero-img--bg :is(h1, .lead, .breadcrumb a, .breadcrumb [aria-current]) { color: var(--v-text); }
:where(.cms-b-hero_image.cms-v-split-full).cms-hero-img--bg .lead { color: var(--v-muted); opacity: 1; }
:where(.cms-b-hero_image.cms-v-split-full).cms-hero-img--bg .eyebrow, :where(.cms-b-hero_image.cms-v-split-full).cms-hero-img--bg .accent { color: var(--v-accent); }
:where(.cms-b-hero_image.cms-v-split-full).cms-hero-img--bg .btn-ghost-dark { border-color: var(--v-line); color: var(--v-text); }
:where(.cms-b-hero_image.cms-v-split-full).cms-hero-img--bg .cms-hero-img__inner { max-width: none; padding: clamp(32px, 6vw, 72px) var(--gutter, 20px); }
:where(.cms-b-hero_image.cms-v-split-full).cms-hero-img--right .cms-hero-img__inner { max-width: none; padding: 0; gap: 0; }
:where(.cms-b-hero_image.cms-v-split-full).cms-hero-img--right .cms-hero-img__text { padding: clamp(32px, 6vw, 72px) var(--gutter, 20px); }
:where(.cms-b-hero_image.cms-v-split-full).cms-hero-img--right .cms-hero-img__media .cms-img, :where(.cms-b-hero_image.cms-v-split-full).cms-hero-img--right .cms-hero-img__media .cms-img-empty { height: 100%; aspect-ratio: 16 / 10; border-radius: 0; }
@media (min-width: 900px) {
  :where(.cms-b-hero_image.cms-v-split-full).cms-hero-img--bg { grid-template-columns: 1fr 1fr; }
  :where(.cms-b-hero_image.cms-v-split-full).cms-hero-img--bg .cms-hero-img__bg, :where(.cms-b-hero_image.cms-v-split-full).cms-hero-img--bg .cms-img-empty { grid-column: 2; grid-row: 1; height: 100%; min-height: 480px; aspect-ratio: auto; }
  :where(.cms-b-hero_image.cms-v-split-full).cms-hero-img--bg .cms-hero-img__inner { grid-column: 1; grid-row: 1; align-self: center; padding-left: var(--side, 32px); padding-right: clamp(32px, 5vw, 72px); }
  :where(.cms-b-hero_image.cms-v-split-full).cms-hero-img--right .cms-hero-img__inner { grid-template-columns: 1fr 1fr; }
  :where(.cms-b-hero_image.cms-v-split-full).cms-hero-img--right .cms-hero-img__text { align-self: center; padding-left: var(--side, 32px); padding-right: clamp(32px, 5vw, 72px); }
  :where(.cms-b-hero_image.cms-v-split-full).cms-hero-img--right .cms-hero-img__media .cms-img, :where(.cms-b-hero_image.cms-v-split-full).cms-hero-img--right .cms-hero-img__media .cms-img-empty { aspect-ratio: auto; min-height: 480px; }
}

/* ================= services ================= */
:where(.cms-b-services.cms-v-cards) .grid-lines { gap: 24px; }
:where(.cms-b-services.cms-v-cards) .service-card { padding: 32px; border-color: transparent; border-radius: calc(var(--v-radius) * 1.4); background: var(--v-bg); box-shadow: var(--v-shadow); }
:where(.cms-b-services.cms-v-cards) .service-card:hover { border-color: transparent; transform: translateY(-3px); }
:where(.cms-b-services.cms-v-cards) .icon-box { width: 64px; height: 64px; border-radius: calc(var(--v-radius) * 1.1); }
:where(.cms-b-services.cms-v-cards) .icon-box .icon { width: 30px; height: 30px; }
:where(.cms-b-services.cms-v-rows) .grid-lines[class] { grid-template-columns: minmax(0, 1fr); gap: 0; }
:where(.cms-b-services.cms-v-rows) .service-card { padding: 24px 0; border-width: 1px 0 0; border-radius: 0; background: transparent; box-shadow: none; }
:where(.cms-b-services.cms-v-rows) .service-card:hover { box-shadow: none; transform: none; }
:where(.cms-b-services.cms-v-rows) .grid-lines > .service-card:last-child { border-bottom: 1px solid var(--v-line); }
@media (min-width: 720px) {
  :where(.cms-b-services.cms-v-rows) .service-card { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; column-gap: 24px; align-items: start; }
  :where(.cms-b-services.cms-v-rows) .service-card__top { grid-column: 1; grid-row: 1 / span 3; flex-direction: column; align-items: flex-start; gap: 8px; margin: 0; }
  :where(.cms-b-services.cms-v-rows) :is(.service-card__title, .service-card__text, .service-card__list) { grid-column: 2; }
  :where(.cms-b-services.cms-v-rows) .service-card__footer { grid-column: 3; grid-row: 1 / span 3; flex-direction: column; align-items: flex-end; justify-content: space-between; margin: 0; padding: 0; }
  :where(.cms-b-services.cms-v-rows) .service-card__price { font-size: 1.25rem; }
}

/* ================= features ================= */
:where(.cms-b-features.cms-v-cards) .feature { padding: 28px; border-top: 0; border-radius: var(--v-radius); background: var(--v-tile); }
:where(.cms-b-features.cms-v-cards) .icon-box { border-radius: 50%; background: var(--v-bg); box-shadow: var(--v-shadow); }
:where(.cms-b-features.cms-v-cards) .feature-list { border-bottom: 0; }
:where(.cms-b-features.cms-v-cards) .feature-list .feature { margin-bottom: 14px; }
:where(.cms-b-features.cms-v-numbered) :is(.grid-lines, .feature-list) { counter-reset: feat; }
:where(.cms-b-features.cms-v-numbered) .feature { counter-increment: feat; padding-top: 22px; border-top: 1px solid var(--v-line); }
:where(.cms-b-features.cms-v-numbered) .feature .icon-box { display: none; }
:where(.cms-b-features.cms-v-numbered) .feature::before { content: counter(feat, decimal-leading-zero); display: block; margin-bottom: 14px; font-family: var(--font-heading, inherit); font-size: clamp(2.25rem, 1.6rem + 2.4vw, 3.5rem); font-weight: 700; letter-spacing: -.04em; line-height: 1; color: var(--v-accent); }
:where(.cms-b-features.cms-v-numbered) .feature-list .feature::before { grid-row: 1 / span 2; margin: 0; min-width: 2.2ch; }

/* ================= kpis, stats ================= */
:where(.cms-b-kpis.cms-v-band, .cms-b-stats.cms-v-band).section { background: var(--v-text); color: var(--v-bg); }
:where(.cms-b-kpis.cms-v-band, .cms-b-stats.cms-v-band):is(.bg-surface, .cms-bg-tint, .cms-bg-dark):not(.cms-sec) { background: var(--v-text); color: var(--v-bg); }
:where(.cms-b-kpis.cms-v-band, .cms-b-stats.cms-v-band) :is(h2, .lead, .kpi__value, .kpi__label, .kpi__text) { color: inherit; }
:where(.cms-b-kpis.cms-v-band, .cms-b-stats.cms-v-band) :is(.lead, .kpi__label, .kpi__text) { opacity: .78; }
:where(.cms-b-kpis.cms-v-band, .cms-b-stats.cms-v-band) :is(.eyebrow, .accent, .kpi__unit) { color: var(--v-accent-light); }
:where(.cms-b-kpis.cms-v-band, .cms-b-stats.cms-v-band) .kpi { border-top-color: var(--v-inv); }
:where(.cms-b-kpis.cms-v-band, .cms-b-stats.cms-v-band) .kpi__value { font-size: clamp(3.25rem, 2rem + 5.5vw, 6.5rem); line-height: 1; }
:where(.cms-b-kpis.cms-v-band, .cms-b-stats.cms-v-band) .icon-box { background: transparent; color: var(--v-accent-light); box-shadow: inset 0 0 0 1px var(--v-inv); }
:where(.cms-b-kpis.cms-v-inline, .cms-b-stats.cms-v-inline) .grid-lines[class] { display: flex; flex-wrap: wrap; gap: 24px 0; }
:where(.cms-b-kpis.cms-v-inline, .cms-b-stats.cms-v-inline) .kpi { flex: 1 1 160px; padding: 4px 28px; border-top: 0; border-left: 1px solid var(--v-line); gap: 2px; }
:where(.cms-b-kpis.cms-v-inline, .cms-b-stats.cms-v-inline) .kpi:first-child { padding-left: 0; border-left: 0; }
:where(.cms-b-kpis.cms-v-inline, .cms-b-stats.cms-v-inline) .kpi__value { font-size: clamp(1.75rem, 1.2rem + 2vw, 2.75rem); }
:where(.cms-b-kpis.cms-v-inline, .cms-b-stats.cms-v-inline) .icon-box { display: none; }
@media (max-width: 599px) {
  :where(.cms-b-kpis.cms-v-inline, .cms-b-stats.cms-v-inline) .kpi { flex-basis: 45%; padding-inline: 16px; }
  :where(.cms-b-kpis.cms-v-inline, .cms-b-stats.cms-v-inline) .kpi:nth-child(odd) { padding-left: 0; border-left: 0; }
}

/* ================= pricing (compact = CSS, table = eri HTML) ================= */
:where(.cms-b-pricing.cms-v-compact) .grid-lines[class] { grid-template-columns: minmax(0, 1fr); gap: 14px; }
:where(.cms-b-pricing.cms-v-compact) .pricing-card { padding: 20px 24px; }
:where(.cms-b-pricing.cms-v-compact) .pricing-card__list { display: none; }
:where(.cms-b-pricing.cms-v-compact) .pricing-card__price { margin: 14px 0; padding: 0; border: 0; font-size: 1.75rem; }
:where(.cms-b-pricing.cms-v-compact) .pricing-card__price small { display: inline; margin: 0 6px 0 0; }
:where(.cms-b-pricing.cms-v-compact) .btn-block { display: inline-flex; width: auto; }
@media (min-width: 760px) {
  :where(.cms-b-pricing.cms-v-compact) .pricing-card { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto; align-items: center; column-gap: 32px; }
  :where(.cms-b-pricing.cms-v-compact) .pricing-card__price { margin: 0; text-align: left; }
}
:where(.cms-b-pricing.cms-v-table) .table-wrap { position: relative; overflow-x: auto; -webkit-overflow-scrolling: touch; }
:where(.cms-b-pricing.cms-v-table) .pricing-table { width: 100%; min-width: 560px; border-collapse: collapse; text-align: center; }
:where(.cms-b-pricing.cms-v-table) .pricing-table :is(th, td) { padding: 14px 16px; border-bottom: 1px solid var(--v-line); vertical-align: middle; }
:where(.cms-b-pricing.cms-v-table) .pricing-table tbody th[scope="row"] { text-align: left; font-weight: 500; }
:where(.cms-b-pricing.cms-v-table) .pricing-table[class] thead th { vertical-align: top; padding-block: 22px; font-size: 1rem; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--v-text); }
:where(.cms-b-pricing.cms-v-table) .pricing-table__name { display: block; font-family: var(--font-heading, inherit); font-size: 1.25rem; font-weight: 700; letter-spacing: -.012em; }
:where(.cms-b-pricing.cms-v-table) .pricing-table__price { display: block; margin-top: 10px; font-family: var(--font-heading, inherit); font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.25rem); font-weight: 700; letter-spacing: -.03em; line-height: 1.1; }
:where(.cms-b-pricing.cms-v-table) .pricing-table__price small { display: block; font: 600 .75rem/1.4 var(--font-body, inherit); letter-spacing: .06em; text-transform: uppercase; color: var(--v-muted); }
:where(.cms-b-pricing.cms-v-table) .pricing-card__unit { display: block; font: 500 .875rem/1.4 var(--font-body, inherit); letter-spacing: 0; color: var(--v-muted); }
:where(.cms-b-pricing.cms-v-table) .pricing-table__tier.is-featured { background: var(--v-soft); box-shadow: inset 0 3px 0 var(--v-accent); }
:where(.cms-b-pricing.cms-v-table) .pricing-table td.is-yes { color: var(--v-accent); font-weight: 700; }
:where(.cms-b-pricing.cms-v-table) .pricing-table td.is-no { color: var(--v-muted); opacity: .6; }
:where(.cms-b-pricing.cms-v-table) .pricing-table tfoot th, :where(.cms-b-pricing.cms-v-table) .pricing-table tfoot td { border-bottom: 0; padding-top: 22px; }

/* ================= process ================= */
:where(.cms-b-process.cms-v-vertical) .process-steps { grid-template-columns: minmax(0, 1fr); gap: 0; max-width: 720px; }
:where(.cms-b-process.cms-v-vertical) .process-step { margin: 0 0 0 18px; padding: 0 0 36px 52px; border-top: 0; border-left: 1px solid var(--v-line); }
:where(.cms-b-process.cms-v-vertical) .process-step:last-child { padding-bottom: 0; border-left-color: transparent; }
:where(.cms-b-process.cms-v-vertical) .process-step::before { left: -19px; top: -4px; width: 38px; height: 38px; font-size: 1rem; }
:where(.cms-b-process.cms-v-cards) .process-steps { grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 20px; }
:where(.cms-b-process.cms-v-cards) .process-step { display: flex; flex-direction: column; margin: 0; padding: 26px; border: 1px solid var(--v-line); border-radius: var(--v-radius); background: var(--v-bg); }
:where(.cms-b-process.cms-v-cards) .process-step:last-child { border-top-color: var(--v-line); }
:where(.cms-b-process.cms-v-cards) .process-step::before { position: static; margin-bottom: 18px; width: 38px; height: 38px; font-size: 1rem; }

/* ================= timeline ================= */
@media (min-width: 800px) {
  :where(.cms-b-timeline.cms-v-alternate) .cms-timeline__item { display: block; box-sizing: border-box; width: 50%; margin-left: 0; padding: 0 2.75rem 2.25rem 0; text-align: right; grid-template-columns: none; }
  :where(.cms-b-timeline.cms-v-alternate) .cms-timeline__item:nth-child(even) { margin-left: 50%; padding: 0 0 2.25rem 2.75rem; text-align: left; }
  :where(.cms-b-timeline.cms-v-alternate) .cms-timeline__date { display: block; padding-top: 0; text-align: inherit; }
  :where(.cms-b-timeline.cms-v-alternate) .cms-timeline__body p { margin-inline: 0; }
  :where(.cms-b-timeline.cms-v-alternate) .cms-timeline__item:nth-child(odd) .cms-timeline__body p { margin-left: auto; }
  :where(.cms-b-timeline.cms-v-alternate) .cms-timeline__item::before { left: auto; right: -1px; }
  :where(.cms-b-timeline.cms-v-alternate) .cms-timeline__item::after { left: auto; right: -6px; }
  :where(.cms-b-timeline.cms-v-alternate) .cms-timeline__item:nth-child(even)::before { right: auto; left: -1px; }
  :where(.cms-b-timeline.cms-v-alternate) .cms-timeline__item:nth-child(even)::after { right: auto; left: -6px; }
}
:where(.cms-b-timeline.cms-v-horizontal) .cms-timeline__list { display: flex; gap: 0; overflow-x: auto; padding-bottom: 1rem; scroll-snap-type: x proximity; }
:where(.cms-b-timeline.cms-v-horizontal) .cms-timeline__item { display: block; flex: 0 0 min(270px, 78%); padding: 2rem 1.75rem 0 0; scroll-snap-align: start; grid-template-columns: none; }
:where(.cms-b-timeline.cms-v-horizontal) .cms-timeline__item:last-child { padding-bottom: 0; }
:where(.cms-b-timeline.cms-v-horizontal) .cms-timeline__item::before { display: block; left: 0; right: 0; top: 6px; bottom: auto; width: auto; height: 2px; }
:where(.cms-b-timeline.cms-v-horizontal) .cms-timeline__item::after { left: 0; top: 0; }
:where(.cms-b-timeline.cms-v-horizontal) .cms-timeline__date { display: block; padding-top: 0; text-align: left; }

/* ================= faq, accordion ================= */
:where(.cms-b-faq.cms-v-boxed, .cms-b-accordion.cms-v-boxed) .faq[class] { display: grid; gap: 12px; border-top: 0; }
:where(.cms-b-faq.cms-v-boxed, .cms-b-accordion.cms-v-boxed) .faq__item { padding-inline: 22px; border: 1px solid var(--v-line); border-radius: var(--v-radius); background: var(--v-tile); }
:where(.cms-b-faq.cms-v-boxed, .cms-b-accordion.cms-v-boxed) .faq__q { padding-block: 18px; }
:where(.cms-b-faq.cms-v-boxed, .cms-b-accordion.cms-v-boxed) .faq__a { padding-right: 0; }
:where(.cms-b-faq.cms-v-open-grid, .cms-b-accordion.cms-v-open-grid) .faq[class] { display: grid; gap: 0 56px; }
:where(.cms-b-faq.cms-v-open-grid, .cms-b-accordion.cms-v-open-grid) .faq__q { padding-bottom: 8px; pointer-events: none; cursor: default; }
:where(.cms-b-faq.cms-v-open-grid, .cms-b-accordion.cms-v-open-grid) .faq__q:hover { color: inherit; }
:where(.cms-b-faq.cms-v-open-grid, .cms-b-accordion.cms-v-open-grid) .faq__icon { display: none; }
:where(.cms-b-faq.cms-v-open-grid, .cms-b-accordion.cms-v-open-grid) .faq__a { padding-right: 0; padding-bottom: 22px; }
:where(.cms-b-faq.cms-v-open-grid).faq-layout { display: block; }
:where(.cms-b-faq.cms-v-open-grid).faq-layout > .section-head { position: static; margin-bottom: clamp(32px, 4vw, 52px); }
@media (min-width: 800px) {
  :where(.cms-b-faq.cms-v-open-grid, .cms-b-accordion.cms-v-open-grid) .faq[class] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ================= testimonials ================= */
:where(.cms-b-testimonials.cms-v-featured) .testimonial-card { padding: 22px; gap: 18px; }
:where(.cms-b-testimonials.cms-v-featured) .testimonial-card__quote { font-size: 1rem; }
:where(.cms-b-testimonials.cms-v-featured) .testimonial-card:first-child { grid-column: 1 / -1; align-items: center; padding: clamp(16px, 3vw, 32px) 0 clamp(24px, 4vw, 40px); border: 0; background: transparent; box-shadow: none; text-align: center; }
:where(.cms-b-testimonials.cms-v-featured) .testimonial-card:first-child .testimonial-card__quote { max-width: 34ch; margin-inline: auto; font-size: clamp(1.5rem, 1.05rem + 1.8vw, 2.375rem); line-height: 1.3; letter-spacing: -.02em; }
:where(.cms-b-testimonials.cms-v-featured) .testimonial-card:first-child .testimonial-card__quote::before { margin-inline: auto; }
:where(.cms-b-testimonials.cms-v-featured) .testimonial-card:first-child .testimonial-card__person { justify-content: center; text-align: left; }
:where(.cms-b-testimonials.cms-v-scroller) .grid-lines[class] { display: flex; gap: 20px; overflow-x: auto; padding-bottom: 14px; scroll-snap-type: x mandatory; }
:where(.cms-b-testimonials.cms-v-scroller) .testimonial-card { flex: 0 0 min(360px, 86%); scroll-snap-align: start; }

/* ================= cases ================= */
:where(.cms-b-cases.cms-v-cards) .case-list { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 24px; }
:where(.cms-b-cases.cms-v-cards) .case-row { display: flex; flex-direction: column; padding: 28px; border: 1px solid var(--v-line); border-radius: var(--v-radius); background: var(--v-bg); }
:where(.cms-b-cases.cms-v-cards) .case-row:last-child { border-bottom: 1px solid var(--v-line); }
:where(.cms-b-cases.cms-v-cards) .case-row__visual { display: none; }
:where(.cms-b-cases.cms-v-cards) .case-row .link-arrow { margin-top: auto; padding-top: 22px; }
:where(.cms-b-cases.cms-v-minimal) .case-row { padding-block: 22px; gap: 0; }
:where(.cms-b-cases.cms-v-minimal) :is(.case-row__visual, .case-row__text, .tag-list) { display: none; }
:where(.cms-b-cases.cms-v-minimal) .case-row__client { margin-bottom: 6px; }
:where(.cms-b-cases.cms-v-minimal) .case-row__title { font-size: clamp(1.25rem, 1.05rem + .8vw, 1.625rem); }
:where(.cms-b-cases.cms-v-minimal) .case-row .link-arrow { margin-top: 10px; }
@media (min-width: 800px) {
  :where(.cms-b-cases.cms-v-minimal) .case-row { grid-template-columns: minmax(0, 1fr); }
  :where(.cms-b-cases.cms-v-minimal) .case-row__body { display: grid; grid-template-columns: 13rem minmax(0, 1fr) auto; column-gap: 32px; align-items: baseline; }
  :where(.cms-b-cases.cms-v-minimal) .case-row__client { margin: 0; }
  :where(.cms-b-cases.cms-v-minimal) .case-row .link-arrow { margin: 0; }
}

/* ================= team ================= */
:where(.cms-b-team.cms-v-list) .grid-lines[class] { grid-template-columns: minmax(0, 1fr); gap: 0; }
:where(.cms-b-team.cms-v-list) .team-card { padding: 22px 0; border-width: 1px 0 0; border-radius: 0; background: transparent; box-shadow: none; }
:where(.cms-b-team.cms-v-list) .grid-lines > .team-card:last-child { border-bottom: 1px solid var(--v-line); }
:where(.cms-b-team.cms-v-list) .team-card__avatar { margin: 0; }
@media (min-width: 720px) {
  :where(.cms-b-team.cms-v-list) .team-card { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 22px; align-items: center; }
  :where(.cms-b-team.cms-v-list) .team-card__avatar { grid-row: 1 / span 2; }
  :where(.cms-b-team.cms-v-list) .team-card__name { grid-column: 2; align-self: end; }
  :where(.cms-b-team.cms-v-list) .team-card__role { grid-column: 2; grid-row: 2; align-self: start; margin: 0; }
  :where(.cms-b-team.cms-v-list) .contact-list { grid-column: 3; grid-row: 1 / span 2; margin: 0; }
}
:where(.cms-b-team.cms-v-compact) .grid-lines[class] { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 28px 16px; }
:where(.cms-b-team.cms-v-compact) .team-card { align-items: center; padding: 0; border: 0; background: transparent; box-shadow: none; text-align: center; }
:where(.cms-b-team.cms-v-compact) .team-card__avatar { width: 56px; height: 56px; margin-bottom: 12px; font-size: 1rem; }
:where(.cms-b-team.cms-v-compact) .team-card__name { font-size: 1rem; }
:where(.cms-b-team.cms-v-compact) .contact-list { display: none; }

/* ================= cta_band (`.cta-band` on sama elementti kuin juuri) ================= */
:where(.cms-b-cta_band.cms-v-centered) .cta-band__art { display: none; }
:where(.cms-b-cta_band.cms-v-centered) .cta-band__inner { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
:where(.cms-b-cta_band.cms-v-centered) .cta-band__text p { margin-inline: auto; }
:where(.cms-b-cta_band.cms-v-centered) .cta-band__actions { align-items: center; justify-self: center; }
:where(.cms-b-cta_band.cms-v-centered) .btn-group { justify-content: center; }
:where(.cms-b-cta_band.cms-v-card).cta-band { padding: clamp(28px, 4vw, 48px); border: 1px solid var(--v-line); border-radius: var(--v-radius); background: var(--v-tile); color: var(--v-text); box-shadow: var(--v-shadow); }
:where(.cms-b-cta_band.cms-v-card).cta-band.cta-band__art { display: none; }
:where(.cms-b-cta_band.cms-v-card).cta-band.cta-band__inner { max-width: var(--shell, 1160px); margin-inline: auto; }
:where(.cms-b-cta_band.cms-v-card).cta-bandh2 { font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.125rem); }
:where(.cms-b-cta_band.cms-v-card).cta-band:is(.eyebrow, .accent) { color: var(--v-accent); }
:where(.cms-b-cta_band.cms-v-card).cta-band.cta-band__text p, :where(.cms-b-cta_band.cms-v-card).cta-band.cta-band__note { color: var(--v-muted); }
:where(.cms-b-cta_band.cms-v-card).cta-band.btn-primary { background: var(--v-accent); border-color: var(--v-accent); color: var(--v-accent-ink); }
:where(.cms-b-cta_band.cms-v-card).cta-band:is(.btn-ghost-dark, .btn-ghost) { background: transparent; border-color: var(--v-line); color: var(--v-text); }
:where(.cms-b-cta_band.cms-v-card).cta-band--primary { border-color: transparent; background: var(--v-accent); color: var(--v-accent-ink); }
:where(.cms-b-cta_band.cms-v-card).cta-band--primary :is(.eyebrow, .accent, .cta-band__text p, .cta-band__note) { color: inherit; }
:where(.cms-b-cta_band.cms-v-card).cta-band--primary .btn-primary { background: var(--v-accent-ink); border-color: var(--v-accent-ink); color: var(--v-accent); }
:where(.cms-b-cta_band.cms-v-card).cta-band--primary :is(.btn-ghost-dark, .btn-ghost) { border-color: var(--v-inv); color: inherit; }

/* ================= image_text ================= */
@media (min-width: 900px) {
  :where(.cms-b-image_text.cms-v-overlap) .section__inner { max-width: var(--shell, 1160px); }
  :where(.cms-b-image_text.cms-v-overlap) .cms-split { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0; align-items: center; }
  :where(.cms-b-image_text.cms-v-overlap) .cms-split__media { grid-column: 1 / span 8; grid-row: 1; }
  :where(.cms-b-image_text.cms-v-overlap) .cms-split__body { grid-column: 7 / span 6; grid-row: 1; position: relative; z-index: 1; padding: clamp(28px, 3.5vw, 48px); border-radius: var(--v-radius); background: var(--v-bg); box-shadow: var(--v-shadow); }
  :where(.cms-b-image_text.cms-v-overlap) .cms-split--right .cms-split__media { grid-column: 5 / span 8; order: 0; }
  :where(.cms-b-image_text.cms-v-overlap) .cms-split--right .cms-split__body { grid-column: 1 / span 6; }
}
@media (max-width: 899px) {
  :where(.cms-b-image_text.cms-v-overlap) .cms-split__body { position: relative; margin: -36px 16px 0; padding: 24px; border-radius: var(--v-radius); background: var(--v-bg); box-shadow: var(--v-shadow); }
}
:where(.cms-b-image_text.cms-v-full-bleed) .cms-img, :where(.cms-b-image_text.cms-v-full-bleed) .cms-img-empty { border-radius: 0; }
:where(.cms-b-image_text.cms-v-full-bleed) .section__inner { max-width: none; padding-inline: 0; }
@media (min-width: 900px) {
  :where(.cms-b-image_text.cms-v-full-bleed).section { padding-inline: 0; }
  :where(.cms-b-image_text.cms-v-full-bleed) .cms-split { gap: 0; align-items: stretch; }
  :where(.cms-b-image_text.cms-v-full-bleed) .cms-split__media .cms-img, :where(.cms-b-image_text.cms-v-full-bleed) .cms-split__media .cms-img-empty { height: 100%; min-height: 380px; aspect-ratio: auto; }
  :where(.cms-b-image_text.cms-v-full-bleed) .cms-split__body { align-self: center; padding: 0 clamp(32px, 6vw, 88px) 0 var(--side, 32px); }
  :where(.cms-b-image_text.cms-v-full-bleed) .cms-split--right .cms-split__body { padding: 0 var(--side, 32px) 0 clamp(32px, 6vw, 88px); }
}

/* ================= gallery ================= */
:where(.cms-b-gallery.cms-v-masonry) .cms-gallery { display: block; column-count: 1; column-gap: 16px; }
:where(.cms-b-gallery.cms-v-masonry) .cms-gallery__item { margin-bottom: 16px; break-inside: avoid; }
:where(.cms-b-gallery.cms-v-masonry) .cms-gallery__item .cms-img { aspect-ratio: auto; height: auto; }
:where(.cms-b-gallery.cms-v-masonry) .cms-gallery__item:nth-child(3n + 2) .cms-img-empty { aspect-ratio: 3 / 4; }
:where(.cms-b-gallery.cms-v-masonry) .cms-gallery__item:nth-child(3n) .cms-img-empty { aspect-ratio: 1; }
@media (min-width: 560px) { :where(.cms-b-gallery.cms-v-masonry) .cms-gallery { column-count: 2; } }
@media (min-width: 900px) { :where(.cms-b-gallery.cms-v-masonry) .cms-gallery--3 { column-count: 3; } :where(.cms-b-gallery.cms-v-masonry) .cms-gallery--4 { column-count: 4; } }
:where(.cms-b-gallery.cms-v-featured) .cms-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
:where(.cms-b-gallery.cms-v-featured) .cms-gallery__item:first-child { grid-column: 1 / -1; }
:where(.cms-b-gallery.cms-v-featured) .cms-gallery__item .cms-img, :where(.cms-b-gallery.cms-v-featured) .cms-gallery__item .cms-img-empty { aspect-ratio: 1; }
:where(.cms-b-gallery.cms-v-featured) .cms-gallery__item:first-child .cms-img, :where(.cms-b-gallery.cms-v-featured) .cms-gallery__item:first-child .cms-img-empty { aspect-ratio: 16 / 9; }
@media (min-width: 900px) {
  :where(.cms-b-gallery.cms-v-featured) .cms-gallery[class] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  :where(.cms-b-gallery.cms-v-featured) .cms-gallery__item:first-child { grid-column: span 2; grid-row: span 2; }
  :where(.cms-b-gallery.cms-v-featured) .cms-gallery__item:first-child .cms-img, :where(.cms-b-gallery.cms-v-featured) .cms-gallery__item:first-child .cms-img-empty { aspect-ratio: 1; }
}

/* ================= image_cards ================= */
:where(.cms-b-image_cards.cms-v-overlay) .cms-card { position: relative; min-height: 300px; padding: 0; border: 0; background: #101216; color: #fff; }
:where(.cms-b-image_cards.cms-v-overlay) .cms-card__media { position: absolute; inset: 0; }
:where(.cms-b-image_cards.cms-v-overlay) .cms-card__media :is(.cms-img, .cms-img-empty) { width: 100%; height: 100%; aspect-ratio: auto; }
:where(.cms-b-image_cards.cms-v-overlay) .cms-card__body { position: relative; z-index: 1; flex: 1; justify-content: flex-end; padding-top: 96px; background: linear-gradient(0deg, rgba(8, 10, 14, .88), rgba(8, 10, 14, .55) 55%, rgba(8, 10, 14, 0)); }
:where(.cms-b-image_cards.cms-v-overlay) .cms-card__body :is(h3, p) { color: #fff; }
:where(.cms-b-image_cards.cms-v-overlay) .cms-card__body p { opacity: .88; }
:where(.cms-b-image_cards.cms-v-overlay) .cms-card__body .link-arrow { color: #fff; }
:where(.cms-b-image_cards.cms-v-horizontal) .cms-cards[class] { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { :where(.cms-b-image_cards.cms-v-horizontal) .cms-cards[class] { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 560px) {
  :where(.cms-b-image_cards.cms-v-horizontal) .cms-card { flex-direction: row; }
  :where(.cms-b-image_cards.cms-v-horizontal) .cms-card__media { flex: 0 0 40%; }
  :where(.cms-b-image_cards.cms-v-horizontal) .cms-card__media :is(.cms-img, .cms-img-empty) { height: 100%; aspect-ratio: auto; min-height: 180px; }
  :where(.cms-b-image_cards.cms-v-horizontal) .cms-card__body { justify-content: center; padding: 22px; }
}

/* ================= logo_grid ================= */
:where(.cms-b-logo_grid.cms-v-color) .cms-logos__item .cms-img { filter: none; opacity: 1; }
:where(.cms-b-logo_grid.cms-v-color) .cms-logos__item { padding: 18px 20px; border: 1px solid var(--v-line); border-radius: var(--v-radius); background: var(--v-bg); }
:where(.cms-b-logo_grid.cms-v-badges) .cms-logos { gap: 14px; }
:where(.cms-b-logo_grid.cms-v-badges) .cms-logos__item { flex-direction: column; gap: 8px; min-height: 0; padding: 16px 12px; border: 1px solid var(--v-line); border-radius: var(--v-radius); background: var(--v-tile); text-align: center; }
:where(.cms-b-logo_grid.cms-v-badges) .cms-logos__item .cms-img { max-height: 36px; filter: none; opacity: 1; }
:where(.cms-b-logo_grid.cms-v-badges) .cms-logos__label { font-size: .8125rem; font-weight: 600; line-height: 1.3; color: var(--v-muted); }

/* ================= carousel ================= */
:where(.cms-b-carousel.cms-v-wide) .cms-car__item { flex-basis: min(86%, 560px); }
:where(.cms-b-carousel.cms-v-wide) .cms-car__card { position: relative; border: 0; background: #101216; color: #fff; }
:where(.cms-b-carousel.cms-v-wide) .cms-car__media :is(.cms-img, .cms-img-empty) { aspect-ratio: 16 / 9; }
:where(.cms-b-carousel.cms-v-wide) .cms-car__body { position: absolute; inset: auto 0 0 0; padding: 56px 20px 18px; background: linear-gradient(0deg, rgba(8, 10, 14, .88), rgba(8, 10, 14, 0)); }
:where(.cms-b-carousel.cms-v-wide) .cms-car__body :is(h3, p, .link-arrow) { color: #fff; }
:where(.cms-b-carousel.cms-v-wide) .cms-car__body p { opacity: .9; }
:where(.cms-b-carousel.cms-v-compact) .cms-car__item { flex-basis: 112px; }
:where(.cms-b-carousel.cms-v-compact) .cms-car__card { align-items: center; border: 0; background: none; text-align: center; color: inherit; }
:where(.cms-b-carousel.cms-v-compact) .cms-car__media { width: 100%; }
:where(.cms-b-carousel.cms-v-compact) .cms-car__media :is(.cms-img, .cms-img-empty) { aspect-ratio: 1 / 1; border-radius: 50%; min-height: 0; }
:where(.cms-b-carousel.cms-v-compact) .cms-car__body { align-items: center; padding: 10px 4px 0; }
:where(.cms-b-carousel.cms-v-compact) .cms-car__body :is(p, .link-arrow) { display: none; }
:where(.cms-b-carousel.cms-v-compact) .cms-car__body h3 { font-size: .9375rem; }
@media (min-width: 900px) { :where(.cms-b-carousel.cms-v-compact) .cms-car__item { flex-basis: 132px; } }

/* ================= locations ================= */
:where(.cms-b-locations.cms-v-list) .cms-loc__list { grid-template-columns: minmax(0, 1fr); gap: 0; border-top: 1px solid var(--v-line); }
:where(.cms-b-locations.cms-v-list) .cms-loc__item { border: 0; border-bottom: 1px solid var(--v-line); border-radius: 0; background: none; }
:where(.cms-b-locations.cms-v-list) .cms-loc__media { display: none; }
:where(.cms-b-locations.cms-v-list) .cms-loc__body { padding: 16px 4px; }
@media (min-width: 1100px) {
  :where(.cms-b-locations.cms-v-list) .cms-loc__body { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.3fr) minmax(0, 1fr) auto; column-gap: 24px; row-gap: 2px; align-items: center; }
  :where(.cms-b-locations.cms-v-list) .cms-loc__body h3 { grid-column: 1; grid-row: 1; }
  :where(.cms-b-locations.cms-v-list) .cms-loc__meta { grid-column: 1; grid-row: 2; }
  :where(.cms-b-locations.cms-v-list) .cms-loc__addr { grid-column: 2; grid-row: 1 / span 2; }
  :where(.cms-b-locations.cms-v-list) .cms-loc__hours { grid-column: 3; grid-row: 1 / span 2; }
  :where(.cms-b-locations.cms-v-list) .cms-loc__acts { grid-column: 4; grid-row: 1 / span 2; margin: 0; padding: 0; }
}
:where(.cms-b-locations.cms-v-split) .cms-loc__item { flex-direction: row; }
:where(.cms-b-locations.cms-v-split) .cms-loc__media { display: none; }
:where(.cms-b-locations.cms-v-split) .cms-loc__body { padding: 16px 18px; }
:where(.cms-b-locations.cms-v-split) .cms-loc__list { gap: 12px; }

/* ================= map ================= */
:where(.cms-b-map.cms-v-full) .cms-map__wrap { display: block; position: relative; }
:where(.cms-b-map.cms-v-full) .cms-map__info { margin-bottom: 16px; }
@media (min-width: 900px) {
  :where(.cms-b-map.cms-v-full:not(.cms-map--noframe)) .cms-map__info { position: absolute; z-index: 2; left: 24px; bottom: 24px; max-width: 340px; margin: 0; padding: 22px 24px; border-radius: var(--v-radius); background: var(--v-bg); color: var(--v-text); box-shadow: var(--v-shadow); }
  :where(.cms-b-map.cms-v-full) .cms-map__embed { height: calc(var(--p1-map-h, 380px) + 80px); }
  :where(.cms-b-map.cms-v-full:not(.cms-map--noframe)) .cms-map__embed .cms-embed__gate { padding-left: 390px; }
}
:where(.cms-b-map.cms-v-stack) .cms-map__wrap { grid-template-columns: minmax(0, 1fr); gap: 20px; }
@media (min-width: 720px) {
  :where(.cms-b-map.cms-v-stack) .cms-map__info { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 12px 32px; padding-bottom: 4px; border-bottom: 1px solid var(--v-line); }
}

/* ================= reviews ================= */
@media (min-width: 900px) {
  :where(.cms-b-reviews.cms-v-summary:has(.cms-rev__sum)) .section__inner { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 0 40px; align-items: start; }
  :where(.cms-b-reviews.cms-v-summary:has(.cms-rev__sum)) .section-head { grid-column: 1 / -1; }
  :where(.cms-b-reviews.cms-v-summary:has(.cms-rev__sum)) .cms-rev__sum { flex-direction: column; align-items: flex-start; margin: 0; padding: 24px; border: 1px solid var(--v-line); border-radius: var(--v-radius); background: var(--v-tile); }
}
:where(.cms-b-reviews.cms-v-summary) .cms-rev__list { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 600px) {
  :where(.cms-b-reviews.cms-v-summary) .cms-rev__card { flex-direction: row; flex-wrap: wrap; align-items: flex-start; }
  :where(.cms-b-reviews.cms-v-summary) .cms-rev__card blockquote { flex: 1 1 60%; }
}
:where(.cms-b-reviews.cms-v-spotlight) .section__inner { display: flex; flex-direction: column; }
:where(.cms-b-reviews.cms-v-spotlight) .cms-rev__sum { order: 2; justify-content: center; margin: 28px 0 0; }
:where(.cms-b-reviews.cms-v-spotlight) .cms-rev__list { max-width: 46rem; margin-inline: auto; grid-template-columns: minmax(0, 1fr); text-align: center; }
:where(.cms-b-reviews.cms-v-spotlight) .cms-rev__card { align-items: center; border: 0; background: none; padding: 8px 0; }
:where(.cms-b-reviews.cms-v-spotlight) .cms-rev__card blockquote { font-size: clamp(1.25rem, 2.6vw, 1.75rem); line-height: 1.4; }
:where(.cms-b-reviews.cms-v-spotlight) .cms-stars { font-size: 1.5rem; }
:where(.cms-b-reviews.cms-v-spotlight) .cms-rev__who { justify-content: center; text-align: left; }

/* ================= feature_rows ================= */
:where(.cms-b-feature_rows.cms-v-inset) .cms-fr__list { gap: 24px; }
:where(.cms-b-feature_rows.cms-v-inset) .cms-fr__row { padding: clamp(18px, 3vw, 32px); border: 1px solid var(--v-line); border-radius: var(--v-radius); background: var(--v-tile); }
:where(.cms-b-feature_rows.cms-v-numbered) .cms-fr__list { gap: 0; }
:where(.cms-b-feature_rows.cms-v-numbered) .cms-fr__row { padding: 32px 0; border-top: 1px solid var(--v-hair); }
:where(.cms-b-feature_rows.cms-v-numbered) .cms-fr__row::before { content: counter(cms-fr, decimal-leading-zero); font: 800 clamp(2rem, 5vw, 3.25rem)/1 var(--font-heading, inherit); color: var(--v-accent); }
@media (min-width: 800px) {
  :where(.cms-b-feature_rows.cms-v-numbered) .cms-fr__row { grid-template-columns: 110px minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
  :where(.cms-b-feature_rows.cms-v-numbered) .cms-fr__row--rev .cms-fr__media { order: 0; }
  :where(.cms-b-feature_rows.cms-v-numbered) .cms-fr__media { grid-column: 3; grid-row: 1; }
  :where(.cms-b-feature_rows.cms-v-numbered) .cms-fr__body { grid-column: 2; grid-row: 1; }
}

/* ================= events (M4 / P2) ================= */
:where(.cms-b-events.cms-v-cards) .cms-ev__list { grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 16px; }
:where(.cms-b-events.cms-v-cards) .cms-ev__item { grid-template-columns: minmax(0, 1fr); align-content: start; padding: 0; overflow: hidden; box-shadow: var(--v-shadow); }
:where(.cms-b-events.cms-v-cards) .cms-ev__day { flex-direction: row; justify-content: flex-start; align-items: baseline; gap: 8px; min-width: 0; padding: 14px 20px; border-radius: 0; }
:where(.cms-b-events.cms-v-cards) .cms-ev__day b { font-size: 2.5rem; }
:where(.cms-b-events.cms-v-cards) .cms-ev__day span { margin: 0; font-size: .875rem; }
:where(.cms-b-events.cms-v-cards) .cms-ev__body { padding: 4px 20px 0; }
:where(.cms-b-events.cms-v-cards) .cms-ev__side { grid-column: auto; justify-content: flex-start; padding: 0 20px 18px; }
:where(.cms-b-events.cms-v-cards) .cms-ev__item:not(:has(.cms-ev__day)) .cms-ev__body { padding-top: 18px; }
:where(.cms-b-events.cms-v-compact) .cms-ev__list { gap: 0; border-top: 1px solid var(--v-line); }
:where(.cms-b-events.cms-v-compact) .cms-ev__item { grid-template-columns: minmax(0, 1fr); gap: 2px 18px; padding: 12px 4px; border: 0; border-bottom: 1px solid var(--v-line); border-radius: 0; background: none; }
:where(.cms-b-events.cms-v-compact) .cms-ev__day, :where(.cms-b-events.cms-v-compact) .cms-ev__place, :where(.cms-b-events.cms-v-compact) .cms-ev__text { display: none; }
:where(.cms-b-events.cms-v-compact) .cms-ev__body { display: flex; flex-direction: column; }
:where(.cms-b-events.cms-v-compact) .cms-ev__when { order: -1; color: var(--v-accent); font-size: .875rem; }
:where(.cms-b-events.cms-v-compact) .cms-ev__side { grid-column: auto; }
@media (min-width: 720px) {
  :where(.cms-b-events.cms-v-compact) .cms-ev__item { grid-template-columns: 15rem minmax(0, 1fr) auto; align-items: baseline; }
  :where(.cms-b-events.cms-v-compact) .cms-ev__body { display: contents; }
  :where(.cms-b-events.cms-v-compact) .cms-ev__when { grid-column: 1; grid-row: 1; }
  :where(.cms-b-events.cms-v-compact) .cms-ev__body h3 { grid-column: 2; grid-row: 1; font-size: 1.0625rem; }
  :where(.cms-b-events.cms-v-compact) .cms-ev__side { grid-column: 3; grid-row: 1; }
}

/* ================= downloads (M4 / P2) ================= */
:where(.cms-b-downloads.cms-v-cards) .cms-dl__list { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 16px; }
:where(.cms-b-downloads.cms-v-cards) .cms-dl__item { grid-template-columns: minmax(0, 1fr); align-content: start; gap: 12px; padding: 22px; box-shadow: var(--v-shadow); }
:where(.cms-b-downloads.cms-v-cards) .cms-dl__type { width: 56px; height: 56px; border-radius: var(--v-radius); background: var(--v-soft); }
:where(.cms-b-downloads.cms-v-cards) .cms-dl__btn { grid-column: auto; justify-self: stretch; margin-top: 6px; justify-content: center; border-color: var(--v-accent); background: var(--v-accent); color: var(--v-accent-ink); text-align: center; }
:where(.cms-b-downloads.cms-v-compact) .cms-dl__list { display: flex; flex-wrap: wrap; gap: 10px; }
:where(.cms-b-downloads.cms-v-compact) .cms-dl__item { display: inline-flex; align-items: center; gap: 12px; padding: 6px 6px 6px 18px; border-radius: 999px; }
:where(.cms-b-downloads.cms-v-compact) .cms-dl__type, :where(.cms-b-downloads.cms-v-compact) .cms-dl__text, :where(.cms-b-downloads.cms-v-compact) .cms-dl__meta { display: none; }
:where(.cms-b-downloads.cms-v-compact) .cms-dl__body h3 { font-size: .9375rem; }
:where(.cms-b-downloads.cms-v-compact) .cms-dl__btn { padding: 6px 16px; border-radius: 999px; font-size: .875rem; }

/* ================= before_after (M4 / P2): liukusäädin on oletus, p2.js lukee mallin juuriluokasta ================= */
:where(.cms-b-before_after.cms-v-side) .cms-ba__stage { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
:where(.cms-b-before_after.cms-v-side) .cms-ba__lab { top: auto; bottom: 10px; }
:where(.cms-b-before_after.cms-v-toggle) .cms-ba__cap { text-align: center; }
:where(.cms-b-before_after.cms-v-toggle) .cms-ba__stage.is-toggle .cms-ba__lab { display: none; } /* skripti tekee nimistä painikkeet; ilman skriptiä nimet näkyvät kuvien päällä */

/* ================= toc (M4 / P2) ================= */
:where(.cms-b-toc.cms-v-pills) .cms-pgtoc__nav { max-width: none; padding: 0; border: 0; background: none; }
:where(.cms-b-toc.cms-v-pills) .cms-pgtoc__title { margin-bottom: 8px; color: var(--v-muted); font-size: .875rem; letter-spacing: .06em; text-transform: uppercase; }
:where(.cms-b-toc.cms-v-pills) .cms-pgtoc__list { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; list-style: none; }
:where(.cms-b-toc.cms-v-pills) .cms-pgtoc__list li { margin: 0; }
:where(.cms-b-toc.cms-v-pills) .cms-pgtoc__list ol { display: none; }
:where(.cms-b-toc.cms-v-pills) .cms-pgtoc__list a { display: inline-block; padding: 8px 16px; border: 1px solid var(--v-line); border-radius: 999px; background: var(--v-bg); text-decoration: none; font-size: .9375rem; }
:where(.cms-b-toc.cms-v-pills) .cms-pgtoc__list a:hover, :where(.cms-b-toc.cms-v-pills) .cms-pgtoc__list a[aria-current] { border-color: var(--v-accent); }
:where(.cms-b-toc.cms-v-rail) .cms-pgtoc__nav { max-width: 20rem; padding: 0 0 0 18px; border: 0; border-left: 3px solid var(--v-line); border-radius: 0; background: none; }
:where(.cms-b-toc.cms-v-rail) .cms-pgtoc__title { color: var(--v-muted); font-size: .875rem; letter-spacing: .06em; text-transform: uppercase; }
:where(.cms-b-toc.cms-v-rail) .cms-pgtoc__list, :where(.cms-b-toc.cms-v-rail) .cms-pgtoc__list ol { padding: 0; list-style: none; }
:where(.cms-b-toc.cms-v-rail) .cms-pgtoc__list ol { margin-left: 14px; }
:where(.cms-b-toc.cms-v-rail) .cms-pgtoc__list a { text-decoration: none; }
:where(.cms-b-toc.cms-v-rail) .cms-pgtoc__list a[aria-current] { margin-left: -21px; padding-left: 18px; border-left: 3px solid var(--v-accent); }

/* ================= opening_hours (M4 / P2) ================= */
:where(.cms-b-opening_hours.cms-v-card) .cms-oh__box { border: 0; background: #14161a; color: #fff; box-shadow: var(--v-shadow); }
:where(.cms-b-opening_hours.cms-v-card) .cms-oh__table :is(th, td) { border-color: rgba(255, 255, 255, .16); }
:where(.cms-b-opening_hours.cms-v-card) .cms-oh__table tr[aria-current="date"] :is(th, td) { color: var(--v-accent-light); }
:where(.cms-b-opening_hours.cms-v-card) .cms-oh__now { margin-bottom: 12px; padding: 0; background: none; color: #fff; font-size: 1.5rem; font-weight: 800; }
:where(.cms-b-opening_hours.cms-v-card) .cms-oh__now.is-closed { background: none; color: #ffb4a8; }
:where(.cms-b-opening_hours.cms-v-card) .cms-oh__exc { border-color: rgba(255, 255, 255, .16); color: #c4cad6; }
:where(.cms-b-opening_hours.cms-v-card) .cms-oh__exc-title { color: #fff; }
:where(.cms-b-opening_hours.cms-v-inline) .cms-oh__box { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; max-width: none; padding: 12px 18px; border-radius: var(--v-radius); }
:where(.cms-b-opening_hours.cms-v-inline) .cms-oh__now { margin: 0; }
:where(.cms-b-opening_hours.cms-v-inline) .cms-oh__table, :where(.cms-b-opening_hours.cms-v-inline) .cms-oh__table tbody { display: flex; flex-wrap: wrap; gap: 4px 20px; width: auto; }
:where(.cms-b-opening_hours.cms-v-inline) .cms-oh__table tr { display: flex; gap: 8px; }
:where(.cms-b-opening_hours.cms-v-inline) .cms-oh__table :is(th, td) { padding: 0; border: 0; }
:where(.cms-b-opening_hours.cms-v-inline) .cms-oh__table th { font-weight: 600; }
:where(.cms-b-opening_hours.cms-v-inline) .cms-oh__exc { margin: 0; padding: 0; border: 0; }
:where(.cms-b-opening_hours.cms-v-inline) .cms-oh__exc ul { display: flex; flex-wrap: wrap; gap: 2px 14px; }
:where(.cms-b-opening_hours.cms-v-inline) .cms-oh__exc-title { display: none; }

/* ================= author_box (M4 / P2) ================= */
:where(.cms-b-author_box.cms-v-card) .cms-ab__box { padding: 24px; border: 1px solid var(--v-line); border-radius: var(--v-radius); background: var(--v-bg); color: var(--v-text); box-shadow: var(--v-shadow); }
:where(.cms-b-author_box.cms-v-centered) .cms-ab__box { flex-direction: column; align-items: center; margin-inline: auto; max-width: 34rem; text-align: center; }
:where(.cms-b-author_box.cms-v-centered) .cms-ab__body { flex-basis: auto; }
:where(.cms-b-author_box.cms-v-centered) .cms-ab__links { justify-content: center; }

@media (prefers-reduced-motion: reduce) {
  :where(.cms-b-timeline.cms-v-horizontal) .cms-timeline__list, :where(.cms-b-testimonials.cms-v-scroller) .grid-lines { scroll-behavior: auto; }
  :where(.cms-b-services.cms-v-cards) .service-card:hover { transform: none; }
}