:root{--button-bg:var(--color-primary);--button-border:transparent;--button-fg:var(--color-onPrimary, #fff);--button-paddingX:30px;--button-paddingY:14px;--button-radius:8px;--button-style:solid;--button-weight:400;--card-border:1px;--card-radius:16px;--card-shadow:var(--shadow-card);--color-accent:var(--color-primary);--color-background:#ffffff;--color-border:#d5d9e0;--color-danger:#b3261e;--color-info:var(--color-primary);--color-muted:#5b6470;--color-onAccent:#ffffff;--color-onDanger:#ffffff;--color-onInfo:var(--color-onPrimary);--color-onPrimary:#ffffff;--color-onSuccess:#ffffff;--color-onWarning:#ffffff;--color-primary:#0055ff;--color-secondary:#1f2937;--color-success:#15803d;--color-surface:#f4f5f7;--color-text:#111111;--color-warning:#b45309;--font-body:Inter, system-ui, sans-serif;--font-heading:Inter, system-ui, sans-serif;--font-letterSpacing:0em;--font-lineHeight:1.65;--font-scale:1;--font-weight:400;--image-radius:8px;--link-color:var(--color-primary);--link-decoration:underline;--radius-full:9999px;--radius-md:8px;--radius-sm:4px;--radius-xl:24px;--scheme-accent-background:var(--color-primary);--scheme-accent-border:color-mix(in srgb, var(--color-onPrimary) 30%, transparent);--scheme-accent-muted:#e0ebff;--scheme-accent-primary:var(--color-onPrimary);--scheme-accent-surface:#226cff;--scheme-accent-text:var(--color-onPrimary);--scheme-dark-background:var(--color-text);--scheme-dark-border:color-mix(in srgb, var(--color-background) 25%, transparent);--scheme-dark-muted:color-mix(in srgb, var(--color-background) 75%, transparent);--scheme-dark-primary:var(--color-background);--scheme-dark-secondary-bg:transparent;--scheme-dark-secondary-border:currentColor;--scheme-dark-secondary-fg:var(--scheme-dark-text,var(--color-background));--scheme-dark-secondary-hover:color-mix(in srgb,currentColor 10%,transparent);--scheme-dark-surface:color-mix(in srgb, var(--color-background) 12%, var(--color-text));--scheme-dark-text:var(--color-background);--scheme-light-background:var(--color-background);--scheme-light-border:var(--color-border);--scheme-light-muted:var(--color-muted);--scheme-light-primary:var(--color-primary);--scheme-light-surface:var(--color-surface);--scheme-light-text:var(--color-text);--scheme-muted-background:var(--color-surface);--scheme-muted-border:var(--color-border);--scheme-muted-muted:var(--color-muted);--scheme-muted-primary:var(--color-primary);--scheme-muted-surface:var(--color-background);--scheme-muted-text:var(--color-text);--shadow-card:0 2px 8px rgba(0,0,0,0.1);--shadow-lg:0 8px 24px rgba(0,0,0,0.12);--shadow-md:0 2px 8px rgba(0,0,0,0.1);--shadow-none:none;--shadow-sm:0 1px 2px rgba(0,0,0,0.06);--shadow-xl:0 16px 48px rgba(0,0,0,0.16);--size-contentMaxWidth:1200px;--space-lg:32px;--space-md:16px;--space-mdLg:24px;--space-section:4rem;--space-sectionGap:2rem;--space-sm:8px;--space-xl:4rem;--space-xs:4px}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;font-family:var(--font-body);color:var(--color-text);background:var(--color-background);font-size:max(16px,var(--font-size-body,1rem));line-height:max(1.4,var(--font-leading-body,var(--font-lineHeight,1.5)));font-weight:var(--font-weight,400);letter-spacing:var(--font-letterSpacing,0);overflow-wrap:break-word}
/* Line height comes from measured tokens when the site was imported (E192) and falls back to
   the theme default otherwise, so an unmeasured site keeps exactly the old 1.2 / 1.5. */
h1,h2,h3,h4,h5,h6{font-family:var(--font-heading);font-weight:var(--font-headingWeight,bold);line-height:var(--font-leading-heading,1.2);margin:0 0 var(--space-sm)}
h1{font-size:var(--font-size-display,var(--font-size-h1,2.25rem));line-height:var(--font-leading-display,var(--font-leading-h1,var(--font-leading-heading,1.2)));letter-spacing:var(--font-tracking-display);overflow-wrap:var(--font-wrap-display)}h2{font-size:var(--font-size-h2,1.6rem);line-height:var(--font-leading-h2,var(--font-leading-heading,1.2))}h3{font-size:var(--font-size-h3,1.2rem);line-height:var(--font-leading-h3,var(--font-leading-heading,1.2))}h4{font-size:var(--font-size-h4,1.05rem);line-height:var(--font-leading-h4,var(--font-leading-heading,1.2))}h5{font-size:1rem}h6{font-size:.9rem}
p{margin:0 0 var(--space-sm)}
a{color:var(--section-link,var(--link-color,var(--color-primary)));text-decoration:var(--link-decoration,underline);text-underline-offset:.2em}
/* An explicit section colour pair owns its links; unschemed sections keep the site's custom link colour. */
:where(.section[data-color-scheme]){--section-link:var(--scheme-link)}
img{max-width:100%;height:auto;display:block;border-radius:var(--image-radius,var(--radius-md))}
.section{padding:var(--space-section,var(--space-lg)) var(--space-md);margin-bottom:var(--space-sectionGap,0)}
.section__inner{max-width:var(--size-contentMaxWidth);margin:0 auto}
/* Own anchors ("Näytä tarkat asetukset"): a section's is an empty marker at its top. */
.cms-anchor{display:block;width:0;height:0;overflow:hidden}
.cms-anchor,.block[id]{scroll-margin-top:5rem}
/* Section background video (E148) and its reduced-motion still (E162). Both
   get their box from the per-section rule compile() emits for the child
   .section__video. A visitor who asked for less motion sees the poster image
   instead of the moving video, and no video at all without a poster. */
.section__video--still{display:none;border-radius:0}
@media (prefers-reduced-motion:reduce){video.section__video{display:none}.section__video--still{display:block}}
/* Pause/Play of the background video (WCAG 2.2.2): over the section's lower corner, hidden for
   less motion (the still shows) and without JavaScript (x-cloak). */
.section__video-toggle{position:absolute;right:var(--space-sm,.75rem);bottom:var(--space-sm,.75rem);z-index:2;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border:1px solid rgb(255 255 255 / .6);border-radius:999px;background:rgb(0 0 0 / .55);color:#fff;cursor:pointer}
.section__video-toggle:focus-visible{outline:3px solid #fff;outline-offset:2px}
.section__video-icon{display:block;width:12px;height:14px;border-left:4px solid currentColor;border-right:4px solid currentColor;box-sizing:border-box}
.section__video-icon--play{width:0;height:0;border-left:13px solid currentColor;border-right:0;border-top:8px solid transparent;border-bottom:8px solid transparent;margin-left:3px}
@media (prefers-reduced-motion:reduce){.section__video-toggle{display:none}}
/* Light text over a background video (the dark and accent schemes): the video and its still are
   dimmed so the text keeps its contrast whatever the frame. */
.section:is([data-color-scheme="dark"],[data-color-scheme="accent"])>.section__video{filter:brightness(.45)}
/* Two dark (or accent) sections in a row read as one band: no page-coloured gap between them. */
.section[data-color-scheme="dark"]:has(+.section[data-color-scheme="dark"]),.section[data-color-scheme="accent"]:has(+.section[data-color-scheme="accent"]){margin-bottom:0}
.section[data-color-scheme="light"]{--scheme-bg:var(--scheme-light-background,var(--color-background));--scheme-fg:var(--scheme-light-text,var(--color-text));--scheme-link:var(--scheme-light-primary,var(--color-primary));--scheme-muted:var(--scheme-light-muted,var(--color-muted));--scheme-border:var(--scheme-light-border,var(--color-border));--scheme-surface:var(--scheme-light-surface,var(--color-surface));background:var(--scheme-bg);color:var(--scheme-fg)}
.section[data-color-scheme="dark"]{--scheme-bg:var(--scheme-dark-background,var(--color-text));--scheme-fg:var(--scheme-dark-text,var(--color-background));--scheme-link:var(--scheme-dark-primary,var(--color-background));--scheme-muted:var(--scheme-dark-muted,color-mix(in srgb,var(--color-background) 75%,transparent));--scheme-border:var(--scheme-dark-border,color-mix(in srgb,var(--color-background) 25%,transparent));--scheme-surface:var(--scheme-dark-surface,color-mix(in srgb,var(--color-background) 12%,var(--color-text)));background:var(--scheme-bg);color:var(--scheme-fg)}
.section[data-color-scheme="accent"]{--scheme-bg:var(--scheme-accent-background,var(--color-primary));--scheme-fg:var(--scheme-accent-text,var(--color-onPrimary,#fff));--scheme-link:var(--scheme-accent-primary,var(--color-onPrimary,#fff));--scheme-muted:var(--scheme-accent-muted,color-mix(in srgb,var(--color-onPrimary,#fff) 80%,transparent));--scheme-border:var(--scheme-accent-border,color-mix(in srgb,var(--color-onPrimary,#fff) 30%,transparent));--scheme-surface:var(--scheme-accent-surface,color-mix(in srgb,var(--color-onPrimary,#fff) 15%,var(--color-primary)));background:var(--scheme-bg);color:var(--scheme-fg)}
.section[data-color-scheme="muted"]{--scheme-bg:var(--scheme-muted-background,var(--color-surface));--scheme-fg:var(--scheme-muted-text,var(--color-text));--scheme-link:var(--scheme-muted-primary,var(--color-primary));--scheme-muted:var(--scheme-muted-muted,var(--color-muted));--scheme-border:var(--scheme-muted-border,var(--color-border));--scheme-surface:var(--scheme-muted-surface,var(--color-background));background:var(--scheme-bg);color:var(--scheme-fg)}
/* An accent section inverts the site button; the variants have rules of their own (theme.css repeats this list). */
.section[data-color-scheme="accent"] .button:not(:where(.button--link,.button--secondary,.button--outline,.button--ghost)){background:var(--scheme-fg);color:var(--scheme-bg)}
.hero--center{text-align:center}
.hero--end{text-align:right}
.hero__subheading{font-size:1.15rem;opacity:.9}
.hero__badge{display:inline-flex;align-items:center;width:fit-content;max-width:100%;margin:0;padding:.35rem .9rem;border-radius:999px;font-size:.875rem;font-weight:600;line-height:1.3;color:var(--scheme-link,var(--color-primary));background:color-mix(in srgb,var(--scheme-link,var(--color-primary)) 10%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--scheme-link,var(--color-primary)) 28%,transparent)}
.hero__heading-accent{color:var(--scheme-link,var(--color-primary))}
.hero__image{width:100%;margin-bottom:var(--space-md);border-radius:var(--image-radius,var(--radius-md))}
/* Full content width: do not pair aspect-ratio with max-height (browsers
   shrink width to satisfy both). Cap tall viewports via object-fit crop only
   when a future height lock is needed. */
.hero--overlay{position:relative;width:100%;aspect-ratio:2/1;min-height:12rem;display:grid;align-items:end;justify-items:stretch;overflow:hidden;border-radius:var(--radius-md)}
.hero--overlay .hero__media{position:absolute;inset:0;z-index:0}
.hero--overlay .hero__image{width:100%;height:100%;object-fit:cover;margin:0;border-radius:0}
.hero--focus-top .hero__image{object-position:50% 20%}
.hero--focus-bottom .hero__image{object-position:50% 80%}
.hero--overlay .hero__content{position:relative;z-index:1;justify-self:start;margin:var(--space-lg);padding:10px 20px;max-width:min(36rem,92%);color:#fff;background:rgba(0,0,0,.55)}
.hero--overlay.hero--center .hero__content{justify-self:center;text-align:center}
.hero--overlay.hero--end .hero__content{justify-self:end;text-align:right}
.hero--overlay .hero__heading{margin:0 0 1px;padding:10px 15px;display:block;width:fit-content;max-width:100%;font-size:var(--font-size-display,1.75rem);font-weight:var(--font-headingWeight,600);line-height:var(--font-leading-display,1.1);letter-spacing:var(--font-tracking-display,.01em);overflow-wrap:var(--font-wrap-display,break-word)}
.hero--overlay .hero__subheading{margin:0;padding:0 5px;font-size:1rem;line-height:1.3;opacity:1}
.hero--overlay .hero__content .button{box-shadow:0 1px 2px rgba(0,0,0,.2);margin-top:var(--space-sm)}
.hero--overlay .hero__content .button:focus-visible{box-shadow:var(--focus-ring-shadow,0 0 0 3px #1b1f24),0 1px 2px rgba(0,0,0,.2)}
.hero__actions{display:flex;flex-wrap:wrap;gap:var(--space-sm);margin-top:var(--space-sm)}.hero__actions .button{margin-top:0}
.hero--center .hero__actions{justify-content:center}.hero--end .hero__actions{justify-content:flex-end}
.hero.hero--overlay:is(.hero--light,.hero--dark) .hero__media::after{content:"";position:absolute;inset:0}
.hero.hero--overlay.hero--light .hero__media::after{background:rgba(255,255,255,.45)}
.hero.hero--overlay.hero--dark .hero__media::after{background:rgba(0,0,0,.45)}
.hero.hero--overlay:is(.hero--light,.hero--dark){align-items:center}
.hero.hero--overlay:is(.hero--light,.hero--dark) .hero__content{justify-self:center;margin:var(--space-lg) auto;padding:0 var(--space-md);max-width:min(60rem,92%);background:none}
.hero.hero--overlay:is(.hero--light,.hero--dark) .hero__heading{display:block;margin:0 0 var(--space-sm);padding:0;background:none;text-transform:none;letter-spacing:var(--font-tracking-display,normal);font-size:var(--font-size-display,clamp(2rem,4.6vw,4.2rem));font-weight:700;line-height:var(--font-leading-display,1.1);overflow-wrap:var(--font-wrap-display,break-word)}
.hero.hero--overlay:is(.hero--light,.hero--dark) .hero__subheading{display:block;padding:0;background:none;font-size:1.15rem}
.hero.hero--overlay.hero--light :is(.hero__content,.hero__heading,.hero__subheading){color:var(--color-text)}
.hero.hero--overlay.hero--dark :is(.hero__content,.hero__heading,.hero__subheading){color:#fff}
/* Fixed heights: the editor preview frame grows with its page, so vh would grow with it. */
.hero--h-medium{min-height:28rem}.hero--h-tall{min-height:40rem}.hero--h-xl{min-height:56rem}
.hero.hero--overlay:is(.hero--h-medium,.hero--h-tall,.hero--h-xl){aspect-ratio:auto}
.hero:is(.hero--h-medium,.hero--h-tall,.hero--h-xl):not(.hero--overlay){display:flex;flex-direction:column;justify-content:center;align-items:flex-start}
.hero--center:is(.hero--h-medium,.hero--h-tall,.hero--h-xl):not(.hero--overlay){align-items:center}
.hero--end:is(.hero--h-medium,.hero--h-tall,.hero--h-xl):not(.hero--overlay){align-items:flex-end}
@media (max-width:639.98px){.hero.hero--overlay{aspect-ratio:auto;min-height:20rem}}
/* "Kuvan päällä" card (docs/sivupohjat/LUOTTOKORTTI_2026-11-09.md, rivi 8): an app-style note in
   the picture's lower start corner, across its lower edge on a phone. The figure holds the picture
   and the card in one grid cell; it takes the picture's place in every design. */
.hero__figure{display:grid;margin:0 0 var(--space-md)}
.hero__figure .hero__image,.section.section--hero[data-design] .hero:not(.hero--overlay) .hero__figure .hero__image{grid-area:1/1}
.hero .hero__figure>.hero__image,.section.section--hero[data-design] .hero:not(.hero--overlay) .hero__figure>.hero__image{margin-bottom:0}
.hero__note{grid-area:1/1;align-self:end;justify-self:start;position:relative;z-index:1;display:grid;gap:.1rem;max-width:min(18rem,calc(100% - 1.5rem));margin:clamp(.75rem,2.5vw,1.5rem);padding:.75rem 1rem;text-align:start;color:var(--color-text,#111);background:color-mix(in srgb,var(--color-background,#fff) 94%,transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:1rem;box-shadow:0 12px 32px -12px rgba(0,0,0,.45)}
.hero__note p{margin:0}
.hero__note-title{font-size:.875rem;line-height:1.3;color:color-mix(in srgb,var(--color-text,#111) 78%,var(--color-background,#fff))}
.hero__note-value{font-size:1.35rem;font-weight:700;line-height:1.2;font-variant-numeric:tabular-nums}
.hero__note-text{font-size:.9rem;line-height:1.35;font-variant-numeric:tabular-nums}
@media (max-width:639.98px){.hero__note{justify-self:stretch;max-width:none;margin:.6rem}}
.section.section--hero[data-design] .hero:not(.hero--overlay) .hero__figure{margin-bottom:0}
.section.section--hero:is([data-design="gradient"],[data-design="spotlight"],[data-design="editorial"]) .hero:not(.hero--overlay)>.hero__figure{order:10;width:100%}
.section.section--hero[data-design="gradient"] .hero:not(.hero--overlay)>.hero__figure{max-width:58rem}
.section.section--hero[data-design="spotlight"] .hero:not(.hero--overlay)>.hero__figure{max-width:62rem}
@media (min-width:960px){.section.section--hero[data-design="split"] .hero:not(.hero--overlay)>.hero__figure{grid-column:2;grid-row:1/-1}.section.section--hero[data-design="splitReverse"] .hero:not(.hero--overlay)>.hero__figure{grid-column:1;grid-row:1/-1}.section.section--hero[data-design="editorial"] .hero:not(.hero--overlay)>.hero__figure{grid-column:1/-1;grid-row:3}}
/* The card and tasks designs lay the picture behind the whole hero: the card then sits in the
   open picture area above the text (card) or above the heading (tasks). */
.section.section--hero:is([data-design="card"],[data-design="tasks"]) .hero:not(.hero--overlay)>.hero__figure{display:contents}
.section.section--hero:is([data-design="card"],[data-design="tasks"]) .hero:not(.hero--overlay) .hero__figure .hero__image{grid-area:auto}
.section.section--hero[data-design="card"] .hero:not(.hero--overlay) .hero__note{grid-area:auto;grid-column:1;grid-row:1;margin-inline:0}
.section.section--hero[data-design="tasks"] .hero:not(.hero--overlay) .hero__note{align-self:center;margin:0 0 var(--space-sm)}
/* Text over the picture: the card goes to the upper end corner, away from the caption. */
.hero--overlay .hero__figure{position:absolute;inset:0;display:block;margin:0}
.hero--overlay .hero__note{position:absolute;top:0;inset-inline-end:0}
.button{display:inline-block;padding:var(--button-paddingY,15px) var(--button-paddingX,30px);border:1px solid var(--button-border,transparent);border-radius:var(--button-radius,var(--radius-md));background:var(--button-bg,var(--color-primary));color:var(--button-fg,var(--color-onPrimary,#fff));text-decoration:none;font-size:var(--button-fontSize,.8125rem);font-weight:var(--button-weight,400);line-height:var(--font-leading-button,1.2)}
/* Button variants are defined here only, with two classes: the theme stylesheet (theme-base theme.css)
   loads after this one and resets .button with one class, which must not undo a variant (E246). */
.button.button--lg{padding:calc(var(--button-paddingY,15px)*1.35) calc(var(--button-paddingX,30px)*1.35);font-size:1.125rem;font-weight:700;line-height:1.2}
.button.button--sm{padding:calc(var(--button-paddingY,15px)*.6) calc(var(--button-paddingX,30px)*.6);font-size:.75rem;line-height:1.2}
.container--boxed{border:1px solid #e1e1e1;background:#fff;border-radius:0;width:100%;padding:20px 30px;box-sizing:border-box}
.container--boxed .richtext,.container--boxed .richtext p{font-size:max(16px,1rem);line-height:1.65;text-align:left}
.container--boxed .richtext p{margin:0}
.button.button--secondary{background:var(--color-secondary,#1f2937);color:var(--color-onSecondary,#fff)}
.button--link{background:none;color:var(--color-primary);padding-left:0;padding-right:0}
:where(.section[data-color-scheme]) .button--link{background:none;color:var(--scheme-link)}
/* Per-button style (E242): outline and ghost paint with the link colour of the section, so they
   read on light, dark and accent schemes alike; a button without the setting keeps the site style.
   Mixing in 15 % of the section text colour keeps the brand hue but lifts the text to 4.5:1
   where the brand colour alone falls just short on a muted section (E246: three templates, 4.26–4.44). */
.button.button--outline{background:transparent;color:var(--scheme-link,var(--color-primary));color:color-mix(in srgb,var(--scheme-link,var(--color-primary)) 85%,var(--scheme-fg,var(--color-text,#111)));border-color:currentColor}
.button.button--ghost{background:transparent;color:var(--scheme-link,var(--color-primary));color:color-mix(in srgb,var(--scheme-link,var(--color-primary)) 85%,var(--scheme-fg,var(--color-text,#111)));border-color:transparent}
.button.button--outline:hover,.button.button--ghost:hover{background:color-mix(in srgb,currentColor 10%,transparent)}
/* A dark section paints the site text colour, and the default secondary colour is a dark slate: the
   button's box stood apart from it by 1.0-1.25:1 on 55 templates (E252). Below 3:1 tokensToCss sets
   --scheme-dark-secondary-* (scheme-secondary.ts) and the button is outlined in the section text colour,
   as on an accent section; a secondary colour that stands out keeps its fill. A style variant keeps its own look. */
[data-color-scheme="dark"] .button.button--secondary:not(:where(.button--outline,.button--ghost)){background:var(--scheme-dark-secondary-bg,var(--color-secondary,#1f2937));color:var(--scheme-dark-secondary-fg,var(--color-onSecondary,#fff));border-color:var(--scheme-dark-secondary-border,var(--button-border,transparent))}
[data-color-scheme="dark"] .button.button--secondary:not(:where(.button--outline,.button--ghost)):hover{background:var(--scheme-dark-secondary-hover,var(--color-secondary,#1f2937))}
/* The brand button keeps its colour on a dark section unless the colour all but vanishes there:
   below 1.5:1 against the section tokensToCss sets --scheme-dark-primary-* (scheme-secondary.ts, E253)
   and the button is filled with the section text colour, label in the section colour, as on an accent
   section. Unset, the variables fall back to the site button. A variant keeps its own look. */
[data-color-scheme="dark"] .button:not(:where(.button--link,.button--secondary,.button--outline,.button--ghost)){background:var(--scheme-dark-primary-bg,var(--button-bg,var(--color-primary,#0055ff)));color:var(--scheme-dark-primary-fg,var(--button-fg,var(--color-onPrimary,#fff)));border-color:var(--scheme-dark-primary-border,var(--button-border,transparent))}
/* On an accent section the site button is filled with the section text colour, and a filled
   secondary could match the section itself (secondary and primary are the same navy in some
   templates); there it is outlined in the section text colour instead, so it stays second. */
[data-color-scheme="accent"] .button.button--secondary{background:transparent;color:var(--scheme-fg);border-color:currentColor}
[data-color-scheme="accent"] .button.button--secondary:hover{background:color-mix(in srgb,currentColor 10%,transparent)}
/* Per-button colour ("Väri", registry BUTTON_TONES): a site colour with its own label colour. It wins
   over the section-scheme rules above (three classes), since the owner chose it for this button; a
   filled style paints the box, outline, ghost and link the text, lifted toward 4.5:1 like E246. */
.button.button--tone{--tone-bg:var(--color-primary,#0055ff);--tone-fg:var(--color-onPrimary,#fff)}
.button.button--tone-secondary{--tone-bg:var(--color-secondary,#1f2937);--tone-fg:var(--color-onSecondary,#fff)}
.button.button--tone-accent{--tone-bg:var(--color-accent,var(--color-primary,#0055ff));--tone-fg:var(--color-onAccent,#fff)}
.button.button--tone-dark{--tone-bg:var(--color-text,#111);--tone-fg:var(--color-background,#fff)}
.button.button--tone-light{--tone-bg:var(--color-background,#fff);--tone-fg:var(--color-text,#111)}
.button.button--tone.button--tone:not(:where(.button--outline,.button--ghost,.button--link)){background:var(--tone-bg);color:var(--tone-fg);border-color:var(--tone-bg)}
.button.button--tone.button--tone-light:not(:where(.button--outline,.button--ghost,.button--link)){border-color:color-mix(in srgb,var(--tone-fg) 30%,transparent)}
.button.button--tone.button--tone:where(.button--outline,.button--ghost,.button--link){color:var(--tone-bg);color:color-mix(in srgb,var(--tone-bg) 85%,var(--scheme-fg,var(--color-text,#111)))}
.button.button--tone.button--tone-light:where(.button--outline,.button--ghost,.button--link){color:var(--tone-bg)}
/* Per-button corners ("Kulmat"); unset, the site's button shape (--button-radius). */
.button.button--r-square{border-radius:0}
.button.button--r-rounded{border-radius:.5rem}
.button.button--r-pill{border-radius:999px}
.button.button--icon-end .cms-icon{margin-right:0;margin-left:.35em}
.button:is(:disabled,[aria-disabled="true"]){opacity:.55;cursor:not-allowed}
.heading--center,.text--center{text-align:center}
/* Running text keeps a readable measure, at most about 80 characters a line (docs/laatu U6), also in a
   wide card or a one-column layout area; centred text stays centred. */
.text,.richtext>p,.richtext>ul,.richtext>ol,.alert__body p,.vaalikone__intro{max-width:60ch}
/* A long word or a pasted address (a source link written out in full) breaks onto the next line instead of
   widening the page sideways on a phone. */
:where(.text,.richtext){overflow-wrap:break-word}
.text--center,.text--end{margin-inline:auto}.text--end{margin-inline-end:0}
.section--text:not([data-design])>.section__inner>.richtext{max-width:62ch}
.heading--end,.text--end{text-align:right}
.resource-list{list-style:none;padding:0;margin:0;display:grid;gap:var(--space-sm);grid-template-columns:repeat(auto-fill,minmax(12rem,1fr))}
.resource-list__item{padding:var(--space-sm) var(--space-md);background:var(--color-surface);border-radius:var(--radius-sm)}
.resource-list__price{color:var(--color-muted);margin-left:var(--space-xs)}
.resource-list__item>a{display:inline-flex;align-items:center;min-height:44px;min-width:44px}
.image--full{margin:0;width:100%;max-width:none;display:block}
.image--full img{width:100%;height:auto;display:block}
.image--content{margin:0}
figcaption{color:var(--scheme-muted,var(--color-muted));font-size:.9rem}
.divider{border:0;border-top:1px solid var(--color-muted)}
.block--container{border-radius:var(--radius-md)}
[data-editor-hint]{display:none}
.opening-hours{display:grid;gap:0;margin:0;max-width:24rem}
.opening-hours__row{display:flex;justify-content:space-between;gap:1rem;padding:.4rem 0;border-bottom:1px solid color-mix(in srgb,currentColor 18%,transparent)}
.opening-hours__row dt{font-weight:600}.opening-hours__row dd{margin:0;text-align:right;font-variant-numeric:tabular-nums}
.opening-hours__row--closed dd{opacity:.75}
.opening-hours-section{display:grid;gap:var(--space-md)}
@media (min-width:720px){.opening-hours-section:has(.opening-hours-section__note){grid-template-columns:minmax(0,24rem) minmax(0,1fr);gap:var(--space-xl,2.5rem)}}
.appt-services__intro{margin-bottom:var(--space-md)}
.appt-services--menu .av,.appt-services--compact .av{max-width:none;padding-top:0}
.appt-services--menu .av__list{gap:0}
.appt-services--menu .av__card{border:0;border-bottom:1px dotted color-mix(in srgb,currentColor 40%,transparent);border-radius:0;background:transparent;color:inherit;padding:.8rem 0}
.appt-services--menu .av__photo,.appt-services--compact .av__photo{display:none}
.appt-services--menu .av__price{color:var(--color-text,inherit);font-size:1.05rem}
.appt-services--menu .av .button,.appt-services--compact .av .button{min-height:2.75rem;padding:.35rem .9rem}
.appt-services--menu .av__variants li{border-top-style:dotted}
@media (min-width:960px){.appt-services--menu .av__list{grid-template-columns:1fr 1fr;column-gap:var(--space-xl,2.5rem)}}
.appt-services--compact .av__list{gap:.35rem}
.appt-services--compact .av__card{padding:.5rem .8rem}
.appt-services--compact .av__card-main > p{display:none}
.embed{position:relative;width:100%;aspect-ratio:16/9;background:var(--color-surface)}
.embed--4-3{aspect-ratio:4/3}.embed--1-1{aspect-ratio:1/1}.embed--3-4{aspect-ratio:3/4}
.embed--tall{aspect-ratio:auto;min-height:min(70vh,42rem);height:min(70vh,42rem)}
.embed--fixed{aspect-ratio:auto;height:var(--embed-height,720px);max-height:none}
.embed--fixed[data-consent-embed]:not([data-consent-on]){height:auto;min-height:15rem}
.ext-booking{max-width:60rem;margin:0 auto}.ext-booking__cta{margin:var(--space-md) 0}.ext-booking__button{min-height:44px}.ext-booking__frame{margin-top:var(--space-md)}
.embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.embed iframe[hidden],.embed__gate[hidden],.embed__gate-settings[hidden]{display:none}
.embed[data-consent-embed]:not([data-consent-on]){display:flex;min-height:15rem;border:1px solid var(--color-border,currentColor);border-radius:var(--radius-md)}
.embed__gate{margin:auto;padding:var(--space-md);max-width:34rem;text-align:center;color:var(--color-text)}
.embed__gate-text{margin:0 0 var(--space-sm)}.embed__gate-actions{margin:0;display:flex;flex-wrap:wrap;gap:var(--space-sm);justify-content:center;align-items:center}
.embed__gate-settings{background:none;border:0;padding:.5rem;font:inherit;color:inherit;text-decoration:underline;cursor:pointer;min-height:44px}
.osm-map{position:relative;overflow:hidden;border-radius:var(--radius-md,8px);border:1px solid var(--scheme-border,var(--color-border,#d5d9e0))}
.osm-map{width:100%;aspect-ratio:4/3}.osm-map--16-9{aspect-ratio:16/9}.osm-map--1-1{aspect-ratio:1/1}.osm-map--3-4{aspect-ratio:3/4}.osm-map--tall{aspect-ratio:auto;height:min(70vh,42rem)}
@media (max-width:599px){.osm-map--16-9{aspect-ratio:4/3}}
.osm-map__canvas,.osm-map .osm-map__canvas.maplibregl-map{position:absolute;inset:0;width:100%;height:100%}
.osm-map__static{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.25rem;padding:var(--space-md,1rem);text-align:center}
.osm-map__static p{margin:0;max-width:36ch}
.osm-map__static a{display:inline-flex;align-items:center;min-height:44px;padding:0 .5rem}
.osm-map.is-live .osm-map__static{display:none}
.osm-map__address{font-weight:600}
.osm-map__caption{margin:.5rem 0 0;max-width:60ch;display:flex;flex-wrap:wrap;gap:.25rem 1rem;align-items:center}
.osm-map__route{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;padding:0 .25rem}
.osm-map .maplibregl-canvas:focus-visible{outline:3px solid var(--scheme-link,var(--color-primary,#0b57d0));outline-offset:-3px}
.osm-map .maplibregl-ctrl-group button{width:44px;height:44px}
.osm-map .maplibregl-popup-close-button{width:44px;height:44px;font-size:1.25rem}
.osm-map .maplibregl-ctrl-attrib{background:rgba(255,255,255,.92);color:#1f2933}
.osm-map .maplibregl-ctrl-attrib a{display:inline-flex;align-items:center;min-height:44px;padding:0 .5rem;color:#1f2933}
.osm-marker{width:44px;height:44px;display:flex;align-items:flex-end;justify-content:center;padding:0;border:0;background:none;cursor:pointer;color:var(--color-primary,#0b57d0)}
.osm-marker svg{display:block;width:28px;height:38px;filter:drop-shadow(0 1px 1px rgba(0,0,0,.35))}
.osm-marker[aria-pressed="true"] svg{transform:scale(1.25);transform-origin:50% 100%}
.osm-marker:focus-visible{outline:3px solid var(--scheme-link,var(--color-primary,#0b57d0));outline-offset:2px}
.portal-links{display:flex;flex-wrap:wrap;gap:var(--space-sm,.75rem);margin:var(--space-md,1rem) 0 0;padding:0;list-style:none}
.portal-links__link{min-height:44px;display:inline-flex;align-items:center}
.moment-form{display:grid;gap:.75rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,11rem),1fr));align-items:end;padding:1rem;border:1px solid var(--color-border,#d5d9e0);border-radius:var(--radius-md,8px);background:var(--color-surface,transparent)}
.moment-field{display:grid;gap:.3rem;font-weight:600;font-size:.95rem}
.moment-field input,.moment-field select{min-height:44px;width:100%;padding:.4rem .6rem;border:1px solid var(--color-border,#b8bec8);border-radius:var(--radius-sm,6px);background:var(--color-background,#fff);color:var(--color-text,inherit);font:inherit;font-weight:400}
.moment-form .button{min-height:44px}
.moment-note{margin:.75rem 0 0;color:var(--color-muted,#555);font-size:.95rem}
.moment-results{display:grid;gap:1rem;grid-template-columns:repeat(auto-fill,minmax(min(100%,15rem),1fr));margin:1.25rem 0 0;padding:0;list-style:none}
.moment-card{display:grid;gap:.4rem;align-content:start;padding:0 0 1rem;border:1px solid var(--color-border,#d5d9e0);border-radius:var(--radius-md,8px);overflow:hidden;background:var(--color-surface,#fff)}
.moment-card>*:not(img){margin:0 1rem}
.moment-card img{display:block;width:100%;aspect-ratio:3/2;object-fit:cover}
.moment-card .button{justify-self:start;min-height:44px}
.moment-card--off{opacity:.75}
.moment-reading{max-width:40rem}
.moment-reading__book{display:flex;gap:1rem;align-items:center;margin:0 0 1rem}
.moment-reading__book img{width:4.5rem;height:auto;border-radius:4px}
.moment-reading__text{max-width:54ch;font-size:1.075rem;line-height:1.75}
.moment-reading__text h3{margin:1.5rem 0 .5rem}
.moment-reading__text p{margin:0 0 1em}
.moment-reading__more{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center;margin-top:1.25rem}
.moment-reading__label{display:inline-block;margin:0 0 .75rem;padding:.15rem .5rem;border-radius:999px;background:var(--color-surface,#f3f3f3);font-size:.85rem}
.moment-reading audio{width:100%;max-width:28rem}
.cookie-policy__scroll{overflow-x:auto;margin:0 0 var(--space-md)}
.cookie-policy__table{width:100%;border-collapse:collapse;font-size:.95rem}
.cookie-policy__table th,.cookie-policy__table td{text-align:left;vertical-align:top;padding:var(--space-xs) var(--space-sm);border-bottom:1px solid var(--color-border,currentColor)}
.cookie-policy__table thead th{white-space:nowrap}
.cookie-policy__cookies{margin:0;padding:0;list-style:none}.cookie-policy__cookies code{word-break:break-all}
.cookie-policy__category{margin-top:var(--space-lg)}
@media (max-width:40rem){.cookie-policy__table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.cookie-policy__table,.cookie-policy__table tbody,.cookie-policy__table tr,.cookie-policy__table th,.cookie-policy__table td{display:block}.cookie-policy__table tr{padding:var(--space-sm) 0;border-bottom:1px solid var(--color-border,currentColor)}.cookie-policy__table tbody th,.cookie-policy__table td{padding:2px 0;border:0}.cookie-policy__table tbody tr:nth-child(even)>*{background:transparent}.cookie-policy__table td[data-label]::before{content:attr(data-label) ": ";font-weight:600}}
.site-footer__consent{margin:0}.site-footer__consent-button{display:inline-flex;align-items:center;background:none;border:0;padding:0;min-height:44px;font:inherit;color:inherit;text-decoration:underline;cursor:pointer}
.video{margin:0}.video__player{width:100%;height:auto;display:block;background:#000}
.gallery{margin:0}.gallery__grid{display:grid;gap:var(--space-sm);grid-template-columns:repeat(auto-fill,minmax(10rem,1fr))}.gallery .image{width:100%;height:100%;object-fit:cover}
.accordion{border-top:1px solid color-mix(in srgb,var(--color-muted) 35%,transparent)}
.accordion__item{border-bottom:1px solid color-mix(in srgb,var(--color-muted) 35%,transparent);padding:0}
.accordion__trigger{cursor:pointer;list-style:none;display:flex;width:100%;align-items:center;justify-content:space-between;gap:var(--space-sm);min-height:2.75rem;padding:var(--space-sm) 0;font-weight:600}
.accordion__trigger::-webkit-details-marker{display:none}
.accordion__panel{padding:0 0 var(--space-md)}
.tabs__list{display:flex;flex-wrap:wrap;gap:var(--space-xs);border-bottom:1px solid color-mix(in srgb,var(--color-muted) 35%,transparent);margin-bottom:var(--space-md)}
.tabs__tab{appearance:none;border:0;background:transparent;color:inherit;padding:var(--space-sm) var(--space-md);min-height:2.75rem;cursor:pointer;font-weight:600;border-bottom:2px solid transparent;margin-bottom:-1px}
.tabs__tab[aria-selected='true']{border-bottom-color:var(--color-primary)}
.tabs__panel{padding:var(--space-sm) 0}
.tabs__today{margin:0 0 var(--space-xs);font-weight:600}
.tabs--today .tabs__today-title{margin:0 0 var(--space-xs)}
.tabs--cards{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:var(--space-lg,2rem);align-items:start}
.tabs--cards .tabs__list{grid-column:1;flex-direction:column;flex-wrap:nowrap;gap:.6rem;border-bottom:0;margin-bottom:0}
.tabs--cards .tabs__tab{display:flex;align-items:center;gap:.9rem;width:100%;margin:0;padding:.9rem 1.1rem;min-height:4.25rem;text-align:start;border:1px solid var(--color-border,#e5e7eb);border-radius:1rem;background:var(--color-background,#fff);transition:background-color .15s ease,border-color .15s ease,color .15s ease,box-shadow .15s ease}
.tabs--cards .tabs__tab:hover{border-color:color-mix(in srgb,var(--color-primary) 45%,transparent);background:color-mix(in srgb,var(--color-primary) 5%,var(--color-background,#fff))}
.tabs--cards .tabs__tab[aria-selected='true']{border-color:color-mix(in srgb,var(--color-primary) 60%,#fff);background:linear-gradient(120deg,var(--color-primary),color-mix(in srgb,var(--color-primary) 62%,#0b1a4a));color:var(--color-onPrimary,#fff);box-shadow:0 14px 30px -18px color-mix(in srgb,var(--color-primary) 70%,transparent)}
.tabs--cards .tabs__icon{flex:none;display:grid;place-items:center;width:2.4rem;height:2.4rem;border-radius:.7rem;background:color-mix(in srgb,var(--color-primary) 6%,var(--color-background,#fff));color:var(--color-primary);line-height:0}
.tabs--cards .tabs__icon svg{width:1.25rem;height:1.25rem}
.tabs--cards .tabs__tab[aria-selected='true'] .tabs__icon{background:color-mix(in srgb,#fff 18%,transparent);color:inherit}
.tabs--cards .tabs__title{flex:1;min-width:0;font-size:1.0625rem}
.tabs--cards .tabs__tag{flex:none;font-size:max(12px,.8rem);font-weight:600;letter-spacing:var(--font-label-tracking,.01em);text-transform:var(--font-label-transform,none);font-family:var(--font-label-family,inherit);opacity:.75}
.tabs--cards .tabs__panel{grid-column:2;grid-row:1;padding:var(--space-lg,2rem);border:1px solid var(--color-border,#e5e7eb);border-radius:1.25rem;background:var(--color-background,#fff);box-shadow:0 24px 50px -30px rgba(8,10,16,.25)}
@media (max-width:767px){.tabs--cards{grid-template-columns:minmax(0,1fr)}.tabs--cards .tabs__panel{grid-column:1;grid-row:auto}}
@media (prefers-reduced-motion:reduce){.tabs--cards .tabs__tab{transition:none}}
.tabs__panel--media{display:grid;gap:var(--space-md,1.5rem);align-items:center}
.tabs__media img{display:block;width:100%;height:auto;border-radius:var(--radius-md,12px)}
@media (min-width:768px){.tabs__panel--media{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.tabs__panel--media .tabs__media{order:2}}
.tabs--pills .tabs__list{justify-content:center;width:fit-content;max-width:100%;margin-inline:auto;margin-bottom:var(--space-md);padding:.3rem;gap:.25rem;border:0;border-radius:999px;background:color-mix(in srgb,var(--color-muted) 12%,transparent);flex-wrap:nowrap;overflow-x:auto}
.tabs--pills .tabs__tab{margin:0;padding:.5rem 1.25rem;border:0;border-radius:999px;white-space:nowrap;transition:background-color .15s ease,box-shadow .15s ease}
.tabs--pills .tabs__tab[aria-selected='true']{background:var(--color-background,#fff);color:var(--color-text,#111);box-shadow:0 1px 4px rgb(0 0 0/.15)}
@media (prefers-reduced-motion:reduce){.tabs--pills .tabs__tab{transition:none}}
/* "Välilehden kuva: Koko osion taustana" (docs/sivupohjat/LUOTTOKORTTI_2026-11-09.md): the active
   tab's picture fills the box behind the tabs under a dark veil, the text white on it (≥ 4.5:1 on a
   white picture). The picture and text fade in when x-show reveals a panel (an animation restarts
   when display:none lifts); none with less motion. Without JavaScript the first panel shows. */
.tabs--bg{position:relative;isolation:isolate;min-height:clamp(24rem,50vw,38rem);padding:clamp(1.25rem,4vw,3rem);border-radius:var(--radius-lg,1.25rem);overflow:hidden;background:#0b0f19;color:#fff}
.tabs--bg .tabs__list{position:relative;z-index:1;border-bottom-color:rgba(255,255,255,.35)}
.tabs--bg:not(.tabs--cards,.tabs--pills) .tabs__tab[aria-selected='true']{border-bottom-color:currentColor}
.tabs--bg .tabs__tab:focus-visible{outline:2px solid #fff;outline-offset:2px}
.tabs--bg.tabs--pills .tabs__list{background:rgba(255,255,255,.16)}
.tabs--bg.tabs--cards .tabs__tab:not([aria-selected='true']){background:rgba(0,0,0,.35);border-color:rgba(255,255,255,.3);color:#fff}
.tabs--bg .tabs__panel{max-width:42rem;background:none;border:0;box-shadow:none;color:inherit}
.tabs--bg .tabs__panel--media{display:block}
.tabs--bg .tabs__panel :is(h2,h3,h4,p,li,a:not(.button)){color:inherit}
.tabs--bg .tabs__media{position:absolute;inset:0;z-index:-1;animation:tabs-bg-in .5s ease both}
.tabs--bg .tabs__media img{display:block;width:100%;height:100%;object-fit:cover;border-radius:0}
.tabs--bg .tabs__media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.6),rgba(0,0,0,.72))}
/* Wide screens: the text keeps to the left third over a darker edge, so it never sits on the picture's subject (LUOTTOKORTTI_2026-11-09.md). */
@media (min-width:768px){.tabs--bg .tabs__panel{max-width:min(30rem,46%)}.tabs--bg .tabs__media::after{background:linear-gradient(90deg,rgba(0,0,0,.88) 0,rgba(0,0,0,.78) 38%,rgba(0,0,0,.3) 70%,rgba(0,0,0,.15) 100%)}}
.tabs--bg .tabs__body{animation:tabs-bg-in .5s ease both}
@keyframes tabs-bg-in{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.tabs--bg :is(.tabs__media,.tabs__body){animation:none}}
.motion-off .tabs--bg :is(.tabs__media,.tabs__body){animation:none}
.form-placeholder{padding:var(--space-md);border:1px dashed var(--color-muted);border-radius:var(--radius-md);color:var(--color-muted);text-align:center}
.event{display:grid;gap:var(--space-md);grid-template-columns:minmax(0,1fr);align-items:start}
@media (min-width:640px){.event{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}.event:not(:has(.event__media)){grid-template-columns:1fr}}
.event__media{border-radius:var(--radius-md);overflow:hidden;background:var(--color-surface)}
.event__when{font-size:.95rem;color:var(--color-muted);margin:0 0 var(--space-xs)}
.event__location{margin:0 0 var(--space-sm);font-weight:600}
.event__cta{margin:var(--space-md) 0 0}
.site-header__inner,.site-footer__inner{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-md)}
.site-header__brand{display:inline-flex;align-items:center;text-decoration:none;color:inherit;font-weight:700}
.site-header__logo{height:auto}
.menu{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:var(--space-sm)}
.menu--level-1{flex-direction:column;gap:var(--space-xs)}
.menu__item{position:relative}
.menu__link,.menu__toggle{color:inherit;text-decoration:none;padding:var(--space-xs) var(--space-sm);display:inline-flex;align-items:center;gap:.35em;background:none;border:0;font:inherit;cursor:pointer}
.menu__link[aria-current],.menu__toggle[aria-expanded='true']{font-weight:700}
/* Measured per-item look from an imported header bar (E148): pill, coloured label, separator, gap. */
.menu__item--styled{margin-inline-end:var(--menu-item-gap-after,0)}
.menu__item--styled{display:flex;align-items:center}
.menu__item--styled>.menu__link,.menu__item--styled>.menu__toggle{background:var(--menu-item-bg,none);border-radius:var(--menu-item-radius,0);color:var(--menu-item-fg,inherit);font-weight:var(--menu-item-weight,inherit)}
.menu__item--pill>.menu__link,.menu__item--pill>.menu__toggle{height:var(--menu-item-height,auto);padding:0 var(--menu-item-pad-x,var(--space-sm));justify-content:center}
.menu__item--separated{display:flex;align-items:center}
.menu__item--separated::before{content:var(--menu-item-separator,'|');opacity:.5;display:inline-flex;justify-content:center;min-width:var(--menu-item-separator-space,var(--space-md))}
.menu__chevron{display:inline-block;width:.5em;height:.5em;border:solid currentColor;border-width:0 2px 2px 0;transform:rotate(45deg);flex:0 0 auto}
.menu__toggle[aria-expanded='true'] .menu__chevron{transform:rotate(225deg)}
.menu__submenu{display:none;position:absolute;left:0;top:100%;min-width:12rem;background:var(--color-background);padding:var(--space-sm);border-radius:var(--radius-sm);box-shadow:0 4px 16px rgba(0,0,0,.12);z-index:10}
.menu__submenu--open,.no-js .menu__item:focus-within>.menu__submenu{display:block}
.navigation--vertical .menu{flex-direction:column}
.locale-switcher__list{list-style:none;margin:0;padding:0;display:flex;gap:var(--space-sm)}
.locale-switcher__link{color:inherit}
.site-footer__inner{align-items:flex-start;justify-content:flex-start;text-align:start}
.site-footer__links{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:var(--space-sm)}
.site-footer__social{display:flex;gap:var(--space-sm)}
.site-footer__copyright{display:block;text-align:start}
.site-header__mobile{display:none;margin-left:auto}
.site-mobile-nav{position:relative}
.site-header__toggle{display:flex;align-items:center;justify-content:center;width:2.75rem;height:2.75rem;padding:0;border:1px solid color-mix(in srgb,var(--color-muted) 35%,transparent);border-radius:var(--radius-sm);background:transparent;color:inherit;cursor:pointer;position:relative;z-index:70;transform:none!important;box-shadow:none!important;transition:background-color .15s ease,border-color .15s ease,color .15s ease}
.site-header__toggle:hover,.site-header__toggle:active,.site-header__toggle:focus-visible{transform:none!important;box-shadow:none!important}
.site-header__toggle-bars{display:block;position:relative;width:1.15rem;height:14px}
.site-header__toggle-bars span{display:block;position:absolute;left:0;width:100%;height:2px;background:currentColor;border-radius:1px;transform-origin:center;transition:transform .2s ease,opacity .2s ease,top .2s ease}
.site-header__toggle-bars span:nth-child(1){top:0}
.site-header__toggle-bars span:nth-child(2){top:6px}
.site-header__toggle-bars span:nth-child(3){top:12px}
.site-header__toggle[aria-expanded=true] .site-header__toggle-bars span:nth-child(1){top:6px;transform:rotate(45deg)}
.site-header__toggle[aria-expanded=true] .site-header__toggle-bars span:nth-child(2){opacity:0}
.site-header__toggle[aria-expanded=true] .site-header__toggle-bars span:nth-child(3){top:6px;transform:rotate(-45deg)}
.site-nav-drawer{display:flex;flex-direction:column;position:fixed;inset-block:0;inset-inline-start:auto;inset-inline-end:0;z-index:60;width:min(22rem,88vw);background:var(--color-background);border-inline-start:1px solid color-mix(in srgb,var(--color-muted) 35%,transparent);border-inline-end:0;box-shadow:0 8px 32px rgba(0,0,0,.18);overflow-y:auto;overscroll-behavior:contain}
.site-nav-drawer--animating{transition:transform .28s ease;will-change:transform}
.site-nav-drawer--from-end{transform:translateX(100%)}
.site-nav-drawer--at-rest{transform:translateX(0)}
@media (prefers-reduced-motion:reduce){.site-header__toggle-bars span,.site-nav-drawer--animating{transition:none}}
.site-nav-drawer__inner{flex:1;padding:var(--space-lg) var(--space-md)}
.site-nav-drawer__close{display:none}
.site-nav-drawer__backdrop{position:fixed;inset:0;z-index:55;border:0;padding:0;margin:0;background:rgba(0,0,0,.45);cursor:pointer}
html.site-nav-locked,html.site-nav-locked body{overflow:hidden}
.site-mobile-nav--dropdown .site-nav-drawer{position:absolute;inset:auto;top:100%;inset-inline:0;width:auto;max-height:calc(100dvh - 100%);border-inline-end:0;border-bottom:1px solid color-mix(in srgb,var(--color-muted) 35%,transparent);box-shadow:0 2px 8px rgba(0,0,0,.1)}
.site-mobile-nav--dropdown .site-nav-drawer__inner{padding-top:var(--space-md)}
.site-mobile-nav--dropdown .site-nav-drawer__close,.site-mobile-nav--dropdown .site-nav-drawer__backdrop{display:none}
.no-js .site-header__toggle,.no-js .site-nav-drawer__close,.no-js .site-nav-drawer__backdrop{display:none}
.no-js .site-nav-drawer{position:static;width:100%;border:0;box-shadow:none}
.no-js .site-nav-drawer__inner{padding-top:var(--space-md)}
.site-nav--mobile .menu,.site-nav--mobile .locale-switcher__list{display:grid;gap:var(--space-sm)}
.site-nav--mobile .menu__submenu{position:static;width:100%;box-shadow:none;border:0;padding-left:var(--space-md)}
@media (max-width:959px){.site-header__mobile{display:block}.site-nav--desktop,.locale-switcher--desktop{display:none}}
.social-links{display:flex;flex-wrap:wrap;gap:var(--space-sm);align-items:center}
.social-links__item{display:inline-flex;align-items:center;min-height:44px;color:inherit;text-decoration:none;font-weight:600;padding:var(--space-xs) var(--space-sm);border-radius:var(--radius-sm);background:var(--color-surface)}
.alert{display:flex;gap:.75rem;align-items:flex-start;padding:1rem 1.25rem;border-radius:var(--radius-md,8px);border:1px solid color-mix(in srgb,var(--alert-color) 35%,transparent);background:color-mix(in srgb,var(--alert-color) 10%,var(--color-background,#fff));color:var(--color-text)}
.alert--info{--alert-color:var(--color-info,var(--color-primary,#2563eb))}.alert--success{--alert-color:var(--color-success,#15803d)}.alert--warning{--alert-color:var(--color-warning,#b45309)}.alert--error{--alert-color:#b91c1c}
.alert__icon{flex:none;color:var(--alert-color);line-height:0;margin-top:.15rem}.alert__icon svg{width:1.25rem;height:1.25rem}
.alert__title{display:block;margin-bottom:.15rem}.alert__text{margin:0}
/* A badge stays on one line while it fits; a long one wraps instead of widening a phone page (21.10.2026). */
.badge{display:inline-flex;align-items:center;padding:.2em .7em;border-radius:999px;font-size:.8125rem;font-weight:600;line-height:1.4;border:1px solid transparent;max-width:100%;text-wrap:balance}
.badge--primary{background:var(--color-primary);color:var(--color-onPrimary,#fff)}.badge--secondary{background:var(--color-secondary);color:var(--color-onSecondary,#fff)}.badge--accent{background:var(--color-accent);color:#fff}.badge--neutral{background:var(--color-text);color:var(--color-background,#fff)}.badge--outline{border-color:currentColor;color:var(--color-primary)}.badge--success{background:var(--color-success,#15803d);color:var(--color-onSuccess,#fff)}.badge--warning{background:var(--color-warning,#b45309);color:var(--color-onWarning,#fff)}.badge--info{background:var(--color-info,var(--color-primary));color:var(--color-onInfo,var(--color-onPrimary,#fff))}.badge--danger{background:var(--color-danger,#b3261e);color:var(--color-onDanger,#fff)}
.progress__head{display:flex;justify-content:space-between;gap:1rem;margin-bottom:.4rem;font-weight:600}.progress__value{font-variant-numeric:tabular-nums}
.progress__track{height:.75rem;border-radius:999px;background:var(--color-border,#e5e7eb);overflow:hidden}.progress__fill{display:block;height:100%;border-radius:inherit;background:var(--color-primary)}
.progress--circle{display:grid;justify-items:center;gap:.5rem;text-align:center}
.progress__ring{width:8rem;aspect-ratio:1;border-radius:50%;display:grid;place-items:center;background:radial-gradient(closest-side,var(--color-background,#fff) 78%,transparent 79%),conic-gradient(var(--color-primary) calc(var(--progress)*1%),var(--color-border,#e5e7eb) 0)}
.progress__ring .progress__value{font-size:1.25rem;font-weight:700}.progress--circle .progress__label{margin:0;font-weight:600}
.stat__label{margin:0;color:var(--color-muted);font-size:.9rem}.stat__value{margin:.1rem 0;font-family:var(--font-heading,inherit);font-size:2.5rem;font-weight:700;line-height:1.1}.stat__desc{margin:0;color:var(--color-muted);font-size:.9rem}
.steps{list-style:none;margin:0;padding:0;display:grid;gap:1rem}
.steps--horizontal{grid-auto-flow:column;grid-auto-columns:1fr}
.steps__item{display:flex;gap:.75rem;align-items:flex-start;position:relative}
.steps--horizontal .steps__item{flex-direction:column;align-items:center;text-align:center}
.steps--horizontal .steps__item:not(:last-child)::after{content:"";position:absolute;top:1.25rem;left:calc(50% + 1.5rem);right:calc(-50% + 1.5rem);height:2px;background:var(--color-border,#e5e7eb)}
.steps--vertical .steps__item:not(:last-child)::after{content:"";position:absolute;left:1.25rem;top:2.75rem;bottom:-1rem;width:2px;background:var(--color-border,#e5e7eb)}
.steps__number{flex:none;width:2.5rem;height:2.5rem;border-radius:50%;display:grid;place-items:center;background:var(--color-primary);color:var(--color-onPrimary,#fff);font-weight:700}
.steps__title{display:block}.steps__desc{display:block;color:var(--color-muted);font-size:.9rem}
@media (max-width:639px){.steps--horizontal{grid-auto-flow:row}.steps--horizontal .steps__item{flex-direction:row;text-align:start}.steps--horizontal .steps__item:not(:last-child)::after{display:none}}
.timeline{list-style:none;margin:0;padding:0 0 0 1.5rem;border-left:2px solid var(--color-border,#e5e7eb);display:grid;gap:1.5rem}
.timeline__item{position:relative}
.timeline__item::before{content:"";position:absolute;left:calc(-1.5rem - 7px);top:.3rem;width:12px;height:12px;border-radius:50%;background:var(--color-primary);box-shadow:0 0 0 3px var(--color-background,#fff)}
.timeline__time{display:block;color:var(--color-primary);font-weight:700;font-size:.9rem}.timeline__title{display:block}.timeline__title a{display:inline-block;padding:.75rem 0;margin:-.75rem 0}.timeline__text{margin:.2rem 0 0;color:var(--color-muted)}
.image--circle{border-radius:50%!important;aspect-ratio:1;object-fit:cover}.image--rounded{border-radius:1.5rem!important}.image--hexagon{border-radius:0!important;aspect-ratio:1;object-fit:cover;clip-path:polygon(25% 3%,75% 3%,100% 50%,75% 97%,25% 97%,0 50%)}
.mockup{border:1px solid var(--color-border,#d1d5db);border-radius:.75rem;overflow:hidden;background:var(--color-surface,#f3f4f6);box-shadow:0 10px 30px rgba(0,0,0,.08)}
.mockup__bar{display:flex;gap:.4rem;padding:.6rem .8rem;background:var(--color-surface,#f3f4f6);border-bottom:1px solid var(--color-border,#d1d5db)}
.mockup__bar span{width:.7rem;height:.7rem;border-radius:50%;background:#d1d5db}
.mockup--window .mockup__bar span:nth-child(1){background:#ef4444}.mockup--window .mockup__bar span:nth-child(2){background:#f59e0b}.mockup--window .mockup__bar span:nth-child(3){background:#22c55e}
.mockup__screen{line-height:0}.mockup__screen img{border-radius:0!important;width:100%}
.mockup--phone{max-width:20rem;margin-inline:auto;padding:.75rem;border:0;border-radius:2.5rem;background:#111827}
.mockup--phone .mockup__screen{border-radius:1.9rem;overflow:hidden}
/* A video in a device frame (video-frame.ts): the poster fills the screen; the Play/Pause button
   (WCAG 2.2.2) is the hero background video's, and stays for less motion so the video can be
   started by hand. Without JavaScript the native controls stay and the button is hidden. */
.mockup--none{border:0;border-radius:0;background:none;box-shadow:none}
.video--framed .mockup__screen{position:relative}.video--framed .video__player{background:#000;width:100%;height:auto}
.video__toggle{position:absolute;right:.75rem;bottom:.75rem;z-index:2;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border:1px solid rgb(255 255 255 / .6);border-radius:999px;background:rgb(0 0 0 / .55);color:#fff;cursor:pointer}
.video__toggle:focus-visible{outline:3px solid #fff;outline-offset:2px;box-shadow:0 0 0 6px #111827}
.video__toggle-icon{display:block;width:12px;height:14px;border-left:4px solid currentColor;border-right:4px solid currentColor;box-sizing:border-box}
.video__toggle-icon--play{width:0;height:0;border-left:13px solid currentColor;border-right:0;border-top:8px solid transparent;border-bottom:8px solid transparent;margin-left:3px}
/* App store links (app-badges.ts): one height for all (Google: the same size as the others),
   a quarter of it as clear space (Apple, Google), never under Apple's 40 px; the owner's
   official artwork is shown as it is, never cropped, recoloured or animated. */
.app-badges{--app-badge-h:48px;list-style:none;margin:var(--space-sm,.75rem) 0 0;padding:0;display:flex;flex-wrap:wrap;gap:calc(var(--app-badge-h) / 4);align-items:center}
.app-badges--small{--app-badge-h:40px}.app-badges--stack{flex-direction:column;align-items:flex-start}
.app-badges--center{justify-content:center}.app-badges--stack.app-badges--center{align-items:center}
.app-badges--end{justify-content:flex-end}.app-badges--stack.app-badges--end{align-items:flex-end}
.app-badges li{margin:0;padding:0}
.app-badge{display:inline-flex;align-items:center;gap:.5rem;height:var(--app-badge-h);text-decoration:none}
.app-badge__image{display:block;height:100%;width:auto;max-width:none;border-radius:0!important;box-shadow:none!important;filter:none!important;transform:none!important}
.app-badge--text{padding:0 1rem;border:2px solid currentColor;border-radius:.5rem;color:inherit;font-weight:600;line-height:1.2}
.app-badge--text:hover{background:color-mix(in srgb,currentColor 10%,transparent)}
.app-badge:focus-visible{outline:3px solid var(--color-primary,#2563eb);outline-offset:3px}
.app-badge__icon{display:inline-flex;width:1.25rem;height:1.25rem}.app-badge__icon svg{width:100%;height:100%}
/* Download QR code beside the badges (app-badges.ts). */
.app-download{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-sm,.75rem) var(--space-lg,1.5rem);margin-top:var(--space-sm,.75rem)}
.app-download>.app-badges{margin:0}.app-download--center{justify-content:center}.app-download--end{justify-content:flex-end}
.app-download__qr{margin:0;display:grid;justify-items:center;gap:.35rem}
.app-download__qr-link{display:block;line-height:0}.app-download__qr .qr__svg{display:block;width:7.5rem;height:auto;background:#fff}
.app-download__qr-link:focus-visible{outline:3px solid var(--color-primary,#2563eb);outline-offset:3px}
.app-download__caption{color:inherit;font-size:.875rem;font-weight:600;text-align:center}
@media (max-width:767px){.app-download--qr-wide .app-download__qr{display:none}}
/* A framed picture or video in a feature row keeps its own shape (a phone screen is tall). */
.feature-row__media .mockup .feature-row__image{aspect-ratio:auto;height:auto}.feature-row__media .mockup--phone{max-width:18rem}
.hero__apps,.cta__apps{margin-top:var(--space-sm,.75rem)}.hero--center .app-badges{justify-content:center}.cta--center .app-badges{justify-content:center}
.hero--center .app-download,.cta--center .app-download{justify-content:center}
/* Button group (E234): buttons joined into one control; only the outer corners are
   round and a hairline parts the segments. A column on a phone, so no label is cut. */
.button-group-wrap{display:flex}.button-group-wrap--center{justify-content:center}.button-group-wrap--end{justify-content:flex-end}
.button-group{--button-group-outline:var(--scheme-link,var(--color-primary));display:inline-flex;max-width:100%;border-radius:var(--button-radius,var(--radius-md));overflow:hidden;--button-group-line:color-mix(in srgb,currentColor 35%,transparent)}
.button-group>.button-group__item{flex:0 1 auto;display:inline-flex;align-items:center;justify-content:center;min-height:44px;margin:0;border-radius:0;text-align:center;transform:none;box-shadow:none}
.button-group>.button-group__item+.button-group__item{border-left:1px solid var(--button-group-line)}
.button-group--secondary>.button-group__item{background:var(--color-secondary);color:var(--color-onSecondary,#fff)}
.button-group--outline{border:1px solid var(--button-group-outline)}
.button-group--outline>.button-group__item{background:transparent;color:var(--button-group-outline);border-color:transparent}
.button-group--outline>.button-group__item+.button-group__item{border-left-color:var(--button-group-outline)}
.button-group--outline>.button-group__item:hover{background:color-mix(in srgb,var(--button-group-outline) 10%,transparent)}
.button-group>.button-group__item:focus-visible{outline:2px solid var(--color-text);outline-offset:-4px}
@media (max-width:639px){.button-group-wrap{display:block}.button-group{display:flex;flex-direction:column}.button-group>.button-group__item+.button-group__item{border-left:0;border-top:1px solid var(--button-group-line)}.button-group--outline>.button-group__item+.button-group__item{border-top-color:var(--button-group-outline)}}
/* List group (E233): rows with hairlines between them; a row with an address is a
   link over the whole row, at least 44px high. */
.list-group{list-style:none;margin:0;padding:0;border:1px solid var(--scheme-border,var(--color-border));border-radius:var(--radius-md);overflow:hidden}
.list-group__item+.list-group__item{border-top:1px solid var(--scheme-border,var(--color-border))}
.list-group__row{display:flex;align-items:center;justify-content:space-between;gap:var(--space-sm);min-height:44px;padding:.7rem 1rem;color:inherit;text-decoration:none}
.list-group__label{min-width:0;overflow-wrap:anywhere}
.list-group__note{flex:none;margin-left:auto;color:var(--scheme-muted,var(--color-muted));font-size:.9rem}
.list-group__row--link::after{content:"›";content:"›" / "";flex:none;color:var(--scheme-muted,var(--color-muted));font-size:1.25rem;line-height:1}
.list-group__row--link:hover{background:color-mix(in srgb,var(--color-primary) 8%,transparent)}
.list-group__row--link:focus-visible{outline:2px solid var(--color-primary);outline-offset:-2px}
/* Overlap ("Päällekkäin"): stacked grid layers, never free positioning. A phone keeps the stack
   in reading order; from 960 px the first two blocks share one row of 12 columns and overlap.
   Text in front sits on a solid panel in the section's own colour (contrast as the palette);
   text behind an image stops before the overlap, so no word is ever covered. */
@media (min-width:960px){
.section.section--grid .section__blocks.layers{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:0;row-gap:var(--space-lg);align-items:center;--layers-a:9;--layers-b:6;--layers-share-a:.375;--layers-share-b:.429}
.section.section--grid .section__blocks.layers.layers--small{--layers-a:8;--layers-b:7;--layers-share-a:.143;--layers-share-b:.167}
.section.section--grid .section__blocks.layers.layers--large{--layers-a:10;--layers-b:5;--layers-share-a:.556;--layers-share-b:.625}
.section.section--grid .section__blocks.layers.layers--align-start{align-items:start}
.section.section--grid .section__blocks.layers.layers--align-end{align-items:end}
.section.section--grid .section__blocks.layers>*{grid-row:1;min-width:0}
.section.section--grid .section__blocks.layers>:nth-child(1){grid-column:1/var(--layers-a)}
.section.section--grid .section__blocks.layers>:nth-child(2){grid-column:var(--layers-b)/-1}
.section.section--grid .section__blocks.layers>:nth-child(n+3){grid-row:auto;grid-column:1/-1}
.section.section--grid .section__blocks.layers.layers--front-first>:nth-child(1),.section.section--grid .section__blocks.layers.layers--front-second>:nth-child(2){position:relative;z-index:1}
.section.section--grid .section__blocks.layers.layers--front-first>:nth-child(1):not(.block--image),.section.section--grid .section__blocks.layers.layers--front-second>:nth-child(2):not(.block--image){background:var(--scheme-bg,var(--color-bg));color:var(--scheme-fg,var(--color-text));padding:clamp(1rem,2.5vw,2.5rem)}
.section.section--grid .section__blocks.layers.layers--front-second>:nth-child(1):not(.block--image){padding-inline-end:calc(var(--layers-share-a)*100% + var(--space-md))}
.section.section--grid .section__blocks.layers.layers--front-first>:nth-child(2):not(.block--image){padding-inline-start:calc(var(--layers-share-b)*100% + var(--space-md))}
.section.section--grid .section__blocks.layers .block--image img{width:100%;height:auto}
}
/* Typographic index: big underlined links that wrap like words; each stays one tap target. */
.list-group--index{display:flex;flex-wrap:wrap;gap:.05em .45em;border:0;border-radius:0;overflow:visible;font-family:var(--font-heading);font-size:clamp(1.75rem,1rem + 3.6vw,4.25rem);line-height:1.08;letter-spacing:-.02em}
.list-group--index .list-group__item+.list-group__item{border-top:0}
.list-group--index .list-group__row{display:inline-flex;align-items:baseline;gap:.3em;min-height:44px;padding:0}
.list-group--index .list-group__row--link{text-decoration:underline;text-decoration-thickness:.06em;text-underline-offset:.12em}
.list-group--index .list-group__row--link::after{content:none}
.list-group--index .list-group__row--link:hover{background:none;text-decoration-thickness:.12em}
.list-group--index .list-group__row--link:focus-visible{outline-offset:4px}
.list-group--index .list-group__note{margin-left:0;font-family:var(--font-body,inherit);font-size:max(.875rem,.28em);letter-spacing:0}
/* Avatar group (E232): round pictures that overlap by a quarter, the ring in the
   colour of the surface behind them so each face stays apart, then "+N" and a text. */
.avatar-group{--avatar-size:3rem;display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .85rem}
.avatar-group--sm{--avatar-size:2.25rem}.avatar-group--lg{--avatar-size:4rem}
.avatar-group--center{justify-content:center}.avatar-group--end{justify-content:flex-end}
.avatar-group__faces{display:flex;align-items:center;padding-left:calc(var(--avatar-size)*.28)}
.avatar-group__face,.avatar-group__more{flex:none;box-sizing:border-box;width:var(--avatar-size);height:var(--avatar-size);margin-left:calc(var(--avatar-size)*-.28);border-radius:50%;border:2px solid var(--scheme-bg,var(--color-background,#fff))}
.avatar-group__face{object-fit:cover;background:var(--color-surface)}
.avatar-group__more{display:grid;place-items:center;padding:0 .2em;background:var(--scheme-surface,var(--color-surface));color:var(--scheme-fg,var(--color-text));font-size:calc(var(--avatar-size)*.3);font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap;min-width:var(--avatar-size);width:auto;border-radius:999px}
.avatar-group__text{margin:0;font-size:.95rem;color:var(--scheme-muted,var(--color-muted))}
/* Masonry gallery (E231): CSS columns, no script. Pictures keep their own height and
   fill each column from top to bottom, which is also the reading order. Two columns
   on a phone, the chosen number from the md breakpoint up. The selector outweighs the
   grid rule compile() emits for the same element. */
figure.gallery.gallery--masonry>.gallery__grid{display:block;column-count:min(2,var(--gallery-columns,3));column-gap:var(--space-sm)}
.gallery--masonry .gallery__grid>.block{break-inside:avoid;margin:0 0 var(--space-sm)}
.gallery.gallery--masonry .image{height:auto}
@media (min-width:960px){figure.gallery.gallery--masonry>.gallery__grid{column-count:var(--gallery-columns,3)}}
/* Before–after image (E229). Side by side until the script marks it live, so both
   pictures show without JavaScript; live, the "before" picture lies on top and is
   clipped at --before-after. The range input is invisible but focusable: it serves
   the keyboard and screen readers, and its focus ring is drawn on the knob. */
.before-after{margin:0;--before-after-ratio:16/9}
.before-after--4-3{--before-after-ratio:4/3}.before-after--1-1{--before-after-ratio:1}.before-after--3-4{--before-after-ratio:3/4}
.before-after__stage{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:var(--space-sm)}
.before-after__pane{position:relative;aspect-ratio:var(--before-after-ratio);overflow:hidden;border-radius:var(--image-radius,var(--radius-md));background:var(--color-surface)}
.before-after__image{width:100%;height:100%;object-fit:cover;border-radius:0}
.before-after__tag{position:absolute;top:.75rem;left:.75rem;padding:.2em .7em;border-radius:999px;background:rgba(17,24,39,.72);color:#fff;font-size:.8125rem;font-weight:600;line-height:1.4}
.before-after__range,.before-after__handle{display:none}
@media (max-width:639px){.before-after__stage{grid-template-columns:1fr}}
.before-after__caption{margin-top:var(--space-xs);color:var(--scheme-muted,var(--color-muted));font-size:.9rem}
.before-after.is-live .before-after__stage{display:block;aspect-ratio:var(--before-after-ratio);overflow:hidden;border-radius:var(--image-radius,var(--radius-md));cursor:ew-resize;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.before-after.is-live .before-after__pane{position:absolute;inset:0;aspect-ratio:auto;border-radius:0}
.before-after.is-live .before-after__pane--before{z-index:1;clip-path:inset(0 calc(100% - var(--before-after)) 0 0)}
.before-after.is-live .before-after__pane--after .before-after__tag{left:auto;right:.75rem}
.before-after.is-live .before-after__image{pointer-events:none;-webkit-user-drag:none}
.before-after.is-live .before-after__range{display:block;position:absolute;inset:0;z-index:3;width:100%;height:100%;margin:0;opacity:0;pointer-events:none}
.before-after.is-live .before-after__handle{display:block;position:absolute;z-index:2;top:0;bottom:0;left:var(--before-after);width:2px;margin-left:-1px;background:#fff;box-shadow:0 0 0 1px rgba(17,24,39,.25);pointer-events:none}
.before-after__knob{position:absolute;top:50%;left:50%;width:2.75rem;height:2.75rem;margin:-1.375rem 0 0 -1.375rem;border-radius:50%;display:grid;place-items:center;background:#fff;color:var(--color-text,#111827);box-shadow:0 2px 10px rgba(17,24,39,.35)}
.before-after__range:focus-visible~.before-after__handle .before-after__knob{outline:3px solid var(--color-primary);outline-offset:3px}
/* Heading with a rotating word (E230). Only the word that shows (.is-active) takes
   room; the others lie on top of it, so without the script the box is exactly the
   first word. The sentence for screen readers is visually hidden, the animated copy
   is aria-hidden. No script or reduced motion: the first word, still. */
.text-rotate{position:relative}
.text-rotate__sentence{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.text-rotate__words{display:inline-grid;position:relative;text-align:start;overflow-x:clip;transition:width .35s ease}
.text-rotate__words--accent{color:var(--color-primary)}
.text-rotate__word{position:absolute;top:0;left:0;white-space:nowrap;opacity:0;transform:translateY(.4em);transition:opacity .35s ease,transform .35s ease}
.text-rotate__word.is-active{position:relative;opacity:1;transform:none}
.text-rotate__word.is-leaving{transform:translateY(-.4em)}
@media (prefers-reduced-motion:reduce){.text-rotate__words,.text-rotate__word{transition:none}}
.countdown{margin:var(--space-md) 0}
.countdown__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-sm);text-align:center}
.countdown__unit strong{display:block;font-size:1.75rem;line-height:1.1}
.countdown__unit small{color:var(--scheme-muted,var(--color-muted));font-size:.85rem}
.countdown__done{font-weight:600;margin:0}
.dynamic-number{margin:0;font-size:1.25rem}
.dynamic-number__value{font-size:1.5em;margin:0 var(--space-xs)}
.floating-cta{position:fixed;right:var(--space-md);bottom:var(--space-md);z-index:40}
.floating-cta__btn{display:inline-flex;align-items:center;justify-content:center;padding:var(--space-sm) var(--space-md);border-radius:999px;background:var(--color-primary);color:#fff;text-decoration:none;font-weight:700;box-shadow:0 4px 20px rgba(0,0,0,.18)}
@media (max-width:639px){.floating-cta--hide-phone{display:none}}
.site-popup{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;padding:var(--space-md)}
.site-popup__backdrop{position:absolute;inset:0;background:rgba(0,0,0,.45)}
.site-popup__panel{position:relative;z-index:1;max-width:28rem;width:100%;padding:var(--space-lg);background:var(--color-background);border-radius:var(--radius-md);box-shadow:0 8px 32px rgba(0,0,0,.2)}
.site-popup__close{position:absolute;top:var(--space-sm);right:var(--space-sm);border:0;background:transparent;font-size:1.5rem;line-height:1;cursor:pointer;color:inherit}
.site-popup__title{margin:0 0 var(--space-sm)}
.site-popup__body{margin-bottom:var(--space-md)}
.site-popup__cta{margin:var(--space-md) 0 0}
.event-archive{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-sm)}
.event-archive__link{display:flex;flex-wrap:wrap;gap:var(--space-xs) var(--space-md);padding:var(--space-sm) var(--space-md);background:var(--color-surface);border-radius:var(--radius-sm);text-decoration:none;color:inherit}
.event-archive__title{font-weight:600;flex:1 1 12rem}
.event-archive__date,.event-archive__location{color:var(--color-muted);font-size:.95rem}
.icon-boxes{display:contents}
.icon-box{padding:var(--space-md);background:var(--color-surface);border-radius:var(--radius-md);text-align:center}
.icon-box__icon{display:flex;justify-content:center;margin-bottom:var(--space-sm);color:var(--color-primary)}
.icon-box__icon .cms-icon{margin:0}
.icon-box__title{margin:0 0 var(--space-xs);font-size:1.1rem}
.icon-box__body{color:var(--color-muted);font-size:.95rem}
.icon-box__link{margin:var(--space-sm) 0 0;font-size:.9rem}
.icon-box__link a{display:inline-block;padding:.8rem 0;margin:-.8rem 0}
.pricing{display:contents}
.pricing__intro{margin-bottom:var(--space-md);max-width:40rem}
.pricing-plan{padding:var(--space-lg);background:var(--color-surface);border-radius:var(--card-radius,var(--radius-md));border:var(--card-border,0) solid var(--color-border);box-shadow:var(--card-shadow,var(--shadow-card,none));display:flex;flex-direction:column;gap:var(--space-sm)}
.pricing-plan--featured{background:var(--color-primary);color:var(--color-onPrimary,#fff);box-shadow:0 8px 24px rgba(0,0,0,.12)}
.pricing-plan--featured a{color:inherit}
.pricing-plan--featured .button{background:var(--color-onPrimary,#fff);color:var(--color-primary)}
.pricing-plan__name{margin:0;font-size:1.1rem}
.pricing-plan__price{margin:0;font-size:2rem;font-weight:700;line-height:1.1}
.pricing-plan__period{font-size:1rem;font-weight:500;opacity:.85}
.pricing-plan__features{flex:1;margin:0;font-size:.95rem}
.pricing-plan__cta{margin:var(--space-sm) 0 0}
.pricing-plan__badge{order:-1;align-self:flex-start;margin:0;padding:.25rem .8rem;border:2px solid var(--color-primary);border-radius:999px;background:var(--color-onPrimary,#fff);color:var(--color-primary);font-size:.875rem;font-weight:700;line-height:1.3;text-align:center}
@media (min-width:48rem){.section:not([data-design="rows"]) .pricing:has(.pricing-plan__badge){padding-top:1rem;row-gap:max(var(--space-md),2rem)}.pricing-plan--featured{position:relative}.pricing-plan__badge{position:absolute;top:0;left:50%;transform:translate(-50%,-50%);width:max-content;max-width:calc(100% - 2rem)}}
.blog-archive{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-sm)}
.blog-archive__link{display:block;padding:var(--space-sm) var(--space-md);background:var(--color-surface);border-radius:var(--radius-sm);text-decoration:none;color:inherit}
.blog-archive__title{display:block;font-weight:600;margin-bottom:var(--space-xs)}
.blog-archive__pinned{display:inline-block;align-self:flex-start;width:fit-content;margin-bottom:var(--space-xs);padding:.1rem .5rem;border-radius:var(--radius-sm);background:var(--color-primary);color:var(--color-onPrimary,#fff);font-size:.8rem;font-weight:600}
.blog-archive__date{display:block;color:var(--color-muted);font-size:.9rem;margin-bottom:var(--space-xs)}
/* The excerpt keeps the running-text measure (60ch, about 75 characters) also in a full-width
   list row or the featured list's first card, which spans the whole row (2.11.2026). */
.blog-archive__excerpt{margin:0;max-width:60ch;color:var(--color-muted);font-size:.95rem}
.social-feed__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-sm);list-style:none;margin:0;padding:0}
@media (min-width:768px){.social-feed__grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.social-feed__item{margin:0;aspect-ratio:1;overflow:hidden;border-radius:var(--radius-sm);background:var(--color-surface)}
.social-feed__item img,.social-feed .image{width:100%;height:100%;object-fit:cover;display:block}
.social-feed__placeholder{display:flex;align-items:center;justify-content:center;height:100%;color:var(--color-muted);font-size:.9rem;padding:var(--space-sm);text-align:center}
.social-feed__profile{margin:var(--space-md) 0 0;text-align:center}
.team-archive{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-md);grid-template-columns:repeat(auto-fill,minmax(10rem,1fr))}
.team-archive__link,.team-archive__card{display:flex;flex-direction:column;align-items:center;text-align:center;padding:var(--space-md);background:var(--color-surface);border-radius:var(--radius-md);text-decoration:none;color:inherit;height:100%}
.team-archive__photo{width:5rem;height:5rem;border-radius:50%;object-fit:cover;margin-bottom:var(--space-sm);background:var(--color-background)}
.team-archive__name{font-weight:600}
.team-archive__role{color:var(--color-muted);font-size:.9rem;margin-top:var(--space-xs)}
/* A full-width gallery's heading stays in the content column, off the screen edges. */
.gallery__heading--inset{max-width:var(--size-contentMaxWidth);margin-inline:auto;padding-inline:clamp(16px,5vw,24px);box-sizing:border-box}
:is([data-color-scheme=muted],[data-color-scheme=dark],[data-color-scheme=accent])>.section__inner>.gallery__heading--inset{padding-top:var(--space-md,16px)}
.gallery--slider .gallery__grid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:var(--space-md);padding-bottom:var(--space-sm)}
.gallery--slider .gallery__grid>.block{flex:0 0 min(85%,18rem);scroll-snap-align:start}
/* Gallery "Diaesitys" (slideshow): one picture at a time in the kuvaselain's track
   (library-blocks/image-browser.ts); the selector outweighs the grid rule compile() emits. */
figure.gallery.gallery--slideshow .gallery__grid{display:flex;gap:0;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;width:100%;aspect-ratio:3 / 2;max-height:85vh}
figure.gallery.gallery--slideshow .gallery__grid>.block{flex:0 0 100%;min-width:0;height:100%;scroll-snap-align:start;scroll-snap-stop:always}
figure.gallery.gallery--slideshow .gallery__grid>.block[hidden]{display:none}
figure.gallery.gallery--slideshow .image-figure{height:100%;display:flex;flex-direction:column}
figure.gallery.gallery--slideshow .image-figure>img,figure.gallery.gallery--slideshow .image-figure>picture>img,figure.gallery.gallery--slideshow .image-figure>a{flex:1 1 auto;min-height:0}
.gallery__browser{border-radius:var(--radius-md,8px)}
.image-figure{margin:0}
.image-figure__caption{margin:.4rem 0 0;font-size:.9rem;color:var(--scheme-muted,var(--color-muted))}
/* E167 card rail: horizontal scroll with native CSS scroll snap, no JS needed.
   Shares the snap behaviour with the gallery slider above; only the card width
   differs (n per view from --rail-n instead of a fixed peek width). */
.cardrail{position:relative}
.cardrail__track,.gallery--slider .gallery__grid{-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
.cardrail__track{--rail-n:var(--rail-n-base,1);overflow-x:auto;overflow-y:hidden;flex-wrap:nowrap;scroll-snap-type:x mandatory;padding-bottom:var(--space-sm)}
.cardrail__track>.block{flex:0 0 calc(100% / var(--rail-n));box-sizing:border-box;padding-right:var(--rail-gap,var(--space-md));min-width:0;scroll-snap-align:start}
.cardrail__track:focus-visible{outline:2px solid var(--color-primary,currentColor);outline-offset:2px}
@media (min-width:640px){.cardrail__track{--rail-n:var(--rail-n-sm,var(--rail-n-base,1))}}
@media (min-width:960px){.cardrail__track{--rail-n:var(--rail-n-md,var(--rail-n-sm,var(--rail-n-base,1)))}}
@media (prefers-reduced-motion:no-preference){.cardrail__track{scroll-behavior:smooth}}
.cardrail__nav{display:flex;gap:.5rem;justify-content:flex-end;margin-top:var(--space-sm)}
.cardrail__button{display:inline-flex;align-items:center;justify-content:center;width:2.75rem;height:2.75rem;min-width:44px;min-height:44px;padding:0;border:1px solid var(--color-border,rgb(0 0 0 / 0.2));border-radius:999px;background:var(--color-surface,#fff);color:inherit;font-size:1.5rem;line-height:1;cursor:pointer}
.cardrail__button:hover,.cardrail__button:focus-visible{background:var(--color-background,#f2f2f2)}
.cardrail__button:focus-visible{outline:2px solid var(--color-primary,currentColor);outline-offset:2px}
.cardrail__button:is([aria-disabled="true"],:disabled){opacity:.4;cursor:default}
.carousel{position:relative;z-index:0;width:100%}
.carousel__viewport{position:relative;height:var(--carousel-height,800px);overflow:hidden;background:#111}
.carousel__slide{position:absolute;inset:0;display:grid;align-items:center;justify-items:center}
.carousel__media{position:absolute;inset:0;z-index:0}
.carousel__image{width:100%;height:100%;object-fit:cover;display:block}
.carousel__content{position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;padding:12px 28px;color:#fff;background:#111;background:rgb(0 0 0 / 0.82);text-decoration:none;max-width:min(40rem,92%)}
.carousel__heading{margin:0;font-size:clamp(1.5rem,3vw,2.25rem);font-weight:600;letter-spacing:.04em;line-height:1.1}
.carousel__content:has(.carousel__text,.carousel__button){flex-direction:column;gap:.75rem;text-align:center}
.carousel__text{font-size:clamp(1rem,1.6vw,1.25rem);line-height:1.45;max-width:36rem}
.carousel__button{pointer-events:none}
.carousel--start .carousel__slide{justify-items:start}
.carousel--start .carousel__content{margin-left:var(--space-lg)}
.carousel--end .carousel__slide{justify-items:end}
.carousel--end .carousel__content{margin-right:var(--space-lg)}
.carousel__nav{position:absolute;top:50%;z-index:2;transform:translateY(-50%);width:2.75rem;height:2.75rem;border:0;border-radius:999px;background:rgba(0,0,0,.45);color:#fff;font-size:1.75rem;line-height:1;cursor:pointer}
.carousel__nav:hover,.carousel__nav:focus-visible{background:rgba(0,0,0,.7);outline:2px solid #fff;outline-offset:2px}
.carousel__nav--prev{left:1rem}
.carousel__nav--next{right:1rem}
.carousel__dots{position:absolute;left:0;right:0;bottom:calc(1rem - 6px);z-index:2;display:flex;justify-content:center;gap:0}
.carousel__dot{display:grid;place-items:center;width:24px;height:24px;border:0;border-radius:999px;padding:0;background:transparent;cursor:pointer}
.carousel__dot::before{content:"";width:12px;height:12px;border-radius:999px;background:rgba(255,255,255,.45)}
.carousel__dot[aria-current="true"]::before{background:#fff}
.carousel__dot:focus-visible{outline:2px solid #fff;outline-offset:0}
.carousel__rotation{position:absolute;left:1rem;bottom:.5rem;z-index:3;display:flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border:0;border-radius:999px;background:rgba(0,0,0,.6);color:#fff;cursor:pointer}
.carousel__rotation:hover,.carousel__rotation:focus-visible{background:rgba(0,0,0,.85);outline:2px solid #fff;outline-offset:2px}
.carousel__rotation .cms-icon{margin:0}.carousel__rotation svg{width:20px;height:20px}
.carousel__rotation[x-cloak],.carousel__rotation [x-cloak]{display:none}
@media (max-width:767px){.carousel__viewport{height:var(--carousel-height-mobile,450px)}.carousel__nav{width:2.25rem;height:2.25rem;font-size:1.4rem}.carousel__nav--prev{left:.5rem}.carousel__nav--next{right:.5rem}}
@media (prefers-reduced-motion:reduce){.carousel__slide{transition:none!important}}
/* Tables (E185). Imported price lists, opening hours and spec tables arrive
   inside rich text (the sanitizer allows table markup), so the styles sit on
   the bare elements. The .table-wrap box around every rich-text table comes
   from the sanitize filter: a wide table scrolls inside its own box instead of
   making the page body scroll sideways on a phone. Restrained by design: one
   hairline rule per row and a faint zebra, no heavy grid, no capslock head. */
.table-wrap{max-width:100%;overflow-x:auto;margin:0 0 var(--space-md)}
.table-wrap:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}
table{width:100%;border-collapse:collapse;font-size:.95rem}
caption{caption-side:top;text-align:left;color:var(--scheme-muted,var(--color-muted));font-size:.9rem;padding-bottom:var(--space-xs)}
th,td{padding:var(--space-xs) var(--space-sm);border-bottom:1px solid var(--scheme-border,var(--color-border));text-align:left;vertical-align:top}
thead th{font-weight:600;border-bottom-width:2px}
tbody tr:nth-child(even) th,tbody tr:nth-child(even) td{background:color-mix(in srgb,var(--scheme-surface,var(--color-surface)) 55%,transparent)}
tbody tr:last-child th,tbody tr:last-child td{border-bottom:0}
tfoot th,tfoot td{font-weight:600;border-top:1px solid var(--scheme-border,var(--color-border))}
/* Data table: the bare table styles above apply; here are the scroll box, the sort
   buttons and the phone layout where each row is a card. */
.data-table{margin:0 0 var(--space-md)}
.data-table__scroll{max-width:100%;overflow-x:auto}
.data-table__scroll:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}
.data-table:not(.data-table--striped) tbody tr:nth-child(even)>*{background:transparent}
.data-table tbody th{font-weight:600}
.data-table .data-table__th--sort{padding:0}
.data-table__sort{appearance:none;margin:0;padding:0;border:0;border-radius:0;background:none;color:inherit;font:inherit;line-height:inherit;text-align:inherit;box-shadow:none;transform:none;transition:none;cursor:pointer;display:flex;align-items:center;justify-content:flex-start;gap:.4em;width:100%;min-height:44px;padding:var(--space-xs) var(--space-sm);font-weight:600}
.data-table__sort:hover{transform:none;box-shadow:none;color:var(--scheme-link,var(--color-primary))}
.data-table__sort:focus-visible{outline:2px solid var(--color-primary);outline-offset:-2px}
.data-table__sort:disabled{cursor:default;color:inherit}
.data-table__arrow::before{content:"↕";opacity:.45}
.data-table__sort:disabled .data-table__arrow{display:none}
[aria-sort="ascending"] .data-table__arrow::before{content:"↑";opacity:1}
[aria-sort="descending"] .data-table__arrow::before{content:"↓";opacity:1}
@media (max-width:639px){.data-table--stack .data-table__scroll{overflow:visible}.data-table--stack thead{display:none}.data-table--stack table,.data-table--stack tbody,.data-table--stack tr,.data-table--stack tbody th,.data-table--stack td{display:block}.data-table--stack caption{display:block;padding-bottom:var(--space-sm)}.data-table--stack tr{margin:0 0 var(--space-sm);padding:var(--space-xs) var(--space-sm);border:1px solid var(--scheme-border,var(--color-border));border-radius:var(--radius-md);background:var(--scheme-bg,var(--color-background))}.data-table.data-table--stack tbody tr>*{display:flex;justify-content:space-between;gap:var(--space-md);padding:var(--space-xs) 0;background:transparent;text-align:right;overflow-wrap:anywhere}.data-table.data-table--stack tbody tr>*:last-child{border-bottom:0}.data-table.data-table--stack tbody tr>th{justify-content:flex-start;text-align:left;font-size:1.05rem}.data-table--stack td::before{content:attr(data-label);flex:none;max-width:45%;font-weight:600;text-align:left}.data-table--stack td[data-label=""]::before{content:none}.data-table--stack.data-table--striped tbody tr:nth-child(even){background:var(--scheme-surface,var(--color-surface))}}
/* Chart: thin marks, hairline grid, text in text colours; the data colour is only on
   the marks. */
:root{--chart-1:#2a78d6;--chart-2:#eb6834;--chart-3:#1baf7a;--chart-4:#eda100;--chart-5:#e87ba4;--chart-6:#008300}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--chart-1:#3987e5;--chart-2:#d95926;--chart-3:#199e70;--chart-4:#c98500;--chart-5:#d55181;--chart-6:#008300}}
:root[data-theme="dark"],.section[data-color-scheme="dark"]{--chart-1:#3987e5;--chart-2:#d95926;--chart-3:#199e70;--chart-4:#c98500;--chart-5:#d55181;--chart-6:#008300}
.chart{--chart-ink:var(--scheme-link,var(--color-primary));--chart-surface:var(--scheme-bg,var(--color-background));--chart-rule:var(--scheme-border,var(--color-border));--chart-quiet:var(--scheme-muted,var(--color-muted));margin:0 0 var(--space-md)}
.chart>.chart__title{margin:0 0 var(--space-sm);color:var(--scheme-fg,var(--color-text));text-align:start;font-family:var(--font-heading);font-weight:var(--font-headingWeight,bold);font-size:var(--font-size-h4,1.05rem)}
.chart__note{margin:var(--space-sm) 0 0;color:var(--chart-quiet);font-size:.9rem}
.chart__value{font-variant-numeric:tabular-nums;white-space:nowrap}
.chart__bars,.chart__legend{list-style:none;margin:0;padding:0}
.chart__row{display:grid;grid-template-columns:minmax(5rem,30%) minmax(0,1fr) auto;align-items:center;gap:var(--space-sm);padding:.3rem 0}
.chart__row .chart__name{overflow-wrap:anywhere}
.chart__track{display:block;border-left:1px solid var(--chart-rule);padding:.25rem 0}
.chart__bar{display:block;height:.75rem;min-width:2px;border-radius:0 4px 4px 0;background:var(--chart-ink)}
.chart__frame{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.4rem var(--space-sm);padding-right:.5rem}
.chart__y{display:flex;flex-direction:column;justify-content:space-between;align-items:flex-end;color:var(--chart-quiet);font-size:.8rem;line-height:1;font-variant-numeric:tabular-nums}
.chart__y span:first-child{transform:translateY(-50%)}.chart__y span:last-child{transform:translateY(50%)}
.chart__plot{display:block;width:100%;height:12rem;overflow:visible}
.chart__plot path,.chart__plot polyline{fill:none;vector-effect:non-scaling-stroke}
.chart__grid{stroke:var(--chart-rule);stroke-width:1}
.chart__line{stroke:var(--chart-ink);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.chart__dot{stroke:var(--chart-ink);stroke-width:9;stroke-linecap:round}
.chart__halo{stroke:var(--chart-surface);stroke-width:13;stroke-linecap:round}
.chart__point:hover .chart__dot{stroke-width:12}
.chart__x{grid-column:2;display:flex;justify-content:space-between;color:var(--chart-quiet);font-size:.8rem;line-height:1.3}
.chart__x>span{display:flex;justify-content:center;width:0;white-space:nowrap}
.chart__x>span:first-child{justify-content:flex-start}.chart__x>span:last-child{justify-content:flex-end}
.chart__x--sparse>span:not(:first-child):not(:last-child){display:none}
.chart__data{margin-top:var(--space-sm);font-size:.9rem}
.chart__data summary{display:inline-flex;align-items:center;min-height:44px;cursor:pointer;color:var(--scheme-link,var(--color-primary))}
.chart__data summary:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}
.chart__data table{width:auto;min-width:min(100%,16rem)}
.chart__donut{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-md) var(--space-lg)}
.chart__ringbox{position:relative;flex:none;width:min(100%,13rem);margin-inline:auto}
svg.chart__ring{display:block;width:100%;height:auto}
.chart__slice{fill:none;stroke-width:5.5}
.chart__slice--1,.chart__swatch--1{--chart-c:var(--chart-1)}.chart__slice--2,.chart__swatch--2{--chart-c:var(--chart-2)}.chart__slice--3,.chart__swatch--3{--chart-c:var(--chart-3)}.chart__slice--4,.chart__swatch--4{--chart-c:var(--chart-4)}.chart__slice--5,.chart__swatch--5{--chart-c:var(--chart-5)}.chart__slice--6,.chart__swatch--6{--chart-c:var(--chart-6)}.chart__slice--other,.chart__swatch--other{--chart-c:var(--chart-quiet)}
.chart__slice{stroke:var(--chart-c)}
.chart__total{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;margin:0;text-align:center;line-height:1.2}
.chart__total strong{font-size:1.35rem;font-variant-numeric:tabular-nums}.chart__total span{color:var(--chart-quiet);font-size:.85rem}
.chart__legend{flex:1 1 14rem;min-width:0}
.chart__key{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:baseline;gap:var(--space-sm);padding:.35rem 0;border-bottom:1px solid var(--chart-rule)}
.chart__key:last-child{border-bottom:0}
.chart__swatch{align-self:center;width:.75rem;height:.75rem;border-radius:2px;background:var(--chart-c)}
.chart__share{color:var(--chart-quiet);margin-left:.4em}
@media (max-width:639px){.chart__row{grid-template-columns:minmax(0,1fr) auto;gap:0 var(--space-sm)}.chart__row .chart__name{grid-column:1/-1}.chart__x--dense>span:not(:first-child):not(:last-child){display:none}.chart__plot{height:10rem}}
@media (forced-colors:active){.chart__bar{background:CanvasText}.chart__line,.chart__dot{stroke:CanvasText}.chart__slice{stroke:CanvasText}.chart__swatch{border:1px solid CanvasText}}
/* Rating: stars as text, the lit row cut to the score. */
:root{--rating-color:#b7791f}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--rating-color:#f0b429}}
:root[data-theme="dark"],.section[data-color-scheme="dark"]{--rating-color:#f0b429}
.stars{position:relative;display:inline-block;flex:none;line-height:1;white-space:nowrap;font-family:system-ui,sans-serif;color:color-mix(in srgb,currentColor 25%,transparent)}
.stars__on{position:absolute;inset:0 auto 0 0;overflow:hidden;color:var(--rating-color)}
.rating{display:flex;flex-wrap:wrap;align-items:center;gap:.25rem .6rem}
.rating--center{justify-content:center;text-align:center}.rating--end{justify-content:flex-end;text-align:end}
.rating .stars{font-size:1.5rem}.rating--sm .stars{font-size:1.1rem}.rating--lg .stars{font-size:min(2.25rem,7.5vw)}
.rating__value{font-weight:700;font-variant-numeric:tabular-nums}.rating--lg .rating__value{font-size:1.35rem}
.rating__label{color:var(--scheme-muted,var(--color-muted))}
@media (forced-colors:active){.stars{color:GrayText}.stars__on{color:CanvasText}}
/* Reviews: a score line and cards that fill the row, one column on a phone. */
.reviews__heading{margin:0 0 var(--space-xs)}
.reviews__summary{display:flex;flex-wrap:wrap;align-items:center;gap:.25rem .9rem;margin:0 0 var(--space-md)}
.reviews__summary .stars{font-size:1.4rem}
.reviews__score{font-variant-numeric:tabular-nums}
.reviews__meta{color:var(--scheme-muted,var(--color-muted))}
.reviews__notice{margin:0 0 var(--space-sm);color:var(--scheme-muted,var(--color-muted));font-size:.9rem}
.reviews__list{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr));gap:var(--space-md);list-style:none;margin:0;padding:0}
.reviews__item{min-width:0;padding:var(--space-md);border:1px solid var(--scheme-border,var(--color-border));border-radius:var(--card-radius,var(--radius-md));background:var(--scheme-surface,var(--color-surface))}
.reviews__who{display:flex;align-items:center;gap:var(--space-sm);margin-bottom:var(--space-sm)}
.reviews__avatar,.reviews__photo{flex:none;width:2.5rem;height:2.5rem;border-radius:50%}
.reviews__avatar{display:inline-flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--scheme-link,var(--color-primary)) 16%,transparent);font-weight:700}
.reviews__photo{object-fit:cover}
.reviews__id{display:flex;flex-direction:column;min-width:0;line-height:1.3;overflow-wrap:anywhere}
a.reviews__name{font-weight:700}
.reviews__date{color:var(--scheme-muted,var(--color-muted));font-size:.85rem}
.reviews__item .stars{font-size:1.1rem}
.reviews__text{margin:var(--space-xs) 0 0;overflow-wrap:anywhere}
.reviews__translated{color:var(--scheme-muted,var(--color-muted));font-size:.85rem}
.reviews__source{margin:var(--space-xs) 0 0;font-size:.85rem}
.reviews__more{display:flex;flex-wrap:wrap;gap:var(--space-sm);margin:var(--space-md) 0 0}
/* Google's logo rules: 16-19 px high, clear space 10 px left, right and top and 5 px below,
   the Gray variant on a light surface and the White one on a dark surface. */
.reviews__attribution{display:flex;margin:0 0 var(--space-sm);padding:10px 10px 5px;margin-inline-start:-10px;line-height:0}
.reviews__logo{display:block;width:auto;height:18px;color:#5e5e5e}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .reviews__logo{color:#fff}}
:root[data-theme="dark"] .reviews__logo,.section[data-color-scheme="dark"] .reviews__logo{color:#fff}
/* Floating contact button: fixed to a bottom corner; the section itself takes no room. */
.section.section--contactButton{padding:0!important;margin:0!important;min-height:0}
.contact-fab{--contact-edge:max(var(--space-md,16px),env(safe-area-inset-bottom));position:fixed;z-index:40;bottom:var(--contact-edge);left:max(var(--space-md,16px),env(safe-area-inset-left))}
.contact-fab--right{left:auto;right:max(var(--space-md,16px),env(safe-area-inset-right))}
body:has(.floating-cta) .contact-fab--right{bottom:calc(var(--contact-edge) + 4.5rem)}
.contact-fab__btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-width:3.5rem;min-height:3.5rem;padding:0 1.25rem;border-radius:999px;background:var(--color-primary);color:var(--color-onPrimary,#fff);font-weight:700;line-height:1.2;text-decoration:none;box-shadow:0 4px 20px rgba(0,0,0,.2);cursor:pointer;list-style:none}
.contact-fab__btn::-webkit-details-marker{display:none}
.contact-fab__btn:focus-visible{outline:3px solid var(--color-text);outline-offset:2px;box-shadow:0 0 0 2px var(--color-background)}
.contact-fab svg{flex:none;width:1.5rem;height:1.5rem}.contact-fab .cms-icon{margin:0}
.contact-fab__sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.contact-fab__list{position:absolute;bottom:calc(100% + .5rem);left:0;width:max-content;min-width:13rem;max-width:calc(100vw - 2rem);margin:0;padding:.35rem;list-style:none;border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-background);color:var(--color-text);box-shadow:0 8px 30px rgba(0,0,0,.18)}
.contact-fab--right .contact-fab__list{left:auto;right:0}
.contact-fab__link{display:flex;align-items:center;gap:.6rem;min-height:44px;padding:.4rem .7rem;border-radius:var(--radius-sm);color:inherit;text-decoration:none;overflow-wrap:anywhere}
.contact-fab__link:hover{background:color-mix(in srgb,var(--color-primary) 10%,transparent)}
.contact-fab__link:focus-visible{outline:2px solid var(--color-primary);outline-offset:-2px}
@media (max-width:639px){.contact-fab__btn{padding:0}.contact-fab__label{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}}
@media print{.contact-fab{display:none}}
/* Social feed: square tiles, linked tiles show focus, optional one-row strip. */
.social-feed__handle{margin:0 0 var(--space-sm);font-weight:600}
.social-feed__grid>.block{min-width:0;aspect-ratio:1;overflow:hidden;border-radius:var(--radius-sm);background:var(--scheme-surface,var(--color-surface))}
.social-feed__grid>.block>a,.social-feed__grid picture{display:block;height:100%}
.social-feed__grid>.block .image{border-radius:0}
.social-feed__grid a:hover img{opacity:.85}
.social-feed__grid a:focus-visible{outline:3px solid var(--color-primary);outline-offset:-3px}
.section .social-feed.social-feed--strip .social-feed__grid{display:flex;overflow-x:auto;scroll-snap-type:x proximity;padding-bottom:var(--space-xs)}
.section .social-feed.social-feed--strip .social-feed__grid>*{flex:0 0 min(70%,15rem);scroll-snap-align:start}
.section .social-feed.social-feed--strip .social-feed__grid:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}
/* Chips: pills that wrap; a linked chip is at least 32px high and shows focus. */
.chips{--chip-color:var(--scheme-link,var(--color-primary));display:flex;flex-wrap:wrap;gap:var(--space-xs) var(--space-sm);list-style:none;margin:0;padding:0}
.chips--center{justify-content:center}.chips--end{justify-content:flex-end}
.chips__item{display:flex;min-width:0;margin:0}
.chip{display:inline-flex;align-items:center;min-height:2rem;max-width:100%;padding:.2em .9em;border:1px solid transparent;border-radius:999px;font-size:.9375rem;line-height:1.3;overflow-wrap:anywhere;text-decoration:none;color:inherit}
.chips--sm .chip{min-height:1.5rem;padding:.1em .7em;font-size:.8125rem}
.chips--soft .chip{background:color-mix(in srgb,var(--chip-color) 12%,transparent)}
.chips--outline .chip{border-color:color-mix(in srgb,currentColor 45%,transparent)}
.chips--solid .chip{background:var(--color-primary);color:var(--color-onPrimary,#fff)}
.chip--link:hover{border-color:currentColor}
.chips--soft .chip--link:hover{background:color-mix(in srgb,var(--chip-color) 22%,transparent)}
.chip--link:focus-visible{outline:2px solid var(--scheme-fg,var(--color-text));outline-offset:2px}
@media (forced-colors:active){.chip{border-color:CanvasText}}
/* Dropdown button: the list hangs under the button and never leaves the screen. */
.dropdown-wrap{display:flex}.dropdown-wrap--center{justify-content:center}.dropdown-wrap--end{justify-content:flex-end}
.dropdown{position:relative;display:inline-block;max-width:100%}
.dropdown__button{display:inline-flex;align-items:center;gap:.5rem;min-height:44px;cursor:pointer;list-style:none;user-select:none}
.dropdown__button::-webkit-details-marker{display:none}
.dropdown--secondary>.dropdown__button{background:var(--color-secondary);color:var(--color-onSecondary,#fff)}
.dropdown--outline>.dropdown__button{background:transparent;color:var(--scheme-link,var(--color-primary));border-color:currentColor}
.dropdown__button:focus-visible{outline:2px solid var(--scheme-fg,var(--color-text));outline-offset:2px}
.dropdown__chevron{flex:none}.dropdown[open] .dropdown__chevron{transform:rotate(180deg)}
.dropdown__list{position:absolute;z-index:30;top:calc(100% + .35rem);left:0;width:max-content;min-width:100%;max-width:min(20rem,calc(100vw - 2rem));margin:0;padding:.35rem;list-style:none;border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-background);color:var(--color-text);box-shadow:0 8px 30px rgba(0,0,0,.16)}
.dropdown-wrap--end .dropdown__list{left:auto;right:0}
.dropdown__link{display:flex;align-items:center;min-height:44px;padding:.4rem .8rem;border-radius:var(--radius-sm);color:inherit;text-decoration:none;overflow-wrap:anywhere}
.dropdown__link:hover{background:color-mix(in srgb,var(--color-primary) 10%,transparent)}
.dropdown__link:focus-visible{outline:2px solid var(--color-primary);outline-offset:-2px}
@media (max-width:639px){.dropdown-wrap{display:block}.dropdown{display:block}.dropdown__button{display:flex;justify-content:space-between;width:100%}.dropdown__list{position:static;width:auto;max-width:none;margin-top:.35rem;box-shadow:none}}
/* Code block: fixed-width text on the surface colour; the bar holds the title and
   the copy button. */
.code{margin:0 0 var(--space-md);border:1px solid var(--scheme-border,var(--color-border));border-radius:var(--radius-md);background:var(--scheme-surface,var(--color-surface));color:var(--scheme-fg,var(--color-text));overflow:hidden}
.code__bar{display:flex;align-items:center;justify-content:space-between;gap:var(--space-sm);min-height:44px;padding:0 var(--space-xs) 0 var(--space-md);border-bottom:1px solid var(--scheme-border,var(--color-border));font-size:.875rem}
.code__title{min-width:0;overflow-wrap:anywhere;font-weight:600}
.code__copy{appearance:none;margin:0;padding:0;border:0;border-radius:0;background:none;color:inherit;font:inherit;line-height:inherit;text-align:inherit;box-shadow:none;transform:none;transition:none;cursor:pointer;display:inline-flex;align-items:center;min-height:36px;margin-left:auto;padding:0 .75rem;border-radius:var(--radius-sm);font-size:.875rem;font-weight:600;color:var(--scheme-link,var(--color-primary))}
.code__copy:hover{transform:none;box-shadow:none;background:color-mix(in srgb,var(--color-primary) 10%,transparent)}
.code__copy:focus-visible{outline:2px solid var(--color-primary);outline-offset:-2px}
.code__status{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.code__pre{margin:0;padding:var(--space-md);overflow-x:auto;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;font-size:.875rem;line-height:1.6;tab-size:2;white-space:pre}
.code__pre code{font:inherit;background:none;padding:0}
.code--wrap .code__pre{white-space:pre-wrap;overflow-wrap:anywhere}
.code__pre:focus-visible{outline:2px solid var(--color-primary);outline-offset:-2px}
/* Dark mode switch: a labelled track with a thumb; the state is aria-checked. */
.theme-toggle-wrap{display:flex}.theme-toggle-wrap--center{justify-content:center}.theme-toggle-wrap--end{justify-content:flex-end}
.theme-toggle{appearance:none;margin:0;padding:0;border:0;border-radius:0;background:none;color:inherit;font:inherit;line-height:inherit;text-align:inherit;box-shadow:none;transform:none;transition:none;cursor:pointer;display:inline-flex;align-items:center;gap:.6rem;min-height:44px;padding:0 .25rem;border-radius:var(--radius-sm)}
.theme-toggle:hover{transform:none;box-shadow:none}
.theme-toggle:disabled{cursor:default;opacity:.6}
.theme-toggle:focus-visible{outline:2px solid var(--scheme-fg,var(--color-text));outline-offset:2px}
.theme-toggle__icon{flex:none}
.theme-toggle__track{flex:none;position:relative;width:2.75rem;height:1.5rem;border:2px solid currentColor;border-radius:999px;opacity:.75}
.theme-toggle__thumb{position:absolute;top:2px;left:2px;width:1rem;height:1rem;border-radius:50%;background:currentColor}
.theme-toggle[aria-checked="true"] .theme-toggle__track{background:var(--scheme-link,var(--color-primary));border-color:var(--scheme-link,var(--color-primary));opacity:1}
.theme-toggle[aria-checked="true"] .theme-toggle__thumb{left:calc(100% - 1rem - 2px);background:var(--color-onPrimary,#fff)}
@media (prefers-reduced-motion:no-preference){.theme-toggle__thumb{transition:left .15s ease}}
@media (forced-colors:active){.theme-toggle[aria-checked="true"] .theme-toggle__track{background:Highlight;border-color:Highlight}.theme-toggle[aria-checked="true"] .theme-toggle__thumb{background:HighlightText}}
/* Info tip: without the script the explanation is a quiet line under the text and
   the button is not shown; live, it is a bubble above the text, or a line under it on
   a phone. The bubble is placed from the paragraph's start edge and is never wider
   than the paragraph, so it cannot leave the screen; its ::after bridges the gap to
   the button so the pointer can travel onto the bubble. */
.infotip{position:relative;margin:0 0 var(--space-sm)}
.infotip__btn{appearance:none;margin:0;padding:0;border:0;border-radius:0;background:none;color:inherit;font:inherit;line-height:inherit;text-align:inherit;box-shadow:none;transform:none;transition:none;cursor:pointer;display:none;position:relative;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;margin-left:.35rem;border:1.5px solid currentColor;border-radius:50%;font-size:.875rem;font-weight:700;font-style:italic;font-family:Georgia,"Times New Roman",serif;line-height:1;vertical-align:middle}
.infotip__btn::after{content:"";position:absolute;inset:-10px}
.infotip__btn:hover{transform:none;box-shadow:none;color:var(--scheme-link,var(--color-primary))}
.infotip__btn:focus-visible{outline:2px solid var(--scheme-fg,var(--color-text));outline-offset:2px}
.infotip__bubble{display:block;margin-top:.25rem;color:var(--scheme-muted,var(--color-muted));font-size:.9rem}
.infotip.is-live .infotip__btn{display:inline-flex}
.infotip.is-live .infotip__bubble{display:none}
.infotip.is-live.is-open .infotip__bubble{display:block}
@media (min-width:640px){.infotip.is-live .infotip__bubble{position:absolute;z-index:30;bottom:calc(100% + .4rem);left:0;width:max-content;max-width:min(20rem,100%);margin:0;padding:.6rem .8rem;border-radius:var(--radius-md);background:var(--color-text);color:var(--color-background);font-size:.875rem;line-height:1.45;box-shadow:0 6px 20px rgba(0,0,0,.2)}.infotip.is-live .infotip__bubble::after{content:"";position:absolute;left:0;right:0;top:100%;height:.5rem}}
/* Chat bubbles: the first speaker at the start edge, the others at the end edge. */
.chat{display:flex;flex-direction:column;gap:var(--space-sm);list-style:none;margin:0 0 var(--space-md);padding:0}
.chat__msg{display:flex;flex-direction:column;align-items:flex-start;max-width:min(85%,34rem)}
.chat__msg--end{align-self:flex-end;align-items:flex-end}
.chat__who{margin:0 .75rem .15rem;color:var(--scheme-muted,var(--color-muted));font-size:.8125rem}
.chat__bubble{margin:0;padding:.6rem .9rem;border-radius:1.1rem;border-end-start-radius:.3rem;background:var(--scheme-surface,var(--color-surface));border:1px solid var(--scheme-border,var(--color-border));overflow-wrap:anywhere}
.chat__msg--end .chat__bubble{border-radius:1.1rem;border-end-end-radius:.3rem;background:var(--color-primary);border-color:var(--color-primary);color:var(--color-onPrimary,#fff)}
@media (forced-colors:active){.chat__bubble{border:1px solid CanvasText}}
/* Table of contents: a quiet list with a rule at its start edge; the current
   section's link is marked. A heading it points to stops below a fixed header. */
.toc{margin:0 0 var(--space-md);padding:var(--space-sm) var(--space-md);border:1px solid var(--scheme-border,var(--color-border));border-radius:var(--radius-md)}
.toc__title{margin:0 0 var(--space-xs);font-family:var(--font-heading);font-weight:var(--font-headingWeight,bold)}
.toc__list{list-style:none;margin:0;padding:0}
.toc__item--h3{padding-left:var(--space-md)}
.toc__link{display:flex;align-items:center;min-height:2.25rem;padding:.2rem .6rem;border-left:3px solid transparent;color:inherit;text-decoration:none;overflow-wrap:anywhere}
.toc__link:hover{text-decoration:underline}
.toc__link[aria-current]{border-left-color:var(--scheme-link,var(--color-primary));font-weight:700}
.toc__link:focus-visible{outline:2px solid var(--color-primary);outline-offset:-2px}
.toc__empty{margin:0;color:var(--scheme-muted,var(--color-muted));font-size:.9rem}
[id^="otsikko-"]{scroll-margin-top:5rem}
@media (min-width:960px){.block:has(>.toc--sticky){position:sticky;top:5rem;align-self:start}}
@media (pointer:coarse){.toc__link{min-height:44px}}
/* Back-to-top button: fixed to a bottom corner, above the other floating buttons of
   that corner; the section itself takes no room. */
.section.section--scrollTop{padding:0!important;margin:0!important;min-height:0}
.scroll-top{--scroll-top-lift:0rem;position:fixed;z-index:39;bottom:calc(max(var(--space-md,16px),env(safe-area-inset-bottom)) + var(--scroll-top-lift));right:max(var(--space-md,16px),env(safe-area-inset-right));display:inline-flex;align-items:center;justify-content:center;width:2.75rem;height:2.75rem;border:1px solid var(--color-border);border-radius:50%;background:var(--color-background);color:var(--color-text);box-shadow:0 4px 16px rgba(0,0,0,.16)}
.scroll-top--left{right:auto;left:max(var(--space-md,16px),env(safe-area-inset-left))}
body:has(.floating-cta) .scroll-top--right,body:has(.contact-fab--right) .scroll-top--right,body:has(.contact-fab--left) .scroll-top--left{--scroll-top-lift:4.5rem}
body:has(.floating-cta):has(.contact-fab--right) .scroll-top--right{--scroll-top-lift:9rem}
.scroll-top:hover{border-color:var(--color-primary);color:var(--color-primary)}
.scroll-top:focus-visible{outline:3px solid var(--color-primary);outline-offset:2px}
.scroll-top.is-live{visibility:hidden;opacity:0}
.scroll-top.is-live.is-shown{visibility:visible;opacity:1}
@media (prefers-reduced-motion:no-preference){.scroll-top.is-live{transition:opacity .2s ease,visibility .2s}}
@media print{.scroll-top{display:none}}
/* Share buttons: a row of pill links that wraps; at least 44 px tall to tap. */
.share-buttons{display:flex;flex-direction:column;gap:var(--space-xs);margin:0 0 var(--space-md)}
.share-buttons--center{align-items:center;text-align:center}
.share-buttons--end{align-items:flex-end;text-align:end}
.share-buttons__label{margin:0;font-weight:600}
.share-buttons__list{display:flex;flex-wrap:wrap;gap:var(--space-xs);margin:0;padding:0;list-style:none}
.share-buttons--center .share-buttons__list{justify-content:center}
.share-buttons--end .share-buttons__list{justify-content:flex-end}
.share-buttons__list>li[hidden]{display:none}
.share-buttons__link{appearance:none;margin:0;padding:0;border:0;border-radius:0;background:none;color:inherit;font:inherit;line-height:inherit;text-align:inherit;box-shadow:none;transform:none;transition:none;cursor:pointer;display:inline-flex;align-items:center;gap:.4rem;min-height:44px;padding:0 .9rem;border:1px solid var(--scheme-border,var(--color-border));border-radius:999px;background:var(--scheme-surface,var(--color-surface));color:var(--scheme-fg,var(--color-text));font-size:.9rem;font-weight:600;text-decoration:none}
.share-buttons__link svg{width:18px;height:18px;flex:none}
.share-buttons__link:hover{transform:none;box-shadow:none;border-color:var(--color-primary);color:var(--scheme-link,var(--color-primary))}
.share-buttons__link:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}
.share-buttons__sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
/* Download list: rows with a file icon, the name, a note and "Lataa"; 44 px to tap. */
.downloads{margin:0 0 var(--space-md)}
.downloads__title{margin:0 0 var(--space-sm);font-size:1.1rem}
.downloads__list{list-style:none;margin:0;padding:0;border:1px solid var(--scheme-border,var(--color-border));border-radius:var(--radius-md);overflow:hidden}
.downloads__item+.downloads__item{border-top:1px solid var(--scheme-border,var(--color-border))}
.downloads__row{display:flex;flex-wrap:wrap;align-items:center;gap:.25rem var(--space-sm);min-height:44px;padding:.7rem 1rem;color:inherit;text-decoration:none}
.downloads__icon{display:inline-flex;flex:none;color:var(--scheme-link,var(--color-primary))}
.downloads__icon svg{width:20px;height:20px}
.downloads__name{flex:1 1 12rem;min-width:0;overflow-wrap:anywhere;font-weight:600}
.downloads__note{color:var(--scheme-muted,var(--color-muted));font-size:.9rem}
.downloads__action{margin-left:auto;font-size:.9rem;font-weight:600;color:var(--scheme-link,var(--color-primary))}
a.downloads__row:hover{background:color-mix(in srgb,var(--color-primary) 8%,transparent)}
a.downloads__row:focus-visible{outline:2px solid var(--color-primary);outline-offset:-2px}
/* Audio player: the browser's own controls full width, a plain link under them. */
.audio-sample{margin:0 0 var(--space-md);padding:var(--space-sm) var(--space-md);border:1px solid var(--scheme-border,var(--color-border));border-radius:var(--radius-md);display:grid;gap:.5rem}
.audio-sample__title{font-weight:600}
.audio-sample__player{width:100%;min-height:44px}
.audio-sample__link{justify-self:start;display:inline-flex;align-items:center;min-height:44px;font-size:.9rem;color:var(--scheme-link,var(--color-primary))}
.audio-sample__caption,.audio-sample__missing{margin:0;color:var(--scheme-muted,var(--color-muted));font-size:.9rem}
/* Vaalikone: statement list (no script, editor), one-question form and result list. */
.vaalikone{display:grid;gap:var(--space-md);max-width:46rem;margin-inline:auto}
.vaalikone [x-cloak]{display:none!important}
.vaalikone__heading{max-width:46rem;margin-inline:auto}
.vaalikone__intro{max-width:min(46rem,60ch);margin-inline:auto}
.vaalikone__intro{margin-block:0 var(--space-md);color:var(--scheme-muted,var(--color-muted))}
.vaalikone p{margin:0}
.vaalikone__nojs{display:none}.no-js .vaalikone__nojs{display:block;margin-bottom:var(--space-sm)}
.vaalikone__static-title{font-weight:700;margin-bottom:var(--space-sm)!important}
.vaalikone__list,.vaalikone__compare{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-sm)}
.vaalikone__item,.vaalikone__row{display:grid;gap:.35rem;padding:var(--space-sm) var(--space-md);border:1px solid var(--scheme-border,var(--color-border));border-radius:var(--radius-md);background:var(--scheme-surface,var(--color-surface))}
.vaalikone__statement{font-weight:600;overflow-wrap:anywhere}
.vaalikone__answer,.vaalikone__pair{display:flex;flex-wrap:wrap;align-items:center;gap:.25rem 1.25rem}
.vaalikone__badge{padding:.05rem .55rem;border-radius:999px;font-size:.85em;font-weight:600;background:color-mix(in srgb,var(--color-primary) 14%,transparent)}
.vaalikone__why{white-space:pre-line;color:var(--scheme-muted,var(--color-muted))}.vaalikone__why strong{color:var(--scheme-fg,var(--color-text))}
.vaalikone__form{display:grid;gap:var(--space-md);padding:var(--space-md);border:1px solid var(--scheme-border,var(--color-border));border-radius:var(--radius-md);background:var(--scheme-surface,var(--color-surface))}
.vaalikone__bar,.vaalikone__meter{height:.4rem;border-radius:999px;background:color-mix(in srgb,currentColor 12%,transparent);overflow:hidden}
.vaalikone__meter{height:.75rem}
.vaalikone__bar span,.vaalikone__meter span{display:block;height:100%;background:var(--color-primary)}
@media (prefers-reduced-motion:no-preference){.vaalikone__bar span{transition:width .2s ease}}
.vaalikone__fieldset{display:grid;gap:var(--space-sm);min-width:0;margin:0;padding:0;border:0}
.vaalikone__legend{float:left;width:100%;padding:0;margin-bottom:var(--space-xs);font-family:var(--font-heading,inherit);font-size:clamp(1.2rem,4.2vw,1.6rem);font-weight:700;line-height:1.3;overflow-wrap:anywhere}
.vaalikone__legend+*{clear:both}
.vaalikone__legend:focus:not(:focus-visible){outline:0}
.vaalikone__count{display:block;margin-bottom:.35rem;font-family:var(--font-body,inherit);font-size:.95rem;font-weight:600;color:var(--scheme-muted,var(--color-muted));font-variant-numeric:tabular-nums}
.vaalikone__important{display:inline-flex;align-items:center;gap:.5rem;justify-self:start;min-height:44px;font-weight:600;cursor:pointer}
.vaalikone__important input{width:1.25rem;height:1.25rem;margin:0;accent-color:var(--color-primary)}
.vaalikone__choices{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-sm)}
.vaalikone__choice{position:relative;display:flex;align-items:center;justify-content:center;min-height:56px;padding:.5rem 1rem;border:2px solid var(--scheme-border,var(--color-border));border-radius:var(--radius-md);background:var(--scheme-bg,var(--color-background));font-size:1.1rem;font-weight:700;cursor:pointer}
.vaalikone__choice input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.vaalikone__choice--skip{grid-column:1/-1;min-height:48px;font-size:1rem;font-weight:600;border-style:dashed}
.vaalikone__choice:hover{border-color:var(--color-primary)}
.vaalikone__choice:has(input:checked){border-color:var(--color-primary);background:var(--color-primary);color:var(--color-onPrimary,#fff)}
.vaalikone__choice:has(input:focus-visible){outline:3px solid var(--color-primary);outline-offset:2px}
.vaalikone__hint,.vaalikone__privacy{font-size:.9rem;color:var(--scheme-muted,var(--color-muted))}
.vaalikone__nav,.vaalikone__cta{display:flex;flex-wrap:wrap;gap:var(--space-sm)}
.vaalikone__nav{justify-content:space-between}
.vaalikone__nav .button,.vaalikone__cta .button{min-height:44px}
.vaalikone__nav .button:disabled{opacity:.4;cursor:not-allowed;transform:none;box-shadow:none}
.vaalikone__result{display:grid;gap:var(--space-sm)}
.vaalikone__result-title{margin:0}.vaalikone__result-title:focus:not(:focus-visible){outline:0}
.vaalikone__score{font-size:clamp(1.25rem,4.4vw,1.6rem);font-weight:700}
.vaalikone__rule summary{display:flex;align-items:center;min-height:44px;font-weight:600;cursor:pointer}
.vaalikone__rule p{color:var(--scheme-muted,var(--color-muted))}
.vaalikone__compare{margin-top:var(--space-sm)}
.vaalikone__row{border-left-width:6px}
.vaalikone__row--agree{border-left-color:var(--color-primary)}
.vaalikone__row--disagree{border-left-color:color-mix(in srgb,var(--scheme-fg,var(--color-text)) 75%,transparent)}
.vaalikone__row--skip,.vaalikone__row--none{border-left-style:dashed}
.vaalikone__mark{font-weight:700}
.vaalikone__row--agree .vaalikone__mark::before{content:"✓ "}
.vaalikone__row--disagree .vaalikone__mark::before{content:"✗ "}
.vaalikone__row--skip .vaalikone__mark,.vaalikone__row--none .vaalikone__mark{color:var(--scheme-muted,var(--color-muted));font-weight:600}
.vaalikone__edit{appearance:none;margin:0;padding:0;border:0;border-radius:0;background:none;color:inherit;font:inherit;line-height:inherit;text-align:inherit;box-shadow:none;transform:none;transition:none;cursor:pointer;justify-self:start;min-height:44px;color:var(--scheme-link,var(--color-primary));text-decoration:underline;font-weight:600}
.vaalikone__edit:hover{transform:none;box-shadow:none}
.vaalikone__edit:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}
.vaalikone__msg:empty{display:none}
.vaalikone__sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@media (min-width:640px){.vaalikone__choices{grid-template-columns:1fr 1fr 1fr}.vaalikone__choice--skip{grid-column:auto;min-height:56px}}
@media (forced-colors:active){.vaalikone__choice:has(input:checked){background:Highlight;color:HighlightText;border-color:Highlight}.vaalikone__bar span,.vaalikone__meter span{background:Highlight}}
.pricing-period{display:none;margin:0 0 var(--space-md);padding:0;border:0;min-width:0}
.pricing-period__legend{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.pricing-period__option{position:relative;display:inline-flex;align-items:center;gap:.4rem;min-height:44px;padding:.35rem 1rem;border:1px solid var(--color-border,#c5ccd6);background:var(--color-background,#fff);color:var(--color-text,#111);cursor:pointer;font-weight:600}
.pricing-period__option:first-of-type{border-radius:999px 0 0 999px}
.pricing-period__option:last-of-type{border-radius:0 999px 999px 0;margin-left:-1px}
.pricing-period__input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.pricing-period__option:has(.pricing-period__input:checked){background:var(--color-primary);border-color:var(--color-primary);color:var(--color-onPrimary,#fff)}
.pricing-period__option:has(.pricing-period__input:focus-visible){outline:3px solid var(--color-focus,#1a56db);outline-offset:2px;box-shadow:var(--focus-ring-shadow,none);z-index:1}
.pricing-period__save{display:inline-block;padding:.05rem .45rem;border-radius:999px;background:color-mix(in srgb,var(--color-success,#1b7f3b) 14%,#fff);color:var(--color-success-text,#14532d);font-size:.8rem;font-weight:700}
.pricing-plan__price--yearly{display:none}
.pricing-periods .pricing-plan__price--yearly{display:block}
.pricing-plan__note{display:block;font-size:.9rem;font-weight:500;opacity:.85}
/* White text at 85 % on the featured plan's colour fell under 4.5:1 (axe, 25.10.2026). */
.pricing-plan--featured .pricing-plan__period,.pricing-plan--featured .pricing-plan__note{opacity:1}
/* The same on an accent section (axe, 7.11.2026: the period of a bordered plan). */
.section[data-color-scheme="accent"] :is(.pricing-plan__period,.pricing-plan__note){opacity:1}
.pricing__vat{margin:var(--space-md) 0 0;font-size:.9rem;color:var(--scheme-muted,var(--color-muted));text-align:center}
@supports selector(:has(*)){.pricing-period{display:flex;justify-content:center}
.pricing-periods:has(.pricing-period__input[value="yearly"]:checked) .pricing-plan__price--monthly{display:none}
.pricing-periods:has(.pricing-period__input[value="monthly"]:checked) .pricing-plan__price--yearly{display:none}}
.locations__heading{margin:0 0 var(--space-sm)}
.locations__intro{max-width:60ch;margin:0 0 var(--space-md);color:var(--scheme-muted,var(--color-muted))}
.locations__body{display:grid;gap:var(--space-lg);align-items:start}
@media (min-width:960px){.locations--map .locations__body{grid-template-columns:minmax(0,1fr) minmax(0,1.25fr)}.locations--sticky .locations__map{position:sticky;top:var(--space-md)}}
.locations__list{margin:0;padding:0;list-style:none}
.locations__list>.block{min-width:0}
.location{padding:var(--space-md);border:1px solid var(--scheme-border,var(--color-border,#d5d9e0));border-radius:var(--radius-md,8px);background:var(--scheme-surface,var(--color-surface,transparent))}
.location__name{margin:0 0 .35rem;font-size:1.15rem}
.location__address,.location__phone{margin:0 0 .35rem}
.location__hours{margin:0 0 .35rem}
.location__hours p{margin:0}
.location__label{font-weight:600}
.location__actions{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1rem;margin:var(--space-sm) 0 0}
.location__route,.location__show{display:inline-flex;align-items:center;min-height:44px;min-width:44px;color:var(--scheme-link,var(--color-primary));text-decoration:underline;text-underline-offset:.15em}
.location__show{appearance:none;margin:0;padding:0 .25rem;border:0;background:none;font:inherit;cursor:pointer;display:none;box-shadow:none;transform:none}
.locations--map.is-live .location__show{display:inline-flex}
.location__show[aria-pressed="true"]{font-weight:700;text-decoration-thickness:2px}
.location__show:hover{transform:none;box-shadow:none}
.location__route:focus-visible,.location__show:focus-visible{outline:2px solid var(--scheme-link,var(--color-primary));outline-offset:2px}
.locations__status{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.locations__map .embed,.locations__map .osm-map{margin:0}
.locations__tools{display:grid;gap:var(--space-sm);margin:0 0 var(--space-md)}
.no-js .locations__tools{display:none}
.locations__search{display:grid;gap:.35rem;max-width:32rem}
.locations__search-label{font-weight:600}
.locations__search-input{min-height:48px;padding:0 1rem;border:1px solid var(--scheme-border,var(--color-border,#c5cad3));border-radius:var(--radius-sm,6px);background:var(--color-background,#fff);color:var(--color-text,#111);font:inherit;font-size:max(1rem,16px)}
.locations__search-input:focus-visible{outline:2px solid var(--scheme-link,var(--color-primary));outline-offset:2px}
.locations__near{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1rem}
.locations__near-button.button{min-height:44px;margin:0}
.locations__near-note{flex:1 1 16rem;margin:0;font-size:.9rem;color:var(--scheme-muted,var(--color-muted))}
.locations__found{margin:0;font-weight:600}
.locations__found:empty{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.locations__list>[hidden]{display:none}
.location__distance{margin:.35rem 0 0;font-weight:600}
.location__distance:empty{display:none}
.hotspots__heading{margin:0 0 var(--space-sm)}
.hotspots__intro{max-width:60ch;margin:0 0 var(--space-md);color:var(--scheme-muted,var(--color-muted))}
.hotspots__stage{position:relative;max-width:100%}
.hotspots__image{display:block;width:100%;height:auto;border-radius:var(--radius-image,var(--radius-md,8px))}
.hotspots__placeholder{aspect-ratio:16/9;border-radius:var(--radius-md,8px);background:var(--scheme-surface,var(--color-surface,#eef1f5))}
/* The compiler makes the root block list position:relative (.s-<id> .hotspots__markers); the
   points layer must lie over the picture instead. */
.hotspots__markers{position:absolute!important;inset:0;margin:0;padding:0;pointer-events:none}
.hotspots__markers>.hotspot{position:absolute;width:0;height:0;pointer-events:auto}
.hotspot__btn{appearance:none;margin:0;padding:0;border:0;border-radius:0;background:none;color:inherit;font:inherit;line-height:inherit;text-align:inherit;box-shadow:none;transform:none;transition:none;cursor:pointer;position:absolute;left:-1.125rem;top:-1.125rem;display:inline-flex;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;border-radius:50%;background:var(--color-primary);color:var(--color-onPrimary,#fff);font-weight:700;font-size:.95rem;box-shadow:0 0 0 3px #fff,0 2px 8px rgba(0,0,0,.35)}
.hotspot__btn:hover{transform:none;box-shadow:none;background:var(--color-primary);filter:brightness(1.1)}
.hotspot__btn:disabled{opacity:1;cursor:default}
.hotspot__btn:focus-visible{outline:3px solid var(--color-focus,#1a56db);outline-offset:3px}
.hotspot__btn[aria-expanded="true"]{box-shadow:0 0 0 3px #fff,0 0 0 6px var(--color-primary),0 2px 8px rgba(0,0,0,.35)}
.hotspot__panel{position:absolute;z-index:20;top:1.6rem;left:0;transform:translateX(-50%);width:min(18rem,80vw);padding:.75rem .9rem;border-radius:var(--radius-md,8px);background:var(--color-background,#fff);color:var(--color-text,#111);box-shadow:0 8px 28px rgba(0,0,0,.25);text-align:left}
.hotspot--right .hotspot__panel{transform:translateX(-1.125rem)}
.hotspot--left .hotspot__panel{transform:translateX(calc(-100% + 1.125rem))}
.hotspot--up .hotspot__panel{top:auto;bottom:1.6rem}
.hotspot__panel[hidden]{display:none}
.hotspot__title{margin:0 0 .25rem;font-weight:700}
.hotspot__body,.hotspot__link{margin:0 0 .35rem;font-size:.95rem}
.hotspot__link a{color:var(--color-primary);text-decoration:underline}
.hotspot__close{appearance:none;margin:0;padding:0;border:0;border-radius:0;background:none;color:inherit;font:inherit;line-height:inherit;text-align:inherit;box-shadow:none;transform:none;transition:none;cursor:pointer;display:inline-flex;align-items:center;min-height:24px;margin-top:.15rem;font-size:.9rem;text-decoration:underline;color:var(--color-text,#111)}
.hotspot__close:hover{transform:none;box-shadow:none}
.hotspot__close:focus-visible{outline:2px solid var(--color-focus,#1a56db);outline-offset:2px}
.hotspots__list{margin:var(--space-md) 0 0;padding-left:1.5rem;display:grid;gap:.6rem}
.hotspots__item{padding-left:.25rem}
.hotspots__item:focus{outline:2px solid var(--color-focus,#1a56db);outline-offset:4px}
.hotspots__item-name{display:block;font-weight:700}
.hotspots__item-body{display:block}
.hotspots__item-link{color:var(--scheme-link,var(--color-primary));text-decoration:underline}
@media (min-width:40.0625rem){.hotspots.is-live:not(.hotspots--list) .hotspots__list{display:none}}
@media (max-width:40rem){.hotspot__panel{display:none!important}.hotspot__btn{width:1.75rem;height:1.75rem;left:-.875rem;top:-.875rem;font-size:.85rem}}
.qr{display:inline-grid;justify-items:center;gap:.5rem;max-width:100%;margin:0}
.qr__svg{display:block;width:12rem;max-width:100%;height:auto;background:#fff}
.qr--sm .qr__svg{width:8rem}
.qr--lg .qr__svg{width:18rem}
.qr__caption{display:grid;gap:.15rem;text-align:center}
.qr__label{font-weight:600}
.qr__url{font-size:.9rem;overflow-wrap:anywhere;color:var(--scheme-muted,var(--color-muted))}
.qr__downloads{display:flex;flex-wrap:wrap;justify-content:center;gap:.25rem 1rem;margin:0}
.qr__download{appearance:none;display:inline-flex;align-items:center;min-height:44px;margin:0;padding:0 .25rem;border:0;background:none;font:inherit;color:var(--scheme-link,var(--color-primary));text-decoration:underline;text-underline-offset:.15em;cursor:pointer;box-shadow:none;transform:none}
.qr__download:hover{transform:none;box-shadow:none}
.qr__download:focus-visible{outline:2px solid var(--scheme-link,var(--color-primary));outline-offset:2px}
.qr__png{display:none}
.qr.is-live .qr__png{display:inline-flex}
.qr__hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.qr__empty{padding:var(--space-md);border:1px dashed var(--color-border,#c5ccd6);border-radius:var(--radius-md,8px);color:var(--color-muted);font-size:.9rem}
@media print{.qr__downloads{display:none}}
/* Flip card: without the script both sides are shown in reading order and there is no
   button; live, the sides sit on top of each other in one grid cell and the button turns
   the card. The card is as tall as its taller side, so the page does not jump. */
.flip-card{display:grid;grid-template-rows:1fr auto;align-content:start;gap:var(--space-sm);height:100%}
.flip-card__inner{display:grid;gap:var(--space-sm)}
.flip-card__face{display:grid;align-content:start;gap:.5rem;padding:var(--space-md);border:1px solid var(--scheme-border,var(--color-border));border-radius:var(--radius-md);background:var(--scheme-surface,var(--color-surface,var(--color-background)));color:inherit}
.flip-card__face--back{background:var(--scheme-surface,var(--color-surface,var(--color-background)));border-style:dashed}
.flip-card__title{margin:0;font-size:1.2rem}
.flip-card__text{margin:0}
.flip-card__link{margin:0}
.flip-card__image{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:var(--radius-sm)}
.flip-card__toggle{appearance:none;margin:0;padding:0;border:0;border-radius:0;background:none;color:inherit;font:inherit;line-height:inherit;text-align:inherit;box-shadow:none;transform:none;transition:none;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;justify-self:start;align-self:start;min-height:44px;padding:.5rem 1rem;border:1.5px solid currentColor;border-radius:var(--radius-sm);font-weight:600}
.flip-card__toggle:hover{transform:none;box-shadow:none;color:var(--scheme-link,var(--color-primary))}
.flip-card__toggle:focus-visible{outline:2px solid var(--scheme-fg,var(--color-text));outline-offset:2px}
.flip-card__toggle[x-cloak]{display:none}
.flip-card__vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.flip-card.is-live .flip-card__inner{display:grid;grid-template-areas:"face";perspective:1200px}
/* The turn is animated only after the visitor has turned the card once, so the page does
   not show a half-turned card while the script starts. */
.flip-card.is-live .flip-card__face{grid-area:face;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.flip-card.is-live.has-turned .flip-card__face{transition:transform .5s ease,visibility 0s linear .25s}
.flip-card.is-live .flip-card__face--back{transform:rotateY(180deg);visibility:hidden;border-style:solid}
.flip-card.is-live.is-flipped .flip-card__face--front{transform:rotateY(-180deg);visibility:hidden}
.flip-card.is-live.is-flipped .flip-card__face--back{transform:none;visibility:visible}
@media (prefers-reduced-motion:reduce){.flip-card.is-live .flip-card__face,.flip-card.is-live.has-turned .flip-card__face{transition:none;transform:none!important}}
.motion-off .flip-card.is-live .flip-card__face,.motion-off .flip-card.is-live.has-turned .flip-card__face{transition:none;transform:none!important}
@media print{.flip-card__face{visibility:visible!important;transform:none!important}.flip-card.is-live .flip-card__inner{grid-template-areas:none}.flip-card.is-live .flip-card__face{grid-area:auto}.flip-card__toggle{display:none}}
/* Scrolling text: a still, wrapping row until the script marks it live; then two
   identical tracks slide left, each by its own width, so the loop has no seam. */
.text-marquee{--marquee-duration:30s;--marquee-gap:var(--space-lg)}
.text-marquee--slow{--marquee-duration:50s}.text-marquee--fast{--marquee-duration:16s}
.text-marquee__viewport{display:flex;overflow:hidden}
.text-marquee__track{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--space-xs) var(--marquee-gap);margin:0;padding:0;list-style:none}
.text-marquee__item{font-family:var(--font-heading);font-size:1.25rem;font-weight:700;white-space:nowrap}
.text-marquee--large .text-marquee__item{font-size:clamp(1.6rem,5vw,3rem)}
.text-marquee__item::before{content:"";display:inline-block;width:.4em;height:.4em;margin-right:var(--marquee-gap);border-radius:50%;background:currentColor;opacity:.4;vertical-align:middle}
.text-marquee__track--copy{display:none}
.text-marquee.is-live .text-marquee__viewport{-webkit-mask-image:linear-gradient(to right,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(to right,transparent,#000 6%,#000 94%,transparent)}
.text-marquee.is-live .text-marquee__track{flex:none;flex-wrap:nowrap;justify-content:space-around;min-width:100%;padding-right:var(--marquee-gap);animation:text-marquee var(--marquee-duration) linear infinite}
.text-marquee.is-live .text-marquee__track--copy{display:flex}
.text-marquee__viewport:hover .text-marquee__track,.text-marquee__viewport:focus-within .text-marquee__track,.text-marquee.is-paused .text-marquee__track{animation-play-state:paused}
@keyframes text-marquee{to{transform:translateX(-100%)}}
.text-marquee__pause{display:none;align-items:center;justify-content:center;width:44px;height:44px;margin:var(--space-sm) auto 0;padding:0;border:1px solid var(--scheme-border,var(--color-border));border-radius:50%;background:transparent;color:var(--scheme-muted,var(--color-muted));cursor:pointer}
.text-marquee.is-live .text-marquee__pause{display:flex}
.text-marquee__pause .cms-icon{margin:0}
.text-marquee__pause:hover{color:var(--scheme-fg,var(--color-text))}
.text-marquee__pause:focus-visible{outline:2px solid var(--scheme-link,var(--color-primary));outline-offset:2px}
.text-marquee__pause[x-cloak],.text-marquee__pause [x-cloak]{display:none!important}
@media (prefers-reduced-motion:reduce){.text-marquee.is-live .text-marquee__viewport{-webkit-mask-image:none;mask-image:none}.text-marquee.is-live .text-marquee__track{animation:none;flex:1 1 auto;flex-wrap:wrap;justify-content:center;min-width:0;padding-right:0}.text-marquee.is-live .text-marquee__track--copy,.text-marquee.is-live .text-marquee__pause{display:none!important}}
.motion-off .text-marquee.is-live .text-marquee__viewport{-webkit-mask-image:none;mask-image:none}
.motion-off .text-marquee.is-live .text-marquee__track{animation:none;flex:1 1 auto;flex-wrap:wrap;justify-content:center;min-width:0;padding-right:0}
.motion-off .text-marquee.is-live .text-marquee__track--copy,.motion-off .text-marquee.is-live .text-marquee__pause{display:none!important}
/* Lottie animation: the stage keeps a square shape until the player knows the file's
   own size, so the page does not jump; the pause button sits in its corner. */
.lottie{position:relative;width:100%;margin-inline:auto}
.lottie__stage{display:grid;place-items:center;width:100%;min-height:3rem}
.lottie[data-lottie] .lottie__stage{aspect-ratio:var(--lottie-ratio,1)}
.lottie__stage>svg{display:block;width:100%!important;height:100%!important}
.lottie__poster{display:block;width:100%;height:100%;object-fit:contain;border-radius:0}
.lottie.is-ready .lottie__poster,.lottie.is-ready .lottie__note{display:none}
.lottie__note{margin:0;padding:var(--space-sm);text-align:center;color:var(--scheme-muted,var(--color-muted))}
.lottie[data-lottie]:not(.is-ready) .lottie__note{position:absolute;inset:0;display:grid;place-items:center}
.lottie__note--missing{border:1px dashed var(--scheme-border,var(--color-border));border-radius:var(--radius-md)}
.lottie__toggle{position:absolute;right:.25rem;bottom:.25rem;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;margin:0;padding:0;border:1px solid var(--scheme-border,var(--color-border));border-radius:50%;background:var(--color-background);color:var(--color-text);box-shadow:none;transform:none;cursor:pointer}
.lottie__toggle[hidden]{display:none}
.lottie__toggle:hover{transform:none;box-shadow:none;color:var(--color-primary)}
.lottie__toggle:focus-visible{outline:2px solid var(--color-text);outline-offset:2px}
.lottie__icon--play,.lottie.is-playing .lottie__icon--pause{display:block}
.lottie__icon--pause,.lottie.is-playing .lottie__icon--play{display:none}
/* 360° tour: the box keeps 2:1 before anything loads (no layout shift) and at most 60 % of
   the screen's height on a phone; the poster is a plain picture until the tour starts. */
.pano{display:grid;gap:var(--space-sm,.75rem)}
.pano__heading,.pano__intro,.pano__caption{margin:0}
.pano__caption,.pano__intro{color:var(--scheme-muted,var(--color-muted))}
.pano__stage{position:relative;width:100%;aspect-ratio:2/1;max-height:60vh;max-height:60svh;overflow:hidden;border-radius:var(--radius-md,8px);background:var(--scheme-border,var(--color-border,#e3e6ec))}
@media (max-width:40rem){.pano__stage{aspect-ratio:4/3}}
.pano__poster,.pano__viewer,.pano__frame{position:absolute;inset:0;width:100%;height:100%;border:0}
.pano__poster{object-fit:cover;border-radius:0}
.pano__viewer[hidden],.pano__frame[hidden]{display:none}
.pano__viewer:focus-visible{outline:3px solid var(--color-primary,#2456c8);outline-offset:-3px}
.pano__start-wrap{position:absolute;inset:0;display:grid;place-items:center;background:linear-gradient(transparent 40%,rgb(0 0 0 / .35))}
.pano__start-wrap[hidden],.pano__tools[hidden],.pano__message[hidden],.pano__keys[hidden]{display:none}
.pano__start{display:inline-flex;align-items:center;gap:.5rem;min-height:48px;padding-inline:1.25rem;box-shadow:0 2px 12px rgb(0 0 0 / .3)}
.pano__icon{flex:none}
.pano__tools{position:absolute;right:.5rem;top:.5rem;display:flex;gap:.25rem;z-index:2}
.pano__tool{display:inline-flex;align-items:center;justify-content:center;min-width:44px;height:44px;margin:0;padding:0 .6rem;border:1px solid rgb(255 255 255 / .6);border-radius:var(--radius-sm,6px);background:rgb(0 0 0 / .62);color:#fff;font:inherit;font-size:1.25rem;line-height:1;box-shadow:none;transform:none;cursor:pointer}
.pano__tool:hover{transform:none;box-shadow:none;background:rgb(0 0 0 / .8);color:#fff}
.pano__tool:focus-visible{outline:3px solid #fff;outline-offset:1px}
.pano__tool--close{font-size:1rem}
.pano__message{position:absolute;inset:auto 0 0 0;padding:var(--space-sm,.75rem);background:rgb(0 0 0 / .72);color:#fff}
.pano__message p{margin:0}
.pano__message a{color:#fff}
.pano__message-actions{margin-top:.5rem!important;display:flex;flex-wrap:wrap;gap:.75rem;align-items:center}
.pano__scenes{display:flex;flex-wrap:wrap;gap:.5rem;margin:0;padding:0;list-style:none}
.pano__scenes .block{display:contents}
.pano__scene{min-height:44px;padding:.4rem .9rem;border:1px solid var(--scheme-border,var(--color-border));border-radius:999px;background:var(--color-background);color:var(--color-text);font:inherit;box-shadow:none;transform:none;cursor:pointer}
.pano__scene:hover{transform:none;box-shadow:none;color:var(--color-primary)}
.pano__scene[aria-pressed="true"]{border-color:var(--color-primary);box-shadow:inset 0 0 0 1px var(--color-primary)}
.pano__scene:focus-visible{outline:2px solid var(--color-text);outline-offset:2px}
.pano__status{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.pano__gate{position:absolute;inset:0;display:grid;place-items:end stretch}
.pano__gate-box{position:relative;padding:var(--space-sm,.75rem) var(--space-md,1rem);background:rgb(0 0 0 / .72);color:#fff}
.pano__gate-box p{margin:0}
.pano__gate-box a,.pano__gate-box .embed__gate-settings{color:#fff}
.pano__gate-actions{margin-top:.5rem!important}
.pano__stage:fullscreen{max-height:none;aspect-ratio:auto;border-radius:0}
.pano__noscript,.pano__missing{margin:0}
.pano--empty .embed-empty{display:grid;place-items:center;aspect-ratio:2/1;border:1px dashed var(--scheme-border,var(--color-border));border-radius:var(--radius-md,8px)}
/* Pannellum's own controls are replaced by the buttons above (real buttons with names). */
.pano .pnlm-controls-container,.pano .pnlm-about-msg{display:none!important}
.pano .pnlm-container{background:#222}
/* 3D model: a square box until the visitor asks for the model; the poster fills it. */
.model3d{display:grid;gap:var(--space-xs,.5rem);margin:0}
.model3d__stage{position:relative;width:100%;aspect-ratio:1;max-height:70vh;overflow:hidden;border-radius:var(--radius-md,8px);background:var(--scheme-border,var(--color-border,#e3e6ec))}
.model3d__poster,.model3d__placeholder,.model3d__stage model-viewer{position:absolute;inset:0;width:100%;height:100%}
.model3d__poster{object-fit:contain;border-radius:0;background:var(--color-background)}
.model3d__start-wrap{position:absolute;inset:auto 0 0 0;display:flex;justify-content:center;padding:var(--space-sm,.75rem)}
.model3d__start-wrap[hidden],.model3d__close[hidden],.model3d__message[hidden]{display:none}
.model3d__start{min-height:48px}
.model3d__close{position:absolute;right:.5rem;top:.5rem;z-index:2;min-height:44px;padding:0 .8rem;border:1px solid var(--scheme-border,var(--color-border));border-radius:var(--radius-sm,6px);background:var(--color-background);color:var(--color-text);font:inherit;box-shadow:none;transform:none;cursor:pointer}
.model3d__close:hover{transform:none;box-shadow:none}
.model3d__message{position:absolute;inset:auto 0 0 0;margin:0;padding:var(--space-sm,.75rem);background:rgb(0 0 0 / .72);color:#fff}
.model3d__file,.model3d__caption{margin:0}
.model3d__caption{color:var(--scheme-muted,var(--color-muted))}
.model3d__stage model-viewer:focus-visible{outline:3px solid var(--color-primary,#2456c8);outline-offset:-3px}
.model3d__status{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
/* Scroll reveal: subtle and short; hidden only after the script has said it can show it. */
.reveal-ready [data-reveal].is-revealed{transition:opacity .6s ease-out,transform .6s ease-out}
.reveal-ready [data-reveal]:not(.is-revealed){opacity:0}
.reveal-ready [data-reveal="slide"]:not(.is-revealed){transform:translateY(1.5rem)}
.reveal-ready [data-reveal]:not(.is-revealed):focus-within{opacity:1;transform:none}
.reveal-ready [data-reveal="stagger"]:not(.is-revealed) :is(.section__blocks>.block,.icon-boxes>*,.gallery__grid>.block,.project-archive>li,.blog-archive>li,.team-archive>li,.event-archive>li){opacity:0;transform:translateY(1rem)}
.reveal-ready [data-reveal="stagger"].is-revealed :is(.section__blocks>.block,.icon-boxes>*,.gallery__grid>.block,.project-archive>li,.blog-archive>li,.team-archive>li,.event-archive>li){transition:opacity .5s ease-out,transform .5s ease-out}
.reveal-ready [data-reveal="stagger"].is-revealed :is(.section__blocks>.block,.icon-boxes>*,.gallery__grid>.block,.project-archive>li,.blog-archive>li,.team-archive>li,.event-archive>li):nth-child(2){transition-delay:0.08s}
.reveal-ready [data-reveal="stagger"].is-revealed :is(.section__blocks>.block,.icon-boxes>*,.gallery__grid>.block,.project-archive>li,.blog-archive>li,.team-archive>li,.event-archive>li):nth-child(3){transition-delay:0.16s}
.reveal-ready [data-reveal="stagger"].is-revealed :is(.section__blocks>.block,.icon-boxes>*,.gallery__grid>.block,.project-archive>li,.blog-archive>li,.team-archive>li,.event-archive>li):nth-child(4){transition-delay:0.24s}
.reveal-ready [data-reveal="stagger"].is-revealed :is(.section__blocks>.block,.icon-boxes>*,.gallery__grid>.block,.project-archive>li,.blog-archive>li,.team-archive>li,.event-archive>li):nth-child(5){transition-delay:0.32s}
.reveal-ready [data-reveal="stagger"].is-revealed :is(.section__blocks>.block,.icon-boxes>*,.gallery__grid>.block,.project-archive>li,.blog-archive>li,.team-archive>li,.event-archive>li):nth-child(6){transition-delay:0.4s}
.reveal-ready [data-reveal="stagger"].is-revealed :is(.section__blocks>.block,.icon-boxes>*,.gallery__grid>.block,.project-archive>li,.blog-archive>li,.team-archive>li,.event-archive>li):nth-child(7){transition-delay:0.48s}
.reveal-ready [data-reveal="stagger"].is-revealed :is(.section__blocks>.block,.icon-boxes>*,.gallery__grid>.block,.project-archive>li,.blog-archive>li,.team-archive>li,.event-archive>li):nth-child(8){transition-delay:0.56s}
.reveal-ready [data-reveal="stagger"].is-revealed :is(.section__blocks>.block,.icon-boxes>*,.gallery__grid>.block,.project-archive>li,.blog-archive>li,.team-archive>li,.event-archive>li):nth-child(n+9){transition-delay:0.64s}
.reveal-ready [data-reveal="stagger"] :is(.section__blocks>.block,.icon-boxes>*,.gallery__grid>.block,.project-archive>li,.blog-archive>li,.team-archive>li,.event-archive>li):focus-within{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal-ready [data-reveal],.reveal-ready [data-reveal="stagger"] :is(.section__blocks>.block,.icon-boxes>*,.gallery__grid>.block,.project-archive>li,.blog-archive>li,.team-archive>li,.event-archive>li){opacity:1!important;transform:none!important;transition:none!important}}
@media print{[data-reveal],[data-reveal="stagger"] :is(.section__blocks>.block,.icon-boxes>*,.gallery__grid>.block,.project-archive>li,.blog-archive>li,.team-archive>li,.event-archive>li){opacity:1!important;transform:none!important}}
/* The site's "no motion" switch. */
.motion-off [data-reveal]{opacity:1!important;transform:none!important;transition:none!important}
.motion-off [data-reveal="stagger"] :is(.section__blocks>.block,.icon-boxes>*,.gallery__grid>.block,.project-archive>li,.blog-archive>li,.team-archive>li,.event-archive>li){opacity:1!important;transform:none!important;transition:none!important}
.motion-off .block{animation:none!important}
.motion-off video.section__video{display:none}
.motion-off .section__video--still{display:block}
.motion-off .logo-cloud__viewport{-webkit-mask-image:none;mask-image:none}
.motion-off .logo-cloud--marquee .logo-cloud__track{animation:none;flex:1 1 auto;min-width:0;flex-wrap:wrap!important;justify-content:center!important;row-gap:var(--space-md)}
.motion-off .logo-cloud--marquee .logo-cloud__track>.block{flex:none}
.motion-off .logo-cloud__track--copy,.motion-off .logo-cloud__pause{display:none!important}
/* Kuvaselain (library-blocks/image-browser.ts). */
.img-browser{position:relative;display:block;width:100%;overflow:hidden;border-radius:inherit}
.img-browser__track{display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;aspect-ratio:var(--img-browser-ratio,3 / 2);border-radius:inherit}
.img-browser__slide{flex:0 0 100%;min-width:0;scroll-snap-align:start;scroll-snap-stop:always;display:block;height:100%}
.img-browser__slide>a{display:block;height:100%}
.img-browser__slide img{display:block;width:100%;height:100%;max-width:none;object-fit:cover}
.img-browser__track:focus-visible{outline:3px solid var(--color-focus,var(--color-primary,#1d4ed8));outline-offset:-3px}
/* The buttons and the count replace the scroll bar; without JavaScript (.no-js) it stays as the cue. */
html:not(.no-js) .img-browser__track{scrollbar-width:none}
html:not(.no-js) .img-browser__track::-webkit-scrollbar{display:none}
.img-browser [x-cloak]{display:none!important}
.img-browser__nav{position:absolute;top:50%;z-index:2;display:grid;place-items:center;width:44px;height:44px;margin:0;padding:0;transform:translateY(-50%);border:2px solid #fff;border-radius:999px;background:rgba(17,24,39,0.72);color:#fff;font:inherit;font-size:1.6rem;line-height:1;cursor:pointer;box-shadow:0 1px 4px rgba(0,0,0,.35);transition:background-color .15s,box-shadow .15s}
.img-browser__nav--prev{left:.5rem}
.img-browser__nav--next{right:.5rem}
.img-browser__nav:hover{background:rgba(17,24,39,0.9);transform:translateY(-50%)}
.img-browser__nav:focus-visible{outline:3px solid #fff;outline-offset:2px;box-shadow:0 0 0 5px rgba(17,24,39,.9)}
/* A desktop at rest: shown but subdued (still 3:1); full strength on hover and focus. */
@media (hover:hover) and (pointer:fine){.img-browser:not(:hover):not(:focus-within) .img-browser__nav{background:rgba(17,24,39,0.64);box-shadow:none}}
@media (prefers-reduced-motion:reduce){.img-browser__nav{transition:none}}
.img-browser__count{position:absolute;right:.5rem;bottom:.5rem;z-index:2;padding:.15rem .55rem;border-radius:999px;background:rgba(17,24,39,.78);color:#fff;font-size:.8rem;font-weight:600;line-height:1.5;font-variant-numeric:tabular-nums;pointer-events:none}
.img-browser__live{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@media (prefers-reduced-motion:no-preference){.img-browser__track{scroll-behavior:smooth}}
.motion-off .img-browser__track{scroll-behavior:auto}
@media print{.img-browser__track{overflow:visible;flex-wrap:wrap;aspect-ratio:auto}.img-browser__slide{flex-basis:50%}.img-browser__nav,.img-browser__count{display:none!important}}
/* Kuva suurena (library-blocks/lightbox.ts). */
a.lightbox-link{display:block;height:100%;cursor:zoom-in;color:inherit;border-radius:inherit}
a.lightbox-link:focus-visible{outline:3px solid var(--color-focus,var(--color-primary,#1d4ed8));outline-offset:2px}
.img-browser__slide>a.lightbox-link:focus-visible{outline-offset:-3px}
dialog.lightbox{width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;background:#0c0c0c;color:#fff;overflow:hidden}
dialog.lightbox::backdrop{background:rgba(0,0,0,.7)}
.lightbox__figure{margin:0;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.6rem;padding:4rem 1rem 3rem;box-sizing:border-box}
.lightbox__image{display:block;width:auto;height:auto;max-width:100%;max-height:calc(100dvh - 8.5rem);object-fit:contain}
.lightbox__image[hidden]{display:none}
.lightbox__caption{font-size:.95rem;line-height:1.4;text-align:center;max-width:60ch;color:#f3f4f6}
.lightbox__caption:empty{display:none}
.lightbox__close,.lightbox__nav{position:absolute;z-index:1;display:grid;place-items:center;width:48px;height:48px;margin:0;padding:0;border:2px solid #fff;border-radius:999px;background:rgba(17,24,39,.72);color:#fff;font:inherit;font-size:1.75rem;line-height:1;cursor:pointer;box-shadow:0 1px 4px rgba(0,0,0,.35)}
.lightbox__close{top:.75rem;right:.75rem}
.lightbox__nav{top:calc(50% - 24px)}
/* A theme's own button motion (a lift on hover) never moves the viewer's buttons. */
dialog.lightbox button,dialog.lightbox button:is(:hover,:active,:focus-visible){transform:none}
.lightbox__nav--prev{left:.75rem}
.lightbox__nav--next{right:.75rem}
.lightbox__nav[hidden]{display:none}
.lightbox__close:hover,.lightbox__nav:hover{background:rgba(17,24,39,.9)}
.lightbox__close:focus-visible,.lightbox__nav:focus-visible{outline:3px solid #fff;outline-offset:2px;box-shadow:0 0 0 5px rgba(17,24,39,.9)}
.lightbox__count{position:absolute;left:0;right:0;bottom:.9rem;margin:0;text-align:center;font-size:.9rem;color:#e5e7eb;font-variant-numeric:tabular-nums}
.lightbox__live{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
html.lightbox-open,html:has(dialog.lightbox[open]){overflow:hidden}
/* Shaped section edges (section-shapes.ts). */
[data-edge-top],[data-edge-bottom]{--edge-h:clamp(18px,4vw,56px);--edge-ht:0px;--edge-hb:0px;--edge-t:linear-gradient(#000 0 0);--edge-b:linear-gradient(#000 0 0);position:relative;z-index:2;-webkit-mask:var(--edge-t) top/100% calc(var(--edge-ht) + 1px) no-repeat,linear-gradient(#000 0 0) 0 var(--edge-ht)/100% calc(100% - var(--edge-ht) - var(--edge-hb)) no-repeat,var(--edge-b) bottom/100% calc(var(--edge-hb) + 1px) no-repeat;mask:var(--edge-t) top/100% calc(var(--edge-ht) + 1px) no-repeat,linear-gradient(#000 0 0) 0 var(--edge-ht)/100% calc(100% - var(--edge-ht) - var(--edge-hb)) no-repeat,var(--edge-b) bottom/100% calc(var(--edge-hb) + 1px) no-repeat}
[data-edge-size="s"]{--edge-h:clamp(12px,2.5vw,28px)}[data-edge-size="m"]{--edge-h:clamp(18px,4vw,56px)}[data-edge-size="l"]{--edge-h:clamp(28px,7vw,104px)}
[data-edge-top]{--edge-ht:var(--edge-h);margin-top:calc(-1 * var(--edge-h));border-top:var(--edge-h) solid transparent;background-origin:border-box}
[data-edge-bottom]{--edge-hb:var(--edge-h)}
[data-edge-bottom]+.section{margin-top:calc(-1 * var(--edge-h-prev,clamp(18px,4vw,56px)));border-top:var(--edge-h-prev,clamp(18px,4vw,56px)) solid transparent;background-origin:border-box}
[data-edge-bottom][data-edge-size="s"]+.section{--edge-h-prev:clamp(12px,2.5vw,28px)}[data-edge-bottom][data-edge-size="m"]+.section{--edge-h-prev:clamp(18px,4vw,56px)}[data-edge-bottom][data-edge-size="l"]+.section{--edge-h-prev:clamp(28px,7vw,104px)}
.section:has(+[data-edge-top]){border-bottom:var(--edge-h-next,clamp(18px,4vw,56px)) solid transparent;background-origin:border-box}
.section:has(+[data-edge-top][data-edge-size="s"]){--edge-h-next:clamp(12px,2.5vw,28px)}.section:has(+[data-edge-top][data-edge-size="m"]){--edge-h-next:clamp(18px,4vw,56px)}.section:has(+[data-edge-top][data-edge-size="l"]){--edge-h-next:clamp(28px,7vw,104px)}
[data-edge-top="wave"]{--edge-t:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20100%2010%27%20preserveAspectRatio%3D%27none%27%3E%3Cpath%20transform%3D%27matrix(1%200%200%20-1%200%2010)%27%20d%3D%27M0%200H100V5Q75%2010%2050%205T0%205Z%27%2F%3E%3C%2Fsvg%3E")}[data-edge-bottom="wave"]{--edge-b:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20100%2010%27%20preserveAspectRatio%3D%27none%27%3E%3Cpath%20d%3D%27M0%200H100V5Q75%2010%2050%205T0%205Z%27%2F%3E%3C%2Fsvg%3E")}
[data-edge-top="slant"]{--edge-t:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20100%2010%27%20preserveAspectRatio%3D%27none%27%3E%3Cpath%20transform%3D%27matrix(1%200%200%20-1%200%2010)%27%20d%3D%27M0%200H100L0%2010Z%27%2F%3E%3C%2Fsvg%3E")}[data-edge-bottom="slant"]{--edge-b:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20100%2010%27%20preserveAspectRatio%3D%27none%27%3E%3Cpath%20d%3D%27M0%200H100L0%2010Z%27%2F%3E%3C%2Fsvg%3E")}
[data-edge-top="curve"]{--edge-t:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20100%2010%27%20preserveAspectRatio%3D%27none%27%3E%3Cpath%20transform%3D%27matrix(1%200%200%20-1%200%2010)%27%20d%3D%27M0%200H100Q50%2020%200%200Z%27%2F%3E%3C%2Fsvg%3E")}[data-edge-bottom="curve"]{--edge-b:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20100%2010%27%20preserveAspectRatio%3D%27none%27%3E%3Cpath%20d%3D%27M0%200H100Q50%2020%200%200Z%27%2F%3E%3C%2Fsvg%3E")}
[data-edge-top="peak"]{--edge-t:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20100%2010%27%20preserveAspectRatio%3D%27none%27%3E%3Cpath%20transform%3D%27matrix(1%200%200%20-1%200%2010)%27%20d%3D%27M0%200H100L50%2010Z%27%2F%3E%3C%2Fsvg%3E")}[data-edge-bottom="peak"]{--edge-b:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20100%2010%27%20preserveAspectRatio%3D%27none%27%3E%3Cpath%20d%3D%27M0%200H100L50%2010Z%27%2F%3E%3C%2Fsvg%3E")}
[data-edge-top="zigzag"]{--edge-t:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20100%2010%27%20preserveAspectRatio%3D%27none%27%3E%3Cpath%20transform%3D%27matrix(1%200%200%20-1%200%2010)%27%20d%3D%27M0%200H100L95%2010L90%200L85%2010L80%200L75%2010L70%200L65%2010L60%200L55%2010L50%200L45%2010L40%200L35%2010L30%200L25%2010L20%200L15%2010L10%200L5%2010L0%200Z%27%2F%3E%3C%2Fsvg%3E")}[data-edge-bottom="zigzag"]{--edge-b:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20100%2010%27%20preserveAspectRatio%3D%27none%27%3E%3Cpath%20d%3D%27M0%200H100L95%2010L90%200L85%2010L80%200L75%2010L70%200L65%2010L60%200L55%2010L50%200L45%2010L40%200L35%2010L30%200L25%2010L20%200L15%2010L10%200L5%2010L0%200Z%27%2F%3E%3C%2Fsvg%3E")}
@media print{[data-edge-top],[data-edge-bottom]{-webkit-mask:none;mask:none}}
/* Background image depth on scroll (section-shapes.ts): browsers with scroll-driven animations only. */
@keyframes lt-parallax{from{background-position-y:15%}to{background-position-y:85%}}
@supports (animation-timeline:view()){@media (prefers-reduced-motion:no-preference){[data-parallax]{animation:lt-parallax linear both;animation-timeline:view()}}}
.motion-off [data-parallax]{animation:none!important}
/* Picture effects under the pointer (image-hover.ts). */
.img-hover{display:block;overflow:hidden;border-radius:inherit}
.img-hover-all .gallery__grid>.block{overflow:hidden}
.img-hover img,.img-hover-all .gallery__grid img{transition:transform .45s ease,filter .35s ease}
@media (hover:hover){.img-hover--zoom:is(:hover,:focus-within) img,.img-hover-all.img-hover--zoom .gallery__grid>.block:is(:hover,:focus-within) img,.img-hover--tilt:is(:hover,:focus-within) img,.img-hover-all.img-hover--tilt .gallery__grid>.block:is(:hover,:focus-within) img{transform:scale(1.06)}
.img-hover--tilt,.img-hover-all.img-hover--tilt .gallery__grid>.block{overflow:visible;perspective:900px}
.img-hover--tilt:is(:hover,:focus-within) img,.img-hover-all.img-hover--tilt .gallery__grid>.block:is(:hover,:focus-within) img{transform:rotateX(6deg) rotateY(-10deg) translateY(-6px);filter:drop-shadow(0 18px 24px rgb(0 0 0/.18))}
.img-hover--color img,.img-hover-all.img-hover--color .gallery__grid img{filter:grayscale(1)}
.img-hover--color:is(:hover,:focus-within) img,.img-hover-all.img-hover--color .gallery__grid>.block:is(:hover,:focus-within) img{filter:none}}
@media (prefers-reduced-motion:reduce){.img-hover img,.img-hover-all .gallery__grid img{transition:none}.img-hover--zoom:is(:hover,:focus-within) img,.img-hover-all.img-hover--zoom .gallery__grid>.block:is(:hover,:focus-within) img,.img-hover--tilt:is(:hover,:focus-within) img,.img-hover-all.img-hover--tilt .gallery__grid>.block:is(:hover,:focus-within) img{transform:none}}
.motion-off .img-hover img,.motion-off .img-hover-all .gallery__grid img{transition:none}
.motion-off :is(.img-hover--zoom:is(:hover,:focus-within) img,.img-hover-all.img-hover--zoom .gallery__grid>.block:is(:hover,:focus-within) img,.img-hover--tilt:is(:hover,:focus-within) img,.img-hover-all.img-hover--tilt .gallery__grid>.block:is(:hover,:focus-within) img){transform:none}
/* Gallery topic buttons (image-hover.ts). */
.gallery-filter__bar{display:flex;flex-wrap:wrap;gap:.5rem;margin:0 0 var(--space-md)}
.gallery-filter__button{display:inline-flex;align-items:center;min-height:44px;padding:.4rem 1rem;border:1px solid var(--scheme-border,var(--color-border,#c5ccd6));border-radius:999px;background:transparent;color:inherit;font:inherit;font-size:.95rem;line-height:1.2;cursor:pointer;box-shadow:none;transform:none}
.gallery-filter__button:hover{background:var(--scheme-surface,var(--color-surface,#f4f5f7));transform:none;box-shadow:none}
.gallery-filter__button[aria-pressed="true"]{background:var(--color-primary);border-color:var(--color-primary);color:var(--color-onPrimary,#fff)}
.gallery-filter__button:focus-visible{outline:2px solid var(--color-focus,var(--color-primary));outline-offset:2px}
.gallery-filter__status{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.gallery__grid>.block[hidden]{display:none!important}
/* Video in a dialog (video-popup.ts). */
.video--popup{position:relative}
.video__launch{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;border-radius:var(--radius-image,var(--radius-md,8px));background:#1d232b;color:#fff;text-decoration:none}
.video__poster{display:block;width:100%;height:100%;object-fit:cover}
.video__poster--empty{background:linear-gradient(135deg,#2a323d,#11161c)}
.video__play{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.75rem;background:linear-gradient(rgb(0 0 0 / .05),rgb(0 0 0 / .45));font-weight:700;font-size:1.05rem;text-shadow:0 1px 3px rgb(0 0 0 / .6)}
/* The words sit on a dark chip of their own (28.10.2026): white on 60 % black reads on any poster. */
.video__play-label{padding:.25em .75em;border-radius:999px;background:rgb(0 0 0 / .6)}
.video__play-icon{display:grid;place-items:center;width:4.5rem;height:4.5rem;border-radius:50%;background:var(--color-primary);color:var(--color-onPrimary,#fff);box-shadow:0 6px 24px rgb(0 0 0 / .35);transition:transform .2s ease}
.video__play-icon::before{content:"";width:0;height:0;margin-left:.3rem;border-style:solid;border-width:.8rem 0 .8rem 1.3rem;border-color:transparent transparent transparent currentColor}
.video__launch:hover .video__play-icon,.video__launch:focus-visible .video__play-icon{transform:scale(1.08)}
.video__launch:focus-visible{outline:3px solid var(--color-focus,var(--color-primary));outline-offset:3px}
@media (prefers-reduced-motion:reduce){.video__play-icon{transition:none}.video__launch:hover .video__play-icon,.video__launch:focus-visible .video__play-icon{transform:none}}
.video--popup figcaption{margin-top:.5rem}
dialog.video__dialog{width:min(100vw - 2rem,1100px);max-width:none;padding:0;border:0;background:#000;color:#fff;overflow:visible}
dialog.video__dialog::backdrop{background:rgb(0 0 0 / .8)}
.video__dialog .video__player{max-height:calc(100dvh - 6rem)}
.video__close{position:absolute;top:-3rem;right:0;display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:rgb(255 255 255 / .15);color:#fff;font-size:1.8rem;line-height:1;cursor:pointer;box-shadow:none;transform:none}
.video__close:hover{background:rgb(255 255 255 / .3);transform:none;box-shadow:none}
.video__close:focus-visible{outline:2px solid #fff;outline-offset:2px}
/* Size guide on the product page (size-guide.ts). */
.size-guide{margin:.75rem 0;border:1px solid var(--ks-line,var(--color-border,#d5d9e0));border-radius:var(--radius-md,8px)}
.size-guide__summary{display:flex;align-items:center;gap:.5rem;min-height:44px;padding:.5rem .9rem;font-weight:600;cursor:pointer;list-style:none}
.size-guide__summary::-webkit-details-marker{display:none}
.size-guide__summary::before{content:"";flex:none;width:1.4rem;height:.9rem;border:2px solid currentColor;border-radius:2px;background:repeating-linear-gradient(90deg,currentColor 0 2px,transparent 2px 6px) bottom/100% 40% no-repeat}
.size-guide__summary::after{content:"";margin-left:auto;width:.55rem;height:.55rem;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px)}
.size-guide[open]>.size-guide__summary::after{transform:rotate(-135deg) translateY(-2px)}
.size-guide__summary:focus-visible{outline:2px solid var(--color-focus,var(--color-primary));outline-offset:2px;border-radius:var(--radius-md,8px)}
.size-guide__body{padding:0 .9rem .9rem}
.size-guide__scroll{overflow-x:auto}
.size-guide__scroll:focus-visible{outline:2px solid var(--color-focus,var(--color-primary));outline-offset:2px}
.size-guide__table{width:100%;border-collapse:collapse;font-size:.95rem;font-variant-numeric:tabular-nums}
.size-guide__table th,.size-guide__table td{padding:.45rem .6rem;border-bottom:1px solid var(--ks-line,var(--color-border,#d5d9e0));text-align:left;white-space:nowrap}
.size-guide__table thead th{font-size:.85rem}
.size-guide__note{margin:.6rem 0 0;font-size:.9rem;color:var(--color-muted,inherit)}
.contact-topics__heading{margin:0 0 var(--space-sm)}
.contact-topics__intro{max-width:60ch;margin:0 0 var(--space-md);color:var(--scheme-muted,var(--color-muted))}
.contact-topics__list{margin:0;padding:0;list-style:none}
.contact-topics__list>.block{min-width:0}
.contact-topic{height:100%;padding:var(--space-md);border:1px solid var(--scheme-border,var(--color-border,#d5d9e0));border-radius:var(--card-radius,var(--radius-md,8px));background:var(--scheme-surface,var(--color-surface,transparent))}
.contact-topic__topic{margin:0 0 .4rem;font-size:1.15rem;line-height:1.25}
.contact-topic__note{margin:0 0 .6rem;color:var(--scheme-muted,var(--color-muted))}
.contact-topic__who{display:flex;flex-direction:column;margin:0 0 .6rem}
.contact-topic__name{font-weight:600}
.contact-topic__role{color:var(--scheme-muted,var(--color-muted));font-size:.9375rem}
.contact-topic__routes{display:grid;gap:.35rem;margin:0}
.contact-topic__route{display:grid;grid-template-columns:minmax(6.5rem,auto) minmax(0,1fr);gap:.75rem;align-items:baseline}
.contact-topic__route dt{font-weight:600}
/* A long address in a narrow card breaks before its @ (the <wbr>), and only if the name itself
   is still too long, anywhere in it: never mid-word in other text (6.11.2026). The span keeps the
   address one flex item, so its accessible name has no space at the @. */
.contact-topic__email{overflow-wrap:anywhere}
.contact-topic__route dd{margin:0;min-width:0;overflow-wrap:anywhere}
.contact-topic__route a{display:inline-flex;align-items:center;min-height:44px;color:var(--scheme-link,var(--color-primary));text-decoration:underline;text-underline-offset:.15em}
.contact-topic__route a:focus-visible{outline:2px solid var(--scheme-link,var(--color-primary));outline-offset:2px}
.contact-topic__form{margin:var(--space-sm) 0 0}
.contact-topic__form .button{min-height:44px}
@media (max-width:399.98px){.contact-topic__route{grid-template-columns:minmax(0,1fr);gap:0}}
.contact-topic--disclosure{padding:0}
.contact-topic__summary{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:44px;padding:.85rem var(--space-md);cursor:pointer;font-weight:600;font-size:1.1rem;list-style:none}
.contact-topic__summary::-webkit-details-marker{display:none}
.contact-topic__summary::after{content:"";flex:none;width:.55rem;height:.55rem;margin-right:.25rem;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-25%) rotate(45deg);transition:transform .2s ease}
.contact-topic--disclosure[open]>.contact-topic__summary::after{transform:translateY(15%) rotate(-135deg)}
.contact-topic__summary:focus-visible{outline:2px solid var(--scheme-link,var(--color-primary));outline-offset:2px;border-radius:inherit}
.contact-topic__body{padding:0 var(--space-md) var(--space-md)}
@media (prefers-reduced-motion:reduce){.contact-topic__summary::after{transition:none}}
.load-more{display:flex;flex-direction:column;align-items:center;gap:.5rem;margin:var(--space-lg) 0 0}
.load-more[hidden]{display:none}
[data-load-more-list]>[hidden]{display:none!important}
.load-more__button{min-height:44px;min-width:12rem}
.load-more__button[aria-busy="true"]{cursor:progress;opacity:.75}
.load-more__status{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.load-more__restart{display:inline-flex;align-items:center;min-height:44px;color:var(--scheme-link,var(--color-primary))}
.load-more__status.is-error{position:static;width:auto;height:auto;margin:0;overflow:visible;clip-path:none;white-space:normal;color:var(--scheme-fg,var(--color-text))}
[data-load-more-list]>[data-load-more-new]:focus{outline:2px solid var(--scheme-link,var(--color-primary));outline-offset:4px}
[data-load-more-list]>[data-load-more-new]:focus:not(:focus-visible){outline:none}
.listen{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;box-sizing:content-box;max-width:var(--size-contentMaxWidth);margin:var(--space-sm) auto;padding:0 var(--space-md)}
.listen[hidden]{display:none}
.listen__button{appearance:none;margin:0;padding:0;border:0;border-radius:0;background:none;color:inherit;font:inherit;line-height:inherit;text-align:inherit;box-shadow:none;transform:none;transition:none;cursor:pointer;display:inline-flex;align-items:center;gap:.45rem;min-height:44px;padding:.4rem .95rem;border:1px solid var(--scheme-border,var(--color-border,#d5d9e0));border-radius:999px;background:var(--scheme-bg,var(--color-background));color:var(--scheme-fg,var(--color-text));font-weight:600}
.listen__button:hover{transform:none;box-shadow:none;border-color:var(--scheme-link,var(--color-primary))}
.listen__button:focus-visible{outline:2px solid var(--scheme-link,var(--color-primary));outline-offset:2px}
.listen__button[hidden]{display:none}
.listen__button svg{flex:none;width:1.15rem;height:1.15rem}
.listen__status{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
::highlight(listen-sentence){background-color:color-mix(in srgb,var(--color-primary) 22%,transparent);color:inherit}
@media print{.listen{display:none}}
.section-nav{font-size:.9375rem;line-height:1.4}
.section-nav__list{margin:0;padding:0;list-style:none}
.section-nav__list .section-nav__list{margin:0 0 .25rem;padding-left:.85rem;border-left:1px solid var(--scheme-border,var(--color-border,#d5d9e0))}
.section-nav__link,.section-nav__text,.section-nav__root{display:flex;align-items:center;min-height:44px;padding:.35rem .5rem;border-radius:var(--radius-sm,4px);color:inherit;text-decoration:none;overflow-wrap:anywhere}
.section-nav__root{font-weight:600}
.section-nav__link:hover,.section-nav__root:is(a):hover{text-decoration:underline;text-underline-offset:.15em}
.section-nav__link:focus-visible,.section-nav__root:focus-visible,.section-nav__summary:focus-visible{outline:2px solid var(--scheme-link,var(--color-primary));outline-offset:2px}
.section-nav [aria-current="page"]{font-weight:600;color:var(--scheme-link,var(--color-primary));box-shadow:inset 3px 0 0 currentColor}
.section-nav [aria-current="true"]{font-weight:600}
.section-nav__heading{margin:0 0 .25rem;padding:0 .5rem;color:var(--scheme-muted,var(--color-muted));font-size:.875rem}
.section-nav__disclosure{border:1px solid var(--scheme-border,var(--color-border,#d5d9e0));border-radius:var(--radius-md,8px)}
.section-nav__summary{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:44px;padding:.5rem .85rem;cursor:pointer;font-weight:600;list-style:none}
.section-nav__summary::-webkit-details-marker{display:none}
.section-nav__summary::after{content:"";flex:none;width:.5rem;height:.5rem;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-25%) rotate(45deg)}
.section-nav__disclosure[open]>.section-nav__summary::after{transform:translateY(15%) rotate(-135deg)}
.section-nav__body{padding:0 .5rem .5rem}
.section-nav__panel{display:none}
@media (min-width:960px){.section-nav__disclosure{display:none}.section-nav__panel{display:block}}
.list-empty{padding:var(--space-md) 0;color:var(--scheme-muted,var(--color-muted))}
.list-empty__text{margin:0;max-width:60ch}
.list-empty__more{margin:.25rem 0 0}
.list-empty__link{display:inline-flex;align-items:center;min-height:44px;color:var(--scheme-link,var(--color-primary));text-decoration:underline;text-underline-offset:.15em}
.list-empty__link:focus-visible{outline:2px solid var(--scheme-link,var(--color-primary));outline-offset:2px}
.list-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:var(--space-xs) var(--space-md);margin-bottom:var(--space-sm)}
.list-head>h2{margin:0}
.list-all{margin:var(--space-md) 0 0}
.list-all--heading{margin:0}
.list-all__link{display:inline-flex;align-items:center;min-height:44px;font-weight:600}
.list-all__link::after{content:"\2192";content:"\2192"/"";display:inline-block;margin-inline-start:.4em}
.list-filter__list{display:flex;flex-wrap:wrap;gap:var(--space-xs);margin:0 0 var(--space-md);padding:0;list-style:none}
.list-filter__link{display:inline-flex;align-items:center;min-height:44px;padding:0 .9rem;border:1px solid var(--scheme-border,var(--color-border,#d5d9e0));border-radius:999px;color:inherit;text-decoration:none}
.list-filter__link:hover{border-color:var(--scheme-link,var(--color-primary))}
.list-filter__link[aria-current=true]{background:var(--color-primary);border-color:var(--color-primary);color:var(--color-onPrimary,#fff);font-weight:600}
.list-filter__empty{color:var(--scheme-muted,var(--color-muted))}
.blog-archive__category,.event-archive__category{display:block;color:var(--scheme-link,var(--color-primary));font-size:.85rem;font-weight:600;margin-bottom:var(--space-xs)}
.event-archive__category{flex-basis:100%;margin:0}
.list-all .visually-hidden,.list-head .visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
img.img-ratio{width:100%;height:auto;object-fit:cover}
img.img-ratio--1-1{aspect-ratio:1/1}
img.img-ratio--4-3{aspect-ratio:4/3}
img.img-ratio--3-2{aspect-ratio:3/2}
img.img-ratio--16-9{aspect-ratio:16/9}
img.img-ratio--21-9{aspect-ratio:21/9}
.section-foot{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--space-sm);margin:var(--space-lg) 0 0}
.section-foot.is-start{justify-content:flex-start}
.grid-section__head{max-width:44rem;margin:0 auto var(--space-lg);text-align:center}
.grid-section__heading{margin:0}
.grid-section__intro{margin-top:var(--space-sm);color:var(--scheme-muted,var(--color-muted))}
.grid-section__intro>:last-child{margin-bottom:0}
.grid-section__head>.grid-section__intro>:is(p,ul,ol){margin-inline:auto}
.grid-section__head>.grid-section__intro>p{text-align:inherit}
:is(.grid-section__head,.testimonials__head,.team__head,.stats__head).is-start{margin-inline:0;text-align:start}
.is-start>:is(.grid-section__intro,.testimonials__intro,.team__intro,.stats__intro)>:is(p,ul,ol){margin-inline:0}
/* Quiz: one question at a time on every width; the stage and result appear with the script. */
.quiz{max-width:44rem;margin:0 auto}
.quiz [hidden]{display:none!important}
.quiz__lead{font-size:1.1em}
.quiz__startbar{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1rem}
.quiz__private{color:var(--scheme-muted,var(--color-muted));font-size:.875em}
.quiz__stage,.quiz__result{padding:clamp(1rem,4vw,1.75rem);border:1px solid var(--scheme-border,var(--color-border));border-radius:var(--radius-md);background:var(--scheme-surface,var(--color-surface))}
.quiz__bar{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.25rem 1rem;font-size:.9em}
.quiz__bar p{margin:0}
.quiz__meter{height:6px;margin:.5rem 0 1.25rem;border-radius:999px;background:color-mix(in srgb,var(--scheme-fg,var(--color-text)) 12%,transparent);overflow:hidden}
.quiz__meter span{display:block;height:100%;width:0;background:var(--scheme-link,var(--color-primary));transition:width .2s}
.quiz__q{margin:0;padding:0;border:0;min-width:0}
.quiz__question{display:block;padding:0;margin:0 0 1rem;font-family:var(--font-heading);font-size:1.25em;font-weight:var(--font-headingWeight,bold);line-height:1.3}
.quiz__question:focus{outline:none}.quiz__question:focus-visible{outline:2px solid var(--scheme-link,var(--color-primary));outline-offset:4px}
.quiz__qimg{display:block;max-width:100%;height:auto;max-height:16rem;margin:0 0 1rem;border-radius:var(--radius-md);object-fit:cover}
.quiz__hint{color:var(--scheme-muted,var(--color-muted));font-size:.9em}
.quiz__options{display:grid;gap:.6rem}
.quiz__opt{display:flex;align-items:center;gap:.75rem;min-height:48px;padding:.65rem .9rem;border:2px solid var(--scheme-border,var(--color-border));border-radius:var(--radius-md);background:var(--scheme-bg,var(--color-background));cursor:pointer;overflow-wrap:anywhere}
.quiz__opt:hover{border-color:var(--scheme-link,var(--color-primary))}
.quiz__opt input{flex:none;width:1.25rem;height:1.25rem;margin:0;accent-color:var(--scheme-link,var(--color-primary))}
.quiz__opt:has(input:checked){border-color:var(--scheme-link,var(--color-primary));background:color-mix(in srgb,var(--scheme-link,var(--color-primary)) 10%,var(--scheme-bg,var(--color-background)))}
.quiz__opt:has(input:focus-visible){outline:2px solid var(--scheme-link,var(--color-primary));outline-offset:2px}
.quiz__opt:has(input:disabled){cursor:default}
.quiz__opt--right{border-color:#15803d!important}.quiz__opt--wrong{border-color:#b91c1c!important}
.quiz__opttext{flex:1}
.quiz__optimg{flex:none;width:4rem;height:4rem;border-radius:var(--radius-sm);object-fit:cover}
.quiz__feedback{margin-top:1rem;padding:.75rem 1rem;border-left:4px solid var(--scheme-link,var(--color-primary));background:var(--scheme-bg,var(--color-background));border-radius:var(--radius-sm)}
.quiz__feedback p{margin:0}.quiz__feedback p+p{margin-top:.35rem}
.quiz__verdict{font-weight:bold}
.quiz__nav{display:flex;justify-content:space-between;gap:.75rem;margin-top:1.25rem}
.quiz__nav .button{min-height:44px}
.quiz__nav [data-quiz-next]{margin-left:auto}
.quiz__result-title{margin-top:0}
.quiz__result-title:focus{outline:none}
.quiz__outimg{display:block;width:100%;max-height:14rem;object-fit:cover;border-radius:var(--radius-md);margin-bottom:1rem}
.quiz__outcome+.quiz__outcome{margin-top:1.5rem;padding-top:1.5rem;border-top:1px solid var(--scheme-border,var(--color-border))}
.quiz__review{margin:1rem 0}.quiz__review summary{cursor:pointer;font-weight:bold;min-height:44px;display:flex;align-items:center}
.quiz__review-list{padding-left:1.25rem}.quiz__review-list li{margin-bottom:.75rem}.quiz__review-list p{margin:.15rem 0}
.quiz__actions{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem;margin:1rem 0 0}
.quiz__link{appearance:none;margin:0;padding:.25rem 0;border:0;background:none;box-shadow:none;transform:none;color:var(--scheme-link,var(--color-primary));font:inherit;text-decoration:underline;cursor:pointer;min-height:44px}
.quiz__link:hover{transform:none;box-shadow:none;background:none}
.quiz__live{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@media (max-width:639px){.quiz__nav .button{flex:1}}
/* Calculator (Laskuri) */
.calc{display:grid;gap:var(--space-sm);max-width:64rem}
.calc__title{margin:0}
.calc__intro{margin:0;color:var(--scheme-muted,var(--color-muted))}
.calc__body{display:grid;gap:var(--space-md);align-items:start}
@media (min-width:768px){.calc__body{grid-template-columns:minmax(0,3fr) minmax(0,2fr)}}
.calc__controls{display:grid;gap:var(--space-sm);min-width:0}
.calc__field{display:grid;gap:.35rem;min-width:0;margin:0;padding:0;border:0}
.calc__label{font-weight:600;padding:0}
.calc__label-row{display:flex;justify-content:space-between;align-items:baseline;gap:var(--space-sm)}
.calc__value{font-variant-numeric:tabular-nums;font-weight:600}
.calc__hint{margin:0;font-size:.875rem;color:var(--scheme-muted,var(--color-muted))}
.calc__number{display:flex;align-items:center;gap:.5rem}
.calc .calc__field .calc__input,.calc .calc__field .calc__select{box-sizing:border-box;min-height:44px;width:100%;max-width:20rem;margin:0;padding:.5rem .75rem;border:1px solid var(--scheme-border,var(--color-border));border-radius:var(--radius-md);background:var(--scheme-bg,var(--color-background));color:inherit;font:inherit}
.calc .calc__field .calc__input{max-width:10rem;font-variant-numeric:tabular-nums}
.calc__unit{color:var(--scheme-muted,var(--color-muted))}
.calc .calc__field .calc__range{box-sizing:border-box;width:100%;min-height:44px;margin:0;padding:0;border:0;background:none;accent-color:var(--color-primary)}
.calc__choice-list{display:flex;flex-wrap:wrap;gap:var(--space-xs)}
.calc .calc__choice,.calc .calc__check{display:inline-flex;font-weight:400;align-items:center;gap:.5rem;min-height:44px;padding:.35rem .9rem;border:1px solid var(--scheme-border,var(--color-border));border-radius:var(--radius-md);background:var(--scheme-bg,var(--color-background));cursor:pointer}
.calc__field--check{justify-items:start}
.calc__choice input,.calc__check input{width:1.15rem;height:1.15rem;margin:0;accent-color:var(--color-primary)}
.calc__choice:has(input:checked){border-color:var(--color-primary);box-shadow:inset 0 0 0 1px var(--color-primary)}
.calc__choice:has(input:focus-visible),.calc__check:has(input:focus-visible){outline:2px solid var(--color-primary);outline-offset:2px}
.calc__input:focus-visible,.calc__select:focus-visible,.calc__range:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}
.calc__result{display:grid;gap:var(--space-sm);padding:var(--space-md);border:1px solid var(--scheme-border,var(--color-border));border-radius:var(--radius-md);background:var(--scheme-surface,var(--color-surface));min-width:0}
.calc__outputs{display:grid;gap:var(--space-xs);margin:0}
.calc__output{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:.25rem var(--space-sm)}
.calc__output dt{margin:0}
.calc__output dd{margin:0;font-weight:600;font-variant-numeric:tabular-nums;text-align:right}
.calc__output--main{display:grid;gap:.15rem;padding-bottom:var(--space-sm,.75rem);border-bottom:1px solid var(--scheme-border,var(--color-border))}
.calc__output--main dd{font-size:clamp(1.6rem,5vw,2.2rem);line-height:1.15;text-align:left;color:var(--scheme-heading,inherit)}
.calc__vat,.calc__disclaimer,.calc__example{margin:0;font-size:.875rem;color:var(--scheme-muted,var(--color-muted))}
.calc__error{margin:0;font-weight:600}
.calc__cta{justify-self:start;margin-top:var(--space-xs)}
.calc__live{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.calc__problem{padding:var(--space-sm) var(--space-md);border:1px dashed var(--scheme-border,var(--color-border));border-radius:var(--radius-md)}
.calc__problem p,.calc__problem ul{margin:0}
.calc__problem ul{padding-left:1.2em}
/* Date checklist (Muistilista) */
.dcl{display:grid;gap:var(--space-md);max-width:48rem}
.dcl__title,.dcl__phase-title{margin:0}
.dcl__intro,.dcl__disclaimer,.dcl__saved,.dcl__chosen{margin:0}
.dcl__saved,.dcl__disclaimer,.dcl__meta{font-size:.875rem;color:var(--scheme-muted,var(--color-muted))}
.dcl__setup{display:grid;gap:var(--space-sm);padding:var(--space-md);border:1px solid var(--scheme-border,var(--color-border));border-radius:var(--radius-md)}
.dcl__setup[hidden],.dcl__bar[hidden],.dcl__phase[hidden],.dcl__task[hidden],.dcl__chosen[hidden],.dcl__timing[hidden]{display:none}
.dcl__field{display:grid;gap:.35rem;min-width:0;margin:0;padding:0;border:0}
.dcl__label{font-weight:600;padding:0}
.dcl .dcl__date{box-sizing:border-box;min-height:44px;width:100%;max-width:20rem;margin:0}
.dcl__choices{display:flex;flex-wrap:wrap;gap:var(--space-xs)}
.dcl .dcl__choice{display:inline-flex;font-weight:400;align-items:center;gap:.5rem;min-height:44px;padding:.35rem .9rem;border:1px solid var(--scheme-border,var(--color-border));border-radius:var(--radius-md)}
.dcl__choice input{width:1.15rem;height:1.15rem;margin:0;accent-color:var(--color-primary)}
.dcl__choice:has(input:checked){border-color:var(--color-primary);box-shadow:inset 0 0 0 1px var(--color-primary)}
.dcl__choice:has(input:focus-visible),.dcl__check:has(input:focus-visible){outline:2px solid var(--color-primary);outline-offset:2px}
.dcl__bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-xs) var(--space-sm)}
.dcl__progress{margin:0;font-weight:600;font-variant-numeric:tabular-nums}
.dcl__actions{display:flex;flex-wrap:wrap;gap:var(--space-xs);margin:0}
.dcl__chosen{font-weight:600}
.dcl__phase{display:grid;gap:var(--space-xs)}
.dcl__tasks{display:grid;gap:var(--space-xs);margin:0;padding:0;list-style:none}
.dcl__tasks:empty{display:none}
.dcl__task{display:grid;gap:.25rem;margin:0;padding:var(--space-sm);border:1px solid var(--scheme-border,var(--color-border));border-radius:var(--radius-md)}
.dcl .dcl__check{display:flex;align-items:flex-start;gap:.6rem;min-height:44px;margin:0;padding:.6rem 0 .2rem;font-weight:600;cursor:pointer}
.dcl .dcl__box{flex:none;width:1.25rem;height:1.25rem;margin:.05rem 0 0;accent-color:var(--color-primary)}
.dcl__task--done .dcl__title{text-decoration:line-through;font-weight:400}
.dcl__task--done .dcl__body{display:none}
.dcl__body{display:grid;gap:.35rem;padding-left:1.85rem;min-width:0}
.dcl__timing,.dcl__link,.dcl__meta{margin:0;overflow-wrap:anywhere}
.dcl__timing{font-variant-numeric:tabular-nums}
.dcl__task--late .dcl__timing{font-weight:600}
.dcl__details>:first-child{margin-top:0}
.dcl__details>:last-child{margin-bottom:0}
.dcl-start{display:grid;gap:var(--space-xs)}
.dcl-start__form{display:flex;flex-wrap:wrap;align-items:flex-end;gap:var(--space-sm)}
.dcl-start__form[hidden],.dcl-start__error[hidden]{display:none}
.dcl-start__form .dcl__field{flex:0 1 18rem}
.dcl-start .dcl-start__date{box-sizing:border-box;min-height:44px;width:100%;margin:0}
.dcl-start .dcl-start__button{min-height:44px;margin:0}
.dcl-start__error{flex:1 0 100%;margin:0;font-weight:600}
.dcl-start__link{margin:0}
.dcl-start__link a{display:inline-block;padding:.6rem 0}
.dcl__live{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@media print{
body:has([data-dcl]) .site-header,body:has([data-dcl]) .site-footer,.dcl__setup,.dcl__actions{display:none!important}
.dcl__task{break-inside:avoid}
.dcl__task--done .dcl__body{display:grid}
.dcl__box{print-color-adjust:exact;-webkit-print-color-adjust:exact}
.dcl__link a[href^="http"]::after,.dcl__meta a[href^="http"]::after{content:" (" attr(href) ")"}
}
/* Document builder (Asiakirjarakentaja) */
.dob{display:grid;gap:var(--space-md);max-width:48rem}
.dob__title,.dob__intro,.dob__disclaimer,.dob__notice{margin:0}
.dob__disclaimer,.dob__help,.dob__small{font-size:.875rem;color:var(--scheme-muted,var(--color-muted))}
.dob__app{display:grid;gap:var(--space-md);min-width:0}
.dob__app:empty{display:none}
.dob__panel{display:grid;gap:var(--space-sm);padding:var(--space-md);border:1px solid var(--scheme-border,var(--color-border));border-radius:var(--radius-md);min-width:0}
.dob__progress{margin:0;font-weight:600;font-variant-numeric:tabular-nums}
.dob__step-title,.dob__sub,.dob__help,.dob__small,.dob__error{margin:0}
.dob__fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-sm)}
.dob__field{display:grid;gap:.35rem;min-width:0;grid-column:1/-1;margin:0;padding:0;border:0;align-content:start}
.dob__field--half{grid-column:auto}
.dob__label{font-weight:600;padding:0}
.dob .dob__input{box-sizing:border-box;width:100%;min-height:44px;margin:0}
.dob textarea.dob__input{min-height:7rem}
.dob__input[aria-invalid=true]{border-color:var(--color-danger,currentColor);box-shadow:inset 0 0 0 1px var(--color-danger,currentColor)}
.dob__error{font-weight:600;color:var(--color-danger,inherit)}
.dob__error:empty{display:none}
.dob__choices{display:flex;flex-wrap:wrap;gap:var(--space-xs)}
.dob .dob__choice{display:inline-flex;font-weight:400;align-items:center;gap:.5rem;min-height:44px;padding:.35rem .9rem;border:1px solid var(--scheme-border,var(--color-border));border-radius:var(--radius-md)}
.dob__choice input{width:1.15rem;height:1.15rem;margin:0;accent-color:var(--color-primary)}
.dob__choice:has(input:checked){border-color:var(--color-primary);box-shadow:inset 0 0 0 1px var(--color-primary)}
.dob__choice:has(input:focus-visible){outline:2px solid var(--color-primary);outline-offset:2px}
.dob__row{display:grid;gap:var(--space-sm);padding:var(--space-sm);border:1px solid var(--scheme-border,var(--color-border));border-radius:var(--radius-md);min-width:0;margin:0}
.dob__row legend{font-weight:600;padding:0 .35rem}
.dob__actions{display:flex;flex-wrap:wrap;gap:var(--space-xs);margin:0;align-items:center}
.dob__actions--end{justify-content:space-between}
.dob .dob__button{min-height:44px;margin:0}
.dob__file{position:relative;display:inline-flex}
.dob__file input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%}
.dob__file:has(input:focus-visible){outline:2px solid var(--color-primary);outline-offset:2px}
.dob__warning{display:grid;gap:.35rem;margin:0;padding:var(--space-sm);border:2px solid var(--color-primary);border-radius:var(--radius-md)}
.dob__warning p{margin:0}
.dob__warning-title{font-weight:600}
.dob__message{margin:0;font-weight:600}
.dob__message:empty{display:none}
.dob__paper{position:relative;overflow:hidden;display:grid;gap:.6rem;padding:clamp(1rem,4vw,2.5rem);background:#fff;color:#1a1a1a;border:1px solid var(--scheme-border,var(--color-border));border-radius:var(--radius-md);user-select:none;-webkit-user-select:none;overflow-wrap:anywhere}
.dob__paper p{margin:0;color:inherit;white-space:pre-line}
.dob__watermark{position:absolute;inset:0;display:grid;align-content:space-around;justify-items:center;overflow:hidden;pointer-events:none;color:#1a1a1a;opacity:.13;font-size:clamp(2rem,9vw,4rem);font-weight:700;letter-spacing:.08em}
.dob__watermark span{transform:rotate(-28deg);white-space:nowrap}
.doc-title{font-size:1.5rem;font-weight:700}
.doc-subtitle{font-size:1.125rem}
.doc-heading{font-size:1.0625rem;font-weight:700;margin-top:.75rem!important}
.doc-clause-heading{font-weight:700;margin-top:.5rem!important}
.doc-signature{display:grid;gap:.15rem;margin-top:1.5rem!important;padding-top:.35rem;border-top:1px solid #1a1a1a;max-width:22rem}
.doc-signature-label{font-size:.8125rem}
.doc-signature-role{font-weight:600}
.doc-note{margin-top:1rem!important;padding-top:.6rem;border-top:1px solid #999;font-size:.9375rem}
@media (max-width:40rem){.dob__fields{grid-template-columns:minmax(0,1fr)}.dob__field--half{grid-column:1/-1}}
@media print{.dob__paper,.dob__app{display:none!important}}
/* Ilmoitukset (web push) */
.pushn{display:grid;gap:var(--space-sm);max-width:44rem}
.pushn--card{padding:clamp(1.25rem,5vw,2.5rem);background:var(--scheme-surface,var(--color-surface));border:var(--card-border,1px) solid var(--scheme-border,var(--color-border));border-radius:var(--card-radius,var(--radius-md))}
.pushn--compact{gap:var(--space-xs)}
.pushn[hidden]{display:none}
.pushn__title{margin:0}
.pushn__body{margin:0;max-width:65ch;color:var(--scheme-muted,var(--color-muted))}
.pushn__controls{display:flex;flex-wrap:wrap;gap:var(--space-xs);align-items:center}
.pushn .pushn__button{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:44px;min-width:44px;padding:.5rem 1.1rem;border:1px solid var(--color-primary);border-radius:var(--button-radius,var(--radius-md));background:var(--color-primary);color:var(--color-onPrimary,#fff);font:inherit;font-weight:600;cursor:pointer;text-align:start}
.pushn .pushn__button[hidden]{display:none}
.pushn .pushn__button--quiet{background:transparent;color:var(--color-primary);border-color:var(--scheme-border,var(--color-border))}
.pushn .pushn__button:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}
.pushn .pushn__button[aria-busy=true]{opacity:.7;cursor:progress}
.pushn--compact .pushn__button{min-height:44px;padding:.4rem .9rem;font-weight:500}
.pushn__icon{flex:none}
.pushn__status{margin:0;font-weight:500}
.pushn__status:empty{display:none}
.pushn__alt{margin:0}
.pushn__alt[hidden]{display:none}
.pushn__note{margin:0;max-width:65ch;font-size:.875rem;color:var(--scheme-muted,var(--color-muted))}
.pushn--compact .pushn__note{font-size:.8125rem}

.calc__warning{margin:0;font-weight:700;font-size:1.05rem}
.calc__credit{margin:0;padding-top:var(--space-xs);border-top:1px solid var(--scheme-border,var(--color-border));font-size:1rem;line-height:1.5;color:inherit}
/* Korttipino (card-stack.ts): the cards sit on top of each other in the middle of the box and
   move with transform and opacity only, so a step costs no layout. Rounded cards (default): five
   in sight, scale 1 / .86 / .72 and opacity 1 / .82 / .64 from the middle out (the outer text
   still 4.5:1, axe), the rest hidden (opacity 0) until they come in. The box is a size container: beside a split hero's text it
   stretches to the hero's height and the cards spread out to fill it (--cs-move, at most 1.3 steps). */
.card-stack{--cs-step:5.5rem;--cs-h:4.75rem;--cs-min:calc(2 * var(--cs-span,1.8) * var(--cs-step) + var(--cs-h) + 1.5rem);position:relative;box-sizing:border-box;container-type:size;width:min(30rem,100%);height:var(--cs-min);margin-inline:auto;color:var(--scheme-fg,var(--color-text))}
.card-stack__list{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
/* Relative and full height: the section's block container (rootSelector) makes it relative anyway. */
.card-stack__cards{position:relative;height:100%}
.card-stack__card{--cs-move:min(calc(1.3 * var(--cs-step)),max(var(--cs-step),calc((100cqh - var(--cs-h) - 1.5rem) / (2 * var(--cs-span,1.8)))));position:absolute;left:50%;top:50%;box-sizing:border-box;display:flex;align-items:center;gap:1rem;width:100%;height:var(--cs-h);margin:0;padding:0 1.5rem 0 1.25rem;border-radius:16px;text-align:start;transform:translate(-50%,calc(-50% + var(--y,0) * var(--cs-move))) scale(calc(1 - var(--a,0) * .14));opacity:min(calc(1 - var(--a,0) * .18),max(0,calc((2.5 - var(--a,0)) * 100)));z-index:calc(10 - var(--a,0));transition:transform var(--cs-dur,.7s) cubic-bezier(.4,0,.2,1),opacity var(--cs-dur,.7s) ease,background-color var(--cs-dur,.7s) ease}
.card-stack__card.is-mid{opacity:1}
.card-stack__card.is-wrap{opacity:0}
.card-stack__card.is-jump{transition:none}
.card-stack__icon{flex:none;display:inline-flex;align-items:center;justify-content:center;width:2.25rem;height:2.25rem}
.card-stack__icon .cms-icon{margin:0}.card-stack .card-stack__icon svg{width:2rem;height:2rem}
.card-stack__text{flex:1;min-width:0;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;font-size:1.5rem;font-weight:600;line-height:1.15;overflow-wrap:anywhere;hyphens:auto}
.card-stack--glass .card-stack__card{background:color-mix(in srgb,var(--scheme-fg,var(--color-text)) 10%,transparent);border:1px solid color-mix(in srgb,var(--scheme-fg,var(--color-text)) 24%,transparent);-webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%);box-shadow:0 12px 32px -16px rgb(0 0 0 / .45)}
.card-stack--glass .card-stack__card.is-mid{background:color-mix(in srgb,var(--scheme-fg,var(--color-text)) 17%,transparent);border-color:color-mix(in srgb,var(--scheme-fg,var(--color-text)) 40%,transparent)}
.card-stack--plain .card-stack__card{background:var(--scheme-surface,var(--color-surface));border:1px solid var(--scheme-border,var(--color-border));box-shadow:0 8px 24px -16px color-mix(in srgb,var(--scheme-fg,var(--color-text)) 50%,transparent)}
.card-stack__badge{position:absolute;top:-.45rem;right:-.45rem;display:none;align-items:center;justify-content:center;width:1.75rem;height:1.75rem;border-radius:999px;background:var(--color-success,#15803d);color:#fff;opacity:0;transform:scale(.5);transition:opacity var(--cs-dur,.7s) ease,transform var(--cs-dur,.7s) ease;box-shadow:0 0 0 2px var(--scheme-bg,var(--color-background))}
.card-stack--check .card-stack__badge{display:inline-flex}
.card-stack__card.is-mid .card-stack__badge{opacity:1;transform:none}
.card-stack__badge .cms-icon{margin:0}.card-stack__badge svg{width:1rem;height:1rem;stroke-width:3}
/* Pause/Play: a quiet icon in the corner, the whole 44 px a target, a clear ring on focus. */
.card-stack__toggle{position:absolute;right:0;bottom:0;z-index:20;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border:0;border-radius:999px;background:transparent;color:color-mix(in srgb,var(--scheme-fg,var(--color-text)) 75%,transparent);cursor:pointer;transition:color .2s ease,background-color .2s ease}
.card-stack__toggle:hover{color:var(--scheme-fg,var(--color-text));background:color-mix(in srgb,var(--scheme-fg,var(--color-text)) 10%,transparent)}
.card-stack__toggle:focus-visible{color:var(--scheme-fg,var(--color-text));outline:3px solid var(--scheme-fg,var(--color-text));outline-offset:2px}
.card-stack__toggle .cms-icon{margin:0}.card-stack__toggle svg{width:16px;height:16px}
.card-stack__toggle[x-cloak],.card-stack__toggle [x-cloak]{display:none}
/* "Pilleri": the first look, every card in sight and smaller toward the edges. */
.card-stack--pill{--cs-step:3.75rem;--cs-h:3.5rem;width:min(24rem,100%)}
.card-stack--pill .card-stack__card{--cs-move:var(--cs-step);gap:.75rem;padding:0 1.25rem 0 .55rem;border-radius:999px;transform:translate(-50%,calc(-50% + var(--y,0) * var(--cs-step))) scale(max(.5,calc(1 - var(--a,0) * .22)));opacity:max(.35,calc(.9 - var(--a,0) * .15))}
.card-stack--pill .card-stack__card.is-mid{opacity:1}
.card-stack--pill .card-stack__card.is-wrap{opacity:0}
.card-stack--pill .card-stack__icon{width:2.4rem;height:2.4rem;border-radius:999px;background:color-mix(in srgb,var(--scheme-fg,var(--color-text)) 14%,transparent)}
.card-stack--pill .card-stack__icon svg{width:1.25rem;height:1.25rem}
.card-stack--pill .card-stack__text{display:block;font-size:1.05rem;line-height:1.2;white-space:nowrap;text-overflow:ellipsis;overflow-wrap:normal}
.card-stack--pill .card-stack__badge{top:-.3rem;right:-.3rem;width:1.65rem;height:1.65rem}
.card-stack--pill .card-stack__badge svg{width:.95rem;height:.95rem}
@media (max-width:639px){.card-stack{--cs-step:4.6rem;--cs-h:4rem}.card-stack__card{gap:.75rem;padding:0 1.1rem 0 1rem}.card-stack__text{font-size:1.2rem}.card-stack__icon{width:1.75rem;height:1.75rem}.card-stack .card-stack__icon svg{width:1.6rem;height:1.6rem}.card-stack--pill{--cs-step:3.2rem;--cs-h:3rem}.card-stack--pill .card-stack__card{padding:0 1.25rem 0 .55rem}.card-stack--pill .card-stack__text{font-size:.95rem}.card-stack--pill .card-stack__icon{width:2.1rem;height:2.1rem}.card-stack--pill .card-stack__icon svg{width:1.25rem;height:1.25rem}}
@media (prefers-reduced-motion:reduce){.card-stack__card,.card-stack__badge{transition:none}.card-stack__toggle{display:none}}
.card-stack-section{display:grid;gap:var(--space-md,1.5rem);justify-items:center;text-align:center}
.card-stack-section__heading,.card-stack-section__intro{margin:0;max-width:40rem}
.hero__visual{width:min(30rem,100%);margin-bottom:var(--space-md)}
.hero__visual.card-stack--pill{width:min(24rem,100%)}
/* Esittelykaruselli (showcase.ts): the list is a flex row inside a box that scrolls sideways
   (scroll snap); a card is (box - two peeks - gaps) / n wide, measured in the box's own width
   (container units), so the cards in full and the edges come out the same without JavaScript. */
.showcase{--sc-n:1;--sc-gap:clamp(1rem,2.2vw,2rem);--sc-peek:clamp(1.25rem,7vw,7rem);--sc-ratio:3/4;position:relative}
.showcase--4x5{--sc-ratio:4/5}.showcase--1x1{--sc-ratio:1/1}.showcase--4x3{--sc-ratio:4/3}
.showcase__head{max-width:44rem;margin:0 auto var(--space-lg,2rem);padding-inline:var(--site-gutter,1rem);text-align:center}
.showcase__heading{margin:0 0 .5rem}
.showcase__intro{margin:0;font-size:1.125rem;opacity:.85}
.showcase__frame{position:relative}
.showcase__viewport{container-type:inline-size;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-padding-inline:var(--sc-peek);overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
.showcase__viewport:focus-visible{outline:2px solid var(--color-primary,currentColor);outline-offset:2px}
.showcase--fade .showcase__viewport{-webkit-mask-image:linear-gradient(90deg,rgb(0 0 0/.35),#000 var(--sc-peek),#000 calc(100% - var(--sc-peek)),rgb(0 0 0/.35));mask-image:linear-gradient(90deg,rgb(0 0 0/.35),#000 var(--sc-peek),#000 calc(100% - var(--sc-peek)),rgb(0 0 0/.35))}
.showcase__frame.is-ready .showcase__viewport{scrollbar-width:none}
.showcase__frame.is-ready .showcase__viewport::-webkit-scrollbar{display:none}
.showcase__track{display:flex;width:max-content;margin:0;padding:.75rem var(--sc-peek) 1.25rem;list-style:none}
.showcase__item{flex:0 0 calc((100cqw - 2 * var(--sc-peek) - (var(--sc-n) - 1) * var(--sc-gap)) / var(--sc-n));min-width:0;margin:0;padding:0;scroll-snap-align:start}
/* The gap is the cards' margin: the section's block container sets the list's own gap to 0. */
.showcase__track>.showcase__item+.showcase__item{margin-inline-start:var(--sc-gap)}
.showcase__card{position:relative;display:flex;flex-direction:column;height:100%;text-align:center}
.showcase__media{position:relative;overflow:hidden;aspect-ratio:var(--sc-ratio);border:1px solid var(--color-border,rgb(0 0 0/.12));border-radius:var(--radius-md,12px);background:var(--color-surface,#f4f4f5);box-shadow:0 10px 30px -18px rgb(0 0 0/.45)}
.showcase__media-link{display:block;height:100%}
.showcase__media picture{display:contents}
.showcase__image,.showcase__blank{display:block;width:100%;height:100%;object-fit:cover;object-position:top center}
.showcase__title{margin:.9rem 0 0;font-size:1.0625rem;line-height:1.3}
.showcase__text{margin:.25rem 0 0;font-size:.95rem;opacity:.85}
.showcase__actions{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem;margin-top:.75rem}
.showcase__action{min-height:44px}
.showcase__empty{margin:1rem var(--site-gutter,1rem)}
/* Pointing and focus: the card lifts, its picture gets a ring, and (hover look) the buttons come
   over the picture. Touch screens have no hover, so there the buttons stay under the name. */
@media (hover:hover) and (pointer:fine){
.showcase__card:is(:hover,:focus-within) .showcase__media{border-color:var(--color-primary,currentColor);box-shadow:0 0 0 2px var(--color-primary,currentColor),0 18px 40px -18px rgb(0 0 0/.5)}
.showcase--actions-hover .showcase__actions{position:absolute;top:0;left:0;right:0;aspect-ratio:var(--sc-ratio);flex-direction:column;align-items:center;justify-content:center;margin:0;padding:1rem;border-radius:var(--radius-md,12px);background:rgb(15 23 42/.55);opacity:0;pointer-events:none}
.showcase--actions-hover .showcase__card:is(:hover,:focus-within) .showcase__actions{opacity:1;pointer-events:auto}
.showcase--actions-hover .showcase__action{min-width:min(14rem,80%)}
.showcase--actions-hover .showcase__action.button--secondary{background:#fff;color:#111827;border-color:#fff}
}
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
.showcase__media,.showcase--actions-hover .showcase__actions{transition:transform .2s ease,box-shadow .2s ease,opacity .2s ease}
.showcase__card:is(:hover,:focus-within) .showcase__media{transform:translateY(-4px)}
.showcase--actions-hover .showcase__card:is(:hover,:focus-within) .showcase__actions{transform:translateY(-4px)}
}
@media (prefers-reduced-motion:no-preference){.showcase__viewport{scroll-behavior:smooth}}
/* Previous / next: round, over the edges at the pictures' middle, 48 px. */
.showcase__nav{position:absolute;top:calc(.75rem + (100cqw - 2 * var(--sc-peek)) / var(--sc-n) / 2);z-index:2;display:inline-flex;align-items:center;justify-content:center;width:3rem;height:3rem;padding:0;border:1px solid var(--color-border,rgb(0 0 0/.15));border-radius:999px;background:var(--color-surface,#fff);color:var(--color-text,#111827);font-size:1.75rem;line-height:1;box-shadow:0 6px 18px -8px rgb(0 0 0/.45);cursor:pointer;transform:translateY(-50%)}
.showcase__frame{container-type:inline-size}
.showcase__nav--prev{left:max(.25rem,calc(var(--sc-peek) / 2 - 1.5rem))}
.showcase__nav--next{right:max(.25rem,calc(var(--sc-peek) / 2 - 1.5rem))}
.showcase__nav:hover{background:var(--color-background,#f4f4f5)}
.showcase__nav:focus-visible{outline:3px solid var(--color-primary,currentColor);outline-offset:2px}
.showcase__nav[aria-disabled="true"]{opacity:.35;cursor:default}
.showcase__nav[x-cloak]{display:none}
@media (min-width:640px){.showcase{--sc-n:2}}
@media (min-width:960px){.showcase{--sc-n:var(--sc-n-md,3)}}
@media (max-width:639px){.showcase{--sc-peek:2.25rem;--sc-gap:.75rem}.showcase__nav{width:2.75rem;height:2.75rem}}
/* Haku pääkuvassa (hero-search.ts). */
.hero__actions--search{flex-direction:column;align-items:stretch;width:100%;max-width:38rem}
.hero--center .hero__actions--search{margin-inline:auto}.hero--end .hero__actions--search{margin-inline-start:auto}
.hero__buttons{display:flex;flex-wrap:wrap;gap:var(--space-sm)}
.hero--center .hero__buttons{justify-content:center}.hero--end .hero__buttons{justify-content:flex-end}
.hero-search{display:flex;gap:.5rem;width:100%;margin:0}
.hero-search__label{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.hero-search__input{flex:1 1 auto;min-width:0;min-height:48px;padding:0 1rem;border:1px solid var(--scheme-border,var(--color-border,#c5cad3));border-radius:var(--radius-sm,6px);background:var(--color-background,#fff);color:var(--color-text,#111);font:inherit;font-size:max(1rem,16px)}
.hero-search__input:focus-visible{outline:2px solid var(--scheme-link,var(--color-primary));outline-offset:2px}
.hero-search__button.button{flex:none;min-height:48px;margin:0}
.hero-search__popular{display:flex;flex-wrap:wrap;align-items:center;gap:.25rem .75rem;text-align:start}
.hero--center .hero-search__popular{justify-content:center}.hero--end .hero-search__popular{justify-content:flex-end}
.hero-search__popular-heading{margin:0;font-weight:600}
.hero-search__suggestions{display:flex;flex-wrap:wrap;gap:.25rem .75rem;margin:0;padding:0;list-style:none}
.hero-search__suggestion{display:inline-flex;align-items:center;min-height:44px;color:inherit;text-decoration:underline;text-underline-offset:.15em}
.hero-search__suggestion:focus-visible{outline:2px solid currentColor;outline-offset:2px}
/* Archive pagination (E185): plain links with a query parameter, no JS.
   44px hit target (WCAG 2.5.5/2.5.8); the current page is a link with
   aria-current="page", never a disabled button. */
.pagination{margin:var(--space-md) 0 0}
.pagination__list{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-xs);margin:0;padding:0;list-style:none}
.pagination__link{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:0 var(--space-xs);border:1px solid var(--scheme-border,var(--color-border));border-radius:var(--radius-sm);background:var(--scheme-surface,var(--color-surface));color:inherit;text-decoration:none;font-size:.95rem;line-height:1}
.pagination__link:hover{border-color:var(--color-primary)}
.pagination__link:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}
.pagination__link[aria-current="page"]{background:var(--color-primary);border-color:var(--color-primary);color:var(--color-onPrimary,#fff);font-weight:600}
.pagination__link--prev,.pagination__link--next{padding:0 var(--space-sm)}
.pagination__ellipsis{display:inline-flex;align-items:center;justify-content:center;min-width:2rem;min-height:44px;color:var(--scheme-muted,var(--color-muted))}
.cms-icon{display:inline-flex;vertical-align:middle;margin-right:.25em}
.cms-icon svg{width:1.25em;height:1.25em;display:block}
.button .cms-icon,.heading .cms-icon{margin-right:.35em}
/* Entrance animations (E184). Played from the page load itself, so a block is
   never left at the from-state; the reduced-motion reset is here once instead
   of being repeated in every compiled block rule. */
@keyframes lt-fade{from{opacity:0}to{opacity:1}}
@keyframes lt-fade-up{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@keyframes lt-fade-down{from{opacity:0;transform:translateY(-24px)}to{opacity:1;transform:none}}
@keyframes lt-fade-left{from{opacity:0;transform:translateX(24px)}to{opacity:1;transform:none}}
@keyframes lt-fade-right{from{opacity:0;transform:translateX(-24px)}to{opacity:1;transform:none}}
@keyframes lt-zoom-in{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:none}}
@keyframes lt-zoom-out{from{opacity:0;transform:scale(1.08)}to{opacity:1;transform:none}}
@keyframes lt-slide-up{from{opacity:0;transform:translateY(64px)}to{opacity:1;transform:none}}
@keyframes lt-blur-in{from{opacity:0;filter:blur(12px)}to{opacity:1;filter:none}}
@keyframes lt-flip-up{from{opacity:0;transform:perspective(800px) rotateX(40deg)}to{opacity:1;transform:none}}
@keyframes lt-pop{0%{opacity:0;transform:scale(.6)}70%{opacity:1;transform:scale(1.05)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.block{animation:none!important}}
/* Scroll effects: the timeline is set per block inside @supports (compile.ts). */
@keyframes lt-scroll-fade-in{from{opacity:0}to{opacity:1}}
@keyframes lt-scroll-fade-out{from{opacity:1}to{opacity:0}}
@keyframes lt-scroll-zoom-in{from{opacity:.4;transform:scale(.85)}to{opacity:1;transform:none}}
@keyframes lt-scroll-zoom-out{from{transform:scale(1.15)}to{transform:none}}
@keyframes lt-scroll-rise{from{opacity:.2;transform:translateY(80px)}to{opacity:1;transform:none}}
@keyframes lt-scroll-parallax{from{transform:translateY(48px)}to{transform:translateY(-48px)}}
/* Attention effects for buttons: a few repeats only, the from- and to-state are the block itself. */
@keyframes lt-pulse{0%,100%{transform:none}50%{transform:scale(1.06)}}
@keyframes lt-wiggle{0%,100%{transform:none}20%{transform:rotate(-4deg)}40%{transform:rotate(4deg)}60%{transform:rotate(-2deg)}80%{transform:rotate(2deg)}}
@keyframes lt-bounce{0%,100%{transform:none}30%{transform:translateY(-10px)}50%{transform:none}70%{transform:translateY(-4px)}}
/* "When it comes into view": waits only after the script has marked what is on screen. */
.anim-ready .lt-reveal:not(.is-inview),.anim-ready .lt-wait:not(.is-inview){animation:none}
.anim-ready .lt-reveal:not(.is-inview){opacity:0}
.anim-ready .lt-reveal:not(.is-inview):focus-within{opacity:1}
.lt-instant{animation:none!important}
@media (prefers-reduced-motion:reduce){.lt-reveal{opacity:1!important}}
@media print{.block{animation:none!important}.lt-reveal{opacity:1!important}}
.motion-off .lt-reveal{opacity:1!important}
/* A whole section's own animation (style.animation, class lt-anim): the same resets. */
@media (prefers-reduced-motion:reduce){.lt-anim{animation:none!important}}
@media print{.lt-anim{animation:none!important}}
/* Less motion everywhere (docs/sivupohjat/LUOTTOKORTTI_2026-11-09.md): the per-component resets
   above and in library-blocks/ left 25-36 elements a page still moving under reduced motion
   (buttons, the menu, cards, hover effects, tabs). One central rule cuts every transition to 0s
   (the value the components' own reduced-motion rules give, so it never undoes them; nothing on
   a site waits for transitionend, and Alpine x-transition reads the duration) and every
   animation to .01ms with one round, so its end state is still reached and animationend fires. Delays go to zero so nothing waits hidden; smooth scrolling jumps. Only on a site
   with the setting "Vähemmän liikettä kävijän toiveesta" (motionReduceRespect, class
   motion-calm on the root): on for new sites, off for the sites made before it (drizzle/1340),
   which render as they did. */
@media (prefers-reduced-motion:reduce){.motion-calm,.motion-calm *,.motion-calm *::before,.motion-calm *::after{transition-duration:0s!important;transition-delay:0s!important;animation-duration:.01ms!important;animation-delay:0s!important;animation-iteration-count:1!important;scroll-behavior:auto!important}}
.motion-calm.motion-off,.motion-calm.motion-off *,.motion-calm.motion-off *::before,.motion-calm.motion-off *::after{transition-duration:0s!important;transition-delay:0s!important;animation-duration:.01ms!important;animation-delay:0s!important;animation-iteration-count:1!important;scroll-behavior:auto!important}
/* Logo cloud. --logo-height sizes every logo to the same optical height. */
.logo-cloud{--logo-height:2.5rem;--logo-gap:var(--space-lg)}
.logo-cloud__heading{margin:0 0 var(--space-md);text-align:center;font-family:var(--font-body);font-size:1rem;font-weight:600;color:var(--scheme-muted,var(--color-muted))}
.logo-cloud--grid .logo-cloud__track{align-items:center}
.logo-cloud__track>.block{min-width:0}
.logo-item{display:flex;align-items:center;justify-content:center;min-height:44px;color:inherit;text-decoration:none}
.logo-item__image{height:var(--logo-height);width:auto;max-width:100%;object-fit:contain;border-radius:0}
.logo-item__name{font-family:var(--font-heading);font-size:1.15rem;font-weight:700;text-align:center;text-wrap:balance;overflow-wrap:break-word;color:var(--scheme-muted,var(--color-muted))}
a.logo-item:hover .logo-item__name{color:var(--scheme-fg,var(--color-text))}
a.logo-item:focus-visible{outline:2px solid var(--scheme-link,var(--color-primary));outline-offset:4px;border-radius:var(--radius-sm)}
.logo-cloud--mono .logo-item__image{filter:grayscale(1);opacity:.7;transition:filter .2s ease,opacity .2s ease}
.logo-cloud--mono a.logo-item:hover .logo-item__image,.logo-cloud--mono a.logo-item:focus-visible .logo-item__image{filter:none;opacity:1}
/* Ticker: two identical tracks side by side, each sliding left by its own width. */
.logo-cloud__viewport{display:flex;overflow:hidden;-webkit-mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent)}
.logo-cloud--marquee .logo-cloud__track{flex:none;min-width:100%;animation:logo-marquee var(--logo-duration,40s) linear infinite}
.logo-cloud--marquee .logo-cloud__track>.block{flex:1 0 auto;padding:0 calc(var(--logo-gap)/2)}
.logo-cloud--slow{--logo-duration:70s}.logo-cloud--fast{--logo-duration:22s}
.logo-cloud__viewport:hover .logo-cloud__track,.logo-cloud__viewport:focus-within .logo-cloud__track,.logo-cloud.is-paused .logo-cloud__track{animation-play-state:paused}
@keyframes logo-marquee{to{transform:translateX(-100%)}}
.logo-cloud__pause{display:flex;align-items:center;justify-content:center;width:44px;height:44px;margin:var(--space-sm) auto 0;padding:0;border:1px solid var(--scheme-border,var(--color-border));border-radius:50%;background:transparent;color:var(--scheme-muted,var(--color-muted));cursor:pointer}
.logo-cloud__pause .cms-icon{margin:0}
.logo-cloud__pause:hover{color:var(--scheme-fg,var(--color-text))}
.logo-cloud__pause:focus-visible{outline:2px solid var(--scheme-link,var(--color-primary));outline-offset:2px}
.logo-cloud__pause[x-cloak],.logo-cloud__pause [x-cloak]{display:none}
@media (prefers-reduced-motion:reduce){.logo-cloud--mono .logo-item__image{transition:none}.logo-cloud__viewport{-webkit-mask-image:none;mask-image:none}.logo-cloud--marquee .logo-cloud__track{animation:none;flex:1 1 auto;min-width:0;flex-wrap:wrap!important;justify-content:center!important;row-gap:var(--space-md)}.logo-cloud--marquee .logo-cloud__track>.block{flex:none}.logo-cloud__track--copy,.logo-cloud__pause{display:none!important}}
/* Buttons of the call to action and the 404 section: a 44 px target and a focus ring
   that is visible on every band colour. */
.action-button{display:inline-flex;align-items:center;justify-content:center;min-height:44px;text-align:center}
.button.action-button--second{background:transparent;color:inherit;border-color:currentColor}
.action-button:focus-visible{outline:2px solid var(--scheme-fg,var(--color-text));outline-offset:3px}
.cta{display:flex;flex-direction:column;align-items:center;gap:var(--space-md);text-align:center}
.cta__text{max-width:44rem}
.cta__heading{margin:0}
.cta__body{margin:var(--space-sm) 0 0;font-size:1.1rem;color:var(--scheme-muted,var(--color-muted))}
.cta__actions{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--space-sm)}
.cta--card,.cta--accent{padding:clamp(1.5rem,5vw,3.5rem);border-radius:var(--card-radius,var(--radius-md))}
.cta--card{background:var(--scheme-surface,var(--color-surface));border:var(--card-border,0) solid var(--scheme-border,var(--color-border))}
.cta--accent{background:var(--color-primary);color:var(--color-onPrimary,#fff)}
.cta--accent .cta__body{color:inherit;opacity:.9}
.cta--accent .action-button:not(.action-button--second){background:var(--color-onPrimary,#fff);color:var(--color-primary)}
.cta--accent .action-button:focus-visible{outline-color:var(--color-onPrimary,#fff)}
@media (min-width:768px){.cta--split{flex-direction:row;justify-content:space-between;text-align:start}.cta--split .cta__actions{flex:none;justify-content:flex-end}}
@media (max-width:479px){.cta__actions{flex-direction:column;align-self:stretch}}
/* Bento grid. The tile is a flex child of the grid cell so that it fills a cell that
   spans two rows; the spans apply from the tablet width up, a phone has one column. */
.bento__intro{max-width:40rem;margin-bottom:var(--space-md);color:var(--scheme-muted,var(--color-muted))}
.bento{grid-auto-flow:dense}
.bento>.block{display:flex;min-width:0}
.bento-item{position:relative;flex:1;display:flex;flex-direction:column;min-width:0;overflow:hidden;background:var(--scheme-surface,var(--color-surface));color:var(--scheme-fg,var(--color-text));border:var(--card-border,0) solid var(--scheme-border,var(--color-border));border-radius:var(--card-radius,var(--radius-md))}
.bento-item__media{flex:1 1 9rem;min-height:9rem;overflow:hidden}
.bento-item__image{width:100%;height:100%;object-fit:cover;border-radius:0}
.bento-item__content{padding:1.25rem}
.bento-item__icon{display:flex;align-items:center;justify-content:center;width:2.5rem;height:2.5rem;margin-bottom:var(--space-sm);border-radius:var(--radius-md);background:color-mix(in srgb,var(--color-primary) 12%,transparent);color:var(--scheme-link,var(--color-primary))}
.bento-item__icon .cms-icon{margin:0}
.bento-item__title{margin:0 0 var(--space-xs);font-size:var(--font-size-h3,1.2rem)}
.bento-item__body{font-size:.95rem;color:var(--scheme-muted,var(--color-muted))}
.bento-item__body>:last-child{margin-bottom:0}
.bento-item__body a{position:relative;z-index:1}
/* The title link covers the whole tile, so the tile has one tab stop and one name. */
.bento-item__link{color:inherit;text-decoration:none}
.bento-item__link::after{content:"";position:absolute;inset:0}
.bento-item__link:focus-visible{outline:none;box-shadow:none}
.bento-item--linked:has(.bento-item__link:focus-visible){outline:3px solid var(--scheme-link,var(--color-primary));outline-offset:2px}
.bento-item--linked:hover .bento-item__title{text-decoration:underline;text-underline-offset:.2em}
.bento-item--accent{background:var(--color-primary);color:var(--color-onPrimary,#fff)}
.bento-item--dark{background:var(--color-secondary,#0c1520);color:var(--color-onSecondary,#fff)}
.bento-item--mint{background:#c9f1e4;color:#0c1520}.bento-item--sky{background:#d8e6ff;color:#0c1520}.bento-item--sun{background:#ffe3a3;color:#0c1520}
:is(.bento-item--dark,.bento-item--mint,.bento-item--sky,.bento-item--sun) .bento-item__body{color:inherit;opacity:.88}
:is(.bento-item--dark,.bento-item--mint,.bento-item--sky,.bento-item--sun) .bento-item__body a{color:inherit}
:is(.bento-item--dark,.bento-item--mint,.bento-item--sky,.bento-item--sun) .bento-item__icon{background:color-mix(in srgb,currentColor 12%,transparent);color:inherit}
:is(.bento-item--dark,.bento-item--mint,.bento-item--sky,.bento-item--sun).bento-item--linked:has(.bento-item__link:focus-visible){outline-color:var(--scheme-fg,var(--color-text))}
.bento-item--accent .bento-item__body{color:inherit;opacity:.9}
.bento-item--accent .bento-item__body a{color:inherit}
.bento-item--accent .bento-item__icon{background:color-mix(in srgb,var(--color-onPrimary,#fff) 18%,transparent);color:inherit}
.bento-item--accent.bento-item--linked:has(.bento-item__link:focus-visible){outline-color:var(--scheme-fg,var(--color-text))}
/* Cover: the photo fills the tile and the text sits on a dark veil, so it is white
   whatever the palette. */
.bento-item--cover{justify-content:flex-end;min-height:16rem;color:#fff}
.bento-item--cover .bento-item__media{position:absolute;inset:0}
.bento-item--cover .bento-item__content{position:relative;padding-top:4rem;background:linear-gradient(to top,rgba(0,0,0,.82),rgba(0,0,0,.55) 55%,rgba(0,0,0,0))}
.bento-item--cover .bento-item__body{color:inherit}
.bento-item--cover .bento-item__body a{color:inherit}
.bento-item--cover .bento-item__icon{background:rgba(255,255,255,.2);color:inherit}
@media (min-width:640px){.bento{grid-auto-rows:minmax(13rem,auto)}.bento>.block:has(>.bento-item--wide),.bento>.block:has(>.bento-item--large){grid-column:span 2}.bento>.block:has(>.bento-item--tall),.bento>.block:has(>.bento-item--large){grid-row:span 2}}
/* Announcement bar: edge to edge, no section padding, so a dismissed bar leaves no gap. */
.section.section--announcement{padding:0;margin-bottom:0}
.section--announcement>.section__inner{max-width:none}
.announcement{display:flex;align-items:center;gap:var(--space-sm);min-height:44px;padding:.5rem var(--space-md);font-size:.95rem;line-height:1.4}
.announcement__text{flex:1;min-width:0;margin:0;text-align:center;overflow-wrap:anywhere}
.announcement__link{color:inherit;font-weight:600;text-decoration:underline;text-underline-offset:.2em}
.announcement--accent{background:var(--color-primary);color:var(--color-onPrimary,#fff)}
.announcement--dark{background:var(--color-text);color:var(--color-background)}
.announcement--subtle{background:var(--color-surface);color:var(--color-text);border-bottom:1px solid var(--color-border)}
.announcement__close{flex:none;display:flex;align-items:center;justify-content:center;width:44px;height:44px;margin:-.5rem calc(var(--space-sm)*-1) -.5rem 0;padding:0;border:0;border-radius:var(--radius-sm);background:transparent;color:inherit;cursor:pointer}
.announcement__close .cms-icon{margin:0}
.announcement__link:focus-visible{outline:2px solid currentColor;outline-offset:2px;border-radius:2px}
.announcement__close:focus-visible{outline:2px solid currentColor;outline-offset:-4px}
.announcement__close[x-cloak]{display:none}
/* More than one announcement (marketing.ts ANNOUNCEMENT_MULTI). */
.announcement__list{flex:1;min-width:0;margin:0;padding:0;list-style:none;display:grid;gap:.25rem}
.announcement__item[hidden]{display:none}
.announcement__nav,.announcement__pause{flex:none;display:flex;align-items:center;justify-content:center;width:44px;height:44px;margin:-.5rem 0;padding:0;border:0;border-radius:var(--radius-sm);background:transparent;color:inherit;font:inherit;font-size:1.4rem;line-height:1;cursor:pointer;box-shadow:none;transform:none}
.announcement__pause-icon{width:10px;height:12px;border-left:3px solid currentColor;border-right:3px solid currentColor}
.announcement__pause-icon.is-paused{width:0;height:0;border-style:solid;border-width:6px 0 6px 10px;border-color:transparent transparent transparent currentColor}
.announcement__nav:hover,.announcement__pause:hover{background:rgb(127 127 127 / .18);transform:none;box-shadow:none}
.announcement__nav:focus-visible,.announcement__pause:focus-visible{outline:2px solid currentColor;outline-offset:-4px}
.announcement__nav[x-cloak],.announcement__pause[x-cloak]{display:none}
/* Feature rows: stacked on a phone, two equal columns from 768 px. The order property moves the
   image to the right; the markup keeps image-then-text on every row. */
.feature-rows__heading,.feature-rows__intro.richtext{text-align:center}
/* The intro stays centred under its heading inside a boxed container too (LUOTTOKORTTI_2026-11-09.md). */
.feature-rows .feature-rows__intro.richtext p{text-align:center}
.feature-rows__intro{max-width:40rem;margin:0 auto var(--space-lg);color:var(--scheme-muted,var(--color-muted))}
.feature-rows__heading:last-of-type{margin-bottom:var(--space-lg)}
.feature-rows__heading:has(+.feature-rows__intro){margin-bottom:var(--space-sm)}
.feature-row{display:grid;gap:var(--space-md);align-items:center}
.feature-row__image{width:100%;aspect-ratio:4/3;object-fit:cover}
.feature-row__eyebrow{margin:0 0 var(--space-xs);font-size:.9rem;font-weight:var(--font-label-weight,700);letter-spacing:var(--font-label-tracking,.01em);text-transform:var(--font-label-transform,none);font-family:var(--font-label-family,inherit);color:var(--scheme-link,var(--color-primary))}
.feature-row__title{margin:0 0 var(--space-sm);font-size:var(--font-size-h2,1.6rem);line-height:var(--font-leading-h2,var(--font-leading-heading,1.2))}
.feature-row__body{color:var(--scheme-muted,var(--color-muted))}
.feature-row__body>:last-child{margin-bottom:0}
.feature-row__more{margin:var(--space-sm) 0 0}
.feature-row__link{display:inline-flex;align-items:center;gap:.35em;min-height:44px;font-weight:600;text-decoration:none}
.feature-row__link .cms-icon{margin:0}
.feature-row__link:hover{text-decoration:underline;text-underline-offset:.2em}
.feature-row__link:focus-visible{outline:2px solid currentColor;outline-offset:2px;border-radius:var(--radius-sm)}
@media (min-width:768px){.feature-row{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,5vw,4.5rem)}.feature-row--text{grid-template-columns:minmax(0,44rem)}.feature-rows--right .feature-row__media,.feature-rows--alternate>.block:nth-child(even) .feature-row__media{order:2}}
/* Feature rows around a picture (layout: 'around', LUOTTOKORTTI_2026-11-09.md): on a phone
   the picture first and the rows below; from 768 px three columns, rows 1–2 on the left,
   3–4 on the right, the picture between them. The rows' container steps aside
   (display:contents) so its blocks are cells of the outer grid; a fifth row and later
   ones run across the width below. */
.feature-around{display:grid;gap:var(--space-lg)}
.feature-around__media{justify-self:center;width:100%;max-width:22rem}
.feature-around__image{width:100%;height:auto;object-fit:contain}
.feature-rows--around .feature-row__media{display:none}
.feature-rows--around .feature-row{grid-template-columns:minmax(0,1fr)}
.feature-rows--around .feature-row__title{font-size:var(--font-size-h3,1.25rem)}
@media (min-width:768px){.feature-around{grid-template-columns:minmax(0,1fr) minmax(0,20rem) minmax(0,1fr);grid-auto-flow:row dense;align-items:center;column-gap:clamp(1.5rem,4vw,3.5rem);row-gap:var(--space-xl,3rem)}.section .feature-around>.feature-rows.feature-rows--around{display:contents}.feature-around__media{grid-column:2;grid-row:1/span 2}.feature-rows--around>.block:nth-child(-n+2){grid-column:1}.feature-rows--around>.block:nth-child(1),.feature-rows--around>.block:nth-child(3){grid-row:1}.feature-rows--around>.block:nth-child(2),.feature-rows--around>.block:nth-child(4){grid-row:2}.feature-rows--around>.block:nth-child(3),.feature-rows--around>.block:nth-child(4){grid-column:3}.feature-rows--around>.block:nth-child(n+5){grid-column:1/-1}.feature-rows--around>.block:nth-child(-n+2) :is(.feature-row,.feature-row__body,.feature-row__eyebrow,.feature-row__body p){text-align:end}.feature-around--no-image{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.feature-around--no-image .feature-rows--around>.block:nth-child(3),.feature-around--no-image .feature-rows--around>.block:nth-child(4){grid-column:2}}
/* Comparison table: scrolls sideways inside its own box; the feature names stay put.
   The box is positioned so the visually hidden yes/no texts scroll with it and never
   widen the page. */
.comparison__intro{max-width:40rem;margin-bottom:var(--space-md);color:var(--scheme-muted,var(--color-muted))}
.comparison{position:relative;overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--scheme-border,var(--color-border));border-radius:var(--card-radius,var(--radius-md))}
.comparison:focus-visible{outline:2px solid var(--scheme-link,var(--color-primary));outline-offset:2px}
.comparison__table{width:100%;border-collapse:separate;border-spacing:0;font-size:.95rem}
.comparison__table th,.comparison__table td{padding:.75rem 1rem;border-bottom:1px solid var(--scheme-border,var(--color-border));text-align:center;vertical-align:middle}
.comparison__table tbody tr:last-child>*{border-bottom:0}
.comparison__table thead th{min-width:7rem;font-family:var(--font-heading);font-size:1rem}
.comparison__table th[scope="row"],.comparison__corner{position:sticky;left:0;z-index:1;min-width:9rem;max-width:55vw;text-align:start;font-weight:500;overflow-wrap:break-word;hyphens:auto;background:var(--scheme-bg,var(--color-background))}
.comparison__group th{text-align:start;font-size:.85rem;font-weight:700;letter-spacing:.01em;color:var(--scheme-muted,var(--color-muted));background:var(--scheme-surface,var(--color-surface))}
.comparison__table .comparison__hi.comparison__hi{background:color-mix(in srgb,var(--color-primary) 10%,transparent)}
.comparison__table thead .comparison__hi{color:color-mix(in srgb,var(--scheme-link,var(--color-primary)) 78%,var(--scheme-fg,var(--color-text)))}
.comparison__group-label{position:sticky;left:1rem;display:inline-block}
.comparison__mark{display:inline-flex;vertical-align:middle}
.comparison__mark .cms-icon{margin:0}
.comparison__mark--yes{color:var(--scheme-link,var(--color-primary))}
.comparison__mark--no{color:var(--scheme-muted,var(--color-muted))}
.comparison-pick{display:none}@media (max-width:47.99rem){.comparison-pick{display:flex;gap:.25rem;width:fit-content;max-width:100%;margin-bottom:var(--space-sm);padding:.25rem;overflow-x:auto;border-radius:999px;background:var(--scheme-surface,var(--color-surface))}.comparison-pick__input{position:absolute;width:1px;height:1px;opacity:0}.comparison-pick__label{display:inline-flex;align-items:center;min-height:44px;padding:.5rem 1.1rem;border-radius:999px;font-weight:600;white-space:nowrap;cursor:pointer}.comparison-pick__input:checked+.comparison-pick__label{background:var(--scheme-bg,var(--color-background));color:var(--scheme-fg,var(--color-text));box-shadow:0 1px 3px rgb(0 0 0/.14)}.comparison-pick__input:focus-visible+.comparison-pick__label{outline:2px solid var(--scheme-link,var(--color-primary));outline-offset:2px}.comparison--pick{overflow:visible}.comparison--pick .comparison__table thead :is(th,td){position:sticky;top:var(--site-header-h,0px);z-index:2;background:var(--scheme-bg,var(--color-background))}.comparison--pick .comparison__table th[scope="row"]{max-width:none;width:55%}.comparison-pick:has(.comparison-pick__input:nth-of-type(1):checked)+.comparison--pick tr>:not(:first-child):not(:nth-child(2)){display:none}.comparison-pick:has(.comparison-pick__input:nth-of-type(2):checked)+.comparison--pick tr>:not(:first-child):not(:nth-child(3)){display:none}.comparison-pick:has(.comparison-pick__input:nth-of-type(3):checked)+.comparison--pick tr>:not(:first-child):not(:nth-child(4)){display:none}.comparison-pick:has(.comparison-pick__input:nth-of-type(4):checked)+.comparison--pick tr>:not(:first-child):not(:nth-child(5)){display:none}.comparison-pick:has(.comparison-pick__input:nth-of-type(5):checked)+.comparison--pick tr>:not(:first-child):not(:nth-child(6)){display:none}.comparison-pick:has(.comparison-pick__input:nth-of-type(6):checked)+.comparison--pick tr>:not(:first-child):not(:nth-child(7)){display:none}.comparison-pick:has(.comparison-pick__input:nth-of-type(7):checked)+.comparison--pick tr>:not(:first-child):not(:nth-child(8)){display:none}.comparison-pick:has(.comparison-pick__input:nth-of-type(8):checked)+.comparison--pick tr>:not(:first-child):not(:nth-child(9)){display:none}}
/* Row hints (a feature name ending in "(( hint ))"): a details element, so the ⓘ button
   opens and closes without a script and says whether it is open. The hint opens under
   the name, inside the sticky row header. */
.comparison__tip{display:inline}
.comparison__tip-btn{display:inline-flex;align-items:center;justify-content:center;width:1.75rem;height:1.75rem;margin:-.25rem 0 -.25rem .15rem;vertical-align:middle;border-radius:50%;list-style:none;cursor:pointer;color:var(--scheme-muted,var(--color-muted))}
.comparison__tip-btn::-webkit-details-marker{display:none}
.comparison__tip-btn::marker{content:""}
.comparison__tip-icon{display:inline-flex;align-items:center;justify-content:center;width:1.1rem;height:1.1rem;border:1.5px solid currentColor;border-radius:50%;font-family:Georgia,serif;font-size:.75rem;font-style:italic;font-weight:700;line-height:1}
.comparison__tip-btn:hover,.comparison__tip[open]>.comparison__tip-btn{color:var(--scheme-link,var(--color-primary))}
.comparison__tip-btn:focus-visible{outline:2px solid var(--scheme-link,var(--color-primary));outline-offset:1px}
.comparison__tip-text{display:block;margin-top:.35rem;font-size:.85rem;font-weight:400;line-height:1.45;color:var(--scheme-muted,var(--color-muted))}
/* Groups that fold up (collapsible): the subheading is the button. */
.comparison__group-btn{display:inline-flex;align-items:center;gap:.4rem;min-height:2.75rem;margin:-.75rem 0;padding:0;border:0;background:transparent;color:inherit;font:inherit;letter-spacing:inherit;text-align:start;cursor:pointer;box-shadow:none;transform:none}
.comparison__group-btn:hover{background:transparent;color:var(--scheme-fg,var(--color-text));transform:none;box-shadow:none}
.comparison__group-btn:focus-visible{outline:2px solid var(--scheme-link,var(--color-primary));outline-offset:2px;border-radius:var(--radius-sm)}
.comparison__group-icon{display:inline-flex;transition:transform .2s ease}
.comparison__group-icon .cms-icon{margin:0}
.comparison__group-icon[x-cloak]{display:none}
.comparison__group-btn.is-shut .comparison__group-icon{transform:rotate(-90deg)}
@media (prefers-reduced-motion:reduce){.comparison__group-icon{transition:none}}
.motion-off .comparison__group-icon{transition:none}
/* Header row that stays in view (stickyHeader) on a wide screen. A scroll box would
   hold a sticky header in place, so the box gives up its scrolling (is-fit, set by the
   script) only while the table fits its width; a wider table keeps scrolling sideways. */
@media (min-width:48rem){.comparison--sticky.is-fit{overflow:visible}.comparison--sticky.is-fit .comparison__table thead :is(th,td){position:sticky;top:var(--site-header-h,0px);z-index:2;background:var(--scheme-bg,var(--color-background))}.comparison--sticky.is-fit .comparison__corner{z-index:3}.comparison--sticky.is-fit .comparison__table thead>tr>:first-child{border-top-left-radius:var(--card-radius,var(--radius-md))}.comparison--sticky.is-fit .comparison__table thead>tr>:last-child{border-top-right-radius:var(--card-radius,var(--radius-md))}}
.comparison__sr{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
/* Page not found. */
.not-found{display:flex;flex-direction:column;align-items:center;max-width:40rem;margin:0 auto;text-align:center}
.not-found__code{margin:0 0 var(--space-sm);font-family:var(--font-heading);font-size:clamp(4rem,18vw,8rem);font-weight:700;line-height:1;letter-spacing:-.02em;color:var(--scheme-link,var(--color-primary))}
.not-found__heading{margin:0 0 var(--space-sm)}
.not-found__body{margin:0;font-size:1.1rem;color:var(--scheme-muted,var(--color-muted))}
.not-found__actions{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--space-sm);margin-top:var(--space-lg)}
.not-found__links{align-self:stretch;margin-top:var(--space-xl,3rem);text-align:start}
.not-found__links-heading{margin:0 0 var(--space-sm);font-size:1rem;font-family:var(--font-body);font-weight:600;color:var(--scheme-muted,var(--color-muted))}
@media (max-width:479px){.not-found__actions{flex-direction:column;align-self:stretch}}
/* Newsletter signup: text and form side by side from 768 px, stacked below. */
.newsletter{display:grid;gap:var(--space-md);align-items:center}
.newsletter--card{padding:clamp(1.25rem,5vw,3rem);background:var(--scheme-surface,var(--color-surface));border:var(--card-border,0) solid var(--scheme-border,var(--color-border));border-radius:var(--card-radius,var(--radius-md))}
.newsletter__heading{margin:0}
.newsletter__body{margin:var(--space-sm) 0 0;color:var(--scheme-muted,var(--color-muted))}
.newsletter__form{min-width:0}
.newsletter__note{margin:var(--space-sm) 0 0;font-size:.85rem;color:var(--scheme-muted,var(--color-muted))}
.newsletter--center{justify-items:center;text-align:center}
.newsletter--center .newsletter__text{max-width:40rem}
.newsletter--center .newsletter__form{width:100%;max-width:28rem;text-align:start}
.newsletter--center .newsletter__note{text-align:center}
@media (min-width:768px){.newsletter--split{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(1.5rem,5vw,4rem)}}

.os-poll{display:grid;gap:var(--space-sm);max-width:40rem}
.os-poll__fieldset{display:grid;gap:.4rem;margin:0;padding:0;border:0;min-width:0}
.os-poll__question{margin:0 0 .4rem;padding:0;font-family:var(--font-heading);font-size:1.25rem;font-weight:700}
.os-poll__hint,.os-poll__note,.os-poll__meta{margin:0;color:var(--scheme-muted,var(--color-muted));font-size:.95rem}
.os-poll__option{display:flex;align-items:center;gap:.6rem;min-height:44px;padding:.35rem .75rem;border:1px solid var(--scheme-border,var(--color-border));border-radius:var(--radius-sm);cursor:pointer}
.os-poll__option input{width:1.15rem;height:1.15rem;margin:0;flex:none;accent-color:var(--color-primary)}
.os-poll__option:has(input:checked){border-color:var(--color-primary)}
.os-poll__option:has(input:focus-visible){outline:2px solid var(--scheme-fg,var(--color-text));outline-offset:2px}
.os-poll__actions{margin:0}
.os-poll__submit{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 1.25rem;border:0;border-radius:var(--radius-sm);background:var(--color-primary);color:var(--color-onPrimary,#fff);font:inherit;font-weight:600;cursor:pointer}
.os-poll__submit:disabled{opacity:.6;cursor:default}
.os-poll__submit:focus-visible{outline:2px solid var(--scheme-fg,var(--color-text));outline-offset:2px}
.os-poll__results{display:grid;gap:.75rem;margin:0;padding:0;list-style:none}
.os-poll__result{display:grid;gap:.25rem}
.os-poll__row{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.os-poll__share{font-weight:700;font-variant-numeric:tabular-nums}
.os-poll__bar{display:block;height:.6rem;border-radius:999px;background:var(--scheme-border,var(--color-border));overflow:hidden}
.os-poll__bar>span{display:block;height:100%;background:var(--color-primary);border-radius:inherit}
.os-poll__notice{margin:0;padding:.6rem .8rem;border-radius:var(--radius-sm);background:var(--scheme-surface,var(--color-surface,#f4f6fa))}
.os-poll__hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.os-status{display:grid;gap:var(--space-sm,.75rem);justify-items:start;max-width:52rem}
.os-status__state{margin:0;font-size:clamp(1.2rem,1rem + 1vw,1.6rem);line-height:1.3}
.os-status__dot{display:inline-block;vertical-align:.05em;margin-right:.55rem;width:.85rem;height:.85rem;border-radius:50%;background:var(--color-success,#15803d);box-shadow:0 0 0 .25rem color-mix(in srgb,var(--color-success,#15803d) 22%,transparent)}
.os-status__state[data-status-state="closed"] .os-status__dot{background:var(--color-danger,#b3261e);box-shadow:0 0 0 .25rem color-mix(in srgb,var(--color-danger,#b3261e) 22%,transparent)}
.os-status__state[data-status-state="oncall"] .os-status__dot{background:var(--color-warning,#b45309);box-shadow:0 0 0 .25rem color-mix(in srgb,var(--color-warning,#b45309) 22%,transparent)}
.os-status__detail{font-weight:400}
.os-status__note,.os-status__response,.os-status__oncall,.os-status__share-note,.os-status__share-msg,.os-status__updated{margin:0}
.os-status__response{font-weight:600}
.os-status__share-msg:empty{display:none}
.os-status__updated{font-size:.875rem;color:var(--scheme-muted,var(--color-muted,#555))}
.os-status__actions{display:flex;flex-wrap:wrap;gap:.75rem;width:100%}
.os-status__actions .button{display:inline-flex;flex-wrap:wrap;align-items:center;justify-content:center;column-gap:.4em;min-height:3.25rem;text-align:center}
.os-status__call{font-size:1.25rem}
.os-status__number{font-variant-numeric:tabular-nums;white-space:nowrap}
.os-status__week{width:100%;max-width:24rem}
.os-status__week summary{cursor:pointer;padding:.7rem 0;font-weight:600}
.os-status__upcoming-title{margin:.75rem 0 .25rem;font-weight:600}
.os-status__upcoming{margin:0;padding-left:1.1rem}
@media (max-width:599px){.os-status__actions .button{flex:1 1 100%}}
.grant-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.grant-rounds__list{display:grid;gap:var(--space-md,1rem);grid-template-columns:repeat(auto-fit,minmax(min(100%,20rem),1fr));margin:0;padding:0;list-style:none}
.grant-round{display:grid;align-content:start;gap:.5rem;padding:var(--space-md,1.25rem);border:1px solid var(--scheme-border,var(--color-border,#d4d4d4));border-radius:var(--radius-md,.5rem);background:var(--scheme-surface,var(--color-surface,transparent))}
.grant-round p,.grant-round h3{margin:0}
.grant-round__state{font-size:.95rem;display:flex;align-items:center;gap:.5rem}
.grant-round__dot{flex:none;width:.75rem;height:.75rem;border-radius:50%;background:var(--color-success,#15803d);box-shadow:0 0 0 .22rem color-mix(in srgb,var(--color-success,#15803d) 22%,transparent)}
.grant-round--upcoming .grant-round__dot{background:var(--color-warning,#b45309);box-shadow:0 0 0 .22rem color-mix(in srgb,var(--color-warning,#b45309) 22%,transparent)}
.grant-round--closed .grant-round__dot{background:var(--scheme-muted,var(--color-muted,#6b6b6b));box-shadow:none}
.grant-round__title{font-size:clamp(1.15rem,1rem + .6vw,1.4rem);line-height:1.25;overflow-wrap:anywhere}
.grant-round__tag{justify-self:start;padding:.1rem .6rem;border-radius:999px;font-size:.85rem;background:color-mix(in srgb,currentColor 9%,transparent)}
.grant-round__period{font-weight:600}
.grant-round__left{font-weight:600}
.grant-round__note,.grant-round--closed .grant-round__dates{color:var(--scheme-muted,var(--color-muted,#555));font-size:.95rem}
.grant-round__text{max-width:60ch}
.grant-round__actions{margin-top:.25rem!important}
.grant-round__actions .button{display:inline-flex;align-items:center;justify-content:center;min-height:2.75rem}
.grant-rounds__more{margin:var(--space-md,1rem) 0 0}
.grants__filters[hidden],.grants__none[hidden],.grants__year[hidden]{display:none}
.grants__filters{display:flex;flex-wrap:wrap;gap:.75rem 1rem;margin:0 0 .5rem}
.grants__filter{display:grid;gap:.25rem;font-weight:600;font-size:.95rem}
.grants__filter select{min-height:2.75rem;min-width:10rem;max-width:100%;font:inherit;font-weight:400;padding:.4rem .6rem}
.grants__count{margin:0 0 .5rem;font-size:.95rem}
.grants__count:empty{display:none}
.grants__years ul{display:flex;flex-wrap:wrap;gap:.25rem .5rem;margin:0 0 var(--space-md,1rem);padding:0;list-style:none}
.grants__years a{display:inline-flex;align-items:center;min-height:2.75rem;min-width:2.75rem;padding:0 .5rem}
.grants__year{margin:0 0 var(--space-lg,2rem)}
.grants__year h3{margin:0 0 .25rem}
.grants__total{margin:0 0 .75rem;color:var(--scheme-muted,var(--color-muted,#555))}
.grants__scroll{overflow-x:auto}
.grants__table{width:100%;border-collapse:collapse}
.grants__table th,.grants__table td{padding:.6rem .5rem;text-align:left;vertical-align:top;border-bottom:1px solid var(--scheme-border,var(--color-border,#d4d4d4))}
.grants__table thead th{font-size:.9rem}
.grants__table tbody th{font-weight:600}
.grants__table .grants__num{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.grants__hidden{font-weight:400;font-style:italic;color:var(--scheme-muted,var(--color-muted,#555))}
.grants__privacy,.grants__none,.grants__empty{color:var(--scheme-muted,var(--color-muted,#555));font-size:.95rem}
@media (max-width:599px){.grants__table thead{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}.grants__table,.grants__table tbody,.grants__table tr,.grants__table th,.grants__table td{display:block}.grants__table tr{padding:.6rem 0;border-bottom:1px solid var(--scheme-border,var(--color-border,#d4d4d4))}.grants__table th,.grants__table td{border:0;padding:.1rem .5rem}.grants__table td[data-label]::before{content:attr(data-label) ": ";font-weight:600}.grants__table .grants__num{text-align:left}.grants__filter{flex:1 1 100%}.grants__filter select{width:100%}}
.project-details{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,10rem),1fr));gap:var(--space-md);margin:0;padding:var(--space-md) 0;border-block:1px solid var(--scheme-border,var(--color-border))}
.project-details__item{min-width:0}
.project-details dt{margin:0 0 .25rem;font-size:max(12px,.8125rem);font-weight:600;letter-spacing:var(--font-label-tracking,.04em);text-transform:var(--font-label-transform,none);font-family:var(--font-label-family,inherit);color:var(--scheme-muted,var(--color-muted))}
.project-details dd{margin:0;font-size:1rem;overflow-wrap:anywhere}
.project-details__link{margin:var(--space-md) 0 0}
.project-details__link a{display:inline-flex;align-items:center;min-height:44px}
.project-archive{list-style:none;margin:0;padding:0}
.project-archive--cards{display:grid;gap:var(--space-lg);grid-template-columns:repeat(auto-fill,minmax(min(100%,17rem),1fr))}
.project-archive__link{color:inherit;text-decoration:none}
.project-archive--cards .project-archive__link{display:grid;grid-template-columns:minmax(0,1fr) auto;align-content:start;column-gap:var(--space-sm);row-gap:.35rem;height:100%}
.project-archive--cards .project-archive__image,.project-archive--cards .project-archive__name,.project-archive--cards .project-archive__excerpt{grid-column:1/-1}
.project-archive--cards .project-archive__year{grid-column:2;text-align:end}
.project-archive--cards .project-archive__image{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--image-radius,var(--radius-md));background:var(--color-surface);margin-bottom:.35rem}
.project-archive__name{font-family:var(--font-heading);font-weight:var(--font-headingWeight,700);font-size:1.2rem;line-height:1.25}
.project-archive__link:hover .project-archive__name,.project-archive__link:focus-visible .project-archive__name{text-decoration:underline;text-underline-offset:.2em}
.project-archive__type,.project-archive__year{font-size:max(12px,.875rem);color:var(--scheme-muted,var(--color-muted))}
.project-archive__excerpt{font-size:.95rem}
.project-archive--list{border-top:1px solid var(--scheme-border,var(--color-border))}
.project-archive--list .project-archive__item{border-bottom:1px solid var(--scheme-border,var(--color-border))}
.project-archive--list .project-archive__link{display:grid;grid-template-columns:4.5rem minmax(0,1fr);grid-template-areas:"img name" "img meta";column-gap:var(--space-md);align-items:center;min-height:4rem;padding:.75rem 0}
.project-archive--list .project-archive__link:not(:has(.project-archive__image)){grid-template-columns:minmax(0,1fr);grid-template-areas:"name" "meta"}
.project-archive--list .project-archive__image{grid-area:img;width:4.5rem;height:3.4rem;object-fit:cover;border-radius:var(--radius-sm)}
.project-archive--list .project-archive__name{grid-area:name;font-size:1.15rem}
.project-archive--list .project-archive__type,.project-archive--list .project-archive__year{grid-area:meta}
.project-archive--list .project-archive__type+.project-archive__year{margin-left:auto}
.project-archive--list .project-archive__type+.project-archive__year::before{content:none}
@media (max-width:599.98px){.project-archive--list .project-archive__link{grid-template-areas:"img name" "img meta"}.project-archive--list .project-archive__type{grid-area:meta}.project-archive--list .project-archive__year{grid-area:auto;grid-column:2;justify-self:start}}
@media (min-width:600px){.project-archive--list .project-archive__link{grid-template-columns:5.5rem minmax(0,2fr) minmax(0,1.2fr) 4rem;grid-template-areas:"img name type year"}.project-archive--list .project-archive__link:not(:has(.project-archive__image)){grid-template-columns:minmax(0,2fr) minmax(0,1.2fr) 4rem;grid-template-areas:"name type year"}.project-archive--list .project-archive__image{width:5.5rem;height:4rem}.project-archive--list .project-archive__type{grid-area:type}.project-archive--list .project-archive__year{grid-area:year;text-align:end;margin:0}.project-archive--list .project-archive__name{font-size:clamp(1.15rem,1rem + .6vw,1.6rem)}}
.project-archive__empty{color:var(--scheme-muted,var(--color-muted))}
.project-next{border-top:1px solid var(--scheme-border,var(--color-border));padding-top:var(--space-lg)}
.project-next__link{display:grid;gap:.35rem;color:inherit;text-decoration:none;min-height:44px}
.project-next__label{font-size:max(12px,.875rem);font-weight:600;letter-spacing:var(--font-label-tracking,.04em);text-transform:var(--font-label-transform,none);color:var(--scheme-muted,var(--color-muted))}
.project-next__title{font-family:var(--font-heading);font-weight:var(--font-headingWeight,700);font-size:clamp(1.6rem,1.1rem + 2.4vw,3.25rem);line-height:1.08;overflow-wrap:anywhere}
.project-next__link:hover .project-next__title,.project-next__link:focus-visible .project-next__title{text-decoration:underline;text-underline-offset:.15em}
.project-next__type{color:var(--scheme-muted,var(--color-muted))}
.project-next__image{width:100%;max-height:28rem;aspect-ratio:16/9;object-fit:cover;border-radius:var(--image-radius,var(--radius-md));margin-top:var(--space-sm)}
.project-next__all{margin:var(--space-md) 0 0}
.project-next__all a{display:inline-flex;align-items:center;min-height:44px}
.trust-badges__heading{margin:0 0 var(--space-sm);text-align:center}
.trust-badges__intro{max-width:60ch;margin:0 auto var(--space-md);text-align:center;color:var(--scheme-muted,var(--color-muted))}
.trust-badges__list{margin:0;padding:0;list-style:none}
.trust-badges__list>.block{min-width:0}
@media (max-width:40rem){.trust-badges--row .trust-badges__list>.block{flex:1 1 100%}}
.trust-badge{display:flex;align-items:center;gap:var(--space-sm);height:100%;padding:.6rem .9rem;border:1px solid var(--scheme-border,var(--color-border,#d5d9e0));border-radius:var(--radius-md,8px);background:var(--scheme-surface,var(--color-surface,transparent));color:inherit}
.trust-badges--cards .trust-badge{padding:var(--space-md)}
.trust-badge__icon{display:inline-flex;flex:none;align-items:center;justify-content:center;width:2.5rem;height:2.5rem;border-radius:50%;background:color-mix(in srgb,var(--scheme-link,var(--color-primary)) 12%,transparent);color:var(--scheme-link,var(--color-primary))}
.trust-badge__icon .cms-icon{margin:0}
.trust-badge__image{flex:none;width:auto;max-width:6rem;height:2.75rem;object-fit:contain}
.trust-badges--cards .trust-badge__image{height:3.5rem}
.trust-badge__text{display:grid;gap:.1rem;min-width:0}
.trust-badge__name{font-weight:600;line-height:1.3;overflow-wrap:anywhere}
.trust-badge__detail{font-size:.9375rem;color:var(--scheme-muted,var(--color-muted))}
.trust-badge__verify{display:inline-flex;align-items:center;min-height:24px;font-size:.9375rem;color:var(--scheme-link,var(--color-primary));text-decoration:underline;text-underline-offset:.15em}
.trust-badge__verify:focus-visible{outline:2px solid var(--scheme-link,var(--color-primary));outline-offset:2px}
.trust-badge__hidden{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
/*! Section designs: layouts adapted from MIT-licensed libraries (HyperUI, Meraki UI,
   Tailblocks, shadcn/ui, Start Bootstrap, daisyUI, Mamba UI, Sailboat UI, Pines UI).
   Notices: THIRD_PARTY_NOTICES.md in the Omasivusto source. */
/* The main heading of a designed card section reads as a section title. */
.section[data-design]:not(.section--text):not(.section--hero)>.section__inner>h2{font-size:clamp(1.7rem,3.2vw,2.5rem);line-height:1.15;letter-spacing:-.015em}
/* Hero designs. Every one keeps the heading, subheading, buttons and image of the
   stacked hero; only their arrangement and size change. */
.section.section--hero[data-design="split"] .hero:not(.hero--overlay),.section.section--hero[data-design="splitReverse"] .hero:not(.hero--overlay){display:grid;gap:var(--space-md);align-items:center;text-align:start}
:is(.section.section--hero[data-design="split"] .hero:not(.hero--overlay),.section.section--hero[data-design="splitReverse"] .hero:not(.hero--overlay),.section.section--hero[data-design="editorial"] .hero:not(.hero--overlay),.section.section--hero[data-design="gradient"] .hero:not(.hero--overlay),.section.section--hero[data-design="spotlight"] .hero:not(.hero--overlay),.section.section--hero[data-design="card"] .hero:not(.hero--overlay)) .hero__heading{margin:0;font-size:var(--font-size-display,clamp(2.1rem,4.6vw,3.9rem));line-height:var(--font-leading-display,1.06);letter-spacing:var(--font-tracking-display,-.02em);overflow-wrap:var(--font-wrap-display,break-word)}
:is(.section.section--hero[data-design="split"] .hero:not(.hero--overlay),.section.section--hero[data-design="splitReverse"] .hero:not(.hero--overlay),.section.section--hero[data-design="editorial"] .hero:not(.hero--overlay),.section.section--hero[data-design="gradient"] .hero:not(.hero--overlay),.section.section--hero[data-design="spotlight"] .hero:not(.hero--overlay),.section.section--hero[data-design="card"] .hero:not(.hero--overlay)) .hero__subheading{margin:0;max-width:36rem;font-size:clamp(1.05rem,1.5vw,1.25rem);line-height:1.55;color:var(--scheme-muted,var(--color-muted));opacity:1}
:is(.section.section--hero[data-design="split"] .hero:not(.hero--overlay),.section.section--hero[data-design="splitReverse"] .hero:not(.hero--overlay),.section.section--hero[data-design="editorial"] .hero:not(.hero--overlay),.section.section--hero[data-design="gradient"] .hero:not(.hero--overlay),.section.section--hero[data-design="spotlight"] .hero:not(.hero--overlay),.section.section--hero[data-design="card"] .hero:not(.hero--overlay))>:is(.hero__actions,.button){margin-top:var(--space-sm)}
:is(.section.section--hero[data-design="split"] .hero:not(.hero--overlay),.section.section--hero[data-design="splitReverse"] .hero:not(.hero--overlay),.section.section--hero[data-design="gradient"] .hero:not(.hero--overlay),.section.section--hero[data-design="spotlight"] .hero:not(.hero--overlay),.section.section--hero[data-design="card"] .hero:not(.hero--overlay)) .button{min-height:44px}
.section.section--hero[data-design="split"] .hero:not(.hero--overlay) .hero__image,.section.section--hero[data-design="splitReverse"] .hero:not(.hero--overlay) .hero__image{width:100%;margin:0 0 var(--space-sm);aspect-ratio:4/3;object-fit:cover;border-radius:var(--card-radius,var(--radius-md));box-shadow:var(--design-shadow,0 1px 2px color-mix(in srgb,var(--color-text) 8%,transparent),0 18px 40px -22px color-mix(in srgb,var(--color-text) 38%,transparent))}
@media (min-width:960px){
.section.section--hero[data-design="split"] .hero:not(.hero--overlay),.section.section--hero[data-design="splitReverse"] .hero:not(.hero--overlay){grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);grid-template-rows:1fr auto auto auto 1fr;column-gap:clamp(2rem,5vw,5rem);row-gap:var(--space-md)}
.section.section--hero[data-design="split"] .hero:not(.hero--overlay)>*{grid-column:1}
.section.section--hero[data-design="split"] .hero:not(.hero--overlay) .hero__image{grid-column:2;grid-row:1/-1;margin:0;aspect-ratio:5/4}
.section.section--hero[data-design="split"] .hero:not(.hero--overlay) .hero__visual{grid-column:2;grid-row:1/-1;margin:0}
:is(.section.section--hero[data-design="split"] .hero:not(.hero--overlay),.section.section--hero[data-design="splitReverse"] .hero:not(.hero--overlay)) .hero__visual.card-stack:not(.card-stack--pill){align-self:stretch;height:auto;min-height:var(--cs-min)}
.section.section--hero[data-design="splitReverse"] .hero:not(.hero--overlay){grid-template-columns:minmax(0,1fr) minmax(0,1.05fr)}
.section.section--hero[data-design="splitReverse"] .hero:not(.hero--overlay)>*{grid-column:2}
.section.section--hero[data-design="splitReverse"] .hero:not(.hero--overlay) .hero__image{grid-column:1;grid-row:1/-1;margin:0;aspect-ratio:5/4}
.section.section--hero[data-design="splitReverse"] .hero:not(.hero--overlay) .hero__visual{grid-column:1;grid-row:1/-1;margin:0}
:is(.section.section--hero[data-design="split"] .hero:not(.hero--overlay),.section.section--hero[data-design="splitReverse"] .hero:not(.hero--overlay)) .hero__heading{grid-row:2}
:is(.section.section--hero[data-design="split"] .hero:not(.hero--overlay),.section.section--hero[data-design="splitReverse"] .hero:not(.hero--overlay)) .hero__subheading{grid-row:3}
:is(.section.section--hero[data-design="split"] .hero:not(.hero--overlay),.section.section--hero[data-design="splitReverse"] .hero:not(.hero--overlay))>:is(.hero__actions,.button){grid-row:4;align-self:start;justify-self:start}
:is(.section.section--hero[data-design="split"] .hero:not(.hero--overlay),.section.section--hero[data-design="splitReverse"] .hero:not(.hero--overlay)):not(:has(.hero__image,.hero__visual)){grid-template-columns:minmax(0,1fr)}
}
/* "Kuva puhelimella: painikkeiden jälkeen" (mobileImage last): stacked, the picture comes after
   the buttons (the img sits in a display:contents picture); side by side it has its own column
   and row, so the order does not move it. */
:is(.section.section--hero[data-design="split"] .hero:not(.hero--overlay),.section.section--hero[data-design="splitReverse"] .hero:not(.hero--overlay)).hero--img-last :is(.hero__image,.hero__visual,.hero__figure){order:1;margin:0}
.section.section--hero[data-design="gradient"] .hero:not(.hero--overlay){display:flex;flex-direction:column;align-items:center;gap:var(--space-md);padding:clamp(2.5rem,8vw,6rem) clamp(1.25rem,5vw,4rem) clamp(2rem,5vw,4rem);text-align:center;border-radius:calc(var(--card-radius,var(--radius-md))*1.5);overflow:hidden;background:radial-gradient(120% 90% at 0% 0%,color-mix(in srgb,var(--color-primary) 24%,transparent),transparent 60%),radial-gradient(90% 80% at 100% 100%,color-mix(in srgb,var(--color-secondary,var(--color-primary)) 18%,transparent),transparent 60%),var(--scheme-surface,var(--color-surface))}
.section.section--hero[data-design="gradient"] .hero:not(.hero--overlay) .hero__heading{max-width:18ch;font-size:var(--font-size-display,clamp(2.3rem,5.4vw,4.4rem));line-height:var(--font-leading-display,1.04)}
.section.section--hero[data-design="gradient"] .hero:not(.hero--overlay) .hero__subheading{max-width:40rem;color:color-mix(in srgb,var(--scheme-muted,var(--color-muted)) 55%,var(--scheme-fg,var(--color-text)))}
.section.section--hero[data-design="gradient"] .hero:not(.hero--overlay) .hero__actions{justify-content:center}
.section.section--hero[data-design="gradient"] .hero:not(.hero--overlay) .hero__image{order:10;width:100%;max-width:58rem;margin:var(--space-lg) 0 0;aspect-ratio:16/9;object-fit:cover;border-radius:var(--card-radius,var(--radius-md));box-shadow:var(--design-shadow,0 1px 2px color-mix(in srgb,var(--color-text) 8%,transparent),0 18px 40px -22px color-mix(in srgb,var(--color-text) 38%,transparent))}
.section.section--hero[data-design="editorial"] .hero:not(.hero--overlay){display:grid;gap:var(--space-md);padding-top:var(--space-lg);text-align:start;border-top:3px solid var(--scheme-fg,var(--color-text))}
.section.section--hero[data-design="editorial"] .hero:not(.hero--overlay) .hero__heading{max-width:13ch;font-size:var(--font-size-display,clamp(2.6rem,7.2vw,6.2rem));line-height:var(--font-leading-display,.98);letter-spacing:var(--font-tracking-display,-.035em)}
.section.section--hero[data-design="editorial"] .hero:not(.hero--overlay)>:is(.hero__actions,.button){justify-self:start}
.section.section--hero[data-design="editorial"] .hero:not(.hero--overlay) .hero__image{order:10;width:100%;margin:var(--space-sm) 0 0;aspect-ratio:16/9;object-fit:cover;border-radius:var(--image-radius,var(--radius-md))}
@media (min-width:960px){
.section.section--hero[data-design="editorial"] .hero:not(.hero--overlay){grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);column-gap:clamp(2rem,5vw,5rem);align-items:end}
.section.section--hero[data-design="editorial"] .hero:not(.hero--overlay) .hero__heading{grid-column:1;grid-row:1/span 2}
.section.section--hero[data-design="editorial"] .hero:not(.hero--overlay) .hero__subheading{grid-column:2;grid-row:1;align-self:end}
.section.section--hero[data-design="editorial"] .hero:not(.hero--overlay)>:is(.hero__actions,.button){grid-column:2;grid-row:2;align-self:start;justify-self:start}
.section.section--hero[data-design="editorial"] .hero:not(.hero--overlay) .hero__image{grid-column:1/-1;grid-row:3;aspect-ratio:21/9;margin-top:var(--space-lg)}
}
/* Card: the photo fills the hero and the text sits on a card in the section's own colours.
   The card is the hero's ::before, placed in the grid cells of the text. A lone button keeps its
   own colours (the text colour on a primary button failed the contrast audit, bikeshop 1.11.2026). */
.section.section--hero[data-design="card"] .hero:not(.hero--overlay){position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(10rem,1fr) auto auto auto;min-height:clamp(30rem,58vw,44rem);padding:clamp(.75rem,3vw,2.5rem);text-align:start;border-radius:calc(var(--card-radius,var(--radius-md))*1.25);overflow:hidden;background:var(--scheme-surface,var(--color-surface))}
.section.section--hero[data-design="card"] .hero:not(.hero--overlay)::before{content:"";grid-column:1;grid-row:2/5;background:var(--scheme-bg,var(--color-background));border-radius:var(--card-radius,var(--radius-md));box-shadow:var(--design-shadow,0 1px 2px color-mix(in srgb,var(--color-text) 8%,transparent),0 18px 40px -22px color-mix(in srgb,var(--color-text) 38%,transparent))}
.section.section--hero[data-design="card"] .hero:not(.hero--overlay) .hero__image{position:absolute;inset:0;z-index:-1;width:100%;height:100%;margin:0;object-fit:cover;border-radius:0}
.section.section--hero[data-design="card"] .hero:not(.hero--overlay)>:not(.hero__image,.button){grid-column:1;padding-inline:clamp(1.25rem,3vw,2.25rem);color:var(--scheme-fg,var(--color-text))}
.section.section--hero[data-design="card"] .hero:not(.hero--overlay) .hero__heading{grid-row:2;padding-top:clamp(1.25rem,3vw,2.25rem);font-size:var(--font-size-display,clamp(1.9rem,3.6vw,3rem))}
.section.section--hero[data-design="card"] .hero:not(.hero--overlay) .hero__subheading{grid-row:3;padding-top:var(--space-sm)}
.section.section--hero[data-design="card"] .hero:not(.hero--overlay)>.button{grid-column:1}
.section.section--hero[data-design="card"] .hero:not(.hero--overlay)>:is(.hero__actions,.button){grid-row:4;justify-self:start;margin:var(--space-md) clamp(1.25rem,3vw,2.25rem) clamp(1.25rem,3vw,2.25rem)}
.section.section--hero[data-design="card"] .hero:not(.hero--overlay)>.button{padding-inline:var(--button-paddingX,30px)}
.section.section--hero[data-design="card"] .hero:not(.hero--overlay) .hero__actions{padding-inline:0}
@media (min-width:960px){.section.section--hero[data-design="card"] .hero:not(.hero--overlay){grid-template-columns:minmax(0,34rem) minmax(0,1fr)}}
.section.section--hero[data-design="spotlight"] .hero:not(.hero--overlay){display:flex;flex-direction:column;align-items:center;gap:var(--space-md);text-align:center}
.section.section--hero[data-design="spotlight"] .hero:not(.hero--overlay) .hero__heading{max-width:20ch}
.section.section--hero[data-design="spotlight"] .hero:not(.hero--overlay) .hero__actions{justify-content:center}
.section.section--hero[data-design="spotlight"] .hero:not(.hero--overlay) .hero__image{order:10;width:100%;max-width:62rem;margin:var(--space-lg) 0 0;aspect-ratio:16/9;object-fit:cover;border-radius:var(--card-radius,var(--radius-md));box-shadow:0 0 0 .6rem color-mix(in srgb,var(--color-primary) 14%,transparent),var(--design-shadow,0 1px 2px color-mix(in srgb,var(--color-text) 8%,transparent),0 18px 40px -22px color-mix(in srgb,var(--color-text) 38%,transparent))}
.section--hero .hero-tasks{display:block;margin-top:var(--space-lg)}
.section--hero .hero-tasks__grid:empty{display:none}
.section--hero .hero-tasks .icon-box{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;column-gap:.85rem;row-gap:.1rem;height:100%;min-height:4.25rem;margin:0;padding:.85rem 1rem;text-align:start;background:var(--scheme-bg,var(--color-background));color:var(--scheme-fg,var(--color-text));border:1px solid var(--scheme-border,var(--color-border));border-radius:var(--card-radius,var(--radius-md));box-shadow:var(--design-shadow,0 1px 2px color-mix(in srgb,var(--color-text) 8%,transparent),0 18px 40px -22px color-mix(in srgb,var(--color-text) 38%,transparent));transition:border-color .15s ease}
.section--hero .hero-tasks .icon-box:hover{border-color:var(--scheme-link,var(--color-primary))}
.section--hero .hero-tasks .icon-box:has(.icon-box__link a:focus-visible){outline:2px solid var(--scheme-link,var(--color-primary));outline-offset:2px}
.section--hero .hero-tasks .icon-box__icon{grid-column:1;grid-row:1/span 2;display:flex;align-items:center;justify-content:center;width:2.75rem;height:2.75rem;margin:0;border-radius:var(--radius-md);background:color-mix(in srgb,var(--color-primary) 12%,transparent);color:var(--scheme-link,var(--color-primary))}
.section--hero .hero-tasks .icon-box:has(.icon-box__link) .icon-box__title{display:none}
.section--hero .hero-tasks :is(.icon-box__title,.icon-box__link){grid-column:2;grid-row:1;margin:0;font-size:1.05rem;line-height:1.25;-webkit-hyphens:auto;hyphens:auto;overflow-wrap:anywhere}
.section--hero .hero-tasks .icon-box__link a{font-weight:700;color:inherit;text-decoration:none}
.section--hero .hero-tasks .icon-box__link a:focus-visible{outline:none;box-shadow:none}
.section--hero .hero-tasks .icon-box__link a::after{content:"";position:absolute;inset:0;border-radius:inherit}
.section--hero .hero-tasks .icon-box__body{grid-column:2;grid-row:2;margin:0;font-size:.875rem;line-height:1.4;color:var(--scheme-muted,var(--color-muted))}
.section--hero .hero-tasks .icon-box__body p{margin:0}
.section--hero .hero-tasks .icon-box__body:empty,.section--hero .hero-tasks .icon-box__body:has(>p:only-child:empty){display:none}
.section--hero .hero-tasks .icon-box:has(.icon-box__link)::after{content:"";grid-column:3;grid-row:1/span 2;width:.55rem;height:.55rem;margin-right:.2rem;border-top:2px solid var(--scheme-link,var(--color-primary));border-right:2px solid var(--scheme-link,var(--color-primary));transform:rotate(45deg)}
@media (prefers-reduced-motion:reduce){.section--hero .hero-tasks .icon-box{transition:none}}
/* "Pääkuva ja tehtäväkortit": the picture fills a band behind the heading, under a veil of the
   text colour, and the cards rise over the band's lower edge (pohjantahti, keravanenergia,
   akseli in analyysi-b2c.md K5). Without a picture the band is the section's surface. */
.section.section--hero[data-design="tasks"] .hero:not(.hero--overlay){position:relative;isolation:isolate;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-sm);min-height:clamp(16rem,36vw,26rem);padding:clamp(2.25rem,6vw,4.5rem) clamp(1.25rem,5vw,4rem) clamp(3.5rem,8vw,6.5rem);text-align:center;border-radius:calc(var(--card-radius,var(--radius-md))*1.25);overflow:hidden;background:var(--scheme-surface,var(--color-surface))}
.section.section--hero[data-design="tasks"] .hero:not(.hero--overlay) .hero__image{position:absolute;inset:0;z-index:-2;width:100%;height:100%;margin:0;object-fit:cover;border-radius:0}
.section.section--hero[data-design="tasks"] .hero:not(.hero--overlay):has(.hero__image)::before{content:"";position:absolute;inset:0;z-index:-1;background:color-mix(in srgb,var(--color-text) 62%,transparent)}
.section.section--hero[data-design="tasks"] .hero:not(.hero--overlay):has(.hero__image) :is(.hero__heading,.hero__subheading){color:var(--color-background)}
.section.section--hero[data-design="tasks"] .hero:not(.hero--overlay) .hero__heading{max-width:20ch;margin:0;font-size:var(--font-size-display,clamp(2rem,4.6vw,3.6rem));line-height:var(--font-leading-display,1.08)}
.section.section--hero[data-design="tasks"] .hero:not(.hero--overlay) .hero__subheading{max-width:40rem;margin:0;font-size:clamp(1.05rem,1.5vw,1.25rem);line-height:1.5;opacity:1}
.section.section--hero[data-design="tasks"] .hero:not(.hero--overlay) .hero__actions{justify-content:center}
.section.section--hero[data-design="tasks"] .hero:not(.hero--overlay)+.hero-tasks{position:relative;z-index:1;margin:calc(-1*clamp(2rem,5vw,4rem)) clamp(.5rem,3vw,2.5rem) 0}
/* Icon boxes. */
.section.section--iconBoxes[data-design="cards"] .icon-box{height:100%;padding:clamp(1.25rem,2.5vw,2rem);text-align:start;background:var(--scheme-bg,var(--color-background));border:1px solid var(--scheme-border,var(--color-border));border-radius:var(--card-radius,var(--radius-md));box-shadow:var(--design-shadow,0 1px 2px color-mix(in srgb,var(--color-text) 8%,transparent),0 18px 40px -22px color-mix(in srgb,var(--color-text) 38%,transparent))}
:is(.section.section--iconBoxes[data-design="cards"],.section.section--iconBoxes[data-design="circles"]) .icon-box__icon{display:flex;align-items:center;justify-content:center;width:3rem;height:3rem;margin:0 0 var(--space-md);border-radius:var(--radius-md);background:color-mix(in srgb,var(--color-primary) 12%,transparent);color:var(--scheme-link,var(--color-primary))}
.section.section--iconBoxes[data-design="cards"] .icon-box__title,.section.section--iconBoxes[data-design="minimal"] .icon-box__title,.section.section--iconBoxes[data-design="numbered"] .icon-box__title,.section.section--iconBoxes[data-design="split"] .icon-box__title{font-size:1.15rem}
.section.section--iconBoxes[data-design="minimal"] .icon-box,.section.section--iconBoxes[data-design="split"] .icon-box{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:var(--space-md);padding:0;text-align:start;background:none;border-radius:0}
:is(.section.section--iconBoxes[data-design="minimal"],.section.section--iconBoxes[data-design="split"]) .icon-box__icon{grid-row:1/span 3;align-items:center;justify-content:center;width:2.75rem;height:2.75rem;margin:0;border-radius:50%;background:var(--color-primary);color:var(--color-onPrimary)}
:is(.section.section--iconBoxes[data-design="minimal"],.section.section--iconBoxes[data-design="split"]) :is(.icon-box__title,.icon-box__body,.icon-box__link){grid-column:2}
.section.section--iconBoxes[data-design="numbered"] .icon-boxes{counter-reset:icon-box}
.section.section--iconBoxes[data-design="numbered"] .icon-box{counter-increment:icon-box;padding:var(--space-md) 0 0;text-align:start;background:none;border-top:2px solid var(--scheme-fg,var(--color-text));border-radius:0}
.section.section--iconBoxes[data-design="numbered"] .icon-box__icon{display:none}
.section.section--iconBoxes[data-design="numbered"] .icon-box::before{content:counter(icon-box,decimal-leading-zero);display:block;margin-bottom:var(--space-sm);font-family:var(--font-heading);font-size:2.4rem;font-weight:700;line-height:1;color:var(--scheme-link,var(--color-primary))}
.section.section--iconBoxes[data-design="circles"] .icon-box{background:none;padding:var(--space-sm)}
.section.section--iconBoxes[data-design="circles"] .icon-box__icon{width:4.5rem;height:4.5rem;margin:0 auto var(--space-md);border-radius:50%;box-shadow:0 0 0 .5rem color-mix(in srgb,var(--color-primary) 6%,transparent)}
.section.section--iconBoxes[data-design="circles"] .icon-box__icon .cms-icon{width:1.75rem;height:1.75rem}
/* "Pikalinkit": compact cards in a row under the hero, the whole card is the link. Two per
   row on a phone, the section's columns from 960 px. The link takes the title's place, so the
   name is read once; a card without a link keeps its title. */
.section.section--iconBoxes[data-design="links"] .icon-box{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;column-gap:.75rem;row-gap:.15rem;height:100%;min-height:4rem;padding:.85rem 1rem;text-align:start;background:var(--scheme-bg,var(--color-background));border:1px solid var(--scheme-border,var(--color-border));border-radius:var(--card-radius,var(--radius-md));transition:border-color .15s ease}
.section.section--iconBoxes[data-design="links"] .icon-box:hover{border-color:var(--scheme-link,var(--color-primary))}
.section.section--iconBoxes[data-design="links"] .icon-box:has(.icon-box__link a:focus-visible){outline:2px solid var(--scheme-link,var(--color-primary));outline-offset:2px}
.section.section--iconBoxes[data-design="links"] .icon-box__icon{grid-row:1/span 2;display:flex;align-items:center;justify-content:center;width:2.75rem;height:2.75rem;margin:0;border-radius:var(--radius-md);background:color-mix(in srgb,var(--color-primary) 12%,transparent);color:var(--scheme-link,var(--color-primary))}
.section.section--iconBoxes[data-design="links"] .icon-box:has(.icon-box__link) .icon-box__title{display:none}
.section.section--iconBoxes[data-design="links"] .icon-box__title,.section.section--iconBoxes[data-design="links"] .icon-box__link{grid-column:2;grid-row:1;margin:0;font-size:1.05rem;line-height:1.25}
.section.section--iconBoxes[data-design="links"] .icon-box__link a{font-weight:700;color:inherit;text-decoration:none}
.section.section--iconBoxes[data-design="links"] .icon-box__link a:focus-visible{outline:none;box-shadow:none}
.section.section--iconBoxes[data-design="links"] .icon-box__link a::after{content:"";position:absolute;inset:0;border-radius:inherit}
.section.section--iconBoxes[data-design="links"] .icon-box__body{grid-column:2;grid-row:2;margin:0;font-size:.875rem;color:var(--scheme-muted,var(--color-muted))}
.section.section--iconBoxes[data-design="links"] .icon-box__body p{margin:0}
@media (max-width:959.98px){.section.section--iconBoxes[data-design="links"] .icon-boxes{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Two per row on a phone (the designers' 2x2, PUUTTEET_SUUNNITTELIJAT_2026-10-28.md). Beside
   the icon a card of 165 px left the text 80 px, and long Finnish words such as
   "Muuttoilmoitus" or "Kalastusluvat" ran over the card's edge (taloyhtio audit 1.11.2026).
   Under 560 px the icon goes above the text, so the text gets the card's whole width; a word
   that still does not fit is hyphenated by the page's language, broken as a last resort.
   One per row only under 360 px. */
.section.section--iconBoxes[data-design="links"] .icon-box__link,.section.section--iconBoxes[data-design="links"] .icon-box__title,.section.section--iconBoxes[data-design="links"] .icon-box__body{-webkit-hyphens:auto;hyphens:auto;overflow-wrap:anywhere}
@media (max-width:559.98px){
.section.section--iconBoxes[data-design="links"] .icon-box{grid-template-columns:minmax(0,1fr);align-items:start;align-content:start;row-gap:.2rem;padding:.75rem}
.section.section--iconBoxes[data-design="links"] .icon-box__icon{grid-row:1;width:2.25rem;height:2.25rem;margin-bottom:.35rem}
.section.section--iconBoxes[data-design="links"] .icon-box__title,.section.section--iconBoxes[data-design="links"] .icon-box__link,.section.section--iconBoxes[data-design="links"] .icon-box__body{grid-column:1}
.section.section--iconBoxes[data-design="links"] .icon-box__title,.section.section--iconBoxes[data-design="links"] .icon-box__link{grid-row:2;font-size:1rem}
.section.section--iconBoxes[data-design="links"] .icon-box__body{grid-row:3;font-size:.8125rem}
}
@media (max-width:359.98px){.section.section--iconBoxes[data-design="links"] .icon-boxes{grid-template-columns:minmax(0,1fr)}}
@media (prefers-reduced-motion:reduce){.section.section--iconBoxes[data-design="links"] .icon-box{transition:none}}
/* Compact list: a small icon beside a short name, two columns on a phone (a venue's equipment). */
.section.section--iconBoxes[data-design="compact"] .icon-boxes{row-gap:.5rem}
.section.section--iconBoxes[data-design="compact"] .icon-box{display:flex;align-items:center;gap:.6rem;padding:0;text-align:start;background:none}
.section.section--iconBoxes[data-design="compact"] .icon-box__icon{display:flex;flex:none;margin:0;color:var(--scheme-link,var(--color-primary))}
.section.section--iconBoxes[data-design="compact"] .icon-box__icon .cms-icon{width:1.35rem;height:1.35rem}
.section.section--iconBoxes[data-design="compact"] .icon-box__title{margin:0;font-size:1rem;font-weight:400;overflow-wrap:anywhere}
.section.section--iconBoxes[data-design="compact"] .icon-box__body{margin:0 0 0 .4rem;color:var(--scheme-muted,var(--color-muted));font-size:.9rem}
.section.section--iconBoxes[data-design="compact"] .icon-box__body:empty{display:none}
@media (max-width:639.98px){.section.section--iconBoxes[data-design="compact"] .icon-boxes{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:960px){
.section.section--iconBoxes[data-design="split"]>.section__inner:has(>h2){display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);column-gap:clamp(2rem,5vw,5rem);align-items:start}
.section.section--iconBoxes[data-design="split"]>.section__inner>h2{font-size:clamp(1.8rem,3vw,2.6rem);line-height:1.1}
.section.section--iconBoxes[data-design="split"] .icon-boxes{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:var(--space-lg)}
}
/* Pricing designs. */
:is(.section.section--pricing[data-design="cards"],.section.section--pricing[data-design="bordered"],.section.section--pricing[data-design="rows"],.section.section--pricing[data-design="gradient"]) .pricing__intro{color:var(--scheme-muted,var(--color-muted))}
:is(.section.section--pricing[data-design="cards"],.section.section--pricing[data-design="bordered"],.section.section--pricing[data-design="gradient"]) .pricing-plan__price{font-size:clamp(2.2rem,3.4vw,2.9rem);letter-spacing:-.02em}
:is(.section.section--pricing[data-design="cards"],.section.section--pricing[data-design="bordered"],.section.section--pricing[data-design="rows"],.section.section--pricing[data-design="gradient"]) .pricing-plan__features ul{list-style:none;margin:0;padding:0;display:grid;gap:.55em}
:is(.section.section--pricing[data-design="cards"],.section.section--pricing[data-design="bordered"],.section.section--pricing[data-design="rows"],.section.section--pricing[data-design="gradient"]) .pricing-plan__features li{position:relative;padding-left:1.7em}
:is(.section.section--pricing[data-design="cards"],.section.section--pricing[data-design="bordered"],.section.section--pricing[data-design="rows"],.section.section--pricing[data-design="gradient"]) .pricing-plan__features li::before{content:"";position:absolute;left:.2em;top:.38em;width:.8em;height:.45em;border-left:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg);color:var(--scheme-link,var(--color-primary))}
:is(.section.section--pricing[data-design="cards"],.section.section--pricing[data-design="bordered"],.section.section--pricing[data-design="rows"],.section.section--pricing[data-design="gradient"]) .pricing-plan .button{display:flex;align-items:center;justify-content:center;min-height:44px}
.section.section--pricing[data-design="cards"] .pricing-plan{padding:clamp(1.5rem,3vw,2.25rem);background:var(--scheme-bg,var(--color-background));color:inherit;border:1px solid var(--scheme-border,var(--color-border));border-radius:var(--card-radius,var(--radius-md));box-shadow:var(--design-shadow,0 1px 2px color-mix(in srgb,var(--color-text) 8%,transparent),0 18px 40px -22px color-mix(in srgb,var(--color-text) 38%,transparent))}
.section.section--pricing[data-design="cards"] .pricing-plan--featured{border:2px solid var(--color-primary);box-shadow:0 24px 48px -24px color-mix(in srgb,var(--color-primary) 55%,transparent)}
:is(.section.section--pricing[data-design="cards"],.section.section--pricing[data-design="bordered"],.section.section--pricing[data-design="rows"]) .pricing-plan--featured .button{background:var(--color-primary);color:var(--color-onPrimary)}
:is(.section.section--pricing[data-design="cards"],.section.section--pricing[data-design="bordered"],.section.section--pricing[data-design="rows"]) .pricing-plan--featured .pricing-plan__name{color:color-mix(in srgb,var(--scheme-link,var(--color-primary)) 78%,var(--scheme-fg,var(--color-text)))}
/* The badge of a highlighted plan (base-css.ts) on a light plan; on the rows it stays above the name. */
:is(.section.section--pricing[data-design="cards"],.section.section--pricing[data-design="bordered"],.section.section--pricing[data-design="rows"]) .pricing-plan__badge{background:var(--color-primary);color:var(--color-onPrimary)}
.section.section--pricing[data-design="rows"] .pricing-plan__badge{position:static;transform:none}
:is(.section.section--pricing[data-design="cards"],.section.section--pricing[data-design="bordered"],.section.section--pricing[data-design="rows"])[data-color-scheme="accent"] .pricing-plan__badge{background:var(--color-onPrimary);color:var(--color-primary)}
/* The highlighted plan's button on an accent section is inverted like its badge: primary on the
   primary background barely showed (owner 7.11.2026). */
:is(.section.section--pricing[data-design="cards"],.section.section--pricing[data-design="bordered"],.section.section--pricing[data-design="rows"])[data-color-scheme="accent"] .pricing-plan--featured .button{background:var(--color-onPrimary);color:var(--color-primary)}
.section.section--pricing[data-design="bordered"] .pricing-plan{padding:clamp(1.5rem,3vw,2rem);background:transparent;color:inherit;border:1px solid var(--scheme-border,var(--color-border));border-top:4px solid var(--scheme-border,var(--color-border));border-radius:var(--card-radius,var(--radius-md));box-shadow:none}
.section.section--pricing[data-design="bordered"] .pricing-plan--featured{border-top-color:var(--color-primary);background:color-mix(in srgb,var(--color-primary) 5%,transparent)}
.section.section--pricing[data-design="rows"] .pricing{grid-template-columns:minmax(0,1fr);row-gap:0}
.section.section--pricing[data-design="rows"] .pricing-plan{gap:var(--space-xs);padding:var(--space-md) 0;background:none;color:inherit;border:0;border-bottom:1px solid var(--scheme-border,var(--color-border));border-radius:0;box-shadow:none}
.section.section--pricing[data-design="rows"] .pricing>.block:first-child .pricing-plan{border-top:1px solid var(--scheme-border,var(--color-border))}
.section.section--pricing[data-design="rows"] .pricing-plan__price{font-size:1.6rem}
.section.section--pricing[data-design="rows"] .pricing-plan--featured{padding-left:var(--space-md);border-left:4px solid var(--color-primary);background:color-mix(in srgb,var(--color-primary) 5%,transparent)}
@media (min-width:960px){
.section.section--pricing[data-design="rows"] .pricing-plan{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1.7fr) minmax(7rem,auto) minmax(11rem,auto);column-gap:var(--space-lg);align-items:center}
.section.section--pricing[data-design="rows"] .pricing-plan__name{grid-column:1;grid-row:1}
.section.section--pricing[data-design="rows"] .pricing-plan__features{grid-column:2;grid-row:1}
.section.section--pricing[data-design="rows"] .pricing-plan__features ul{grid-template-columns:repeat(auto-fit,minmax(10rem,1fr));column-gap:var(--space-md)}
.section.section--pricing[data-design="rows"] .pricing-plan__price{grid-column:3;grid-row:1;text-align:end}
.section.section--pricing[data-design="rows"] .pricing-plan__cta{grid-column:4;grid-row:1;margin:0}
.section.section--pricing[data-design="rows"] .pricing-plan__badge{grid-column:1;grid-row:1;align-self:end}
.section.section--pricing[data-design="rows"] .pricing-plan--featured>.pricing-plan__name{grid-row:2;align-self:start}
.section.section--pricing[data-design="rows"] .pricing-plan--featured>:is(.pricing-plan__features,.pricing-plan__price,.pricing-plan__cta){grid-row:1/span 2}
}
.section.section--pricing[data-design="gradient"] .pricing-plan{padding:clamp(1.5rem,3vw,2.25rem);background:transparent;color:inherit;border:1px solid var(--scheme-border,var(--color-border));border-radius:var(--card-radius,var(--radius-md));box-shadow:none}
.section.section--pricing[data-design="gradient"] .pricing-plan--featured{border-color:transparent;background:linear-gradient(150deg,var(--color-primary),color-mix(in srgb,var(--color-primary) 62%,var(--color-text)));color:var(--color-onPrimary);box-shadow:0 24px 48px -24px color-mix(in srgb,var(--color-primary) 60%,transparent)}
.section.section--pricing[data-design="gradient"] .pricing-plan--featured li::before{color:inherit}
.section.section--pricing[data-design="gradient"] .pricing-plan--featured .button{background:var(--color-onPrimary);color:var(--color-primary)}
/* Accordion (FAQ) designs. */
:is(.section.section--accordion[data-design="cards"],.section.section--accordion[data-design="split"],.section.section--accordion[data-design="boxed"],.section.section--accordion:not([data-design])) .accordion__trigger::after{content:"";flex:none;width:.55rem;height:.55rem;margin-right:.25rem;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-25%) rotate(45deg);transition:transform .2s ease}
:is(.section.section--accordion[data-design="cards"],.section.section--accordion[data-design="split"],.section.section--accordion[data-design="boxed"],.section.section--accordion:not([data-design])) .accordion__item[open]>.accordion__trigger::after{transform:translateY(15%) rotate(-135deg)}
:is(.section.section--accordion[data-design="cards"],.section.section--accordion[data-design="split"],.section.section--accordion[data-design="minimal"],.section.section--accordion[data-design="boxed"]) .accordion__trigger{min-height:44px}
:is(.section.section--accordion[data-design="cards"],.section.section--accordion[data-design="split"],.section.section--accordion[data-design="minimal"],.section.section--accordion[data-design="boxed"]) .accordion__trigger:focus-visible{outline:2px solid var(--scheme-link,var(--color-primary));outline-offset:2px;border-radius:var(--radius-sm)}
:is(.section.section--accordion[data-design="cards"],.section.section--accordion[data-design="split"],.section.section--accordion[data-design="minimal"],.section.section--accordion[data-design="boxed"]) .accordion__panel{color:var(--scheme-muted,var(--color-muted))}
.section.section--accordion[data-design="cards"] .accordion{display:grid;gap:var(--space-sm);border:0}
.section.section--accordion[data-design="cards"] .accordion__item{padding:0 var(--space-md);background:var(--scheme-bg,var(--color-background));border:1px solid var(--scheme-border,var(--color-border));border-radius:var(--card-radius,var(--radius-md));box-shadow:0 1px 2px color-mix(in srgb,var(--color-text) 6%,transparent)}
.section.section--accordion[data-design="cards"] .accordion__item[open]{border-color:color-mix(in srgb,var(--color-primary) 45%,transparent)}
.section.section--accordion[data-design="cards"] .accordion__trigger{padding:var(--space-md) 0}
.section.section--accordion[data-design="cards"]>.section__inner>h2{text-align:center;margin-bottom:var(--space-lg)}
.section.section--accordion[data-design="cards"]>.section__inner{max-width:min(var(--size-contentMaxWidth),48rem)}
@media (min-width:960px){
.section.section--accordion[data-design="split"]>.section__inner:has(>h2){display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.8fr);column-gap:clamp(2rem,5vw,5rem);align-items:start}
.section.section--accordion[data-design="split"]>.section__inner>h2{position:sticky;top:var(--space-lg);font-size:clamp(1.8rem,3vw,2.6rem);line-height:1.1}
}
.section.section--accordion[data-design="split"] .accordion{border-top:1px solid var(--scheme-border,var(--color-border))}
.section.section--accordion[data-design="split"] .accordion__item{border-bottom:1px solid var(--scheme-border,var(--color-border))}
.section.section--accordion[data-design="split"] .accordion__trigger{padding:var(--space-md) 0;font-size:1.05rem}
.section.section--accordion[data-design="minimal"] .accordion{border:0}
.section.section--accordion[data-design="minimal"] .accordion__item{border-bottom:1px solid var(--scheme-border,var(--color-border))}
.section.section--accordion[data-design="minimal"] .accordion__trigger{padding:var(--space-md) 0;font-family:var(--font-heading);font-size:clamp(1.1rem,1.8vw,1.35rem)}
.section.section--accordion[data-design="minimal"] .accordion__trigger::after{content:"+" / "";flex:none;display:grid;place-items:center;width:2rem;height:2rem;border-radius:50%;background:color-mix(in srgb,var(--color-primary) 12%,transparent);color:var(--scheme-link,var(--color-primary));font-size:1.25rem;line-height:1}
.section.section--accordion[data-design="minimal"] .accordion__item[open]>.accordion__trigger::after{content:"−" / ""}
.section.section--accordion[data-design="boxed"] .accordion{border:1px solid var(--scheme-border,var(--color-border));border-radius:var(--card-radius,var(--radius-md));overflow:hidden;background:var(--scheme-bg,var(--color-background))}
.section.section--accordion[data-design="boxed"] .accordion__item{padding:0 var(--space-md);border-bottom:1px solid var(--scheme-border,var(--color-border))}
.section.section--accordion[data-design="boxed"] .accordion>.block:last-child .accordion__item{border-bottom:0}
.section.section--accordion[data-design="boxed"] .accordion__item[open]{background:var(--scheme-surface,var(--color-surface))}
.section.section--accordion[data-design="boxed"] .accordion__trigger{padding:var(--space-md) 0}
/* Call to action designs. They override the section's variant (plain, card, accent). */
:is(.section.section--cta[data-design="gradient"],.section.section--cta[data-design="bold"],.section.section--cta[data-design="outline"]) .cta__heading{font-size:clamp(1.8rem,3.6vw,3rem);line-height:1.1;letter-spacing:-.015em}
.section.section--cta[data-design="gradient"] .cta{padding:clamp(2rem,6vw,4.5rem);border-radius:calc(var(--card-radius,var(--radius-md))*1.25);background:radial-gradient(80% 120% at 100% 0%,color-mix(in srgb,var(--color-onPrimary) 16%,transparent),transparent 60%),linear-gradient(135deg,var(--color-primary),color-mix(in srgb,var(--color-primary) 60%,var(--color-text)));color:var(--color-onPrimary)}
.section.section--cta[data-design="gradient"] .cta__body{color:inherit;opacity:.92}
.section.section--cta[data-design="gradient"] .action-button:not(.action-button--second){background:var(--color-onPrimary);color:var(--color-primary)}
.section.section--cta[data-design="gradient"] .action-button:focus-visible{outline-color:var(--color-onPrimary)}
.section.section--cta[data-design="bold"] .cta{align-items:flex-start;padding:var(--space-lg) 0 0;text-align:start;background:none;color:inherit;border:0;border-top:4px solid var(--color-primary);border-radius:0}
.section.section--cta[data-design="bold"] .cta__heading{max-width:18ch;font-size:clamp(2rem,5vw,3.8rem);line-height:1.02}
.section.section--cta[data-design="bold"] .cta__actions{justify-content:flex-start}
.section.section--cta[data-design="bold"] .action-button:not(.action-button--second){background:var(--color-primary);color:var(--color-onPrimary)}
@media (min-width:960px){.section.section--cta[data-design="bold"] .cta{flex-direction:row;align-items:flex-end;justify-content:space-between;gap:var(--space-xl)}.section.section--cta[data-design="bold"] .cta__actions{flex:none}}
.section.section--cta[data-design="outline"] .cta{padding:clamp(1.75rem,5vw,3.5rem);background:color-mix(in srgb,var(--color-primary) 5%,transparent);color:inherit;border:2px dashed color-mix(in srgb,var(--color-primary) 45%,transparent);border-radius:var(--card-radius,var(--radius-md))}
.section.section--cta[data-design="outline"] .cta__body{color:var(--scheme-muted,var(--color-muted));opacity:1}
.section.section--cta[data-design="outline"] .action-button:not(.action-button--second){background:var(--color-primary);color:var(--color-onPrimary)}
/* Logo cloud designs (grid display). */
.section.section--logoCloud[data-design="tiles"] .logo-cloud--grid .logo-item{min-height:5.5rem;padding:var(--space-md);background:var(--scheme-surface,var(--color-surface));border-radius:var(--card-radius,var(--radius-md))}
.section.section--logoCloud[data-design="divided"] .logo-cloud--grid .logo-cloud__track{row-gap:0;column-gap:0;border-top:1px solid var(--scheme-border,var(--color-border));border-left:1px solid var(--scheme-border,var(--color-border))}
.section.section--logoCloud[data-design="divided"] .logo-cloud--grid .logo-cloud__track>.block{border-right:1px solid var(--scheme-border,var(--color-border));border-bottom:1px solid var(--scheme-border,var(--color-border))}
.section.section--logoCloud[data-design="divided"] .logo-cloud--grid .logo-item{min-height:6rem;padding:var(--space-md)}
.section.section--logoCloud[data-design="inline"] .logo-cloud__heading{margin:0 0 var(--space-md);text-align:start;font-family:var(--font-heading);font-size:clamp(1.3rem,2.2vw,1.7rem);color:var(--scheme-fg,var(--color-text))}
@media (min-width:960px){.section.section--logoCloud[data-design="inline"]>.section__inner:has(>.logo-cloud__heading){display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2.2fr);column-gap:var(--space-xl);align-items:center}.section.section--logoCloud[data-design="inline"] .logo-cloud__heading{margin:0}}
/* Gallery designs (grid layout). */
.section.section--gallery[data-design="rounded"] .gallery:not(.gallery--slider):not(.gallery--masonry) .gallery__grid{gap:var(--space-md)}
.section.section--gallery[data-design="rounded"] .gallery:not(.gallery--slider):not(.gallery--masonry) .image{aspect-ratio:4/3;border-radius:calc(var(--card-radius,var(--radius-md))*1.25)}
.section.section--gallery[data-design="mosaic"] .gallery:not(.gallery--slider):not(.gallery--masonry) .image{aspect-ratio:1/1;border-radius:var(--image-radius,var(--radius-md))}
@media (min-width:960px){.section.section--gallery[data-design="mosaic"] .gallery:not(.gallery--slider):not(.gallery--masonry) .gallery__grid>.block:first-child{grid-column:span 2;grid-row:span 2}.section.section--gallery[data-design="mosaic"] .gallery:not(.gallery--slider):not(.gallery--masonry) .gallery__grid>.block:first-child .image{aspect-ratio:auto;height:100%}}
.section.section--gallery[data-design="framed"] .gallery:not(.gallery--slider):not(.gallery--masonry) .gallery__grid{gap:var(--space-md)}
.section.section--gallery[data-design="framed"] .gallery:not(.gallery--slider):not(.gallery--masonry) .gallery__grid>.block{padding:.6rem .6rem 1.4rem;background:var(--scheme-bg,var(--color-background));border:1px solid var(--scheme-border,var(--color-border));box-shadow:var(--design-shadow,0 1px 2px color-mix(in srgb,var(--color-text) 8%,transparent),0 18px 40px -22px color-mix(in srgb,var(--color-text) 38%,transparent))}
.section.section--gallery[data-design="framed"] .gallery:not(.gallery--slider):not(.gallery--masonry) .image{aspect-ratio:4/3;border-radius:0}
@media (min-width:960px){.section.section--gallery[data-design="framed"] .gallery:not(.gallery--slider):not(.gallery--masonry) .gallery__grid>.block:nth-child(3n+1){rotate:-1deg}.section.section--gallery[data-design="framed"] .gallery:not(.gallery--slider):not(.gallery--masonry) .gallery__grid>.block:nth-child(3n+3){rotate:1deg}}
@media (prefers-reduced-motion:reduce){.section.section--gallery[data-design="framed"] .gallery:not(.gallery--slider):not(.gallery--masonry) .gallery__grid>.block{rotate:none}}
/* Blog list designs. */
.section[data-design] .blog-archive__link:focus-visible{outline:2px solid var(--scheme-link,var(--color-primary));outline-offset:3px;border-radius:var(--card-radius,var(--radius-md))}
.section.section--blogArchive[data-design="cards"] .blog-archive,.section.section--blogArchive[data-design="featured"] .blog-archive{grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr));gap:var(--space-md)}
:is(.section.section--blogArchive[data-design="cards"],.section.section--blogArchive[data-design="featured"]) .blog-archive__item{display:flex}
:is(.section.section--blogArchive[data-design="cards"],.section.section--blogArchive[data-design="featured"]) .blog-archive__link{flex:1;display:flex;flex-direction:column;gap:var(--space-sm);padding:clamp(1.25rem,2.5vw,1.75rem);background:var(--scheme-bg,var(--color-background));border:1px solid var(--scheme-border,var(--color-border));border-radius:var(--card-radius,var(--radius-md));box-shadow:var(--design-shadow,0 1px 2px color-mix(in srgb,var(--color-text) 8%,transparent),0 18px 40px -22px color-mix(in srgb,var(--color-text) 38%,transparent))}
:is(.section.section--blogArchive[data-design="cards"],.section.section--blogArchive[data-design="featured"]) .blog-archive__date{order:-1;margin:0;color:var(--scheme-link,var(--color-primary));font-weight:600;font-size:.85rem}
:is(.section.section--blogArchive[data-design="cards"],.section.section--blogArchive[data-design="featured"]) .blog-archive__title{margin:0;font-family:var(--font-heading);font-size:1.25rem;line-height:1.25}
:is(.section.section--blogArchive[data-design="cards"],.section.section--blogArchive[data-design="featured"]) .blog-archive__excerpt{flex:1}
:is(.section.section--blogArchive[data-design="cards"],.section.section--blogArchive[data-design="featured"]) .blog-archive__link::after{content:"→" / "";align-self:flex-start;color:var(--scheme-link,var(--color-primary));font-weight:700}
@media (min-width:960px){.section.section--blogArchive[data-design="featured"] .blog-archive__item:first-child{grid-column:1/-1}.section.section--blogArchive[data-design="featured"] .blog-archive__item:first-child .blog-archive__link{padding:clamp(1.75rem,4vw,3rem);background:color-mix(in srgb,var(--color-primary) 7%,transparent);border-color:color-mix(in srgb,var(--color-primary) 25%,transparent)}.section.section--blogArchive[data-design="featured"] .blog-archive__item:first-child .blog-archive__title{font-size:clamp(1.6rem,2.6vw,2.2rem)}}
.section.section--blogArchive[data-design="list"] .blog-archive{gap:0;border-top:1px solid var(--scheme-border,var(--color-border))}
.section.section--blogArchive[data-design="list"] .blog-archive__item{border-bottom:1px solid var(--scheme-border,var(--color-border))}
.section.section--blogArchive[data-design="list"] .blog-archive__link{display:grid;gap:var(--space-xs);padding:var(--space-md) 0;background:none;border-radius:0}
.section.section--blogArchive[data-design="list"] .blog-archive__title{font-family:var(--font-heading);font-size:1.2rem;margin:0}
@media (min-width:960px){.section.section--blogArchive[data-design="list"] .blog-archive__link{grid-template-columns:10rem minmax(0,1fr);column-gap:var(--space-lg)}.section.section--blogArchive[data-design="list"] .blog-archive__date{grid-column:1;grid-row:1/span 2;margin:0;padding-top:.2rem}.section.section--blogArchive[data-design="list"] :is(.blog-archive__title,.blog-archive__excerpt){grid-column:2}}
.section.section--blogArchive[data-design="minimal"] .blog-archive{gap:var(--space-md)}
.section.section--blogArchive[data-design="minimal"] .blog-archive__link{padding:0;background:none;border-radius:0}
.section.section--blogArchive[data-design="minimal"] .blog-archive__title{display:inline;font-family:var(--font-heading);font-size:clamp(1.2rem,2vw,1.5rem);text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--color-primary) 40%,transparent);text-decoration-thickness:2px;text-underline-offset:.25em}
.section.section--blogArchive[data-design="minimal"] .blog-archive__title::after{content:" →" / ""}
.section.section--blogArchive[data-design="minimal"] .blog-archive__date{margin:var(--space-xs) 0 0}
/* Kuvakortit (photo, liiga-tyyli 1.11.2026): a large photo, the bold title centred under it, the
   date above the title and the excerpt below. The hover effects (cardHover) are the news cards
   of big club and league sites: "zoom" scales the photo inside its frame, "reveal" gives the
   photo's height to the text so the excerpt shows (the card keeps its size, so nothing around
   it moves). Both also on keyboard focus; a touch screen shows the revealed card, and nothing
   moves for a visitor who asked for less motion. */
.section.section--blogArchive[data-design="photo"] .blog-archive{grid-template-columns:repeat(auto-fill,minmax(min(100%,16rem),1fr));gap:var(--space-md)}
.section.section--blogArchive[data-design="photo"] .blog-archive__item{display:flex;min-width:0}
.section.section--blogArchive[data-design="photo"] .blog-archive__link{flex:1;display:flex;flex-direction:column;padding:0;overflow:hidden;background:var(--scheme-bg,var(--color-background));border:1px solid var(--scheme-border,var(--color-border));border-radius:var(--card-radius,var(--radius-md));box-shadow:var(--design-shadow,0 1px 2px color-mix(in srgb,var(--color-text) 8%,transparent),0 18px 40px -22px color-mix(in srgb,var(--color-text) 38%,transparent));text-align:center}
.section.section--blogArchive[data-design="photo"] .blog-archive__media{display:block;flex:none;aspect-ratio:4/3;overflow:hidden;background:var(--scheme-surface,var(--color-surface))}
.section.section--blogArchive[data-design="photo"] .blog-archive__image{display:block;width:100%;height:100%;object-fit:cover;border-radius:0}
.section.section--blogArchive[data-design="photo"] .blog-archive__date{order:1;margin:var(--space-md) var(--space-md) 0;color:var(--scheme-muted,var(--color-muted));font-size:.8rem;font-weight:600;letter-spacing:.04em}
.section.section--blogArchive[data-design="photo"] .blog-archive__title{order:2;margin:.35rem var(--space-md) var(--space-sm);font-family:var(--font-heading);font-weight:800;font-size:clamp(1.15rem,1.6vw,1.35rem);line-height:1.2}
.section.section--blogArchive[data-design="photo"] .blog-archive__excerpt{order:3;margin:0 var(--space-md) var(--space-md);color:var(--scheme-muted,var(--color-muted));font-size:.95rem;line-height:1.5}
:is(.section.section--blogArchive[data-design="photo"] .blog-archive--hover-reveal,.section.section--blogArchive[data-design="photo"] .blog-archive--hover-zoomReveal) .blog-archive__link{aspect-ratio:3/4}
:is(.section.section--blogArchive[data-design="photo"] .blog-archive--hover-reveal,.section.section--blogArchive[data-design="photo"] .blog-archive--hover-zoomReveal) .blog-archive__media{aspect-ratio:auto;flex:0 0 46%}
:is(.section.section--blogArchive[data-design="photo"] .blog-archive--hover-reveal,.section.section--blogArchive[data-design="photo"] .blog-archive--hover-zoomReveal) .blog-archive__title{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
:is(.section.section--blogArchive[data-design="photo"] .blog-archive--hover-reveal,.section.section--blogArchive[data-design="photo"] .blog-archive--hover-zoomReveal) .blog-archive__excerpt{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
@media (hover:hover){:is(.section.section--blogArchive[data-design="photo"] .blog-archive--hover-reveal,.section.section--blogArchive[data-design="photo"] .blog-archive--hover-zoomReveal) .blog-archive__media{flex-basis:68%}:is(.section.section--blogArchive[data-design="photo"] .blog-archive--hover-reveal,.section.section--blogArchive[data-design="photo"] .blog-archive--hover-zoomReveal) .blog-archive__excerpt{opacity:0}:is(.section.section--blogArchive[data-design="photo"] .blog-archive--hover-reveal,.section.section--blogArchive[data-design="photo"] .blog-archive--hover-zoomReveal) .blog-archive__item:is(:hover,:focus-within) .blog-archive__media{flex-basis:46%}:is(.section.section--blogArchive[data-design="photo"] .blog-archive--hover-reveal,.section.section--blogArchive[data-design="photo"] .blog-archive--hover-zoomReveal) .blog-archive__item:is(:hover,:focus-within) .blog-archive__excerpt{opacity:1}}
@media (hover:hover) and (prefers-reduced-motion:no-preference){:is(.section.section--blogArchive[data-design="photo"] .blog-archive--hover-reveal,.section.section--blogArchive[data-design="photo"] .blog-archive--hover-zoomReveal) .blog-archive__media{transition:flex-basis .28s ease}:is(.section.section--blogArchive[data-design="photo"] .blog-archive--hover-reveal,.section.section--blogArchive[data-design="photo"] .blog-archive--hover-zoomReveal) .blog-archive__excerpt{transition:opacity .28s ease}:is(.section.section--blogArchive[data-design="photo"] .blog-archive--hover-zoom,.section.section--blogArchive[data-design="photo"] .blog-archive--hover-zoomReveal) .blog-archive__image{transition:transform .3s ease}:is(.section.section--blogArchive[data-design="photo"] .blog-archive--hover-zoom,.section.section--blogArchive[data-design="photo"] .blog-archive--hover-zoomReveal) .blog-archive__item:is(:hover,:focus-within) .blog-archive__image{transform:scale(1.06)}}
/* The news row (layout "rail"): one row that scrolls sideways, the next card peeking in. */
.blog-rail__track{--rail-n-base:1.15;--rail-n-sm:2.2;--rail-n-md:3.25;padding:4px 4px var(--space-sm);scroll-padding-inline:4px}
.section.section--blogArchive .blog-archive.blog-archive--rail{display:flex;gap:var(--space-md)}
.blog-archive--rail>.blog-archive__item{flex:0 0 calc((100% - var(--space-md) * (var(--rail-n) - 1)) / var(--rail-n));min-width:0;scroll-snap-align:start}
/* Event list designs. */
.section[data-design] .event-archive__link:focus-visible{outline:2px solid var(--scheme-link,var(--color-primary));outline-offset:3px;border-radius:var(--card-radius,var(--radius-md))}
.section.section--eventArchive[data-design="cards"] .event-archive{grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr));gap:var(--space-md)}
.section.section--eventArchive[data-design="cards"] .event-archive__item{display:flex}
.section.section--eventArchive[data-design="cards"] .event-archive__link{flex:1;flex-direction:column;flex-wrap:nowrap;gap:var(--space-xs);padding:clamp(1.25rem,2.5vw,1.75rem);background:var(--scheme-bg,var(--color-background));border:1px solid var(--scheme-border,var(--color-border));border-top:4px solid var(--color-primary);border-radius:var(--card-radius,var(--radius-md));box-shadow:var(--design-shadow,0 1px 2px color-mix(in srgb,var(--color-text) 8%,transparent),0 18px 40px -22px color-mix(in srgb,var(--color-text) 38%,transparent))}
.section.section--eventArchive[data-design="cards"] .event-archive__date{order:-1;font-family:var(--font-heading);font-size:1.6rem;font-weight:700;color:var(--scheme-fg,var(--color-text))}
.section.section--eventArchive[data-design="cards"] .event-archive__title{flex:none;font-size:1.1rem}
.section.section--eventArchive[data-design="dateBadge"] .event-archive{gap:var(--space-sm)}
.section.section--eventArchive[data-design="dateBadge"] .event-archive__link{display:grid;grid-template-columns:minmax(4.5rem,8rem) minmax(0,1fr);column-gap:var(--space-md);align-items:center;padding:var(--space-sm);background:var(--scheme-bg,var(--color-background));border:1px solid var(--scheme-border,var(--color-border));border-radius:var(--card-radius,var(--radius-md))}
.section.section--eventArchive[data-design="dateBadge"] .event-archive__date{grid-column:1;grid-row:1/span 2;display:grid;place-items:center;min-height:4.5rem;padding:.5rem;border-radius:var(--radius-md);background:var(--color-primary);color:var(--color-onPrimary);font-family:var(--font-heading);font-size:1rem;font-weight:700;line-height:1.2;text-align:center;overflow-wrap:anywhere}
.section.section--eventArchive[data-design="dateBadge"] .event-archive__title{grid-column:2;align-self:end;font-size:1.1rem}
.section.section--eventArchive[data-design="dateBadge"] .event-archive__location{grid-column:2;align-self:start}
.section.section--eventArchive[data-design="timeline"] .event-archive{position:relative;gap:0;padding-left:1.75rem}
.section.section--eventArchive[data-design="timeline"] .event-archive::before{content:"";position:absolute;left:.45rem;top:.5rem;bottom:.5rem;width:2px;background:var(--scheme-border,var(--color-border))}
.section.section--eventArchive[data-design="timeline"] .event-archive__item{position:relative;padding-bottom:var(--space-md)}
.section.section--eventArchive[data-design="timeline"] .event-archive__item::before{content:"";position:absolute;left:-1.75rem;top:1rem;width:1rem;height:1rem;border-radius:50%;background:var(--color-primary);box-shadow:0 0 0 4px var(--scheme-bg,var(--color-background))}
.section.section--eventArchive[data-design="timeline"] .event-archive__link{flex-direction:column;flex-wrap:nowrap;gap:.15rem;padding:var(--space-sm) var(--space-md);background:none}
.section.section--eventArchive[data-design="timeline"] .event-archive__date{order:-1;color:var(--scheme-link,var(--color-primary));font-weight:700}
.section.section--eventArchive[data-design="timeline"] .event-archive__title{flex:none;font-family:var(--font-heading);font-size:1.2rem}
/* Newsletter designs. The form keeps the page's own colours so its fields stay readable. */
.section.section--newsletter[data-design="gradient"] .newsletter{padding:clamp(1.75rem,5vw,3.5rem);border:0;border-radius:calc(var(--card-radius,var(--radius-md))*1.25);background:linear-gradient(135deg,var(--color-primary),color-mix(in srgb,var(--color-primary) 60%,var(--color-text)));color:var(--color-onPrimary)}
.section.section--newsletter[data-design="gradient"] .newsletter__body{color:inherit;opacity:.9}
.section.section--newsletter[data-design="gradient"] .newsletter__form{padding:var(--space-md);border-radius:var(--card-radius,var(--radius-md));background:var(--color-background);color:var(--color-text)}
.section.section--newsletter[data-design="gradient"] .newsletter__note{color:var(--color-muted)}
.section.section--newsletter[data-design="inline"] .newsletter{padding:var(--space-lg) 0;background:none;border:0;border-top:1px solid var(--scheme-border,var(--color-border));border-bottom:1px solid var(--scheme-border,var(--color-border));border-radius:0}
.section.section--newsletter[data-design="inline"] .newsletter__heading{font-size:clamp(1.4rem,2.4vw,1.9rem)}
.section.section--newsletter[data-design="bordered"] .newsletter{padding:clamp(1.5rem,4vw,3rem);background:color-mix(in srgb,var(--color-primary) 4%,transparent);border:2px solid var(--color-primary);border-radius:var(--card-radius,var(--radius-md))}
@media (min-width:960px){:is(.section.section--newsletter[data-design="gradient"],.section.section--newsletter[data-design="inline"],.section.section--newsletter[data-design="bordered"]) .newsletter--split{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:var(--space-xl)}}
/* Feature row designs. */
.section[data-design] .feature-row__eyebrow{text-transform:var(--font-label-transform,none);letter-spacing:var(--font-label-tracking,.01em)}
.section.section--featureRows[data-design="cards"] .feature-row{padding:clamp(1rem,3vw,2rem);background:var(--scheme-surface,var(--color-surface));border-radius:calc(var(--card-radius,var(--radius-md))*1.25)}
.section.section--featureRows[data-design="cards"] .feature-row__image{border-radius:var(--card-radius,var(--radius-md))}
.section.section--featureRows[data-design="offset"] .feature-row__media{position:relative;isolation:isolate;padding:0 1rem 1rem 0}
.section.section--featureRows[data-design="offset"] .feature-row__media::before{content:"";position:absolute;inset:1rem 0 0 1rem;z-index:-1;border-radius:var(--card-radius,var(--radius-md));background:color-mix(in srgb,var(--color-primary) 18%,transparent)}
.section.section--featureRows[data-design="offset"] .feature-row__image{border-radius:var(--card-radius,var(--radius-md));box-shadow:var(--design-shadow,0 1px 2px color-mix(in srgb,var(--color-text) 8%,transparent),0 18px 40px -22px color-mix(in srgb,var(--color-text) 38%,transparent))}
.section.section--featureRows[data-design="numbered"] .feature-rows{counter-reset:feature-row}
.section.section--featureRows[data-design="numbered"] .feature-row{counter-increment:feature-row}
.section.section--featureRows[data-design="numbered"] .feature-row__content::before{content:counter(feature-row,decimal-leading-zero);display:block;margin-bottom:var(--space-sm);font-family:var(--font-heading);font-size:clamp(2.5rem,5vw,4rem);font-weight:700;line-height:1;color:color-mix(in srgb,var(--color-primary) 55%,transparent)}
.section.section--featureRows[data-design="numbered"] .feature-row__image{border-radius:var(--card-radius,var(--radius-md))}
/* Text section designs. */
.section.section--text[data-design="lead"]>.section__inner{max-width:min(var(--size-contentMaxWidth),50rem);text-align:center}
.section.section--text[data-design="lead"]>.section__inner>h2{font-size:clamp(1.9rem,4vw,3rem);line-height:1.1;letter-spacing:-.015em}
.section.section--text[data-design="lead"] .richtext{max-width:58ch;margin-inline:auto;font-size:clamp(1.1rem,1.8vw,1.4rem);line-height:1.6;color:var(--scheme-muted,var(--color-muted))}
.section.section--text[data-design="columns"] .richtext{max-width:min(62ch,36em)}
@media (min-width:960px){.section.section--text[data-design="columns"] .richtext{max-width:none;columns:2;column-gap:clamp(2rem,5vw,4rem)}.section.section--text[data-design="columns"] .richtext>*{break-inside:avoid}.section.section--text[data-design="columns"] .richtext>:is(h2,h3,h4){break-after:avoid}}
.section.section--text[data-design="columns"]>.section__inner>h2{font-size:clamp(1.8rem,3.4vw,2.6rem);margin-bottom:var(--space-md)}
.section.section--text[data-design="quote"]>.section__inner{display:flex;flex-direction:column;align-items:center;max-width:min(var(--size-contentMaxWidth),54rem);text-align:center}
.section.section--text[data-design="quote"]>.section__inner::before{content:"“" / "";font-family:var(--font-heading);font-size:5rem;line-height:.8;color:var(--scheme-link,var(--color-primary))}
.section.section--text[data-design="quote"] .richtext{order:1;font-family:var(--font-heading);font-size:clamp(1.4rem,2.8vw,2.2rem);line-height:1.35}
.section.section--text[data-design="quote"]>.section__inner>h2{order:2;margin:var(--space-md) 0 0;font-family:var(--font-body);font-size:1rem;font-weight:600;color:var(--scheme-muted,var(--color-muted))}
@media (min-width:960px){.section.section--text[data-design="sidebar"]>.section__inner:has(>h2){display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);column-gap:clamp(2rem,5vw,5rem);align-items:start}}
.section.section--text[data-design="sidebar"]>.section__inner>h2{font-size:clamp(1.8rem,3vw,2.5rem);line-height:1.1}
.section.section--text[data-design="sidebar"] .richtext{font-size:1.1rem;max-width:62ch}
/* Layout area designs: restyle the cards (container blocks) in the area. */
.section.section--grid[data-design="cards"] .section__blocks>.block--container>.container{height:100%;border:1px solid var(--scheme-border,var(--color-border));border-radius:var(--card-radius,var(--radius-md));box-shadow:var(--design-shadow,0 1px 2px color-mix(in srgb,var(--color-text) 8%,transparent),0 18px 40px -22px color-mix(in srgb,var(--color-text) 38%,transparent));overflow:hidden}
.section.section--grid[data-design="outlined"] .section__blocks>.block--container>.container{height:100%;border:2px solid var(--scheme-border,var(--color-border));border-radius:var(--card-radius,var(--radius-md));box-shadow:none}
/* Picture cards (Saliverkko 10.11.2026), the look of the collection card (collections/render.ts
   .cl-card): thin border, no shadow, the card's first picture to its edges at 3:2. */
.section.section--grid[data-design="media"] .section__blocks>.block--container>.container{height:100%;border:1px solid var(--scheme-border,var(--color-border));border-radius:var(--card-radius,var(--radius-md));box-shadow:none;overflow:hidden}
.section.section--grid[data-design="media"] .section__blocks>.block--container>.container:has(>.block--image:first-child){padding:0 0 var(--space-md,16px)}
.section.section--grid[data-design="media"] .section__blocks>.block--container>.container:has(>.block--image:first-child)>:not(:first-child){padding-inline:var(--space-md,16px)}
.section.section--grid[data-design="media"] .section__blocks>.block--container>.container>.block--image:first-child img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:0}
/* A card that sets no padding of its own keeps its text off its edge (24.10.2026); zero
   specificity, so a card's own padding (K.card: 24 px) wins. */
:where(.section.section--grid[data-design="cards"] .section__blocks>.block--container>.container,.section.section--grid[data-design="outlined"] .section__blocks>.block--container>.container,.section.section--grid[data-design="media"] .section__blocks>.block--container>.container){padding:var(--space-md,16px)}
.section.section--grid[data-design="outlined"] .section__blocks>.block--container:hover>.container,.section.section--grid[data-design="outlined"] .section__blocks>.block--container:focus-within>.container{border-color:var(--color-primary)}
/* Form section designs. */
.section.section--form[data-design="card"]>.section__inner{max-width:min(var(--size-contentMaxWidth),44rem);padding:clamp(1.5rem,4vw,3rem);background:var(--scheme-bg,var(--color-background));border:1px solid var(--scheme-border,var(--color-border));border-radius:calc(var(--card-radius,var(--radius-md))*1.25);box-shadow:var(--design-shadow,0 1px 2px color-mix(in srgb,var(--color-text) 8%,transparent),0 18px 40px -22px color-mix(in srgb,var(--color-text) 38%,transparent))}
.section.section--form[data-design="card"]>.section__inner>h2{text-align:center}
.section.section--form[data-design="card"]>.section__inner>.richtext{text-align:center;color:var(--scheme-muted,var(--color-muted))}
@media (min-width:960px){.section.section--form[data-design="split"]>.section__inner{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);grid-auto-rows:min-content;column-gap:clamp(2rem,5vw,5rem)}.section.section--form[data-design="split"]>.section__inner>:not(.form-embed){grid-column:1}.section.section--form[data-design="split"] .form-embed{grid-column:2;grid-row:1/span 3;padding:clamp(1.25rem,3vw,2rem);background:var(--scheme-surface,var(--color-surface));border-radius:var(--card-radius,var(--radius-md))}}
.section.section--form[data-design="split"]>.section__inner>h2{font-size:clamp(1.8rem,3vw,2.6rem);line-height:1.1}
.section.section--form[data-design="split"]>.section__inner>.richtext{color:var(--scheme-muted,var(--color-muted))}
/* Testimonials. */
.testimonials__head{max-width:44rem;margin:0 auto var(--space-lg);text-align:center}
.testimonials__heading{margin:0;font-size:clamp(1.7rem,3.2vw,2.5rem);line-height:1.15}
.testimonials__intro{margin-top:var(--space-sm);color:var(--scheme-muted,var(--color-muted))}
.testimonials__intro>:last-child{margin-bottom:0}
.testimonials__head>.testimonials__intro>:is(p,ul,ol){margin-inline:auto}
.testimonials__head>.testimonials__intro>p{text-align:inherit}
.testimonials>.block{display:flex;min-width:0}
.testimonials>.block>*{flex:1}
.testimonial{display:flex;flex-direction:column;gap:var(--space-md);margin:0;padding:clamp(1.25rem,2.5vw,1.75rem);background:var(--scheme-bg,var(--color-background));color:var(--scheme-fg,var(--color-text));border:1px solid var(--scheme-border,var(--color-border));border-radius:var(--card-radius,var(--radius-md));box-shadow:var(--design-shadow,0 1px 2px color-mix(in srgb,var(--color-text) 8%,transparent),0 18px 40px -22px color-mix(in srgb,var(--color-text) 38%,transparent))}
.testimonial__rating{display:flex;align-items:center;gap:.5rem;margin:0}
/* Stars are drawn (28.10.2026): a lit star is filled, an unlit one an outline in the muted text
   colour, so the two differ by shape and both have 3:1 (WCAG 1.4.11); the score is text beside them. */
.testimonial__stars{display:inline-flex;gap:.15em;color:var(--scheme-muted,var(--color-muted))}
.testimonial__star{display:block;width:1.1em;height:1.1em;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linejoin:round}
.testimonial__star.is-on{color:var(--scheme-link,var(--color-primary));fill:currentColor}
.testimonial__score{font-size:.85rem;color:var(--scheme-muted,var(--color-muted))}
.testimonial__quote{flex:1;margin:0;padding:0;border:0;font-size:1.05rem;line-height:1.6}
.testimonial__quote p{margin:0}
.testimonial .testimonial__author{display:flex;align-items:center;gap:.75rem;margin:0;padding:0;color:inherit;font-size:1rem;text-align:start}
.testimonial__avatar,.testimonial__initial{flex:none;width:3rem;height:3rem;border-radius:50%;object-fit:cover}
.testimonial__initial{display:grid;place-items:center;background:color-mix(in srgb,var(--color-primary) 14%,transparent);color:var(--scheme-link,var(--color-primary));font-family:var(--font-heading);font-weight:700;font-size:1.2rem}
.testimonial__who{display:flex;flex-direction:column;min-width:0}
.testimonial__name{font-weight:700}
.testimonial__role{font-size:.9rem;color:var(--scheme-muted,var(--color-muted))}
.section.section--testimonials[data-design="quote"] .testimonials{grid-template-columns:minmax(0,1fr)}
.section.section--testimonials[data-design="quote"] .testimonial{align-items:center;max-width:52rem;margin:0 auto;padding:clamp(1rem,3vw,2rem) 0;text-align:center;background:none;border:0;box-shadow:none}
.section.section--testimonials[data-design="quote"] .testimonial__quote{font-family:var(--font-heading);font-size:clamp(1.4rem,3vw,2.3rem);line-height:1.3;letter-spacing:-.01em}
.section.section--testimonials[data-design="quote"] .testimonial__quote::before{content:"“" / "";display:block;font-size:4rem;line-height:.7;color:var(--scheme-link,var(--color-primary))}
.section.section--testimonials[data-design="quote"] .testimonial .testimonial__author{flex-direction:column;gap:.5rem;text-align:center}
.section.section--testimonials[data-design="quote"] .testimonial__who{align-items:center}
.section.section--testimonials[data-design="carousel"] .testimonials.cardrail__track{display:flex;gap:0;grid-template-columns:none}
.section.section--testimonials[data-design="carousel"] .testimonials.cardrail__track>.block{display:flex}
.section.section--testimonials[data-design="wall"] .testimonials{display:block;columns:1;column-gap:var(--space-md)}
@media (min-width:640px){.section.section--testimonials[data-design="wall"] .testimonials{columns:2}}
@media (min-width:960px){.section.section--testimonials[data-design="wall"] .testimonials{columns:3}}
.section.section--testimonials[data-design="wall"] .testimonials>.block{display:block;break-inside:avoid;margin-bottom:var(--space-md)}
.section.section--testimonials[data-design="wall"] .testimonials>.block:nth-child(3n+2) .testimonial{background:color-mix(in srgb,var(--color-primary) 7%,transparent);border-color:color-mix(in srgb,var(--color-primary) 25%,transparent)}
.section.section--testimonials[data-design="minimal"] .testimonial{padding:var(--space-md) 0 0;background:none;border:0;border-top:2px solid var(--scheme-fg,var(--color-text));border-radius:0;box-shadow:none}
.section.section--testimonials[data-design="minimal"] .testimonial__quote{font-family:var(--font-heading);font-size:1.2rem}
.section.section--testimonials[data-design="accent"] .testimonial{background:var(--color-primary);color:var(--color-onPrimary);border-color:transparent}
.section.section--testimonials[data-design="accent"] :is(.testimonial__role,.testimonial__score){color:inherit}
.section.section--testimonials[data-design="accent"] .testimonial__star{color:color-mix(in srgb,var(--color-onPrimary) 80%,transparent)}
.section.section--testimonials[data-design="accent"] .testimonial__star.is-on{color:var(--color-onPrimary)}
.section.section--testimonials[data-design="accent"] .testimonial__initial{background:color-mix(in srgb,var(--color-onPrimary) 20%,transparent);color:inherit}
/* Team. */
.team__head{max-width:44rem;margin:0 auto var(--space-lg);text-align:center}
.team__heading{margin:0;font-size:clamp(1.7rem,3.2vw,2.5rem);line-height:1.15}
.team__intro{margin-top:var(--space-sm);color:var(--scheme-muted,var(--color-muted))}
.team__intro>:last-child{margin-bottom:0}
.team__head>.team__intro>:is(p,ul,ol){margin-inline:auto}
.team__head>.team__intro>p{text-align:inherit}
.team>.block{display:flex;min-width:0}
.team>.block>*{flex:1}
.team-member{display:flex;flex-direction:column;overflow:hidden;background:var(--scheme-bg,var(--color-background));color:var(--scheme-fg,var(--color-text));border:1px solid var(--scheme-border,var(--color-border));border-radius:var(--card-radius,var(--radius-md))}
.team-member__photo{display:grid;place-items:center;aspect-ratio:4/5;overflow:hidden;background:var(--scheme-surface,var(--color-surface))}
.team-member__image{width:100%;height:100%;object-fit:cover;border-radius:0}
.team-member__initial{font-family:var(--font-heading);font-size:3rem;font-weight:700;color:var(--scheme-link,var(--color-primary))}
.team-member__body{display:flex;flex-direction:column;gap:.25rem;padding:var(--space-md)}
.team-member__name{margin:0;font-size:1.15rem}
.team-member__role{margin:0;color:var(--scheme-link,var(--color-primary));font-weight:600;font-size:.95rem}
.team-member__bio{margin:.35rem 0 0;color:var(--scheme-muted,var(--color-muted));font-size:.95rem}
.team-member__contact{margin:.35rem 0 0;font-size:.95rem}
.team-member__contact a{display:inline-flex;align-items:center;min-height:44px;overflow-wrap:anywhere}
.team-member__languages{margin:.35rem 0 0;font-size:.95rem}
.team-member__label{font-weight:600}
.team-member__specialities{margin:.35rem 0 0;font-size:.95rem}
.team-member__tags{display:flex;flex-wrap:wrap;gap:.35rem;margin:.35rem 0 0;padding:0;list-style:none}
.team-member__tags li{padding:.15rem .6rem;border-radius:999px;background:color-mix(in srgb,var(--color-primary) 12%,transparent);font-size:.875rem}
.team-member__book{margin:auto 0 0;padding-top:var(--space-sm)}
.team-member__book .button{min-height:44px}
.section.section--team[data-design="circles"] .team-member{align-items:center;padding:var(--space-md) var(--space-sm) 0;text-align:center;background:none;border:0}
.section.section--team[data-design="circles"] .team-member__photo{width:min(10rem,70%);aspect-ratio:1;border-radius:50%;box-shadow:0 0 0 .4rem color-mix(in srgb,var(--color-primary) 12%,transparent)}
.section.section--team[data-design="circles"] .team-member__body{align-items:center}
.section.section--team[data-design="list"] .team-member{flex-direction:row;align-items:flex-start;gap:var(--space-md);padding:var(--space-md);background:var(--scheme-bg,var(--color-background))}
.section.section--team[data-design="list"] .team-member__photo{flex:none;width:5.5rem;aspect-ratio:1;border-radius:50%}
.section.section--team[data-design="list"] .team-member__initial{font-size:2rem}
.section.section--team[data-design="list"] .team-member__body{min-width:0;padding:0}
.section.section--team[data-design="list"] .team-member__name{overflow-wrap:break-word;hyphens:auto}
.section.section--team[data-design="overlay"] .team-member{position:relative;isolation:isolate;justify-content:flex-end;min-height:22rem;border:0;color:var(--color-background)}
.section.section--team[data-design="overlay"] .team-member__photo{position:absolute;inset:0;z-index:-1;aspect-ratio:auto}
.section.section--team[data-design="overlay"] .team-member__body{padding:4rem var(--space-md) var(--space-md);background:linear-gradient(to top,color-mix(in srgb,var(--color-text) 88%,transparent),color-mix(in srgb,var(--color-text) 55%,transparent) 60%,transparent)}
.section.section--team[data-design="overlay"] :is(.team-member__role,.team-member__bio,.team-member__contact a){color:inherit}
.section.section--team[data-design="overlay"] .team-member__bio{opacity:.88}
/* Stats. The figure comes first, its label under it. */
.stats__head{max-width:44rem;margin:0 auto var(--space-lg);text-align:center}
.stats__heading{margin:0;font-size:clamp(1.7rem,3.2vw,2.5rem);line-height:1.15}
.stats__intro{margin-top:var(--space-sm);color:var(--scheme-muted,var(--color-muted))}
.stats__intro>:last-child{margin-bottom:0}
.stats__head>.stats__intro>:is(p,ul,ol){margin-inline:auto}
.stats__head>.stats__intro>p{text-align:inherit}
.stats>.block{display:flex;min-width:0}
.stats>.block>*{flex:1}
.stats .stat{display:flex;flex-direction:column;gap:.15rem;min-width:0;text-align:center}
.stats .stat__value{order:-1;margin:0;font-size:clamp(2.2rem,4vw,3.2rem);letter-spacing:-.02em;color:var(--scheme-link,var(--color-primary))}
.stats .stat__label{margin:0;font-weight:600;font-size:1rem;color:var(--scheme-fg,var(--color-text));hyphens:auto}
/* English words are short and its hyphenation splits them badly ("currency ex-change"); badges stay on one line (LUOTTOKORTTI_2026-11-09.md). */
:lang(en) .stats .stat__label{hyphens:manual}
.pricing-plan__badge{white-space:nowrap}
.stats .stat__desc{color:var(--scheme-muted,var(--color-muted))}
.section.section--stats[data-design="cards"] .stat{padding:clamp(1.25rem,2.5vw,1.75rem);background:var(--scheme-bg,var(--color-background));border:1px solid var(--scheme-border,var(--color-border));border-radius:var(--card-radius,var(--radius-md));box-shadow:var(--design-shadow,0 1px 2px color-mix(in srgb,var(--color-text) 8%,transparent),0 18px 40px -22px color-mix(in srgb,var(--color-text) 38%,transparent))}
.section.section--stats[data-design="dividers"] .stats{row-gap:var(--space-lg)}
.section.section--stats[data-design="dividers"] .stat{text-align:start;padding-left:var(--space-md);border-left:3px solid var(--color-primary)}
.section.section--stats[data-design="dividers"] .stat__value{color:var(--scheme-fg,var(--color-text))}
.section.section--stats[data-design="band"]>.section__inner{padding:clamp(1.75rem,5vw,3.5rem);border-radius:calc(var(--card-radius,var(--radius-md))*1.25);background:linear-gradient(135deg,var(--color-primary),color-mix(in srgb,var(--color-primary) 62%,var(--color-text)));color:var(--color-onPrimary)}
.section.section--stats[data-design="band"] :is(.stat__value,.stat__label,.stats__heading){color:inherit}
.section.section--stats[data-design="band"] :is(.stat__desc,.stats__intro){color:inherit;opacity:.85}
/* Korostus osoitettaessa (library-blocks/card-highlight.ts). */
.section[data-card-highlight]{--ch-lift:-4px;--ch-nudge:4px;--ch-ring:var(--scheme-link,var(--color-primary));--ch-tint:color-mix(in srgb,var(--ch-ring) 7%,transparent);--ch-shadow:0 0 0 1px color-mix(in srgb,var(--scheme-fg,var(--color-text)) 10%,transparent),0 18px 36px -18px rgb(0 0 0/.45)}
.section[data-card-highlight]:is([data-color-scheme="dark"],[data-color-scheme="accent"]){--ch-shadow:0 0 0 1px color-mix(in srgb,var(--scheme-fg,#fff) 45%,transparent),0 18px 36px -14px rgb(0 0 0/.7)}
.section[data-card-highlight="lift"] .section__blocks>.block--container>.container,.section[data-card-highlight="lift"]:not([data-design="links"]) .icon-box,.section[data-card-highlight="lift"] .team-member,.section[data-card-highlight="lift"]:not([data-design="minimal"]) .testimonial,.section[data-card-highlight="lift"][data-design="cards"] .stats .stat,.section[data-card-highlight="lift"]:not([data-design="list"],[data-design="minimal"]) .blog-archive__link,.section[data-card-highlight="lift"]:not([data-design="timeline"]) .event-archive__link,.section[data-card-highlight="lift"] .project-archive--cards .project-archive__link,.section[data-card-highlight="lift"]:not([data-design="rows"]) .pricing-plan,.section[data-card-highlight="border"] .section__blocks>.block--container>.container,.section[data-card-highlight="border"]:not([data-design="links"]) .icon-box,.section[data-card-highlight="border"] .team-member,.section[data-card-highlight="border"]:not([data-design="minimal"]) .testimonial,.section[data-card-highlight="border"][data-design="cards"] .stats .stat,.section[data-card-highlight="border"]:not([data-design="list"],[data-design="minimal"]) .blog-archive__link,.section[data-card-highlight="border"]:not([data-design="timeline"]) .event-archive__link,.section[data-card-highlight="border"] .project-archive--cards .project-archive__link,.section[data-card-highlight="border"]:not([data-design="rows"]) .pricing-plan,.section[data-card-highlight="liftBorder"] .section__blocks>.block--container>.container,.section[data-card-highlight="liftBorder"]:not([data-design="links"]) .icon-box,.section[data-card-highlight="liftBorder"] .team-member,.section[data-card-highlight="liftBorder"]:not([data-design="minimal"]) .testimonial,.section[data-card-highlight="liftBorder"][data-design="cards"] .stats .stat,.section[data-card-highlight="liftBorder"]:not([data-design="list"],[data-design="minimal"]) .blog-archive__link,.section[data-card-highlight="liftBorder"]:not([data-design="timeline"]) .event-archive__link,.section[data-card-highlight="liftBorder"] .project-archive--cards .project-archive__link,.section[data-card-highlight="liftBorder"]:not([data-design="rows"]) .pricing-plan{transition:transform .2s ease,box-shadow .2s ease}
@media (hover:hover){.section[data-card-highlight="lift"] .section__blocks>.block--container>.container:hover,.section[data-card-highlight="lift"]:not([data-design="links"]) .icon-box:hover,.section[data-card-highlight="lift"] .team-member:hover,.section[data-card-highlight="lift"]:not([data-design="minimal"]) .testimonial:hover,.section[data-card-highlight="lift"][data-design="cards"] .stats .stat:hover,.section[data-card-highlight="lift"]:not([data-design="list"],[data-design="minimal"]) .blog-archive__link:hover,.section[data-card-highlight="lift"]:not([data-design="timeline"]) .event-archive__link:hover,.section[data-card-highlight="lift"] .project-archive--cards .project-archive__link:hover,.section[data-card-highlight="lift"]:not([data-design="rows"]) .pricing-plan:hover{transform:translateY(var(--ch-lift));box-shadow:var(--ch-shadow)}}
.section[data-card-highlight="lift"] .section__blocks>.block--container>.container:is(:focus-visible,:has(:focus-visible)),.section[data-card-highlight="lift"]:not([data-design="links"]) .icon-box:is(:focus-visible,:has(:focus-visible)),.section[data-card-highlight="lift"] .team-member:is(:focus-visible,:has(:focus-visible)),.section[data-card-highlight="lift"]:not([data-design="minimal"]) .testimonial:is(:focus-visible,:has(:focus-visible)),.section[data-card-highlight="lift"][data-design="cards"] .stats .stat:is(:focus-visible,:has(:focus-visible)),.section[data-card-highlight="lift"]:not([data-design="list"],[data-design="minimal"]) .blog-archive__link:is(:focus-visible,:has(:focus-visible)),.section[data-card-highlight="lift"]:not([data-design="timeline"]) .event-archive__link:is(:focus-visible,:has(:focus-visible)),.section[data-card-highlight="lift"] .project-archive--cards .project-archive__link:is(:focus-visible,:has(:focus-visible)),.section[data-card-highlight="lift"]:not([data-design="rows"]) .pricing-plan:is(:focus-visible,:has(:focus-visible)){transform:translateY(var(--ch-lift));box-shadow:var(--ch-shadow)}
@media (hover:hover){.section[data-card-highlight="border"] .section__blocks>.block--container>.container:hover,.section[data-card-highlight="border"]:not([data-design="links"]) .icon-box:hover,.section[data-card-highlight="border"] .team-member:hover,.section[data-card-highlight="border"]:not([data-design="minimal"]) .testimonial:hover,.section[data-card-highlight="border"][data-design="cards"] .stats .stat:hover,.section[data-card-highlight="border"]:not([data-design="list"],[data-design="minimal"]) .blog-archive__link:hover,.section[data-card-highlight="border"]:not([data-design="timeline"]) .event-archive__link:hover,.section[data-card-highlight="border"] .project-archive--cards .project-archive__link:hover,.section[data-card-highlight="border"]:not([data-design="rows"]) .pricing-plan:hover{box-shadow:0 0 0 2px var(--ch-ring),inset 0 0 0 100vmax var(--ch-tint)}}
.section[data-card-highlight="border"] .section__blocks>.block--container>.container:is(:focus-visible,:has(:focus-visible)),.section[data-card-highlight="border"]:not([data-design="links"]) .icon-box:is(:focus-visible,:has(:focus-visible)),.section[data-card-highlight="border"] .team-member:is(:focus-visible,:has(:focus-visible)),.section[data-card-highlight="border"]:not([data-design="minimal"]) .testimonial:is(:focus-visible,:has(:focus-visible)),.section[data-card-highlight="border"][data-design="cards"] .stats .stat:is(:focus-visible,:has(:focus-visible)),.section[data-card-highlight="border"]:not([data-design="list"],[data-design="minimal"]) .blog-archive__link:is(:focus-visible,:has(:focus-visible)),.section[data-card-highlight="border"]:not([data-design="timeline"]) .event-archive__link:is(:focus-visible,:has(:focus-visible)),.section[data-card-highlight="border"] .project-archive--cards .project-archive__link:is(:focus-visible,:has(:focus-visible)),.section[data-card-highlight="border"]:not([data-design="rows"]) .pricing-plan:is(:focus-visible,:has(:focus-visible)){box-shadow:0 0 0 2px var(--ch-ring),inset 0 0 0 100vmax var(--ch-tint)}
@media (hover:hover){.section[data-card-highlight="liftBorder"] .section__blocks>.block--container>.container:hover,.section[data-card-highlight="liftBorder"]:not([data-design="links"]) .icon-box:hover,.section[data-card-highlight="liftBorder"] .team-member:hover,.section[data-card-highlight="liftBorder"]:not([data-design="minimal"]) .testimonial:hover,.section[data-card-highlight="liftBorder"][data-design="cards"] .stats .stat:hover,.section[data-card-highlight="liftBorder"]:not([data-design="list"],[data-design="minimal"]) .blog-archive__link:hover,.section[data-card-highlight="liftBorder"]:not([data-design="timeline"]) .event-archive__link:hover,.section[data-card-highlight="liftBorder"] .project-archive--cards .project-archive__link:hover,.section[data-card-highlight="liftBorder"]:not([data-design="rows"]) .pricing-plan:hover{transform:translateY(var(--ch-lift));box-shadow:0 0 0 2px var(--ch-ring),inset 0 0 0 100vmax var(--ch-tint),var(--ch-shadow)}}
.section[data-card-highlight="liftBorder"] .section__blocks>.block--container>.container:is(:focus-visible,:has(:focus-visible)),.section[data-card-highlight="liftBorder"]:not([data-design="links"]) .icon-box:is(:focus-visible,:has(:focus-visible)),.section[data-card-highlight="liftBorder"] .team-member:is(:focus-visible,:has(:focus-visible)),.section[data-card-highlight="liftBorder"]:not([data-design="minimal"]) .testimonial:is(:focus-visible,:has(:focus-visible)),.section[data-card-highlight="liftBorder"][data-design="cards"] .stats .stat:is(:focus-visible,:has(:focus-visible)),.section[data-card-highlight="liftBorder"]:not([data-design="list"],[data-design="minimal"]) .blog-archive__link:is(:focus-visible,:has(:focus-visible)),.section[data-card-highlight="liftBorder"]:not([data-design="timeline"]) .event-archive__link:is(:focus-visible,:has(:focus-visible)),.section[data-card-highlight="liftBorder"] .project-archive--cards .project-archive__link:is(:focus-visible,:has(:focus-visible)),.section[data-card-highlight="liftBorder"]:not([data-design="rows"]) .pricing-plan:is(:focus-visible,:has(:focus-visible)){transform:translateY(var(--ch-lift));box-shadow:0 0 0 2px var(--ch-ring),inset 0 0 0 100vmax var(--ch-tint),var(--ch-shadow)}
.section[data-card-highlight="lift"] .section__blocks>.block--container>.container:is(:focus-visible,:has(:focus-visible)),.section[data-card-highlight="lift"]:not([data-design="links"]) .icon-box:is(:focus-visible,:has(:focus-visible)),.section[data-card-highlight="lift"] .team-member:is(:focus-visible,:has(:focus-visible)),.section[data-card-highlight="lift"]:not([data-design="minimal"]) .testimonial:is(:focus-visible,:has(:focus-visible)),.section[data-card-highlight="lift"][data-design="cards"] .stats .stat:is(:focus-visible,:has(:focus-visible)),.section[data-card-highlight="lift"]:not([data-design="list"],[data-design="minimal"]) .blog-archive__link:is(:focus-visible,:has(:focus-visible)),.section[data-card-highlight="lift"]:not([data-design="timeline"]) .event-archive__link:is(:focus-visible,:has(:focus-visible)),.section[data-card-highlight="lift"] .project-archive--cards .project-archive__link:is(:focus-visible,:has(:focus-visible)),.section[data-card-highlight="lift"]:not([data-design="rows"]) .pricing-plan:is(:focus-visible,:has(:focus-visible)),.section[data-card-highlight="border"] .section__blocks>.block--container>.container:is(:focus-visible,:has(:focus-visible)),.section[data-card-highlight="border"]:not([data-design="links"]) .icon-box:is(:focus-visible,:has(:focus-visible)),.section[data-card-highlight="border"] .team-member:is(:focus-visible,:has(:focus-visible)),.section[data-card-highlight="border"]:not([data-design="minimal"]) .testimonial:is(:focus-visible,:has(:focus-visible)),.section[data-card-highlight="border"][data-design="cards"] .stats .stat:is(:focus-visible,:has(:focus-visible)),.section[data-card-highlight="border"]:not([data-design="list"],[data-design="minimal"]) .blog-archive__link:is(:focus-visible,:has(:focus-visible)),.section[data-card-highlight="border"]:not([data-design="timeline"]) .event-archive__link:is(:focus-visible,:has(:focus-visible)),.section[data-card-highlight="border"] .project-archive--cards .project-archive__link:is(:focus-visible,:has(:focus-visible)),.section[data-card-highlight="border"]:not([data-design="rows"]) .pricing-plan:is(:focus-visible,:has(:focus-visible)),.section[data-card-highlight="liftBorder"] .section__blocks>.block--container>.container:is(:focus-visible,:has(:focus-visible)),.section[data-card-highlight="liftBorder"]:not([data-design="links"]) .icon-box:is(:focus-visible,:has(:focus-visible)),.section[data-card-highlight="liftBorder"] .team-member:is(:focus-visible,:has(:focus-visible)),.section[data-card-highlight="liftBorder"]:not([data-design="minimal"]) .testimonial:is(:focus-visible,:has(:focus-visible)),.section[data-card-highlight="liftBorder"][data-design="cards"] .stats .stat:is(:focus-visible,:has(:focus-visible)),.section[data-card-highlight="liftBorder"]:not([data-design="list"],[data-design="minimal"]) .blog-archive__link:is(:focus-visible,:has(:focus-visible)),.section[data-card-highlight="liftBorder"]:not([data-design="timeline"]) .event-archive__link:is(:focus-visible,:has(:focus-visible)),.section[data-card-highlight="liftBorder"] .project-archive--cards .project-archive__link:is(:focus-visible,:has(:focus-visible)),.section[data-card-highlight="liftBorder"]:not([data-design="rows"]) .pricing-plan:is(:focus-visible,:has(:focus-visible)){outline:2px solid var(--ch-ring);outline-offset:3px}
.section[data-card-highlight="lift"] .section__blocks>.block--container>.container .button--link:not(:has(.cms-icon))::after,.section[data-card-highlight="lift"]:not([data-design="links"]) .icon-box .button--link:not(:has(.cms-icon))::after,.section[data-card-highlight="lift"] .team-member .button--link:not(:has(.cms-icon))::after,.section[data-card-highlight="lift"]:not([data-design="minimal"]) .testimonial .button--link:not(:has(.cms-icon))::after,.section[data-card-highlight="lift"][data-design="cards"] .stats .stat .button--link:not(:has(.cms-icon))::after,.section[data-card-highlight="lift"]:not([data-design="list"],[data-design="minimal"]) .blog-archive__link .button--link:not(:has(.cms-icon))::after,.section[data-card-highlight="lift"]:not([data-design="timeline"]) .event-archive__link .button--link:not(:has(.cms-icon))::after,.section[data-card-highlight="lift"] .project-archive--cards .project-archive__link .button--link:not(:has(.cms-icon))::after,.section[data-card-highlight="lift"]:not([data-design="rows"]) .pricing-plan .button--link:not(:has(.cms-icon))::after,.section[data-card-highlight="liftBorder"] .section__blocks>.block--container>.container .button--link:not(:has(.cms-icon))::after,.section[data-card-highlight="liftBorder"]:not([data-design="links"]) .icon-box .button--link:not(:has(.cms-icon))::after,.section[data-card-highlight="liftBorder"] .team-member .button--link:not(:has(.cms-icon))::after,.section[data-card-highlight="liftBorder"]:not([data-design="minimal"]) .testimonial .button--link:not(:has(.cms-icon))::after,.section[data-card-highlight="liftBorder"][data-design="cards"] .stats .stat .button--link:not(:has(.cms-icon))::after,.section[data-card-highlight="liftBorder"]:not([data-design="list"],[data-design="minimal"]) .blog-archive__link .button--link:not(:has(.cms-icon))::after,.section[data-card-highlight="liftBorder"]:not([data-design="timeline"]) .event-archive__link .button--link:not(:has(.cms-icon))::after,.section[data-card-highlight="liftBorder"] .project-archive--cards .project-archive__link .button--link:not(:has(.cms-icon))::after,.section[data-card-highlight="liftBorder"]:not([data-design="rows"]) .pricing-plan .button--link:not(:has(.cms-icon))::after{content:"→" / "";display:inline-block}
.section[data-card-highlight="lift"] .section__blocks>.block--container>.container .button--link:not(:has(.cms-icon)),.section[data-card-highlight="lift"]:not([data-design="links"]) .icon-box .button--link:not(:has(.cms-icon)),.section[data-card-highlight="lift"] .team-member .button--link:not(:has(.cms-icon)),.section[data-card-highlight="lift"]:not([data-design="minimal"]) .testimonial .button--link:not(:has(.cms-icon)),.section[data-card-highlight="lift"][data-design="cards"] .stats .stat .button--link:not(:has(.cms-icon)),.section[data-card-highlight="lift"]:not([data-design="list"],[data-design="minimal"]) .blog-archive__link .button--link:not(:has(.cms-icon)),.section[data-card-highlight="lift"]:not([data-design="timeline"]) .event-archive__link .button--link:not(:has(.cms-icon)),.section[data-card-highlight="lift"] .project-archive--cards .project-archive__link .button--link:not(:has(.cms-icon)),.section[data-card-highlight="lift"]:not([data-design="rows"]) .pricing-plan .button--link:not(:has(.cms-icon)),.section[data-card-highlight="liftBorder"] .section__blocks>.block--container>.container .button--link:not(:has(.cms-icon)),.section[data-card-highlight="liftBorder"]:not([data-design="links"]) .icon-box .button--link:not(:has(.cms-icon)),.section[data-card-highlight="liftBorder"] .team-member .button--link:not(:has(.cms-icon)),.section[data-card-highlight="liftBorder"]:not([data-design="minimal"]) .testimonial .button--link:not(:has(.cms-icon)),.section[data-card-highlight="liftBorder"][data-design="cards"] .stats .stat .button--link:not(:has(.cms-icon)),.section[data-card-highlight="liftBorder"]:not([data-design="list"],[data-design="minimal"]) .blog-archive__link .button--link:not(:has(.cms-icon)),.section[data-card-highlight="liftBorder"]:not([data-design="timeline"]) .event-archive__link .button--link:not(:has(.cms-icon)),.section[data-card-highlight="liftBorder"] .project-archive--cards .project-archive__link .button--link:not(:has(.cms-icon)),.section[data-card-highlight="liftBorder"]:not([data-design="rows"]) .pricing-plan .button--link:not(:has(.cms-icon)){text-decoration:none}
.section[data-card-highlight="lift"] .section__blocks>.block--container>.container .button--link:not(:has(.cms-icon))>span,.section[data-card-highlight="lift"]:not([data-design="links"]) .icon-box .button--link:not(:has(.cms-icon))>span,.section[data-card-highlight="lift"] .team-member .button--link:not(:has(.cms-icon))>span,.section[data-card-highlight="lift"]:not([data-design="minimal"]) .testimonial .button--link:not(:has(.cms-icon))>span,.section[data-card-highlight="lift"][data-design="cards"] .stats .stat .button--link:not(:has(.cms-icon))>span,.section[data-card-highlight="lift"]:not([data-design="list"],[data-design="minimal"]) .blog-archive__link .button--link:not(:has(.cms-icon))>span,.section[data-card-highlight="lift"]:not([data-design="timeline"]) .event-archive__link .button--link:not(:has(.cms-icon))>span,.section[data-card-highlight="lift"] .project-archive--cards .project-archive__link .button--link:not(:has(.cms-icon))>span,.section[data-card-highlight="lift"]:not([data-design="rows"]) .pricing-plan .button--link:not(:has(.cms-icon))>span,.section[data-card-highlight="liftBorder"] .section__blocks>.block--container>.container .button--link:not(:has(.cms-icon))>span,.section[data-card-highlight="liftBorder"]:not([data-design="links"]) .icon-box .button--link:not(:has(.cms-icon))>span,.section[data-card-highlight="liftBorder"] .team-member .button--link:not(:has(.cms-icon))>span,.section[data-card-highlight="liftBorder"]:not([data-design="minimal"]) .testimonial .button--link:not(:has(.cms-icon))>span,.section[data-card-highlight="liftBorder"][data-design="cards"] .stats .stat .button--link:not(:has(.cms-icon))>span,.section[data-card-highlight="liftBorder"]:not([data-design="list"],[data-design="minimal"]) .blog-archive__link .button--link:not(:has(.cms-icon))>span,.section[data-card-highlight="liftBorder"]:not([data-design="timeline"]) .event-archive__link .button--link:not(:has(.cms-icon))>span,.section[data-card-highlight="liftBorder"] .project-archive--cards .project-archive__link .button--link:not(:has(.cms-icon))>span,.section[data-card-highlight="liftBorder"]:not([data-design="rows"]) .pricing-plan .button--link:not(:has(.cms-icon))>span{text-decoration:underline}
.section[data-card-highlight="lift"] .section__blocks>.block--container>.container .button--link:not(:has(.cms-icon))::after,.section[data-card-highlight="lift"] .section__blocks>.block--container>.container .button--icon-end .cms-icon,.section[data-card-highlight="lift"] .section__blocks>.block--container>.container.blog-archive__link::after,.section[data-card-highlight="lift"]:not([data-design="links"]) .icon-box .button--link:not(:has(.cms-icon))::after,.section[data-card-highlight="lift"]:not([data-design="links"]) .icon-box .button--icon-end .cms-icon,.section[data-card-highlight="lift"]:not([data-design="links"]) .icon-box.blog-archive__link::after,.section[data-card-highlight="lift"] .team-member .button--link:not(:has(.cms-icon))::after,.section[data-card-highlight="lift"] .team-member .button--icon-end .cms-icon,.section[data-card-highlight="lift"] .team-member.blog-archive__link::after,.section[data-card-highlight="lift"]:not([data-design="minimal"]) .testimonial .button--link:not(:has(.cms-icon))::after,.section[data-card-highlight="lift"]:not([data-design="minimal"]) .testimonial .button--icon-end .cms-icon,.section[data-card-highlight="lift"]:not([data-design="minimal"]) .testimonial.blog-archive__link::after,.section[data-card-highlight="lift"][data-design="cards"] .stats .stat .button--link:not(:has(.cms-icon))::after,.section[data-card-highlight="lift"][data-design="cards"] .stats .stat .button--icon-end .cms-icon,.section[data-card-highlight="lift"][data-design="cards"] .stats .stat.blog-archive__link::after,.section[data-card-highlight="lift"]:not([data-design="list"],[data-design="minimal"]) .blog-archive__link .button--link:not(:has(.cms-icon))::after,.section[data-card-highlight="lift"]:not([data-design="list"],[data-design="minimal"]) .blog-archive__link .button--icon-end .cms-icon,.section[data-card-highlight="lift"]:not([data-design="list"],[data-design="minimal"]) .blog-archive__link.blog-archive__link::after,.section[data-card-highlight="lift"]:not([data-design="timeline"]) .event-archive__link .button--link:not(:has(.cms-icon))::after,.section[data-card-highlight="lift"]:not([data-design="timeline"]) .event-archive__link .button--icon-end .cms-icon,.section[data-card-highlight="lift"]:not([data-design="timeline"]) .event-archive__link.blog-archive__link::after,.section[data-card-highlight="lift"] .project-archive--cards .project-archive__link .button--link:not(:has(.cms-icon))::after,.section[data-card-highlight="lift"] .project-archive--cards .project-archive__link .button--icon-end .cms-icon,.section[data-card-highlight="lift"] .project-archive--cards .project-archive__link.blog-archive__link::after,.section[data-card-highlight="lift"]:not([data-design="rows"]) .pricing-plan .button--link:not(:has(.cms-icon))::after,.section[data-card-highlight="lift"]:not([data-design="rows"]) .pricing-plan .button--icon-end .cms-icon,.section[data-card-highlight="lift"]:not([data-design="rows"]) .pricing-plan.blog-archive__link::after,.section[data-card-highlight="liftBorder"] .section__blocks>.block--container>.container .button--link:not(:has(.cms-icon))::after,.section[data-card-highlight="liftBorder"] .section__blocks>.block--container>.container .button--icon-end .cms-icon,.section[data-card-highlight="liftBorder"] .section__blocks>.block--container>.container.blog-archive__link::after,.section[data-card-highlight="liftBorder"]:not([data-design="links"]) .icon-box .button--link:not(:has(.cms-icon))::after,.section[data-card-highlight="liftBorder"]:not([data-design="links"]) .icon-box .button--icon-end .cms-icon,.section[data-card-highlight="liftBorder"]:not([data-design="links"]) .icon-box.blog-archive__link::after,.section[data-card-highlight="liftBorder"] .team-member .button--link:not(:has(.cms-icon))::after,.section[data-card-highlight="liftBorder"] .team-member .button--icon-end .cms-icon,.section[data-card-highlight="liftBorder"] .team-member.blog-archive__link::after,.section[data-card-highlight="liftBorder"]:not([data-design="minimal"]) .testimonial .button--link:not(:has(.cms-icon))::after,.section[data-card-highlight="liftBorder"]:not([data-design="minimal"]) .testimonial .button--icon-end .cms-icon,.section[data-card-highlight="liftBorder"]:not([data-design="minimal"]) .testimonial.blog-archive__link::after,.section[data-card-highlight="liftBorder"][data-design="cards"] .stats .stat .button--link:not(:has(.cms-icon))::after,.section[data-card-highlight="liftBorder"][data-design="cards"] .stats .stat .button--icon-end .cms-icon,.section[data-card-highlight="liftBorder"][data-design="cards"] .stats .stat.blog-archive__link::after,.section[data-card-highlight="liftBorder"]:not([data-design="list"],[data-design="minimal"]) .blog-archive__link .button--link:not(:has(.cms-icon))::after,.section[data-card-highlight="liftBorder"]:not([data-design="list"],[data-design="minimal"]) .blog-archive__link .button--icon-end .cms-icon,.section[data-card-highlight="liftBorder"]:not([data-design="list"],[data-design="minimal"]) .blog-archive__link.blog-archive__link::after,.section[data-card-highlight="liftBorder"]:not([data-design="timeline"]) .event-archive__link .button--link:not(:has(.cms-icon))::after,.section[data-card-highlight="liftBorder"]:not([data-design="timeline"]) .event-archive__link .button--icon-end .cms-icon,.section[data-card-highlight="liftBorder"]:not([data-design="timeline"]) .event-archive__link.blog-archive__link::after,.section[data-card-highlight="liftBorder"] .project-archive--cards .project-archive__link .button--link:not(:has(.cms-icon))::after,.section[data-card-highlight="liftBorder"] .project-archive--cards .project-archive__link .button--icon-end .cms-icon,.section[data-card-highlight="liftBorder"] .project-archive--cards .project-archive__link.blog-archive__link::after,.section[data-card-highlight="liftBorder"]:not([data-design="rows"]) .pricing-plan .button--link:not(:has(.cms-icon))::after,.section[data-card-highlight="liftBorder"]:not([data-design="rows"]) .pricing-plan .button--icon-end .cms-icon,.section[data-card-highlight="liftBorder"]:not([data-design="rows"]) .pricing-plan.blog-archive__link::after{transition:transform .2s ease}
@media (hover:hover){.section[data-card-highlight="lift"] .section__blocks>.block--container>.container:hover .button--link:not(:has(.cms-icon))::after,.section[data-card-highlight="lift"] .section__blocks>.block--container>.container:hover .button--icon-end .cms-icon,.section[data-card-highlight="lift"] .section__blocks>.block--container>.container:hover.blog-archive__link::after,.section[data-card-highlight="lift"]:not([data-design="links"]) .icon-box:hover .button--link:not(:has(.cms-icon))::after,.section[data-card-highlight="lift"]:not([data-design="links"]) .icon-box:hover .button--icon-end .cms-icon,.section[data-card-highlight="lift"]:not([data-design="links"]) .icon-box:hover.blog-archive__link::after,.section[data-card-highlight="lift"] .team-member:hover .button--link:not(:has(.cms-icon))::after,.section[data-card-highlight="lift"] .team-member:hover .button--icon-end .cms-icon,.section[data-card-highlight="lift"] .team-member:hover.blog-archive__link::after,.section[data-card-highlight="lift"]:not([data-design="minimal"]) .testimonial:hover .button--link:not(:has(.cms-icon))::after,.section[data-card-highlight="lift"]:not([data-design="minimal"]) .testimonial:hover .button--icon-end .cms-icon,.section[data-card-highlight="lift"]:not([data-design="minimal"]) .testimonial:hover.blog-archive__link::after,.section[data-card-highlight="lift"][data-design="cards"] .stats .stat:hover .button--link:not(:has(.cms-icon))::after,.section[data-card-highlight="lift"][data-design="cards"] .stats .stat:hover .button--icon-end .cms-icon,.section[data-card-highlight="lift"][data-design="cards"] .stats .stat:hover.blog-archive__link::after,.section[data-card-highlight="lift"]:not([data-design="list"],[data-design="minimal"]) .blog-archive__link:hover .button--link:not(:has(.cms-icon))::after,.section[data-card-highlight="lift"]:not([data-design="list"],[data-design="minimal"]) .blog-archive__link:hover .button--icon-end .cms-icon,.section[data-card-highlight="lift"]:not([data-design="list"],[data-design="minimal"]) .blog-archive__link:hover.blog-archive__link::after,.section[data-card-highlight="lift"]:not([data-design="timeline"]) .event-archive__link:hover .button--link:not(:has(.cms-icon))::after,.section[data-card-highlight="lift"]:not([data-design="timeline"]) .event-archive__link:hover .button--icon-end .cms-icon,.section[data-card-highlight="lift"]:not([data-design="timeline"]) .event-archive__link:hover.blog-archive__link::after,.section[data-card-highlight="lift"] .project-archive--cards .project-archive__link:hover .button--link:not(:has(.cms-icon))::after,.section[data-card-highlight="lift"] .project-archive--cards .project-archive__link:hover .button--icon-end .cms-icon,.section[data-card-highlight="lift"] .project-archive--cards .project-archive__link:hover.blog-archive__link::after,.section[data-card-highlight="lift"]:not([data-design="rows"]) .pricing-plan:hover .button--link:not(:has(.cms-icon))::after,.section[data-card-highlight="lift"]:not([data-design="rows"]) .pricing-plan:hover .button--icon-end .cms-icon,.section[data-card-highlight="lift"]:not([data-design="rows"]) .pricing-plan:hover.blog-archive__link::after,.section[data-card-highlight="liftBorder"] .section__blocks>.block--container>.container:hover .button--link:not(:has(.cms-icon))::after,.section[data-card-highlight="liftBorder"] .section__blocks>.block--container>.container:hover .button--icon-end .cms-icon,.section[data-card-highlight="liftBorder"] .section__blocks>.block--container>.container:hover.blog-archive__link::after,.section[data-card-highlight="liftBorder"]:not([data-design="links"]) .icon-box:hover .button--link:not(:has(.cms-icon))::after,.section[data-card-highlight="liftBorder"]:not([data-design="links"]) .icon-box:hover .button--icon-end .cms-icon,.section[data-card-highlight="liftBorder"]:not([data-design="links"]) .icon-box:hover.blog-archive__link::after,.section[data-card-highlight="liftBorder"] .team-member:hover .button--link:not(:has(.cms-icon))::after,.section[data-card-highlight="liftBorder"] .team-member:hover .button--icon-end .cms-icon,.section[data-card-highlight="liftBorder"] .team-member:hover.blog-archive__link::after,.section[data-card-highlight="liftBorder"]:not([data-design="minimal"]) .testimonial:hover .button--link:not(:has(.cms-icon))::after,.section[data-card-highlight="liftBorder"]:not([data-design="minimal"]) .testimonial:hover .button--icon-end .cms-icon,.section[data-card-highlight="liftBorder"]:not([data-design="minimal"]) .testimonial:hover.blog-archive__link::after,.section[data-card-highlight="liftBorder"][data-design="cards"] .stats .stat:hover .button--link:not(:has(.cms-icon))::after,.section[data-card-highlight="liftBorder"][data-design="cards"] .stats .stat:hover .button--icon-end .cms-icon,.section[data-card-highlight="liftBorder"][data-design="cards"] .stats .stat:hover.blog-archive__link::after,.section[data-card-highlight="liftBorder"]:not([data-design="list"],[data-design="minimal"]) .blog-archive__link:hover .button--link:not(:has(.cms-icon))::after,.section[data-card-highlight="liftBorder"]:not([data-design="list"],[data-design="minimal"]) .blog-archive__link:hover .button--icon-end .cms-icon,.section[data-card-highlight="liftBorder"]:not([data-design="list"],[data-design="minimal"]) .blog-archive__link:hover.blog-archive__link::after,.section[data-card-highlight="liftBorder"]:not([data-design="timeline"]) .event-archive__link:hover .button--link:not(:has(.cms-icon))::after,.section[data-card-highlight="liftBorder"]:not([data-design="timeline"]) .event-archive__link:hover .button--icon-end .cms-icon,.section[data-card-highlight="liftBorder"]:not([data-design="timeline"]) .event-archive__link:hover.blog-archive__link::after,.section[data-card-highlight="liftBorder"] .project-archive--cards .project-archive__link:hover .button--link:not(:has(.cms-icon))::after,.section[data-card-highlight="liftBorder"] .project-archive--cards .project-archive__link:hover .button--icon-end .cms-icon,.section[data-card-highlight="liftBorder"] .project-archive--cards .project-archive__link:hover.blog-archive__link::after,.section[data-card-highlight="liftBorder"]:not([data-design="rows"]) .pricing-plan:hover .button--link:not(:has(.cms-icon))::after,.section[data-card-highlight="liftBorder"]:not([data-design="rows"]) .pricing-plan:hover .button--icon-end .cms-icon,.section[data-card-highlight="liftBorder"]:not([data-design="rows"]) .pricing-plan:hover.blog-archive__link::after{transform:translateX(var(--ch-nudge))}}
.section[data-card-highlight="lift"] .section__blocks>.block--container>.container:is(:focus-visible,:has(:focus-visible)) .button--link:not(:has(.cms-icon))::after,.section[data-card-highlight="lift"] .section__blocks>.block--container>.container:is(:focus-visible,:has(:focus-visible)) .button--icon-end .cms-icon,.section[data-card-highlight="lift"] .section__blocks>.block--container>.container:is(:focus-visible,:has(:focus-visible)).blog-archive__link::after,.section[data-card-highlight="lift"]:not([data-design="links"]) .icon-box:is(:focus-visible,:has(:focus-visible)) .button--link:not(:has(.cms-icon))::after,.section[data-card-highlight="lift"]:not([data-design="links"]) .icon-box:is(:focus-visible,:has(:focus-visible)) .button--icon-end .cms-icon,.section[data-card-highlight="lift"]:not([data-design="links"]) .icon-box:is(:focus-visible,:has(:focus-visible)).blog-archive__link::after,.section[data-card-highlight="lift"] .team-member:is(:focus-visible,:has(:focus-visible)) .button--link:not(:has(.cms-icon))::after,.section[data-card-highlight="lift"] .team-member:is(:focus-visible,:has(:focus-visible)) .button--icon-end .cms-icon,.section[data-card-highlight="lift"] .team-member:is(:focus-visible,:has(:focus-visible)).blog-archive__link::after,.section[data-card-highlight="lift"]:not([data-design="minimal"]) .testimonial:is(:focus-visible,:has(:focus-visible)) .button--link:not(:has(.cms-icon))::after,.section[data-card-highlight="lift"]:not([data-design="minimal"]) .testimonial:is(:focus-visible,:has(:focus-visible)) .button--icon-end .cms-icon,.section[data-card-highlight="lift"]:not([data-design="minimal"]) .testimonial:is(:focus-visible,:has(:focus-visible)).blog-archive__link::after,.section[data-card-highlight="lift"][data-design="cards"] .stats .stat:is(:focus-visible,:has(:focus-visible)) .button--link:not(:has(.cms-icon))::after,.section[data-card-highlight="lift"][data-design="cards"] .stats .stat:is(:focus-visible,:has(:focus-visible)) .button--icon-end .cms-icon,.section[data-card-highlight="lift"][data-design="cards"] .stats .stat:is(:focus-visible,:has(:focus-visible)).blog-archive__link::after,.section[data-card-highlight="lift"]:not([data-design="list"],[data-design="minimal"]) .blog-archive__link:is(:focus-visible,:has(:focus-visible)) .button--link:not(:has(.cms-icon))::after,.section[data-card-highlight="lift"]:not([data-design="list"],[data-design="minimal"]) .blog-archive__link:is(:focus-visible,:has(:focus-visible)) .button--icon-end .cms-icon,.section[data-card-highlight="lift"]:not([data-design="list"],[data-design="minimal"]) .blog-archive__link:is(:focus-visible,:has(:focus-visible)).blog-archive__link::after,.section[data-card-highlight="lift"]:not([data-design="timeline"]) .event-archive__link:is(:focus-visible,:has(:focus-visible)) .button--link:not(:has(.cms-icon))::after,.section[data-card-highlight="lift"]:not([data-design="timeline"]) .event-archive__link:is(:focus-visible,:has(:focus-visible)) .button--icon-end .cms-icon,.section[data-card-highlight="lift"]:not([data-design="timeline"]) .event-archive__link:is(:focus-visible,:has(:focus-visible)).blog-archive__link::after,.section[data-card-highlight="lift"] .project-archive--cards .project-archive__link:is(:focus-visible,:has(:focus-visible)) .button--link:not(:has(.cms-icon))::after,.section[data-card-highlight="lift"] .project-archive--cards .project-archive__link:is(:focus-visible,:has(:focus-visible)) .button--icon-end .cms-icon,.section[data-card-highlight="lift"] .project-archive--cards .project-archive__link:is(:focus-visible,:has(:focus-visible)).blog-archive__link::after,.section[data-card-highlight="lift"]:not([data-design="rows"]) .pricing-plan:is(:focus-visible,:has(:focus-visible)) .button--link:not(:has(.cms-icon))::after,.section[data-card-highlight="lift"]:not([data-design="rows"]) .pricing-plan:is(:focus-visible,:has(:focus-visible)) .button--icon-end .cms-icon,.section[data-card-highlight="lift"]:not([data-design="rows"]) .pricing-plan:is(:focus-visible,:has(:focus-visible)).blog-archive__link::after,.section[data-card-highlight="liftBorder"] .section__blocks>.block--container>.container:is(:focus-visible,:has(:focus-visible)) .button--link:not(:has(.cms-icon))::after,.section[data-card-highlight="liftBorder"] .section__blocks>.block--container>.container:is(:focus-visible,:has(:focus-visible)) .button--icon-end .cms-icon,.section[data-card-highlight="liftBorder"] .section__blocks>.block--container>.container:is(:focus-visible,:has(:focus-visible)).blog-archive__link::after,.section[data-card-highlight="liftBorder"]:not([data-design="links"]) .icon-box:is(:focus-visible,:has(:focus-visible)) .button--link:not(:has(.cms-icon))::after,.section[data-card-highlight="liftBorder"]:not([data-design="links"]) .icon-box:is(:focus-visible,:has(:focus-visible)) .button--icon-end .cms-icon,.section[data-card-highlight="liftBorder"]:not([data-design="links"]) .icon-box:is(:focus-visible,:has(:focus-visible)).blog-archive__link::after,.section[data-card-highlight="liftBorder"] .team-member:is(:focus-visible,:has(:focus-visible)) .button--link:not(:has(.cms-icon))::after,.section[data-card-highlight="liftBorder"] .team-member:is(:focus-visible,:has(:focus-visible)) .button--icon-end .cms-icon,.section[data-card-highlight="liftBorder"] .team-member:is(:focus-visible,:has(:focus-visible)).blog-archive__link::after,.section[data-card-highlight="liftBorder"]:not([data-design="minimal"]) .testimonial:is(:focus-visible,:has(:focus-visible)) .button--link:not(:has(.cms-icon))::after,.section[data-card-highlight="liftBorder"]:not([data-design="minimal"]) .testimonial:is(:focus-visible,:has(:focus-visible)) .button--icon-end .cms-icon,.section[data-card-highlight="liftBorder"]:not([data-design="minimal"]) .testimonial:is(:focus-visible,:has(:focus-visible)).blog-archive__link::after,.section[data-card-highlight="liftBorder"][data-design="cards"] .stats .stat:is(:focus-visible,:has(:focus-visible)) .button--link:not(:has(.cms-icon))::after,.section[data-card-highlight="liftBorder"][data-design="cards"] .stats .stat:is(:focus-visible,:has(:focus-visible)) .button--icon-end .cms-icon,.section[data-card-highlight="liftBorder"][data-design="cards"] .stats .stat:is(:focus-visible,:has(:focus-visible)).blog-archive__link::after,.section[data-card-highlight="liftBorder"]:not([data-design="list"],[data-design="minimal"]) .blog-archive__link:is(:focus-visible,:has(:focus-visible)) .button--link:not(:has(.cms-icon))::after,.section[data-card-highlight="liftBorder"]:not([data-design="list"],[data-design="minimal"]) .blog-archive__link:is(:focus-visible,:has(:focus-visible)) .button--icon-end .cms-icon,.section[data-card-highlight="liftBorder"]:not([data-design="list"],[data-design="minimal"]) .blog-archive__link:is(:focus-visible,:has(:focus-visible)).blog-archive__link::after,.section[data-card-highlight="liftBorder"]:not([data-design="timeline"]) .event-archive__link:is(:focus-visible,:has(:focus-visible)) .button--link:not(:has(.cms-icon))::after,.section[data-card-highlight="liftBorder"]:not([data-design="timeline"]) .event-archive__link:is(:focus-visible,:has(:focus-visible)) .button--icon-end .cms-icon,.section[data-card-highlight="liftBorder"]:not([data-design="timeline"]) .event-archive__link:is(:focus-visible,:has(:focus-visible)).blog-archive__link::after,.section[data-card-highlight="liftBorder"] .project-archive--cards .project-archive__link:is(:focus-visible,:has(:focus-visible)) .button--link:not(:has(.cms-icon))::after,.section[data-card-highlight="liftBorder"] .project-archive--cards .project-archive__link:is(:focus-visible,:has(:focus-visible)) .button--icon-end .cms-icon,.section[data-card-highlight="liftBorder"] .project-archive--cards .project-archive__link:is(:focus-visible,:has(:focus-visible)).blog-archive__link::after,.section[data-card-highlight="liftBorder"]:not([data-design="rows"]) .pricing-plan:is(:focus-visible,:has(:focus-visible)) .button--link:not(:has(.cms-icon))::after,.section[data-card-highlight="liftBorder"]:not([data-design="rows"]) .pricing-plan:is(:focus-visible,:has(:focus-visible)) .button--icon-end .cms-icon,.section[data-card-highlight="liftBorder"]:not([data-design="rows"]) .pricing-plan:is(:focus-visible,:has(:focus-visible)).blog-archive__link::after{transform:translateX(var(--ch-nudge))}
.section[data-card-highlight] .section__blocks>.block--container>.container:has(>.block--button>a[href]):not(:has(.block--container,.block--button~.block--button,a[href]:not(.block--button>a),button,input,select,textarea,iframe,summary,[tabindex])),.section[data-card-highlight]:not([data-design="links"]) .icon-box:has(.icon-box__link a[href]):not(:has(.icon-box__body a)),.section[data-card-highlight]:not([data-design="rows"]) .pricing-plan:has(.pricing-plan__cta a[href]):not(:has(.pricing-plan__features a)){position:relative;cursor:pointer}
.section[data-card-highlight] .section__blocks>.block--container>.container:has(>.block--button>a[href]):not(:has(.block--container,.block--button~.block--button,a[href]:not(.block--button>a),button,input,select,textarea,iframe,summary,[tabindex]))>.block--button{position:static}
/* A filter or transform on the link (the theme's button hover) would shrink the cover to it, and
   its hover shadow would frame the link whenever the card is under the pointer. */
.section[data-card-highlight] .section__blocks>.block--container>.container:has(>.block--button>a[href]):not(:has(.block--container,.block--button~.block--button,a[href]:not(.block--button>a),button,input,select,textarea,iframe,summary,[tabindex]))>.block--button>a,.section[data-card-highlight]:not([data-design="links"]) .icon-box:has(.icon-box__link a[href]):not(:has(.icon-box__body a)) .icon-box__link a,.section[data-card-highlight]:not([data-design="rows"]) .pricing-plan:has(.pricing-plan__cta a[href]):not(:has(.pricing-plan__features a)) .pricing-plan__cta a{filter:none;transform:none;box-shadow:none}
.section[data-card-highlight] .section__blocks>.block--container>.container:has(>.block--button>a[href]):not(:has(.block--container,.block--button~.block--button,a[href]:not(.block--button>a),button,input,select,textarea,iframe,summary,[tabindex]))>.block--button>a::before,.section[data-card-highlight]:not([data-design="links"]) .icon-box:has(.icon-box__link a[href]):not(:has(.icon-box__body a)) .icon-box__link a::before,.section[data-card-highlight]:not([data-design="rows"]) .pricing-plan:has(.pricing-plan__cta a[href]):not(:has(.pricing-plan__features a)) .pricing-plan__cta a::before{content:var(--ch-overlay,"");position:absolute;inset:0;z-index:1;border-radius:inherit}
.section[data-card-highlight] .section__blocks>.block--container>.container:has(>.block--button>a[href]):not(:has(.block--container,.block--button~.block--button,a[href]:not(.block--button>a),button,input,select,textarea,iframe,summary,[tabindex]))>.block--button>a:focus-visible,.section[data-card-highlight]:not([data-design="links"]) .icon-box:has(.icon-box__link a[href]):not(:has(.icon-box__body a)) .icon-box__link a:focus-visible,.section[data-card-highlight]:not([data-design="rows"]) .pricing-plan:has(.pricing-plan__cta a[href]):not(:has(.pricing-plan__features a)) .pricing-plan__cta a:focus-visible{outline:none}
@media (prefers-reduced-motion:reduce){.section[data-card-highlight]{--ch-lift:0px;--ch-nudge:0px}}
.motion-off .section[data-card-highlight]{--ch-lift:0px;--ch-nudge:0px}
/*
 * theme-base: theme stylesheet. Loaded after tokens.css (variables) and
 * base.css (layout-tree's base styles for the standard sections and blocks),
 * before page-<id>.css (per-page layout). Mobile first; every colour and
 * spacing comes from a token variable with a fallback for missing tokens.
 * Variable names follow tokensToCss: `--size-contentMaxWidth`, `--color-onPrimary`.
 */

:root {
	color-scheme: light;
	--scheme-bg: var(--color-background, #fff);
	--scheme-fg: var(--color-text, #111);
	--scheme-muted: var(--color-muted, #5b6470);
	--scheme-border: var(--color-border, #d5d9e0);
	--scheme-link: var(--color-primary, #0055ff);
	--focus-ring: var(--color-focus, #ffbf00);
	/* Two-tone focus ring (docs/komponentit/FOKUSRENGAS_2026-11-09.md): the focus colour
	   outside, a dark ring from the site's ink inside, so one of the two is at least 3:1 on
	   any background. 25 % ink in black stays dark even when the site's text is light. */
	--focus-ring-inner: color-mix(in oklab, var(--color-text, #1b1f24) 25%, #000);
	--focus-ring-shadow: 0 0 0 3px var(--focus-ring-inner);
}

html {
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
	/* Typography scale token (font.scale); 1 = browser default 16px rem root. */
	font-size: calc(16px * var(--font-scale, 1));
}

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

/* Site background image (E89, siteBackgroundImage setting). Header and footer turn
   transparent so the image runs behind them, unless the owner set their colours. */
.has-site-bg body {
	background-image: var(--site-bg-image);
	background-position: var(--site-bg-position, center top);
	background-size: var(--site-bg-size, cover);
	background-repeat: no-repeat;
	background-attachment: var(--site-bg-attachment, scroll);
}

.has-site-bg .site-header {
	background: var(--site-header-bg, transparent);
	border-bottom-color: transparent;
}

.has-site-bg .site-footer {
	background: var(--site-footer-bg, transparent);
}

@media (max-width: 959px) {
	/* background-attachment: fixed repaints on every scroll frame on phones. */
	.has-site-bg body {
		background-attachment: scroll;
	}
}

body {
	min-width: 320px;
	font-family: var(--font-body, system-ui, sans-serif);
	font-weight: var(--font-weight, 400);
	/* Body text is never under 16 px nor tighter than 1.4 (TIETEELLINEN_KATSAUS_2026-10-14,
	   layout-tree body-fonts.ts), whatever the scale or an imported size says. */
	font-size: max(16px, var(--font-size-body, 1rem));
	/* Measured leading (E192) when the site was imported, theme default otherwise. */
	line-height: max(1.4, var(--font-leading-body, var(--font-lineHeight, 1.65)));
	letter-spacing: var(--font-letterSpacing, 0);
	color: var(--scheme-fg);
	background: var(--scheme-bg);
	-webkit-font-smoothing: antialiased;
}

main {
	width: min(100% - 2rem, var(--size-contentMaxWidth, 1200px));
	margin-inline: auto;
	/* Enfold .template-page.content uses 50px vertical padding. */
	padding-top: 50px;
	padding-bottom: 50px;
}

/* fullBleedSections (E142): section backgrounds span the viewport; each section's
   .section__inner keeps its own max-width (contentMaxWidth unless the section sets one). */
html.full-bleed-sections main {
	width: 100%;
	max-width: none;
	padding-top: 0;
	padding-bottom: 0;
}

/* Elementor / OceanWP: full-bleed canvas; content width lives on .section__inner. */
.layout-chrome--elementor main {
	width: 100%;
	max-width: none;
	padding-top: 0;
	padding-bottom: 0;
}

.layout-chrome--elementor .site-header__inner {
	/* Elementor Pro nav widget header (~133px on BeachTravels). */
	min-height: 133px;
	max-width: min(100% - 2rem, 1400px);
	padding-block: 20px;
	box-sizing: border-box;
}

.layout-chrome--elementor .site-header__logo {
	/* Source logo ~93px; keep headroom so bar stays ~133px. A measured logo width sets
	   --site-logo-max-height: none, so the import's own size is never capped (E156). */
	max-height: var(--site-logo-max-height, 93px);
}

/* Elementor sections are usually 0–10px; theme default .section is 4rem at desktop. */
.layout-chrome--elementor .section {
	padding: 0;
}

/*
 * Mobile side gutters (BeachTravels / Elementor ~10–20px from viewport edge).
 * Desktop keeps full-bleed canvas; contentMaxWidth centers the column.
 */
@media (max-width: 767px) {
	.layout-chrome--elementor .site-header__inner {
		/* Source header container ~10px; keep ~16px via 100%-2rem, tighten to 10. */
		max-width: min(100% - 20px, 1400px);
		margin-inline: auto;
		padding-block: 12px;
		min-height: 72px;
	}

	.layout-chrome--elementor .site-header__logo {
		max-height: var(--site-logo-max-height, 56px);
	}

	/* Beat page CSS `.section.s-… { padding: 0 }` (fullBleed carousel compile). */
	.layout-chrome--elementor main .section.section--carousel {
		padding-left: 10px;
		padding-right: 10px;
		box-sizing: border-box;
	}

	.layout-chrome--elementor main .section.section--carousel > .section__inner {
		padding-left: 0;
		padding-right: 0;
	}

	.layout-chrome--elementor .section:not(.section--carousel):not(.section--hero) > .section__inner {
		padding-left: 10px;
		padding-right: 10px;
		box-sizing: border-box;
	}

	.layout-chrome--elementor .site-footer__inner {
		padding-left: 20px;
		padding-right: 20px;
		box-sizing: border-box;
	}
}

/*
 * Enfold / default chrome mobile gutters (~29px on 390px ≈ 100% − 58px).
 * Pro Linnanmaa source container; header/footer were flush (0) while main ~10px.
 */
@media (max-width: 767px) {
	.layout-chrome--default .site-header__inner,
	.layout-chrome--enfold .site-header__inner,
	.layout-chrome--default .site-footer__inner,
	.layout-chrome--enfold .site-footer__inner,
	.layout-chrome--default .page-title-bar__inner,
	.layout-chrome--enfold .page-title-bar__inner,
	.layout-chrome--default .breadcrumbs-bar__inner,
	.layout-chrome--enfold .breadcrumbs-bar__inner {
		width: min(100% - 58px, var(--size-contentMaxWidth, 1200px));
		max-width: min(100% - 58px, var(--size-contentMaxWidth, 1200px));
		margin-inline: auto;
		box-sizing: border-box;
	}

	.layout-chrome--default main,
	.layout-chrome--enfold main {
		width: min(100% - 58px, var(--size-contentMaxWidth, 1200px));
		/* Keep Enfold .template-page 50px vertical padding (mobile too). */
	}

	/* Enfold promobox buttons are near full content width on phone. */
	.layout-chrome--default .container--boxed > .block--button,
	.layout-chrome--enfold .container--boxed > .block--button {
		align-self: stretch;
		width: 100%;
	}

	.layout-chrome--default .container--boxed > .block--button .button,
	.layout-chrome--enfold .container--boxed > .block--button .button {
		display: flex;
		width: 100%;
		justify-content: center;
		box-sizing: border-box;
		text-align: center;
	}

	.layout-chrome--default .site-footer__copyright,
	.layout-chrome--enfold .site-footer__copyright {
		text-align: start;
		width: 100%;
	}
}

.layout-chrome--elementor .menu {
	gap: 0;
}

/* Top bar: slab/heading face, heavy weight, roomy horizontal padding (Elementor). */
.layout-chrome--elementor .site-nav--desktop > .menu > .menu__item > .menu__link,
.layout-chrome--elementor .site-nav--desktop > .menu > .menu__item > .menu__toggle,
.layout-chrome--elementor .locale-switcher--desktop .locale-switcher__link {
	font-family: var(--font-heading, inherit);
	font-weight: 800;
	letter-spacing: 0.05em;
}

/* Dropdown: compact centered panel (Elementor nav --dropdown). */
/* Palette variables only: html.is-dark-site (theme.css “Submenu palette”) overrides them. */
.layout-chrome--elementor .menu__submenu {
	--submenu-fg: #0c0c0c;
	--submenu-border: #929292;
	--submenu-divider: #e0e0e0;
	--submenu-hover-bg: transparent;
	min-width: 10rem;
	border: 1px solid var(--submenu-border);
	border-radius: 0;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
	text-align: center;
}

.layout-chrome--elementor .section--carousel,
.layout-chrome--elementor .carousel {
	position: relative;
	z-index: 0;
}

.layout-chrome--elementor .menu__submenu .menu__link {
	padding: 13px 20px;
	font-family: var(--font-body, inherit);
	font-size: 0.8125rem;
	font-weight: 500;
	text-align: center;
}

.layout-chrome--elementor .hero--overlay {
	aspect-ratio: auto;
	min-height: 800px;
	height: 800px;
	max-height: none;
	border-radius: 0;
}

.layout-chrome--elementor .section--carousel > .section__inner {
	max-width: none;
	width: 100%;
}

@media (min-width: 768px) {
	.layout-chrome--elementor .section--carousel > .section__inner {
		padding-left: 0;
		padding-right: 0;
	}

	.layout-chrome--elementor .section--carousel {
		padding-left: 0;
		padding-right: 0;
	}
}

.layout-chrome--elementor .carousel__heading {
	text-transform: none;
	letter-spacing: 0.06em;
}

.layout-chrome--elementor .section--hero > .section__inner {
	max-width: none;
	width: 100%;
	padding-left: 0;
	padding-right: 0;
}

.layout-chrome--elementor .section--hero {
	padding-left: 10px;
	padding-right: 10px;
	box-sizing: border-box;
}

@media (min-width: 960px) {
	/* Top-level bar only — do not size nested submenu `.menu` lists. */
	.layout-chrome--elementor .site-nav--desktop > .menu {
		height: auto;
		min-height: 68px;
		gap: 0 !important;
		align-items: center;
	}

	.layout-chrome--elementor .site-nav--desktop > .menu > .menu__item {
		gap: 0;
	}

	.layout-chrome--elementor .site-nav--desktop > .menu > .menu__item > .menu__link,
	.layout-chrome--elementor .site-nav--desktop > .menu > .menu__item > .menu__toggle,
	.layout-chrome--elementor .locale-switcher--desktop .locale-switcher__link {
		height: auto;
		min-height: 68px;
		padding: 18px 27px;
		font-size: var(--site-nav-size, 1.3125rem);
		line-height: 1.5;
		box-sizing: border-box;
	}
}

.layout-chrome--elementor .hero--overlay .hero__content {
	margin: 0;
	padding: 1.5rem 2rem;
	background: transparent;
	max-width: none;
}

.layout-chrome--elementor .hero--overlay .hero__heading {
	font-size: var(--font-size-display, clamp(2rem, 5vw, 3.5rem));
	font-weight: 700;
	letter-spacing: 0.04em;
	text-shadow: 0 2px 16px rgba(0, 0, 0, 0.45);
	background: transparent;
	padding: 0;
}

.layout-chrome--elementor .hero--overlay.hero--center {
	align-items: center;
	justify-items: center;
}

.layout-chrome--elementor .hero--overlay.hero--center .hero__content {
	justify-self: center;
	text-align: center;
}

.layout-chrome--enfold main {
	/* Keep explicit Enfold rhythm when chrome is selected after a non-Enfold import. */
	padding-top: 50px;
	padding-bottom: 50px;
}

button,
input,
select,
textarea {
	font: inherit;
}

a {
	color: var(--section-link, var(--link-color, var(--scheme-link, var(--color-primary))));
	text-decoration: var(--link-decoration, underline);
	text-decoration-thickness: 0.08em;
	text-underline-offset: 0.2em;
}

/* The form engine (packages/forms, `.form`) styles its own controls from the site's
   tokens. The generic element rules below leave them alone (`:not(:where(.form *))`
   keeps the specificity as it was): a rule that reached in gave the switch a 44 px
   minimum height and the text-field padding. test/theme.test.ts keeps it that way. */
button:not(:where(.form *)),
.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.45rem;
	min-height: 0;
	padding: var(--button-paddingY, 14px) var(--button-paddingX, 30px);
	border: 1px solid var(--button-border, transparent);
	border-radius: var(--button-radius, var(--radius-md, 8px));
	background: var(--button-bg, var(--color-primary, #0055ff));
	color: var(--button-fg, var(--color-onPrimary, #fff));
	font-size: var(--button-fontSize, 0.8125rem);
	font-weight: var(--button-weight, 400);
	line-height: var(--font-leading-button, 1.2);
	text-decoration: none;
	transition:
		transform 150ms ease,
		box-shadow 150ms ease,
		background-color 150ms ease;
}

button:not(:where(.form *)):not(:where(:disabled)):hover,
.button:not(:where(:disabled, [aria-disabled='true'])):hover {
	transform: translateY(-1px);
	box-shadow: 0 6px 16px rgb(17 24 39 / 0.12);
}

button[hidden],
.button[hidden] {
	display: none !important;
}

:is(input, select, textarea):not(:where(.form *)) {
	width: 100%;
	min-height: 2.75rem;
	padding: 0.65rem 0.8rem;
	border: 1px solid var(--scheme-border);
	border-radius: var(--radius-md, 8px);
	background: var(--scheme-bg);
	color: var(--scheme-fg);
}

:is(input, select, textarea):not(:where(.form *)):focus-visible {
	outline: 3px solid var(--focus-ring);
	outline-offset: 2px;
	box-shadow: var(--focus-ring-shadow);
}

label:not(:where(.form *)) {
	display: block;
	margin-bottom: 0.35rem;
	font-weight: 600;
}

form:not(:where(.form)) {
	display: grid;
	gap: var(--space-md, 16px);
}

form:not(:where(.form)) button[type='submit'],
form:not(:where(.form)) .button--primary {
	justify-self: start;
	background: var(--color-primary, #0055ff);
	color: var(--color-onPrimary, #fff);
}

@media (max-width: 640px) {
	main {
		width: min(100% - 1.25rem, var(--size-contentMaxWidth, 1200px));
	}
	section {
		padding-block: 2.5rem;
	}
	/* Enfold pages: keep section rhythm tight on phone (source #main pad 0). */
	/* Not with fullBleedSections (E146): those sections carry measured padding in page CSS. */
	.layout-chrome--default:not(.full-bleed-sections) section:not(.section--hero),
	.layout-chrome--enfold:not(.full-bleed-sections) section:not(.section--hero) {
		padding-block: 1.25rem;
	}
	.components-demo__buttons {
		align-items: stretch;
		flex-direction: column;
	}
	.components-demo__buttons .button,
	.components-demo__buttons button {
		width: 100%;
	}
}

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

[x-cloak] {
	display: none !important;
}

/* Typography ------------------------------------------------------------- */

h1,
h2,
h3,
h4 {
	font-family: var(--font-heading, inherit);
	line-height: var(--font-leading-heading, 1.2);
	letter-spacing: var(--font-letterSpacing, 0);
	margin: 0 0 var(--space-sm, 8px);
	text-wrap: balance;
}

/* "Pääotsikon koko" (font.display, tokens.ts): when the owner picks Suuri or Valtava, the
   --font-*-display variables exist and win over the theme's and the import's sizes. */
h1 {
	font-size: var(--font-size-display, var(--font-size-h1, clamp(2rem, 1.5rem + 2vw, 3rem)));
	line-height: var(
		--font-leading-display,
		var(--font-leading-h1, var(--font-leading-heading, 1.2))
	);
	letter-spacing: var(--font-tracking-display, var(--font-letterSpacing, 0));
	/* Without the setting the variable is unset and the value is inherited, as before. */
	overflow-wrap: var(--font-wrap-display);
}

h2 {
	font-size: var(--font-size-h2, clamp(1.5rem, 1.2rem + 1.2vw, 2rem));
	line-height: var(--font-leading-h2, var(--font-leading-heading, 1.2));
}

h3 {
	font-size: var(--font-size-h3, 1.25rem);
	line-height: var(--font-leading-h3, var(--font-leading-heading, 1.2));
}

h4 {
	font-size: var(--font-size-h4, 1.05rem);
	line-height: var(--font-leading-h4, var(--font-leading-heading, 1.2));
}

/* Imported sites set exact sizes per breakpoint (E102) and, since E192, the measured line
   height with them; without the tokens nothing changes. Leading is a unitless ratio, so it
   stays right even where the desktop and phone sizes differ. */
@media (min-width: 960px) {
	h1 {
		font-size: var(
			--font-size-display,
			var(--font-sizeLg-h1, var(--font-size-h1, clamp(2rem, 1.5rem + 2vw, 3rem)))
		);
		line-height: var(
			--font-leading-display,
			var(--font-leadingLg-h1, var(--font-leading-h1, var(--font-leading-heading, 1.2)))
		);
	}

	h2 {
		font-size: var(--font-sizeLg-h2, var(--font-size-h2, clamp(1.5rem, 1.2rem + 1.2vw, 2rem)));
		line-height: var(--font-leadingLg-h2, var(--font-leading-h2, var(--font-leading-heading, 1.2)));
	}

	h3 {
		font-size: var(--font-sizeLg-h3, var(--font-size-h3, 1.25rem));
		line-height: var(--font-leadingLg-h3, var(--font-leading-h3, var(--font-leading-heading, 1.2)));
	}

	h4 {
		font-size: var(--font-sizeLg-h4, var(--font-size-h4, 1.05rem));
		line-height: var(--font-leadingLg-h4, var(--font-leading-h4, var(--font-leading-heading, 1.2)));
	}

	body {
		font-size: max(16px, var(--font-sizeLg-body, var(--font-size-body, 1rem)));
		line-height: max(
			1.4,
			var(--font-leadingLg-body, var(--font-leading-body, var(--font-lineHeight, 1.65)))
		);
	}

	.button {
		font-size: var(--font-sizeLg-button, var(--font-size-button, 0.8125rem));
		line-height: var(--font-leadingLg-button, var(--font-leading-button, 1.2));
	}
}

p {
	margin: 0 0 var(--space-sm, 8px);
}

section {
	padding-block: var(--space-section, clamp(2.5rem, 6vw, 6rem));
}

.card,
.grid__item {
	border: var(--card-border, 1px) solid var(--scheme-border);
	border-radius: var(--card-radius, var(--radius-lg, 16px));
	box-shadow: var(--card-shadow, var(--shadow-card, 0 2px 8px rgb(0 0 0 / 0.08)));
}

img {
	border-radius: var(--image-radius, var(--radius-md, 8px));
}

.richtext > :last-child {
	margin-bottom: 0;
}

.richtext p {
	margin: 0.85em 0;
	text-align: left;
}

.richtext p:first-child {
	margin-top: 0;
}

.richtext em,
.richtext i {
	font-style: italic;
}

.richtext strong,
.richtext b {
	font-weight: 700;
}

/* Enfold-style list-widget intro (e.g. Uutiskirje). Only on Enfold-style sites: elsewhere
   a bold first line is just bold, not a grey eyebrow. The capitals reproduce the imported
   Enfold site (layoutChrome=enfold is set by the parity tool), so they are the customer's
   styling: allowlisted in apps/platform/src/lib/no-css-capitals.test.ts. */
.layout-chrome--enfold .richtext > p:first-child > strong:only-child {
	font-size: 1.1em;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: #666;
}

.richtext a {
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

.richtext ul,
.richtext ol {
	padding-left: 1.25em;
	margin: 0.85em 0;
}

.richtext li {
	margin: 0.35em 0;
}

/* Keep colour defaults less specific than compiled block appearance, including
   on hover. Only sections with an explicit pair define --section-link. */
:where(.section[data-color-scheme]) {
	--section-link: var(--scheme-link);
}
:where(.richtext) a:not(:where(.button)) {
	color: var(--section-link, var(--color-primary, #2997ab));
}

.richtext small {
	display: block;
	margin-top: 0.15em;
	font-size: 0.85em;
	color: var(--color-muted, #808080);
	font-weight: 400;
}

/* Enfold av_promobox on prolinnanmaa: 16px copy (not 14px). */
.container--boxed {
	padding: 20px 30px !important;
	border-color: #e1e1e1;
	background: #fff;
	box-sizing: border-box;
}

.container--boxed .richtext,
.container--boxed .richtext p {
	font-size: 1rem;
	line-height: 1.65;
	text-align: left;
}

.container--boxed .richtext p {
	margin: 0;
}

.container--boxed .richtext em {
	font-style: italic;
}

small {
	color: var(--scheme-muted);
}

/* Focus and accessibility ------------------------------------------------ */

/* The dark inner ring fills the 2px offset under the ring (3px, so no seam shows). A rule
   that draws the focus elsewhere (outline: none on a link, the ring on its card) also sets
   box-shadow: none. */
:focus-visible {
	outline: 3px solid var(--focus-ring);
	outline-offset: 2px;
	box-shadow: var(--focus-ring-shadow);
}

:focus:not(:focus-visible) {
	outline: none;
}

.skip-link {
	position: fixed;
	top: 0.5rem;
	left: 0.5rem;
	z-index: 100;
	padding: 0.75rem 1rem;
	background: #fff;
	color: #000;
	border: 2px solid currentColor;
	border-radius: var(--radius-sm, 4px);
	transform: translateY(-150%);
}

.skip-link:focus {
	transform: none;
}

.visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* Color schemes: sections carry data-color-scheme from the tree ----------- */

[data-color-scheme='light'] {
	--scheme-bg: var(--color-background, #fff);
	--scheme-fg: var(--color-text, #111);
	--scheme-link: var(--color-primary, #0055ff);
	background: var(--scheme-bg);
	color: var(--scheme-fg);
}

[data-color-scheme='dark'] {
	--scheme-bg: var(--color-text, #111);
	--scheme-fg: var(--color-background, #fff);
	--scheme-muted: color-mix(in srgb, var(--scheme-fg) 75%, transparent);
	--scheme-border: color-mix(in srgb, var(--scheme-fg) 25%, transparent);
	--scheme-link: var(--scheme-fg);
	background: var(--scheme-bg);
	color: var(--scheme-fg);
}

[data-color-scheme='accent'] {
	--scheme-bg: var(--color-primary, #0055ff);
	--scheme-fg: var(--color-onPrimary, #fff);
	--scheme-muted: color-mix(in srgb, var(--scheme-fg) 80%, transparent);
	--scheme-border: color-mix(in srgb, var(--scheme-fg) 30%, transparent);
	--scheme-link: var(--scheme-fg);
	background: var(--scheme-bg);
	color: var(--scheme-fg);
}

[data-color-scheme='muted'] {
	--scheme-bg: var(--scheme-muted-background, var(--color-surface, #f4f5f7));
	--scheme-fg: var(--scheme-muted-text, var(--color-text, #111));
	--scheme-link: var(--scheme-muted-primary, var(--color-primary, #0055ff));
	--scheme-muted: var(--scheme-muted-muted, var(--color-muted, #5b6470));
	--scheme-border: var(--scheme-muted-border, var(--color-border, #d5d9e0));
	--scheme-surface: var(--scheme-muted-surface, var(--color-background, #fff));
	background: var(--scheme-bg);
	color: var(--scheme-fg);
}

/* Accent sections sit on the primary colour, so their buttons invert; dark sections keep
   the brand button (E100: a dark site's own palette is the dark scheme), unless its colour is
   below 1.5:1 against the section: then layout-tree base-css.ts fills it like here (E253). A
   variant keeps its own look; the list is the same as in layout-tree base-css.ts (E246). */
[data-color-scheme='accent'] .button--primary,
[data-color-scheme='accent']
	.button:not(:where(.button--link, .button--secondary, .button--outline, .button--ghost)) {
	background: var(--scheme-fg);
	color: var(--scheme-bg);
}

:where([data-color-scheme='dark'], [data-color-scheme='accent']) .button--link {
	background: transparent;
	color: var(--scheme-link);
}

/* Layout ----------------------------------------------------------------- */

/* Width matches `main` (already guttered). Do not shrink again — content
   rows (CTAs, copy) must share the same edges as the hero image. */
.section__inner,
.site-header__inner,
.site-footer__inner {
	width: 100%;
	max-width: var(--size-contentMaxWidth, 1200px);
	margin-inline: auto;
}

/* Override bundled base.css: max-height + aspect-ratio shrinks hero width. */
.hero--overlay {
	width: 100%;
	max-height: none;
}

.section--hero,
.section.section--hero {
	padding: 0 !important;
}

/* A hero in a colour scheme or with a background of its own keeps its text off the edge of
   the coloured band (huippuulkoasut 28.10.2026): the padding above is zeroed for the picture
   heroes, which also left a split hero's text touching its coloured box. */
.section--hero:is([data-color-scheme], [data-own-bg])
	> .section__inner
	> .hero:not(.hero--overlay) {
	padding: clamp(1.5rem, 4vw, 3rem);
}

/* Enfold caption: ~28px/600 title, 16px body (not the default clamp→44px/700). */
.hero--overlay {
	/* Enfold slideshow caption sits near the top of the image. */
	align-items: start;
	border-radius: 0;
}

.hero--overlay .hero__content {
	/* Enfold slideshow caption inset ≈ 17px from image edges.
	   Per-line chips (not one opaque slab): transparent panel + row backgrounds.
	   Overrides live base.css drift that used carousel opacity 0.82 on hero.
	   Horizontal 20px matches Enfold .avia-caption padding so title chip lands ~81px. */
	margin: 17px;
	padding: 0 20px;
	background: transparent;
	max-width: min(36rem, 92%);
}

.hero--overlay .hero__heading {
	/* Own line, still only as wide as the text: the subheading chip starts below it. */
	display: block;
	width: fit-content;
	max-width: 100%;
	font-size: var(--font-size-display, 1.75rem);
	font-weight: 600;
	line-height: var(--font-leading-display, 1.1);
	overflow-wrap: var(--font-wrap-display, break-word);
	margin: 0 0 1px;
	padding: 10px 15px;
	letter-spacing: 0.01em;
	background: rgba(0, 0, 0, 0.5);
	color: #fff;
}

/* An imported Enfold site keeps its own capital caption title (Pro Linnanmaa source,
   PROLINNANMAA_VERTAILU_2026-09-10.md). Our own layouts never set capitals: allowlisted
   in apps/platform/src/lib/no-css-capitals.test.ts. */
.layout-chrome--enfold .hero--overlay .hero__heading {
	text-transform: uppercase;
	letter-spacing: 1px;
}

.hero--overlay .hero__subheading {
	display: inline-block;
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.3;
	opacity: 1;
	margin: 0 0 1px;
	/* Enfold .avia-caption-content p */
	padding: 10px 15px;
	max-width: none;
	white-space: normal;
	background: rgba(0, 0, 0, 0.5);
	color: #fff;
}

/* Enfold avia-size-small on home “Lue lisää”. */
.section.s-P5jSQKIAjcA- .button {
	min-height: 0;
	padding: 9px 10px 7px;
	font-size: 0.8125rem;
	line-height: 1.2;
}

/* Newsletter source is a ~276px sidebar newsbox; text column ~231px beside icon. */
.section.s-_OUxZmy9B7_x .section__inner,
.section.s-_OUxZmy9B7_x .richtext {
	max-width: 276px;
}
.section.s-_OUxZmy9B7_x .richtext a {
	display: inline-block;
	max-width: 231px;
}

@media (min-width: 640px) {
	/* Enfold promobox ≈ 92px tall; absolute button sits ~25px from top. */
	.container.container--boxed {
		align-items: center;
		min-height: 92px;
	}
	.container.container--boxed > .block--button {
		margin-top: 2px;
	}
}

/* Home body matches Enfold justify (inline style survives sanitize). */
.section.s-ujE9j2zqT_PS .richtext p {
	text-align: justify;
}

.section {
	padding: var(--space-lg, 32px) 0;
}

/* Full-width sections (fullBleedSections): `main` no longer keeps the content off the screen
   edges, so each section does. Same weight as the rule above, so a section's own side
   padding (and a full-bleed picture's zero padding) still wins. Heroes and carousels reach
   the edges on purpose. */
:where(html.layout-chrome--default.full-bleed-sections main)
	.section:where(:not(.section--hero):not(.section--carousel)) {
	padding-inline: var(--space-md, 16px);
}

/* "Kuuntele" (layout-tree library-blocks/listen.ts) sits in `main` between sections. Where `main`
   itself keeps the content off the screen edges, sections have no side padding, so the button
   has none either: it starts at the content edge, not 16 px inside it (6.11.2026). */
html:not(.full-bleed-sections):not(.layout-chrome--elementor) main > .listen {
	padding-inline: 0;
}

/* A hero whose text is beside or under its picture (not over it) keeps that text off the
   screen edges inside a full-width page: heroes have no section padding of their own (the
   photographer template on a phone, 19.10.2026). */
:where(html.layout-chrome--default.full-bleed-sections main)
	.section--hero:not(:has(.hero--overlay))
	> .section__inner {
	/* At least 16 px on a phone and 20 px wider (the template audit's gutter). */
	padding-inline: clamp(16px, 5vw, 24px);
	box-sizing: border-box;
}

.grid {
	display: grid;
	gap: var(--space-md, 16px);
	grid-template-columns: repeat(var(--grid-columns, 1), minmax(0, 1fr));
}

@media (min-width: 640px) {
	.grid {
		--grid-columns: var(--grid-columns-sm, 2);
	}
}

@media (min-width: 960px) {
	.grid {
		--grid-columns: var(--grid-columns-md, 3);
	}

	.section {
		padding: var(--space-xl, 4rem) 0;
	}
}

/* Header ----------------------------------------------------------------- */

.site-header {
	position: relative;
	/* Above carousel/hero so overflowing submenus stay opaque and readable. */
	z-index: 200;
	border-bottom: 1px solid var(--scheme-border);
	background: var(--site-header-bg, var(--scheme-bg));
	color: var(--site-header-fg, var(--scheme-fg));
}

/* Same as the page (huippuulkoasut 28.10.2026: a white header on a white page needed
   More settings); the base rule above already paints the page colour. */
.site-header--bg-page {
	background: var(--site-header-bg, var(--scheme-bg));
}

.site-header--bg-surface {
	background: var(--site-header-bg, var(--color-surface, var(--scheme-bg)));
}

.site-header--bg-primary {
	background: var(--site-header-bg, var(--color-primary, #0055ff));
	color: var(--site-header-fg, var(--color-onPrimary, #fff));
}

.site-header--bg-transparent {
	background: var(--site-header-bg, transparent);
	border-bottom-color: transparent;
}

.site-header--height-compact .site-header__inner {
	min-height: 56px;
}

.site-header--height-compact .site-header__logo {
	max-height: var(--site-logo-max-height, 36px);
}

.site-header--height-regular .site-header__inner {
	min-height: 88px;
}

.site-header--height-tall .site-header__inner {
	min-height: 112px;
}

.site-header--height-tall .site-header__logo {
	max-height: var(--site-logo-max-height, 72px);
}

.site-header--sticky {
	position: sticky;
	top: 0;
}

/* headerOverlay (E146): header floats over the first section and stays visible.
   Placed after sticky so `fixed` wins; the first section keeps its own top padding. */
.site-header.site-header--overlay {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	border-bottom-color: transparent;
}

/* headerInset (E146): logo and nav measured from the viewport edges, not the content column. */
.site-header.site-header--inset .site-header__inner {
	width: 100%;
	max-width: none;
	padding-inline: var(--site-header-inset-mobile, 16px);
	box-sizing: border-box;
}

@media (min-width: 960px) {
	.site-header.site-header--inset .site-header__inner {
		padding-inline: var(--site-header-inset);
	}
}

.site-header.site-header--fixed-height .site-header__inner {
	min-height: var(--site-header-min-height);
}

/* Scroll effects (settings scrollEffect): Alpine toggles .is-scrolled. */
.site-header--scroll-shrink .site-header__inner,
.site-header--scroll-shrink .site-header__logo,
.site-header--scroll-solidify {
	transition:
		min-height 0.2s ease,
		padding 0.2s ease,
		max-height 0.2s ease,
		background-color 0.2s ease,
		box-shadow 0.2s ease,
		border-color 0.2s ease;
}

.site-header--scroll-solidify:not(.is-scrolled) {
	background: transparent;
	border-bottom-color: transparent;
}

.site-header--scroll-solidify.is-scrolled {
	background: var(--site-header-bg, var(--scheme-bg));
	box-shadow: var(--site-header-shadow, 0 1px 0 var(--scheme-border));
}

.site-header--scroll-shrink.is-scrolled .site-header__inner {
	min-height: 48px;
	padding-block: 0.25rem;
}

.site-header--scroll-shrink.is-scrolled .site-header__logo {
	max-height: 32px;
}

.site-header--scroll-shrink.is-scrolled .site-header .menu__link,
.site-header--scroll-shrink.is-scrolled .site-header .menu__toggle,
.site-header--scroll-shrink.is-scrolled .site-header .locale-switcher__link {
	padding-block: 0.2rem;
	padding-inline: 0.55rem;
	font-size: 0.9em;
}

/* Enfold desktop nav hardcodes height: 88px — override when shrinking. */
@media (min-width: 960px) {
	.site-header--scroll-shrink.is-scrolled .site-header__inner {
		min-height: 48px;
	}

	.site-header--scroll-shrink.is-scrolled .site-nav--desktop > .menu {
		height: auto;
		min-height: 0;
	}

	.site-header--scroll-shrink.is-scrolled .site-nav--desktop > .menu > .menu__item > .menu__link,
	.site-header--scroll-shrink.is-scrolled .site-nav--desktop > .menu > .menu__item > .menu__toggle,
	.site-header--scroll-shrink.is-scrolled .locale-switcher--desktop .locale-switcher__link {
		height: auto;
		min-height: 40px;
		padding: 0.35rem 13px;
		font-size: 0.9em;
	}
}

@media (prefers-reduced-motion: reduce) {
	.site-header--scroll-shrink .site-header__inner,
	.site-header--scroll-shrink .site-header__logo,
	.site-header--scroll-solidify {
		transition: none;
	}
}

.site-header__inner {
	display: flex;
	min-height: 88px;
	align-items: center;
	gap: var(--space-md, 16px);
}

/* The site's name as a text logo (19.10.2026): it breaks between words or at the soft hyphens
   the platform puts in a long word at its Finnish syllables (layout-tree site-name.ts:
   "Henkilöstö-" / "palvelu"), never mid-word without a hyphen ("Henkilöst öpalvelu").
   `hyphens: auto` would not help: Chromium has no Finnish dictionary on most systems. A word
   without syllables to break at still breaks rather than runs under the button. The name is
   never cut with an ellipsis: it is the site's identity (WCAG 1.4.10: nothing lost at 320 px). */
.site-header__name,
.site-sidebar__name {
	overflow-wrap: break-word;
	hyphens: manual;
}

.site-header__brand {
	/* A 44 px tap target even for a text logo (docs/laatu checklist M2). */
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	min-width: 44px;
	margin-right: auto;
	font-family: var(--font-heading, inherit);
	font-size: 1.25rem;
	font-weight: 700;
	color: inherit;
	text-decoration: none;
}

.site-header__logo {
	/* A measured logo width (E156) wins over the theme's height cap: the source renders the
	   mark at a width, and capping the height shrank it (112px measured, 98px rendered). */
	max-height: var(--site-logo-max-height, 52px);
	width: var(--site-logo-width, auto);
	height: auto;
	object-fit: contain;
}

@media (max-width: 959px) {
	.site-header__logo {
		width: var(--site-logo-width-mobile, var(--site-logo-width, auto));
	}
}

.site-header__end {
	display: flex;
	align-items: center;
	gap: var(--space-sm, 8px);
	margin-left: auto;
}

.site-header__cta,
.site-header__cta-mobile .site-header__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0.55rem 1rem;
	border-radius: var(--button-radius, var(--radius-sm, 4px));
	background: var(--color-primary, #0055ff);
	color: var(--color-onPrimary, #fff);
	font-weight: var(--button-weight, 600);
	font-size: 0.875rem;
	text-decoration: none;
	white-space: nowrap;
}

.site-header__cta:hover,
.site-header__cta-mobile .site-header__cta:hover {
	filter: brightness(1.05);
	text-decoration: none;
}

.site-header__cta-mobile {
	margin: var(--space-md, 16px) 0 0;
	padding: 0 var(--space-md, 16px);
}

.site-sidebar__cta {
	margin-top: var(--space-md, 16px);
}

/* Header layouts: centered (logo mid, nav below) and split (nav | logo | nav). */
@media (min-width: 960px) {
	.site-header--layout-centered .site-header__inner {
		display: grid;
		grid-template-columns: 1fr auto 1fr;
		grid-template-areas:
			'mobile brand end'
			'nav nav nav';
		align-items: center;
		column-gap: var(--space-md, 16px);
		row-gap: 0;
		min-height: 0;
	}

	.site-header--layout-centered .site-header__mobile {
		grid-area: mobile;
		display: none;
	}

	.site-header--layout-centered .site-header__brand {
		grid-area: brand;
		margin-right: 0;
		justify-self: center;
	}

	.site-header--layout-centered .site-header__end {
		grid-area: end;
		margin-left: 0;
		justify-self: end;
	}

	.site-header--layout-centered .site-header__nav-row {
		grid-area: nav;
		justify-self: center;
		width: 100%;
	}

	.site-header--layout-centered .site-header__nav-row > .menu {
		justify-content: center;
		height: auto;
		min-height: 48px;
	}

	.site-header--layout-centered .site-header__nav-row > .menu > .menu__item > .menu__link,
	.site-header--layout-centered .site-header__nav-row > .menu > .menu__item > .menu__toggle {
		height: auto;
		min-height: 48px;
	}

	.site-header--layout-split .site-header__inner {
		display: grid;
		grid-template-columns: 1fr auto 1fr;
		align-items: center;
		column-gap: var(--space-md, 16px);
	}

	.site-header--layout-split .site-header__brand {
		margin-right: 0;
		justify-self: center;
	}

	.site-header--layout-split .site-nav--split-start {
		justify-self: end;
	}

	.site-header--layout-split .site-header__end {
		margin-left: 0;
		justify-self: start;
		flex-wrap: wrap;
	}

	.site-header--layout-split .site-nav--split-start > .menu,
	.site-header--layout-split .site-nav--split-end > .menu {
		justify-content: inherit;
	}

	.site-header--layout-split .site-nav--split-start > .menu {
		justify-content: flex-end;
	}

	.site-header--layout-split .site-nav--split-end > .menu {
		justify-content: flex-start;
	}
}

@media (max-width: 959px) {
	.site-header--layout-centered .site-header__end,
	.site-header--layout-split .site-header__end {
		display: none;
	}

	.site-header--layout-centered .site-header__brand,
	.site-header--layout-split .site-header__brand {
		margin-right: auto;
	}
}

.site-nav--desktop,
.locale-switcher--desktop {
	display: none;
}

/* TranslatePress-like flag dropdown -------------------------------------- */

.locale-switcher--flags {
	position: relative;
	display: flex;
	align-items: center;
}

.locale-switcher__current {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.75rem;
	min-height: 2.75rem;
	padding: 0.5rem 0.75rem;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: inherit;
	cursor: pointer;
}

.locale-switcher__flag {
	display: inline-flex;
	line-height: 0;
}

.locale-switcher__flag-svg {
	display: block;
	width: 18px;
	height: 12px;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15);
}

.locale-switcher__flag-fallback {
	display: inline-block;
	min-width: 1.5rem;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.04em;
}

.locale-switcher__dropdown {
	display: none;
	position: absolute;
	top: 100%;
	right: 0;
	z-index: 320;
	isolation: isolate;
	min-width: 4.5rem;
	margin: 0;
	padding: 0.35rem 0;
	list-style: none;
	background-color: #ffffff;
	border: 1px solid #929292;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.35);
	text-align: center;
}

.locale-switcher__dropdown--open,
.locale-switcher--flags:hover > .locale-switcher__dropdown,
.locale-switcher--flags:focus-within > .locale-switcher__dropdown,
.no-js .locale-switcher--flags:focus-within > .locale-switcher__dropdown {
	display: block;
}

.locale-switcher__dropdown .locale-switcher__item {
	display: block;
	margin: 0;
}

.locale-switcher__dropdown .locale-switcher__link {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 2.5rem;
	padding: 0.55rem 1rem;
	opacity: 1;
	color: inherit;
	text-decoration: none;
}

.locale-switcher__dropdown .locale-switcher__link:hover,
.locale-switcher__dropdown .locale-switcher__link--current {
	background: color-mix(in srgb, var(--site-header-link-hover, #47b8b4) 10%, #fff);
}

.locale-switcher--flags-flat .locale-switcher__list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	align-items: center;
}

.locale-switcher--flags-flat .locale-switcher__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.5rem;
	min-height: 2.5rem;
	padding: 0.35rem;
	opacity: 1;
}

.locale-switcher--flags-flat .locale-switcher__link[aria-current='true'] {
	outline: 2px solid var(--site-header-link-hover, var(--color-primary, #47b8b4));
	outline-offset: 2px;
}

@media (min-width: 960px) {
	.layout-chrome--elementor .locale-switcher--flags.locale-switcher--desktop {
		display: flex;
		align-items: center;
		align-self: center;
	}

	.locale-switcher--flags.locale-switcher--desktop {
		display: flex;
		align-items: center;
	}

	.layout-chrome--elementor .locale-switcher__current {
		min-height: 68px;
		padding: 18px 16px;
	}
}

/* Menu ------------------------------------------------------------------- */

.menu,
.locale-switcher__list,
.site-footer__links {
	display: flex;
	margin: 0;
	padding: 0;
	list-style: none;
}

.menu {
	align-items: center;
	gap: var(--space-md, 16px);
}

.menu__item {
	position: relative;
	display: flex;
	align-items: center;
	gap: var(--space-xs, 4px);
}

.menu__link,
.menu__toggle,
.locale-switcher__link {
	color: var(--color-muted, inherit);
	text-decoration: none;
	padding: 0.25rem 0;
	font-size: 0.8125rem;
	font-weight: 600;
}

.menu__toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	border: 0;
	border-radius: var(--radius-sm, 4px);
	background: transparent;
	/* A button does not inherit the font: take the family, keep the links' size and weight. */
	font-family: inherit;
	line-height: inherit;
	cursor: pointer;
}

/* Header nav: colors from settings (--site-header-fg / --site-header-link-hover).
   The links are drawn at full opacity (28.10.2026): at the muted 0.55 of before, dark text on a
   light bar fell to 4.1:1 and white text on a brand colour lower still (WCAG 1.4.3,
   docs/laatu/SAAVUTETTAVUUS_2026-10-28.md). Hover and the current page are told by weight and
   the hover colour. A site that set --site-header-nav-opacity keeps its value. */
.site-header .menu__link,
.site-header .menu__toggle,
.site-header .locale-switcher__link {
	color: var(--site-header-fg, inherit);
	opacity: var(--site-header-nav-opacity, 1);
	text-decoration: none;
}

/* The language links are small text: they keep full opacity, the current one is told by its
   colour and weight. At the muted 0.55 the other languages failed the contrast check on light
   bars (WCAG 1.4.3, docs/laatu/SAAVUTETTAVUUS_2026-10-21.md). */
.site-header .locale-switcher__link {
	opacity: 1;
}

/* Measured per-item look from an imported header bar (E148): a filled pill, a coloured or
   bolder label, a text separator before the item and a gap after it. Placed after the
   bar-wide nav colour so the item the source singled out keeps its own look. */
.menu__item--styled {
	margin-inline-end: var(--menu-item-gap-after, 0);
	/* A measured pill keeps its own height instead of stretching to the bar's. */
	display: flex;
	align-items: center;
}

html .site-header .menu__item--styled > .menu__link,
html .site-header .menu__item--styled > .menu__toggle {
	background: var(--menu-item-bg, none);
	border-radius: var(--menu-item-radius, 0);
	color: var(--menu-item-fg, var(--site-header-fg, inherit));
	font-weight: var(--menu-item-weight, inherit);
	opacity: 1;
}

.menu__item--separated {
	display: flex;
	align-items: center;
}

.menu__item--separated::before {
	content: var(--menu-item-separator, '|');
	opacity: 0.5;
	display: inline-flex;
	justify-content: center;
	min-width: var(--menu-item-separator-space, var(--space-md));
}

/* navFontSize setting (E81): desktop top-level links only; submenus keep their own size. */
.site-nav--desktop > .menu > .menu__item > .menu__link,
.site-nav--desktop > .menu > .menu__item > .menu__toggle {
	font-size: var(--site-nav-size, inherit);
}

.menu__link:hover,
.menu__link[aria-current],
.menu__toggle:hover,
.menu__toggle[aria-expanded='true'],
.locale-switcher__link:hover,
.locale-switcher__link[aria-current] {
	text-decoration: underline;
	text-underline-offset: 0.35em;
	text-decoration-thickness: 2px;
}

.menu__link[aria-current],
.locale-switcher__link[aria-current] {
	color: var(--color-primary);
	font-weight: 600;
}

.site-header .menu__link[aria-current],
.site-header .locale-switcher__link[aria-current],
.site-header .menu__link:hover,
.site-header .menu__toggle:hover,
.site-header .menu__toggle[aria-expanded='true'],
.site-header .locale-switcher__link:hover {
	color: var(--site-header-link-hover, var(--site-header-fg, inherit));
	opacity: 1;
	font-weight: 600;
	text-decoration: none;
}

.menu__chevron {
	width: 0.5rem;
	height: 0.5rem;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
	flex: 0 0 auto;
}

.menu__toggle[aria-expanded='true'] .menu__chevron {
	transform: translateY(2px) rotate(225deg);
}

/* Submenu palette. Light sites keep the opaque white panel with the site text colour.
   Dark sites (html.is-dark-site, decided from the tokens at render time) take the
   header palette instead, so panel and links always share one readable pair and
   the owner's headerBackground / headerColor / headerLinkHover carry over. */
.menu__submenu {
	--submenu-bg: #ffffff;
	--submenu-fg: var(--color-text, #111);
	--submenu-border: var(--color-border, #e5e5e5);
	--submenu-divider: var(--color-border, #e8e8e8);
	--submenu-hover-fg: var(--site-header-link-hover, var(--color-primary, #47b8b4));
	--submenu-hover-bg: color-mix(in srgb, var(--site-header-link-hover, #47b8b4) 8%, #fff);
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 300;
	isolation: isolate;
	min-width: 15rem;
	padding: 0;
	/* Fully opaque panel — carousel opacity layers must not show through. */
	background-color: var(--submenu-bg);
	color: var(--submenu-fg);
	border: 1px solid var(--submenu-border);
	border-radius: 2px;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.14);
	text-align: start;
	opacity: 1;
}

/* html.is-dark-site beats the layout-chrome overrides above regardless of order. */
html.is-dark-site .menu__submenu {
	--submenu-bg: var(--site-header-bg, var(--scheme-bg, #111));
	--submenu-fg: var(--site-header-fg, var(--scheme-fg, #fff));
	--submenu-border: color-mix(in srgb, var(--submenu-fg) 30%, transparent);
	--submenu-divider: color-mix(in srgb, var(--submenu-fg) 18%, transparent);
	--submenu-hover-fg: var(--site-header-link-hover, var(--submenu-fg));
	--submenu-hover-bg: color-mix(in srgb, var(--submenu-fg) 14%, transparent);
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45);
}

.menu__submenu--open,
.no-js .menu__item:focus-within > .menu__submenu {
	display: block;
}

/* navOpenOnHover (E140): the menu snippet opens desktop submenus on pointer hover (Alpine,
   so click, Escape and keyboard keep working). Invisible bridge lets the pointer reach the panel. */
html.nav-hover .site-nav--desktop .menu__item--has-children > .menu__submenu::before {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 100%;
	height: 12px;
}

.menu__submenu .menu,
.menu__submenu .menu.menu--level-1 {
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	height: auto !important;
	min-height: 0;
	gap: 0;
	margin: 0;
	padding: 0;
}

.menu__submenu .menu__item {
	display: block;
	height: auto;
	margin: 0;
	border-bottom: 1px solid var(--submenu-divider);
}

.menu__submenu .menu__item:last-child {
	border-bottom: 0;
}

.menu__submenu .menu__link {
	display: block;
	height: auto !important;
	min-height: 0;
	padding: 0.7rem 1.1rem;
	line-height: 1.3;
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--submenu-fg);
	opacity: 1;
	text-decoration: none;
	white-space: nowrap;
}

.menu__submenu .menu__link:hover,
.menu__submenu .menu__link[aria-current] {
	color: var(--submenu-hover-fg);
	background: var(--submenu-hover-bg);
	text-decoration: none;
}

/* Keyboard focus: ring in the link's own colour, so it contrasts with the panel by
   construction (the amber --focus-ring is 1.7:1 on white); inset so the header
   does not clip it. */
.menu__submenu .menu__link:focus-visible {
	outline: 3px solid currentColor;
	outline-offset: -3px;
}

/* Rich dropdown item (E141): optional icon + label + description. Appearance settings
   (submenuBackground, submenuWidth …) come from the header's <style data-submenu-style>. */
.menu__link--rich,
.menu__submenu .menu__link.menu__link--rich {
	display: flex;
	align-items: flex-start;
	gap: 0.75em;
	white-space: normal;
}

/* A list with descriptions: rows fill the panel, so a description has the panel's width to
   wrap in (each row shrank to its label before, editor test 6.11.2026). */
.menu__submenu .menu:has(> .menu__item--rich) {
	align-items: stretch;
}

/* The panel sizes to its labels; descriptions wrap inside that width instead of widening it. */
.menu__submenu .menu__label {
	white-space: nowrap;
}

.menu__icon {
	flex: 0 0 auto;
	align-self: center;
	width: 30px;
	height: auto;
	max-height: 4em;
	object-fit: contain;
}

.menu__text {
	display: flex;
	flex-direction: column;
	/* The row's width (the panel's, set by its widest label): a description wraps across the
	   panel, not inside its own short label (editor test 6.11.2026: "Hyödyt" left its
	   description 40 px wide and seven lines tall). */
	flex: 1 1 auto;
	min-width: 0;
}

.menu__description {
	display: block;
	width: 0;
	min-width: 100%;
	margin-top: 0.4em;
	font-family: var(--font-body, inherit);
	font-size: 0.8125rem;
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: normal;
	/* Readable on the panel by construction: softened panel text colour unless set. */
	color: var(
		--submenu-description-fg,
		color-mix(in srgb, var(--submenu-fg, currentColor) 72%, transparent)
	);
}

.site-nav--mobile .menu__label {
	white-space: normal;
}

.site-nav--mobile .menu__icon {
	width: 24px;
}

/* Header look (E223): a floating rounded bar, a grey pill under the pointer, and a mega
   menu whose second-level parents are titled columns. */
.menu__icon-box {
	display: contents;
}

.site-header--floating,
.site-header--floating.site-header--bg-surface,
.site-header--floating.site-header--bg-primary {
	background: transparent;
	border-bottom: 0;
	padding-top: 14px;
}

.site-header--floating .site-header__inner {
	max-width: min(100% - 2rem, 1120px);
	padding-inline: 24px;
	border-radius: 999px;
	background: var(--site-header-bg, var(--color-surface, #fff));
	box-shadow:
		0 1px 2px rgba(8, 10, 16, 0.04),
		0 12px 32px -18px rgba(8, 10, 16, 0.25);
}

/* On a phone the logo, the menu button and the call to action do not fit one row: the
   button dropped under the logo and the bar became a tall blob. The menu drawer has the
   same button, so the bar drops its own. */
@media (max-width: 559px) {
	.site-header--floating .site-header__inner {
		flex-wrap: nowrap;
	}

	.site-header--floating .site-header__inner > .site-header__cta {
		display: none;
	}
}

/* The same on an ordinary bar: logo, call to action and menu button share one row on a phone
   instead of the button dropping under the logo and doubling the bar's height. The button
   stays (on a booking site it is the one action that matters) but gets narrower, and a long
   name wraps onto a second line. */
@media (max-width: 959px) {
	.site-header--layout-inline.site-header--has-cta .site-header__inner {
		flex-wrap: nowrap;
		gap: var(--space-sm, 8px);
	}

	.site-header--layout-inline.site-header--has-cta .site-header__brand {
		min-width: 0;
		flex: 0 1 auto;
	}

	.site-header--layout-inline.site-header--has-cta .site-header__name {
		display: block;
		line-height: 1.15;
	}

	.site-header--layout-inline.site-header--has-cta .site-header__inner > .site-header__cta {
		order: 1;
		flex: 0 0 auto;
		margin-left: auto;
		padding: 0.45rem 0.8rem;
	}

	.site-header--layout-inline.site-header--has-cta .site-header__mobile {
		order: 2;
		flex: 0 0 auto;
		margin-left: 0;
	}
}

/* The bar's glass is a layer behind its content, not a filter on the bar itself: an element
   with backdrop-filter limits what its descendants can blur to its own box, and the menu
   panel inside the bar then showed the page behind it sharp, text over text. */
.site-header--floating.site-header--glass .site-header__inner {
	position: relative;
	isolation: isolate;
	background: transparent;
}

.site-header--floating.site-header--glass .site-header__inner::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: inherit;
	background: color-mix(in srgb, var(--site-header-bg, #fff) 72%, transparent);
	backdrop-filter: blur(20px) saturate(1.6);
	-webkit-backdrop-filter: blur(20px) saturate(1.6);
	pointer-events: none;
}

/* Without backdrop-filter the panel and the bar are opaque, so text stays readable. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.site-header--glass .site-nav--desktop .menu__submenu {
		background-color: var(--submenu-bg);
	}

	.site-header--floating.site-header--glass .site-header__inner::before {
		background: var(--site-header-bg, #fff);
	}
}

.site-header--pill-hover
	.site-nav--desktop
	> .menu
	> .menu__item
	> :is(.menu__link, .menu__toggle) {
	padding: 8px 15px;
	border-radius: 999px;
	transition: background-color 0.15s ease;
}

.site-header--pill-hover
	.site-nav--desktop
	> .menu
	> .menu__item
	> :is(.menu__link, .menu__toggle):hover,
.site-header--pill-hover
	.site-nav--desktop
	> .menu
	> .menu__item
	> .menu__toggle[aria-expanded='true'] {
	background: color-mix(in srgb, var(--site-header-fg, #111827) 7%, transparent);
	color: var(--site-header-fg, inherit);
}

.site-header--pill-hover .site-nav--desktop .menu__chevron {
	transition: transform 0.2s ease;
}

.site-header--pill-hover .site-nav--desktop > .menu > .menu__item {
	display: flex;
	align-items: center;
}

.site-header--pill-hover
	.site-nav--desktop
	> .menu
	> .menu__item
	> :is(.menu__link, .menu__toggle) {
	height: auto !important;
	min-height: 0;
}

/* Rows fill their column, so the icons line up; columns are as wide as their rows. */
.site-header--icon-tiles .site-nav--desktop .menu__submenu .menu,
.site-header--mega .site-nav--desktop .menu__submenu .menu {
	align-items: stretch;
}

.site-header--mega .site-nav--desktop .menu__submenu:has(.menu__group) {
	width: max-content;
	max-width: calc(100vw - 32px);
}

.site-header--mega .site-nav--desktop .menu__submenu .menu.menu--level-1:has(> .menu__group) {
	grid-auto-columns: max-content;
}

/* The pill is lower than the bar: open the panel below the bar, and keep the pointer's way
   to it covered so a hover-opened menu does not close on the way down. */
.site-header--pill-hover .site-nav--desktop > .menu > .menu__item > .menu__submenu {
	margin-top: 18px;
}

html.nav-hover
	.site-header--pill-hover
	.site-nav--desktop
	> .menu
	> .menu__item--has-children
	> .menu__submenu::before {
	height: 32px;
}

.site-header--glass .site-nav--desktop .menu__submenu {
	background-color: color-mix(in srgb, var(--submenu-bg) 72%, transparent);
	backdrop-filter: blur(20px) saturate(1.6);
	-webkit-backdrop-filter: blur(20px) saturate(1.6);
	box-shadow:
		0 30px 60px -22px rgba(8, 10, 16, 0.32),
		0 2px 8px -4px rgba(8, 10, 16, 0.16);
}

.site-header--mega .site-nav--desktop .menu__submenu:has(.menu__group) {
	padding: 12px;
}

.site-header--mega .site-nav--desktop .menu__submenu .menu.menu--level-1:has(> .menu__group) {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(16rem, 1fr);
	gap: 0 20px;
}

.site-header--mega .menu__submenu .menu__group {
	border-bottom: 0;
}

.menu__group-title {
	display: block;
	padding: 6px 12px 8px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.02em;
	color: color-mix(in srgb, var(--submenu-fg, currentColor) 65%, transparent);
}

.site-header--mega .menu__submenu .menu__group .menu__item {
	border-bottom: 0;
}

.site-header--icon-tiles .menu__submenu .menu__link,
.site-header--mega .menu__submenu .menu__group .menu__link {
	border-radius: 12px;
	transition: background-color 0.15s ease;
}

.site-header--icon-tiles .site-nav--desktop .menu__submenu:not(:has(.menu__group)) {
	padding: 8px;
}

.site-header--icon-tiles .site-nav--desktop .menu__submenu .menu__item {
	border-bottom: 0;
}

.site-header--icon-tiles .site-nav--desktop .menu__submenu .menu__link--rich,
.site-header--mega .site-nav--desktop .menu__submenu .menu__group .menu__link--rich {
	justify-content: flex-start;
	align-items: center;
	min-width: 17rem;
	padding: 10px 12px;
	text-align: start;
}

.site-header--icon-tiles .site-nav--desktop .menu__submenu .menu__text,
.site-header--mega .site-nav--desktop .menu__submenu .menu__group .menu__text {
	align-items: flex-start;
}

/* The row is wide enough for its description: no wrapping to the label's width. */
.site-header--icon-tiles .site-nav--desktop .menu__submenu .menu__description,
.site-header--mega .site-nav--desktop .menu__submenu .menu__group .menu__description {
	width: auto;
	min-width: 0;
	margin-top: 0.15em;
	white-space: nowrap;
}

.site-header--icon-tiles .site-nav--desktop .menu__submenu .menu__link:is(:hover, :focus-visible),
.site-header--mega
	.site-nav--desktop
	.menu__submenu
	.menu__group
	.menu__link:is(:hover, :focus-visible) {
	background: color-mix(in srgb, var(--submenu-fg, #111827) 6%, transparent);
	color: var(--submenu-fg);
}

.site-header--icon-tiles .menu__icon-box {
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	align-self: center;
	width: 32px;
	height: 32px;
	box-sizing: border-box;
	border: 1px solid color-mix(in srgb, var(--submenu-fg, #111827) 10%, transparent);
	border-radius: 9px;
	background: color-mix(in srgb, #fff 55%, transparent);
	transition:
		background-color 0.15s ease,
		border-color 0.15s ease;
}

.site-header--icon-tiles .menu__icon-box .menu__icon {
	width: 18px;
	max-height: 18px;
	transition: filter 0.15s ease;
}

.site-header--icon-tiles .menu__link--rich:is(:hover, :focus-visible) .menu__icon-box {
	background: var(--color-primary, #1d4ed8);
	border-color: transparent;
}

/* One-colour icons turn white on the primary tile. */
.site-header--icon-tiles .menu__link--rich:is(:hover, :focus-visible) .menu__icon {
	filter: brightness(0) invert(1);
}

.site-header--item-arrow .menu__submenu .menu__link--rich {
	position: relative;
	padding-right: 2.5rem;
}

.site-header--item-arrow .menu__submenu .menu__link--rich::after {
	content: '→';
	position: absolute;
	right: 0.9rem;
	top: 50%;
	opacity: 0;
	transform: translate(-4px, -50%);
	transition:
		opacity 0.15s ease,
		transform 0.15s ease;
}

.site-header--item-arrow .menu__submenu .menu__link--rich:is(:hover, :focus-visible)::after {
	opacity: 0.6;
	transform: translate(0, -50%);
}

/* The row padding set for tiles must not take the arrow's room. */
.site-header--item-arrow .site-nav--desktop .menu__submenu .menu__link.menu__link--rich,
.site-header--item-arrow
	.site-nav--desktop
	.menu__submenu
	.menu__group
	.menu__link.menu__link--rich {
	padding-right: 2.75rem;
}

@media (prefers-reduced-motion: reduce) {
	.site-header--item-arrow .menu__submenu .menu__link--rich::after,
	.site-header--icon-tiles .menu__icon-box,
	.site-header--pill-hover .site-nav--desktop .menu__chevron {
		transition: none;
	}
}

/* Megavalikko (docs/komponentit/MEGAVALIKKO_JA_PIKALINKIT_2026-11-06.md): a column's title is a
   link when it has a page, a column may have a short description under its title, and one
   item of a column may be its featured link, a card with a picture. On a phone the columns
   are plain titled lists inside the menu's open item (one level of accordion only). */
a.menu__group-title {
	text-decoration: none;
}

a.menu__group-title:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

a.menu__group-title:focus-visible {
	outline: 3px solid currentColor;
	outline-offset: -3px;
	border-radius: 4px;
}

.menu__group-description {
	display: block;
	max-width: 18rem;
	padding: 0 12px 8px;
	font-size: 13px;
	line-height: 1.4;
	color: color-mix(in srgb, var(--submenu-fg, currentColor) 70%, transparent);
	white-space: normal;
}

.menu__submenu .menu__item.menu__feature {
	border-bottom: 0;
}

.menu__submenu .menu__link.menu__feature-link {
	display: grid;
	gap: 8px;
	max-width: 18rem;
	margin: 6px 0 2px;
	padding: 10px 12px 12px;
	border-radius: 12px;
	background: color-mix(in srgb, var(--submenu-fg, #111827) 5%, transparent);
	white-space: normal;
}

/* Header designs give dropdown links a row layout (label beside the icon); the featured card
   stacks its picture above the text in every design. */
.site-header
	.site-nav--desktop
	.menu__submenu
	.menu__item.menu__feature
	> .menu__link.menu__feature-link {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	min-width: 0;
	white-space: normal;
}

/* The classic header: a mega panel hangs from the right edge of the whole menu, not from its
   item, so a wide panel opened from a right-hand item stays inside the window. */
.site-header--mega:not(.site-header--v) .site-nav--desktop > .menu {
	position: relative;
}

.site-header--mega:not(.site-header--v)
	.site-nav--desktop
	> .menu
	> .menu__item--has-children:has(> .menu__submenu .menu__group) {
	position: static;
}

.site-header--mega:not(.site-header--v)
	.site-nav--desktop
	> .menu
	> .menu__item
	> .menu__submenu:has(.menu__group) {
	left: auto;
	right: 0;
}

.menu__feature-image {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: 8px;
}

.menu__feature-link .menu__text {
	display: grid;
	gap: 2px;
}

.menu__feature-link .menu__description {
	font-weight: 400;
	white-space: normal;
}

/* In the phone menu a description uses the row's width; wrapping it to the label's width left
   one word per line. */
.site-nav--mobile .menu__submenu .menu__text {
	flex: 1 1 auto;
	min-width: 0;
}

.site-nav--mobile .menu__submenu .menu__description {
	width: auto;
	min-width: 0;
}

.site-nav--mobile .menu__feature-image {
	display: none;
}

.site-nav--mobile .menu__submenu .menu__link.menu__feature-link {
	max-width: none;
	margin: 0;
	background: none;
	padding: 0.7rem 1.1rem;
}

.site-nav--mobile .menu__group-title {
	padding-top: 14px;
	font-size: 13px;
}

/* Yläpalkin pikalinkit: the row above the header. */
.site-utility {
	position: relative;
	z-index: 201;
	font-size: 13.5px;
	line-height: 1.4;
}

.site-utility--primary {
	background: var(--color-primary, #0055ff);
	color: var(--color-onPrimary, #fff);
}

.site-utility--surface {
	background: var(--color-surface, var(--scheme-bg));
	color: var(--scheme-fg, var(--color-text));
	border-bottom: 1px solid var(--scheme-border, rgba(0, 0, 0, 0.1));
}

.site-utility__inner {
	box-sizing: border-box;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	gap: 4px 24px;
	width: min(100% - 2 * var(--site-gutter, 28px), var(--size-contentMaxWidth, 1200px));
	min-height: 36px;
	margin-inline: auto;
}

.site-utility__contact {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 20px;
	margin: 0 auto 0 0;
}

.site-utility__links {
	display: flex;
	flex-wrap: wrap;
	gap: 0 4px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-utility__link,
.site-utility .locale-switcher__link {
	display: inline-flex;
	align-items: center;
	min-height: 32px;
	padding-inline: 6px;
	color: inherit;
	text-decoration: none;
	text-underline-offset: 3px;
}

.site-utility__link:hover,
.site-utility .locale-switcher__link:hover {
	text-decoration: underline;
}

.site-utility__link:focus-visible,
.site-utility .locale-switcher__link:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 0;
	border-radius: 4px;
}

.site-utility .locale-switcher,
.site-topbar .locale-switcher--utility {
	display: block;
	margin: 0;
	color: inherit;
}

.site-topbar .site-utility__nav {
	margin-inline-start: auto;
}

.site-topbar .site-utility__links .site-utility__link {
	color: inherit;
}

/* The links in the phone menu, under the main items and smaller than them. */
.site-nav-utility {
	display: flex;
	flex-wrap: wrap;
	gap: 0 8px;
	margin: var(--space-md, 16px) 0 0;
	padding: var(--space-md, 16px) 0 0;
	border-top: 1px solid var(--scheme-border, rgba(0, 0, 0, 0.12));
	list-style: none;
}

.site-nav-utility .site-utility__link {
	min-height: 44px;
	padding-inline: 0 12px;
	color: var(--site-mobile-nav-fg, var(--scheme-fg));
	font-size: 15px;
}

@media (max-width: 959px) {
	.site-utility--wide-only,
	.site-utility__nav--wide-only {
		display: none;
	}

	.site-utility__inner {
		justify-content: flex-start;
		gap: 0 12px;
	}

	.site-utility__link {
		min-height: 44px;
	}
}

@media (min-width: 960px) {
	.site-nav-utility {
		display: none;
	}
}

/* "Linkkivalikko" in the utility row: the dropdown block, as small as the row's links. */
.site-utility__menu {
	color: inherit;
}

.site-utility__menu-button {
	display: inline-flex;
	gap: 0.35rem;
	min-height: 32px;
	padding-inline: 6px;
	border-radius: 4px;
	color: inherit;
	font: inherit;
}

.site-utility__menu-button:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 0;
}

.site-utility .dropdown__list,
.site-topbar .dropdown__list {
	right: 0;
	left: auto;
	font-size: 15px;
}

.site-nav-utility-menu {
	margin-top: var(--space-sm, 8px);
	color: var(--site-mobile-nav-fg, var(--scheme-fg));
}

.site-nav-utility-menu .site-utility__menu-button {
	min-height: 44px;
	padding-inline: 0;
	font-size: 15px;
}

.site-nav-utility-menu .dropdown__list {
	position: static;
	box-shadow: none;
}

@media (max-width: 959px) {
	.site-utility__menu-button {
		min-height: 44px;
	}
}

/* "Ylätunnisteen kuvakkeet": icon links beside the menu button; the name is a tooltip that
   Esc hides (is-tip-off) or, with the style "text", beside the icon on a wide screen. */
.site-icons {
	display: flex;
	align-items: center;
	gap: 2px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-icons__item {
	position: relative;
}

.site-icons__link {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-width: 44px;
	min-height: 44px;
	padding: 0 6px;
	border-radius: var(--radius-sm, 4px);
	color: inherit;
	text-decoration: none;
}

.site-icons__link:hover {
	background: color-mix(in srgb, currentColor 8%, transparent);
}

.site-icons__link:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.site-icons__icon {
	flex: none;
	width: 24px;
	height: 24px;
}

.site-icons__label {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.site-icons__link:is(:hover, :focus-visible) .site-icons__label {
	z-index: 210;
	top: calc(100% - 2px);
	left: 50%;
	width: auto;
	height: auto;
	padding: 4px 8px;
	overflow: visible;
	clip-path: none;
	border-radius: 4px;
	background: #1d2127;
	color: #fff;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.3;
	transform: translateX(-50%);
}

.site-icons.is-tip-off .site-icons__link .site-icons__label {
	width: 1px;
	height: 1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
}

.site-icons__count {
	position: absolute;
	top: 4px;
	right: 2px;
	min-width: 18px;
	height: 18px;
	padding: 0 4px;
	border-radius: 9px;
	background: var(--color-primary, #0055ff);
	color: var(--color-onPrimary, #fff);
	font-size: 12px;
	font-weight: 700;
	line-height: 18px;
	text-align: center;
	box-sizing: border-box;
}

.site-icons__count[hidden] {
	display: none;
}

.site-sidebar .site-icons {
	margin-top: var(--space-md, 16px);
}

@media (min-width: 960px) {
	.site-icons--narrow-only {
		display: none;
	}

	.site-icons--text .site-icons__link {
		padding-inline: 8px;
	}

	.site-icons--text .site-icons__label,
	.site-icons--text .site-icons__link:is(:hover, :focus-visible) .site-icons__label,
	.site-icons--text.is-tip-off .site-icons__link .site-icons__label {
		position: static;
		width: auto;
		height: auto;
		padding: 0;
		overflow: visible;
		clip-path: none;
		background: none;
		color: inherit;
		font-size: 0.875rem;
		transform: none;
	}
}

@media (max-width: 959px) {
	.site-icons--wide-only {
		display: none;
	}

	.site-header--layout-inline .site-header__inner > .site-icons {
		order: 1;
		margin-left: auto;
	}

	.site-header--layout-inline .site-header__inner > .site-header__cta ~ .site-icons {
		margin-left: 0;
	}

	/* Icons and the menu button on one row: the name wraps instead (as with a CTA). */
	.site-header--layout-inline .site-header__inner:has(> .site-icons) {
		flex-wrap: nowrap;
		gap: var(--space-sm, 8px);
	}

	.site-header--layout-inline .site-header__inner:has(> .site-icons) > .site-header__brand {
		min-width: 0;
		flex: 0 1 auto;
	}

	.site-header--layout-inline .site-header__inner:has(> .site-icons) .site-header__name {
		display: block;
		line-height: 1.15;
	}

	.site-header--layout-inline .site-header__inner:has(> .site-icons) > .site-icons {
		flex: 0 0 auto;
	}

	.site-header--layout-inline .site-header__inner:has(> .site-icons) > .site-header__mobile {
		order: 2;
		flex: 0 0 auto;
		margin-left: 0;
	}

	.site-header--layout-centered .site-header__inner > .site-icons,
	.site-header--layout-split .site-header__inner > .site-icons,
	.site-header--sidebar-mobile .site-header__inner > .site-icons {
		margin-left: auto;
	}

	.site-header--layout-centered
		.site-header__inner
		> .site-icons
		+ .site-header__end
		+ .site-header__mobile,
	.site-header--layout-split .site-header__inner > .site-icons + .site-header__mobile,
	.site-header--sidebar-mobile .site-header__inner > .site-icons + .site-header__mobile {
		margin-left: 0;
	}
}

/* Mobile navigation ------------------------------------------------------ */

.site-header__mobile {
	margin-left: auto;
}

.site-mobile-nav {
	position: relative;
}

/* A dropdown panel spans the whole header, not the burger (E157): the wrapper must not be
   the containing block, or `inset-inline: 0` resolves to the 60px button. */
.site-mobile-nav--dropdown {
	position: static;
}

.site-header__toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	/* Measured burger size (E157); the theme's 2.75rem is the fallback. */
	width: var(--site-header-toggle-size, 2.75rem);
	height: var(--site-header-toggle-size, 2.75rem);
	padding: 0;
	border: 1px solid var(--scheme-border);
	border-radius: var(--radius-sm, 4px);
	background: transparent;
	color: inherit;
	cursor: pointer;
	/* Stay above the drawer so the icon morph stays visible (Enfold). */
	position: relative;
	z-index: 70;
	/* Do not inherit global `button { transform }` — only the bars animate. */
	transform: none !important;
	box-shadow: none !important;
	transition:
		background-color 0.15s ease,
		border-color 0.15s ease,
		color 0.15s ease;
}

.site-header__toggle:hover,
.site-header__toggle:active,
.site-header__toggle:focus-visible {
	transform: none !important;
	box-shadow: none !important;
}

.site-header__toggle:focus-visible {
	box-shadow: var(--focus-ring-shadow) !important;
}

.site-header__toggle-bars {
	/* Absolute bars so open-state X meets on one centre point. */
	display: block;
	position: relative;
	width: 1.15rem;
	height: 14px;
}

.site-header__toggle-bars span {
	display: block;
	position: absolute;
	left: 0;
	width: 100%;
	height: 2px;
	background: currentColor;
	border-radius: 1px;
	transform-origin: center;
	transition:
		transform 0.2s ease,
		opacity 0.2s ease,
		top 0.2s ease;
}

.site-header__toggle-bars span:nth-child(1) {
	top: 0;
}

.site-header__toggle-bars span:nth-child(2) {
	top: 6px;
}

.site-header__toggle-bars span:nth-child(3) {
	top: 12px;
}

/* Morph bars → single X (Enfold-style; toggle is the only close control). */
.site-header__toggle[aria-expanded='true'] .site-header__toggle-bars span:nth-child(1) {
	top: 6px;
	transform: rotate(45deg);
}

.site-header__toggle[aria-expanded='true'] .site-header__toggle-bars span:nth-child(2) {
	opacity: 0;
}

.site-header__toggle[aria-expanded='true'] .site-header__toggle-bars span:nth-child(3) {
	top: 6px;
	transform: rotate(-45deg);
}

.site-nav-drawer {
	display: flex;
	flex-direction: column;
	position: fixed;
	inset-block: 0;
	/* Burger sits on the right; open the panel from that edge (Enfold menu_right). */
	inset-inline-start: auto;
	inset-inline-end: 0;
	z-index: 60;
	width: min(22rem, 88vw);
	background: var(--scheme-bg);
	border-inline-start: 1px solid var(--scheme-border);
	border-inline-end: 0;
	box-shadow: var(--shadow-card, 0 8px 32px rgb(0 0 0 / 18%));
	overflow-y: auto;
	overscroll-behavior: contain;
}

/* Measured phone menu (E157): the source's own panel colour and row size. Placed after the
   header's nav colour rule so an imported panel is not repainted by the bar's foreground. */
.site-nav-drawer {
	background: var(--site-mobile-nav-bg, var(--scheme-bg));
}

.site-nav--mobile .menu__link,
.site-nav--mobile .menu__toggle {
	color: var(--site-mobile-nav-fg, inherit);
	font-size: var(--site-mobile-nav-size, inherit);
	font-weight: var(--site-mobile-nav-weight, inherit);
	min-height: var(--site-mobile-nav-item-height, auto);
	opacity: 1;
}

/* An item with a measured look (E148) but no measured colour falls back to the panel's own
   foreground here, not the bar's: on a white phone panel the bar's white was invisible. */
html .site-header .site-nav--mobile .menu__item--styled > .menu__link,
html .site-header .site-nav--mobile .menu__item--styled > .menu__toggle {
	color: var(--menu-item-fg, var(--site-mobile-nav-fg, inherit));
}

/* Alpine enter/leave: slide in from the inline-end (right in LTR). */
.site-nav-drawer--animating {
	transition: transform 0.28s ease;
	will-change: transform;
}

.site-nav-drawer--from-end {
	transform: translateX(100%);
}

.site-nav-drawer--at-rest {
	transform: translateX(0);
}

@media (prefers-reduced-motion: reduce) {
	.site-header__toggle-bars span {
		transition: none;
	}

	.site-nav-drawer--animating {
		transition: none;
	}
}

.site-nav-drawer__inner {
	flex: 1;
	padding: var(--space-lg, 32px) var(--space-md, 16px);
	/* No in-panel ×; toggle sits in the header above the drawer. */
	padding-top: var(--space-lg, 32px);
}

.site-nav-drawer__close {
	position: absolute;
	top: var(--space-sm, 8px);
	inset-inline-end: var(--space-sm, 8px);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	border: 0;
	border-radius: var(--radius-sm, 4px);
	background: transparent;
	color: inherit;
	font-size: 1.75rem;
	line-height: 1;
	cursor: pointer;
	transform: none !important;
	box-shadow: none !important;
	transition:
		background-color 0.15s ease,
		color 0.15s ease;
}

/* Offcanvas: burger morphs to X (z-index 70); hide the duplicate × in the panel. */
.site-mobile-nav:not(.site-mobile-nav--dropdown) .site-nav-drawer__close {
	display: none;
}

.site-nav-drawer__close:hover,
.site-nav-drawer__close:active,
.site-nav-drawer__close:focus-visible {
	transform: none !important;
	box-shadow: none !important;
}

.site-nav-drawer__close:focus-visible {
	box-shadow: var(--focus-ring-shadow) !important;
}

.site-nav-drawer__backdrop {
	position: fixed;
	inset: 0;
	z-index: 55;
	border: 0;
	padding: 0;
	margin: 0;
	background: rgb(0 0 0 / 45%);
	cursor: pointer;
}

html.site-nav-locked,
html.site-nav-locked body {
	overflow: hidden;
}

.site-mobile-nav--dropdown .site-nav-drawer {
	position: absolute;
	inset: auto;
	top: 100%;
	inset-inline: 0;
	width: auto;
	max-height: calc(100dvh - 100%);
	border-inline-end: 0;
	border-bottom: 1px solid var(--scheme-border);
	box-shadow: var(--shadow-card, 0 2px 8px rgb(0 0 0 / 10%));
}

.site-mobile-nav--dropdown .site-nav-drawer__inner {
	padding-top: var(--space-md, 16px);
}

.site-mobile-nav--dropdown .site-nav-drawer__close,
.site-mobile-nav--dropdown .site-nav-drawer__backdrop {
	display: none;
}

.no-js .site-header__toggle,
.no-js .site-nav-drawer__close,
.no-js .site-nav-drawer__backdrop {
	display: none;
}

.no-js .site-nav-drawer {
	position: static;
	width: 100%;
	border: 0;
	box-shadow: none;
}

.no-js .site-nav-drawer__inner {
	padding-top: var(--space-md, 16px);
}

/* Without JavaScript the phone menu is a plain list in the header. Beside the name (and a
   call to action) it would be as wide as its longest link and push the page past the right
   edge (390 px: a long name 470 px wide). It gets a row of its own under the bar instead: the
   wrapper of the bar's end side gives its children to the bar's row (display: contents), and
   the menu wraps onto a full-width row after everything else. */
@media (max-width: 959px) {
	html.no-js .site-header .site-header__inner {
		flex-wrap: wrap;
	}

	html.no-js .site-header__end:has(> .site-header__mobile) {
		display: contents;
	}

	html.no-js .site-header__end:has(> .site-header__mobile) > :first-child {
		margin-inline-start: auto;
	}

	html.no-js .site-header .site-header__mobile {
		order: 99;
		flex: 1 0 100%;
		min-width: 0;
		margin: 0;
	}

	html.no-js .site-mobile-nav,
	html.no-js .site-nav-drawer {
		min-width: 0;
		max-width: 100%;
	}
}

.site-nav--mobile .menu,
.site-nav--mobile .locale-switcher__list {
	display: grid;
	gap: var(--space-sm, 8px);
}

.site-nav--mobile .menu__item {
	flex-wrap: wrap;
}

.site-nav--mobile .menu__submenu {
	position: static;
	width: 100%;
	box-shadow: none;
	border: 0;
	padding-left: var(--space-md, 16px);
}

/* A phone drawer owns its palette, including expanded/hovered controls and
   nested panels. A transparent white-on-dark header must not override it. */
html .site-header .site-nav--mobile .menu__link,
html .site-header .site-nav--mobile .menu__toggle {
	color: var(--menu-item-fg, var(--site-mobile-nav-fg, var(--scheme-fg)));
}

html .site-header .site-nav--mobile .menu__submenu {
	--submenu-bg: var(--site-mobile-nav-bg, var(--scheme-bg));
	--submenu-fg: var(--site-mobile-nav-fg, var(--scheme-fg));
	--submenu-divider: color-mix(in srgb, var(--submenu-fg) 18%, transparent);
	--submenu-hover-fg: var(--submenu-fg);
	--submenu-hover-bg: color-mix(in srgb, var(--submenu-fg) 8%, var(--submenu-bg));
	box-shadow: none;
}

.site-nav--mobile .locale-switcher {
	margin-top: var(--space-md, 16px);
	padding-top: var(--space-md, 16px);
	border-top: 1px solid var(--scheme-border);
}

/* The phone menu's language links are touch targets of 44 px like its other links
   (WCAG 2.5.5, docs/UI-SUUNNITTELUN-TIETOPERUSTA.md); a label of 13 px with a thin padding was
   about 20 px high. */
.site-nav--mobile .locale-switcher__link {
	display: flex;
	align-items: center;
	min-height: 44px;
	font-size: 1rem;
}

/* A narrow desktop bar (960–1279 px) shows the current language only; it opens the list of
   all of them (locale-switcher.liquid). With three names the bar's call to action used to drop
   to a second row at 1024 px. */
.locale-switcher__compact {
	display: none;
	position: relative;
}

.locale-switcher__summary {
	display: flex;
	align-items: center;
	gap: 0.4em;
	min-height: 44px;
	height: 100%;
	padding: 0 13px;
	cursor: pointer;
	list-style: none;
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--site-header-fg, inherit);
}

.locale-switcher__summary::-webkit-details-marker {
	display: none;
}

.locale-switcher__summary::after {
	content: '';
	width: 0.4em;
	height: 0.4em;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY(-0.15em) rotate(45deg);
}

.locale-switcher__compact[open] > .locale-switcher__summary::after {
	transform: translateY(0.1em) rotate(-135deg);
}

.locale-switcher__compact-list {
	position: absolute;
	top: 100%;
	right: 0;
	z-index: 60;
	min-width: 10rem;
	margin: 0;
	padding: 6px;
	list-style: none;
	background: var(--scheme-bg, #fff);
	border: 1px solid var(--scheme-border, rgb(0 0 0 / 12%));
	border-radius: var(--radius-md, 8px);
	box-shadow: 0 8px 24px rgb(0 0 0 / 12%);
}

html .site-header .locale-switcher__compact-list .locale-switcher__link,
html .locale-switcher--desktop .locale-switcher__compact-list .locale-switcher__link {
	display: flex;
	align-items: center;
	height: auto;
	min-height: 44px;
	padding: 0 12px;
	color: var(--scheme-fg, #15181f);
	opacity: 1;
}

@media (min-width: 960px) and (max-width: 1279px) {
	.locale-switcher--desktop .locale-switcher__list {
		display: none;
	}

	.locale-switcher--desktop .locale-switcher__compact {
		display: block;
	}
}

/* The language being read is marked by more than its weight: an underline in the bar and in
   the phone menu alike (the bar's hover rule above takes the underline off its links). */
.site-header .locale-switcher__link[aria-current],
.site-nav--mobile .locale-switcher__link[aria-current] {
	text-decoration: underline;
	text-underline-offset: 0.35em;
	text-decoration-thickness: 2px;
}

@media (min-width: 960px) {
	.site-header__mobile {
		display: none;
	}

	.site-nav--desktop,
	.locale-switcher--desktop {
		display: block;
	}

	/* Enfold: top-level nav fills the header bar; nested menus keep natural height. */
	.site-nav--desktop > .menu {
		height: 88px;
		gap: 0;
	}

	.site-header--height-compact .site-nav--desktop > .menu {
		height: 56px;
	}

	.site-header--height-tall .site-nav--desktop > .menu {
		height: 112px;
	}

	.site-nav--desktop > .menu > .menu__item > .menu__link,
	.site-nav--desktop > .menu > .menu__item > .menu__toggle,
	.locale-switcher--desktop .locale-switcher__link {
		display: flex;
		align-items: center;
		height: 88px;
		padding: 0 13px;
		line-height: 1;
		box-sizing: border-box;
	}

	.site-header--height-compact .site-nav--desktop > .menu > .menu__item > .menu__link,
	.site-header--height-compact .site-nav--desktop > .menu > .menu__item > .menu__toggle,
	.site-header--height-compact .locale-switcher--desktop .locale-switcher__link {
		height: 56px;
	}

	.site-header--height-tall .site-nav--desktop > .menu > .menu__item > .menu__link,
	.site-header--height-tall .site-nav--desktop > .menu > .menu__item > .menu__toggle,
	.site-header--height-tall .locale-switcher--desktop .locale-switcher__link {
		height: 112px;
	}

	/* A measured pill (E148) hugs its label with the source's padding instead of filling
	   the bar's height; the item is centred in the bar by .menu__item--styled. */
	.site-nav--desktop > .menu > .menu__item--pill > .menu__link,
	.site-nav--desktop > .menu > .menu__item--pill > .menu__toggle {
		height: var(--menu-item-height, auto);
		padding: 0 var(--menu-item-pad-x, var(--space-sm));
		justify-content: center;
	}

	.locale-switcher__list {
		gap: var(--space-sm, 8px);
	}
}

/* Sidebar chrome (Google Sites-style left nav) --------------------------- */

.site-layout--sidebar {
	margin: 0;
	min-height: 100dvh;
}

.site-shell {
	display: block;
	min-height: 100dvh;
}

.site-sidebar {
	display: none;
	background: var(--site-header-bg, var(--color-primary, #007bbf));
	color: var(--site-header-fg, #fff);
}

.site-sidebar__inner {
	display: flex;
	flex-direction: column;
	gap: var(--space-md, 16px);
	padding: var(--space-lg, 32px) var(--space-md, 16px);
	min-height: 100%;
	box-sizing: border-box;
}

.site-sidebar__brand {
	font-family: var(--font-body, system-ui, sans-serif);
	font-size: 1.125rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	line-height: 1.25;
	color: inherit;
	text-decoration: none;
	padding: 0 0.75rem 0.75rem;
}

.site-sidebar__name {
	display: block;
	text-transform: none;
}

.site-sidebar__logo {
	max-width: 100%;
	max-height: 3.5rem;
	object-fit: contain;
}

.site-nav--sidebar .menu--sidebar {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 0;
}

.site-nav--sidebar .menu__item {
	display: block;
}

.site-nav--sidebar .menu__link {
	display: block;
	position: relative;
	padding: 0.65rem 1rem 0.65rem 1.15rem;
	border-radius: 0;
	color: inherit;
	opacity: 0.95;
	text-decoration: none;
	font-weight: 400;
	font-size: 0.9375rem;
	line-height: 1.35;
}

.site-nav--sidebar .menu__link:hover {
	opacity: 1;
	background: rgb(255 255 255 / 10%);
	text-decoration: none;
}

/* Google Sites: white vertical bar on the left of the active item */
.site-nav--sidebar .menu__link[aria-current='page'] {
	opacity: 1;
	font-weight: 500;
	background: transparent;
	text-decoration: none;
	box-shadow: inset 4px 0 0 #fff;
}

.site-nav--sidebar .menu__link[aria-current='page']:hover {
	background: rgb(255 255 255 / 8%);
}

.site-nav--sidebar .menu__submenu {
	position: static;
	min-width: 0;
	margin: 0.15rem 0 0.35rem 0.75rem;
	padding: 0;
	background: transparent;
	/* Transparent over the sidebar: links use the sidebar colour, not the panel palette. */
	color: inherit;
	border: 0;
	box-shadow: none;
}

.locale-switcher--sidebar {
	margin-top: auto;
	padding-top: var(--space-md, 16px);
}

.locale-switcher--sidebar .locale-switcher__list {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

.locale-switcher--sidebar .locale-switcher__link {
	color: inherit;
	opacity: 0.9;
}

.site-header--sidebar-mobile .site-nav--desktop,
.site-header--sidebar-mobile .locale-switcher--desktop {
	display: none;
}

/* Google Sites keeps the left chrome until a narrow phone; match ~640px. */
@media (min-width: 640px) {
	.site-layout--sidebar .site-shell {
		display: grid;
		grid-template-columns: minmax(12.5rem, 15rem) minmax(0, 1fr);
		align-items: stretch;
	}

	.site-layout--sidebar .site-sidebar {
		display: block;
		position: sticky;
		top: 0;
		align-self: start;
		height: 100dvh;
		overflow-y: auto;
		overscroll-behavior: contain;
	}

	.site-layout--sidebar .site-header--sidebar-mobile {
		display: none;
	}

	.site-shell__content {
		min-width: 0;
		display: flex;
		flex-direction: column;
		min-height: 100dvh;
	}

	.site-shell__content > #main {
		flex: 1;
	}
}

@media (min-width: 960px) {
	.site-layout--sidebar .site-shell {
		grid-template-columns: minmax(14rem, 16.5rem) minmax(0, 1fr);
	}
}

/* Footer ----------------------------------------------------------------- */

.site-footer {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	display: flex;
	align-items: stretch;
	min-height: 0;
	padding-block: var(--space-lg, 24px);
	background: var(--site-footer-bg, var(--color-surface, #f4f5f7));
	color: var(--site-footer-fg, var(--color-text, #111));
}

.site-footer--has-image::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image: var(--site-footer-bg-image);
	background-position: var(--site-footer-bg-position, center);
	background-size: var(--site-footer-bg-size, cover);
	background-repeat: no-repeat;
	opacity: var(--site-footer-bg-opacity, 1);
	pointer-events: none;
}

.site-footer__inner {
	position: relative;
	z-index: 1;
	display: grid;
	gap: var(--space-lg, 24px) var(--space-xl, 32px);
	justify-content: start;
	align-items: start;
	text-align: start;
}

/* Footer layouts (settings footerLayout). */
.site-footer--layout-minimal .site-footer__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-md, 16px) var(--space-lg, 24px);
	text-align: start;
}

.site-footer--layout-minimal .site-footer__contact,
.site-footer--layout-minimal .site-footer__kontakt,
.site-footer--layout-minimal .site-footer__text {
	display: none;
}

.site-footer--layout-minimal .site-footer__copyright {
	grid-column: auto;
	margin-top: 0;
	margin-left: auto;
}

.site-footer--layout-minimal .site-footer__links {
	flex-direction: row;
	flex-wrap: wrap;
	gap: var(--space-sm, 8px) var(--space-md, 16px);
}

.site-footer--layout-centered .site-footer__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	gap: var(--space-md, 16px);
}

.site-footer--layout-centered .site-footer__copyright {
	grid-column: auto;
	text-align: center;
	margin-top: 0;
}

.site-footer--layout-centered .site-footer__links {
	justify-content: center;
}

.site-footer--layout-centered .site-footer__social {
	justify-content: center;
}

.site-footer--layout-stacked .site-footer__inner {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: var(--space-md, 16px);
}

.site-footer--layout-stacked .site-footer__copyright {
	grid-column: auto;
	margin-top: 0;
}

.site-footer__heading {
	display: block;
	margin-bottom: 0.35em;
	font-weight: 700;
}

.site-footer__address {
	margin: 0;
	line-height: 1.5;
}

.site-footer__kontakt p,
.site-footer__contact p,
.site-footer__text,
.site-footer__privacy,
.site-footer__withdrawal {
	margin: 0 0 0.5em;
}

/* The generated legal pages and "Kirjaudu" (footerLegalLinks), one per line like the privacy link. */
.site-footer__legal {
	list-style: none;
	margin: 0 0 0.5em;
	padding: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.35em;
}

/* The privacy link and the legal list read as one list: the same step as the footer menu's. */
.site-footer__privacy:has(+ .site-footer__legal) {
	margin-bottom: 0.35em;
}

/* Photo bank credits (`footerPhotoCredits`): small print, links with 24 px targets inline. */
.site-footer__credits {
	flex-basis: 100%;
	margin: 0.5em 0 0;
	font-size: 0.8em;
	line-height: 1.8;
	opacity: 0.85;
}
.site-footer__credits a {
	color: inherit;
	text-decoration: underline;
	padding-block: 0.2em;
}

.site-footer__kontakt p:last-child,
.site-footer__contact p:last-child {
	margin-bottom: 0;
}

.site-footer__copyright {
	display: block;
	grid-column: 1 / -1;
	text-align: start;
	color: inherit;
	font-size: 12px;
	line-height: 1.5;
	opacity: 0.95;
	margin-top: var(--space-sm, 8px);
}

.site-footer__links {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.35em;
}

/* Footer menu columns (E154): grouped items sit side by side as titled lists, the way sites
   lay a footer out (Products / Services / Company). A flat menu keeps the single column. */
.site-footer__links--grouped {
	flex-direction: row;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: var(--space-md, 16px) var(--space-xl, 48px);
}

.site-footer__group {
	display: flex;
	flex-direction: column;
	gap: var(--space-xs, 8px);
}

.site-footer__sublinks {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.35em;
}

.site-footer__links--row {
	flex-direction: row;
	flex-wrap: wrap;
	gap: var(--space-xs, 8px) var(--space-md, 16px);
}

/* Titled columns need the whole footer width, not one cell of the inner grid. */
.site-footer__nav--grouped {
	grid-column: 1 / -1;
}

.site-footer__social {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-sm, 8px) var(--space-md, 16px);
}

.site-footer__social-icon {
	display: none;
}

.site-footer--social-icons .site-footer__social a {
	display: inline-flex;
	padding: 4px;
}

.site-footer--social-icons .site-footer__social-icon {
	display: block;
}

.site-footer--social-icons .site-footer__social-label {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* Large column headings, the size of a section heading. */
.site-footer--headings-large .site-footer__heading {
	margin-bottom: 0.75em;
	font-family: var(--font-heading, inherit);
	font-size: clamp(1.5rem, 2.4vw, 2.25rem);
	line-height: 1.15;
}

.site-footer__textcol .site-footer__text {
	margin: 0;
}

/* Columns layout: the address comes first, as on most sites; one titled menu column sits
   beside the other columns instead of taking a whole row. */
.site-footer--layout-columns .site-footer__contact {
	order: -1;
}

.site-footer--layout-columns
	.site-footer__nav--grouped:not(:has(.site-footer__group + .site-footer__group)) {
	grid-column: auto;
}

@media (min-width: 1100px) {
	.site-footer--layout-columns .site-footer__inner:has(> :nth-child(5)) {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.site-footer a {
	color: inherit;
}

/* The privacy link under a form (platform `privacy/links.ts`): a 44 px tap target. */
.form-privacy a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	/* The link colour darkened toward the text: readable on a tinted form section too. */
	color: color-mix(
		in srgb,
		var(--scheme-link, var(--color-primary)) 78%,
		var(--scheme-fg, var(--color-text))
	);
}

.site-footer__links a,
.site-footer__privacy a,
.site-footer__legal a,
.site-footer__withdrawal a {
	/* 44 px tap targets (docs/laatu checklist M2); the text stays where it was. A short link
	   ("Seura", "Aloita") is widened to 44 px too (YKSILOLAJISEURA_2026-11-02.md). */
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	min-width: 44px;
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

@media (min-width: 640px) {
	.site-footer__inner:not(:has(> :only-child)) {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 900px) {
	.site-footer__inner:has(> :nth-child(3)) {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* Buttons ---------------------------------------------------------------- */

.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 0;
	padding: var(--button-paddingY, 15px) var(--button-paddingX, 30px);
	border: 1px solid transparent;
	border-radius: var(--button-radius, var(--radius-md, 8px));
	font-size: var(--button-fontSize, 0.8125rem);
	font-weight: var(--button-weight, 400);
	line-height: var(--font-leading-button, 1.2);
	text-decoration: none;
	cursor: pointer;
	transition: filter 120ms ease;
}

.button:not(:where(:disabled, [aria-disabled='true'])):hover {
	filter: brightness(1.08);
}

.button,
.button--primary {
	background: var(--button-bg, var(--color-primary, #0055ff));
	color: var(--button-fg, var(--color-onPrimary, #fff));
	border-color: var(--button-border, transparent);
}

/* The size and style variants (lg, sm, secondary, outline, ghost) live in layout-tree
   base-css.ts only, with two-class selectors that this one-class reset cannot undo (E246).
   A copy here would win over them again and drift (it did: its lg padding fell back to 14px). */

.button--link {
	background: transparent;
	color: var(--scheme-link);
	padding-left: 0;
	padding-right: 0;
	text-decoration: underline;
}

/* Page title bar (Enfold-style; opt-in via showPageTitleBar) ------------ */

.page-title-bar {
	width: 100%;
	border-bottom: 1px solid color-mix(in srgb, var(--scheme-border) 70%, transparent);
	background: #fff;
}

.page-title-bar__inner {
	width: min(100% - 2rem, var(--size-contentMaxWidth, 1200px));
	margin-inline: auto;
	padding: 10px 0;
}

.page-title-bar__title {
	margin: 0;
	font-family: var(--font-body, inherit);
	font-size: 1rem;
	font-weight: 400;
	line-height: 2.3;
	color: #888;
}

/* Breadcrumbs (opt-in via showBreadcrumbs). Inside the title bar when that is on,
   otherwise a slim row of their own above the content. The separator is drawn by
   CSS so a screen reader hears only the list; the last item is aria-current. */

.breadcrumbs-bar__inner {
	width: min(100% - 2rem, var(--size-contentMaxWidth, 1200px));
	margin-inline: auto;
	padding: var(--space-xs, 4px) 0;
}

.breadcrumbs {
	--crumb-fg: var(--color-muted, #6b7280);
	--crumb-current: var(--color-text, #111);
	font-size: 0.875rem;
	line-height: 1.4;
	color: var(--crumb-fg);
}

.breadcrumbs__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	margin: 0;
	padding: 0;
	list-style: none;
}

.breadcrumbs__item {
	display: inline-flex;
	align-items: center;
	min-width: 0;
}

/* After the item, not before the next: a wrapped line never starts with a separator. */
.breadcrumbs__item:not(:last-child)::after {
	content: '/';
	content: '/' / '';
	margin-inline: 0.5rem;
	opacity: 0.6;
}

.breadcrumbs__link,
.breadcrumbs__text,
.breadcrumbs__current {
	display: inline-block;
	padding-block: 0.3rem;
	overflow-wrap: anywhere;
}

.breadcrumbs__link {
	color: inherit;
	text-decoration: none;
}

.breadcrumbs__link:hover {
	color: var(--crumb-current);
	text-decoration: underline;
}

.breadcrumbs__link:focus-visible {
	outline: 2px solid var(--color-primary, #0055ff);
	outline-offset: 2px;
	border-radius: 2px;
}

.breadcrumbs__current {
	color: var(--crumb-current);
	font-weight: 600;
}

/* The title bar has its own fixed light palette. */
.page-title-bar .breadcrumbs {
	--crumb-fg: #777;
	--crumb-current: #444;
}

/* "Vain yläsivu" (breadcrumbsMobile: parent): a phone shows only the link one level up,
   with an arrow, as GOV.UK collapses its breadcrumbs. The whole trail from 640 px. */
@media (max-width: 639.98px) {
	.breadcrumbs--parent .breadcrumbs__item:not(:nth-last-child(2)) {
		display: none;
	}

	.breadcrumbs--parent .breadcrumbs__item:nth-last-child(2)::after {
		content: none;
	}

	.breadcrumbs--parent .breadcrumbs__item:nth-last-child(2) .breadcrumbs__link::before {
		content: '←';
		content: '←' / '';
		margin-inline-end: 0.4rem;
	}

	.breadcrumbs--parent .breadcrumbs__link {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
	}
}

/* "Tässä osiossa" beside the content (page setting sectionNav: side; layout-tree
   library-blocks/site-nav.ts). A phone has the disclosure above the content; from 960 px the
   list is a sticky column of its own, below a sticky header when the site has one. */
.page-with-nav__aside {
	width: min(100% - 2rem, var(--size-contentMaxWidth, 1200px));
	margin: var(--space-md, 16px) auto 0;
}

@media (min-width: 960px) {
	.page-with-nav {
		display: grid;
		grid-template-columns: minmax(13rem, 17rem) minmax(0, 1fr);
		gap: var(--space-lg, 32px);
		align-items: start;
		width: min(100% - 2rem, var(--size-contentMaxWidth, 1200px));
		margin-inline: auto;
	}

	.page-with-nav__aside {
		position: sticky;
		top: var(--space-md, 16px);
		width: auto;
		max-height: calc(100vh - 2rem);
		margin: 0;
		padding-block: var(--space-lg, 32px);
		overflow-y: auto;
	}

	html:has(.site-header--sticky, .site-header--v-sticky) .page-with-nav__aside {
		top: calc(var(--site-header-h, 76px) + 8px);
		max-height: calc(100vh - var(--site-header-h, 76px) - 16px);
	}

	.page-with-nav__main {
		min-width: 0;
	}
}

@media (min-width: 768px) {
	.page-title-bar__inner--crumbs {
		display: flex;
		flex-direction: row-reverse;
		align-items: center;
		justify-content: space-between;
		gap: 1.5rem;
	}
}

/* Forms ------------------------------------------------------------------ */

.form {
	display: grid;
	gap: var(--space-md, 16px);
	max-width: none;
	width: 100%;
}

.form__field {
	display: grid;
	gap: var(--space-xs, 4px);
}

.form__field--check {
	grid-template-columns: auto 1fr;
	align-items: center;
	gap: var(--space-sm, 8px);
}

label:not(:where(.form *)) {
	font-weight: 600;
}

input:not([type='checkbox']):not([type='radio']):not(:where(.form *)),
select:not(:where(.form *)),
textarea:not(:where(.form *)) {
	width: 100%;
	min-height: 2.75rem;
	padding: 0.5rem 0.75rem;
	border: 1px solid var(--scheme-border);
	border-radius: var(--radius-sm, 4px);
	background: var(--scheme-bg);
	color: var(--scheme-fg);
}

input[type='checkbox']:not(:where(.form *)),
input[type='radio']:not(:where(.form *)) {
	width: 1.25rem;
	height: 1.25rem;
	accent-color: var(--color-primary, #0055ff);
}

input:not(:where(.form *)):user-invalid,
textarea:not(:where(.form *)):user-invalid {
	border-color: var(--color-error, #b3261e);
}

.form__error {
	color: var(--color-error, #b3261e);
}

/* Accordion -------------------------------------------------------------- */

.accordion {
	border-top: 1px solid var(--scheme-border);
}

.accordion__item {
	border-bottom: 1px solid var(--scheme-border);
}

.accordion__heading {
	margin: 0;
	font-size: 1rem;
}

.accordion__trigger {
	display: flex;
	width: 100%;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-sm, 8px);
	min-height: 2.75rem;
	padding: var(--space-sm, 8px) 0;
	border: 0;
	background: transparent;
	color: inherit;
	font-weight: 600;
	text-align: left;
	cursor: pointer;
}

.accordion__icon {
	flex: 0 0 auto;
	width: 0.6rem;
	height: 0.6rem;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	transition: transform 150ms ease;
}

.accordion__trigger[aria-expanded='true'] .accordion__icon {
	transform: rotate(225deg);
}

.accordion__panel {
	padding: 0 0 var(--space-md, 16px);
}

/* Tabs ------------------------------------------------------------------- */

.tabs__list {
	display: flex;
	gap: var(--space-xs, 4px);
	overflow-x: auto;
	border-bottom: 1px solid var(--scheme-border);
}

.tabs__tab {
	min-height: 2.75rem;
	padding: 0.5rem var(--space-md, 16px);
	border: 0;
	border-bottom: 3px solid transparent;
	margin-bottom: -1px;
	background: transparent;
	color: inherit;
	font-weight: 600;
	white-space: nowrap;
	cursor: pointer;
}

.tabs__tab[aria-selected='true'] {
	border-bottom-color: var(--color-primary, #0055ff);
	color: var(--scheme-link);
}

.tabs__panel {
	padding: var(--space-md, 16px) 0;
}

/* Gallery ---------------------------------------------------------------- */

.gallery__stage {
	position: relative;
	overflow: hidden;
	border-radius: var(--radius-md, 8px);
	background: var(--color-surface, #f4f5f7);
}

.gallery__slide {
	margin: 0;
	position: absolute;
	inset: 0;
}

.gallery__slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.gallery__nav {
	position: absolute;
	top: 50%;
	width: 2.75rem;
	height: 2.75rem;
	transform: translateY(-50%);
	border: 0;
	border-radius: 50%;
	background: var(--color-background, #fff);
	color: var(--color-text, #111);
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
	box-shadow: var(--shadow-card, 0 2px 8px rgb(0 0 0 / 10%));
}

.gallery__nav--prev {
	left: var(--space-sm, 8px);
}

.gallery__nav--next {
	right: var(--space-sm, 8px);
}

.gallery__thumbs {
	display: flex;
	gap: var(--space-sm, 8px);
	margin-top: var(--space-sm, 8px);
	overflow-x: auto;
}

.gallery__thumb {
	flex: 0 0 auto;
	padding: 0;
	border: 2px solid transparent;
	border-radius: var(--radius-sm, 4px);
	background: transparent;
	cursor: pointer;
	overflow: hidden;
}

.gallery__thumb[aria-selected='true'] {
	border-color: var(--color-primary, #0055ff);
}

.gallery__thumb img {
	width: 120px;
	height: 90px;
	object-fit: cover;
}

/* Components demo --------------------------------------------------------- */

.components-demo {
	display: grid;
	gap: var(--space-md, 16px);
}

.components-demo__buttons {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-sm, 8px);
	align-items: center;
}

/* Floating CTA ------------------------------------------------------------- */

.floating-cta {
	position: fixed;
	right: max(var(--space-md, 16px), env(safe-area-inset-right));
	bottom: max(var(--space-md, 16px), env(safe-area-inset-bottom));
	z-index: 40;
	display: inline-flex;
	box-shadow: var(--shadow-card, 0 4px 16px rgb(0 0 0 / 18%));
	border-radius: var(--radius-md, 8px);
	text-decoration: none;
}

.floating-cta .button {
	margin: 0;
	white-space: nowrap;
}

@media (max-width: 639px) {
	.floating-cta--hide-phone {
		display: none;
	}
}

/* "Vain puhelimessa" (floatingCtaPhoneOnly, docs/sivupohjat/LUOTTOKORTTI_2026-11-09.md): a full-width
   bar at the bottom of a phone, none on larger screens where the header button is in view. The
   page keeps room for it so the last lines are never under the bar. */
@media (min-width: 640px) {
	.floating-cta--phone-only {
		display: none;
	}
}

@media (max-width: 639px) {
	.floating-cta--phone-only {
		left: max(var(--space-md, 16px), env(safe-area-inset-left));
	}

	.floating-cta--phone-only .button {
		width: 100%;
		justify-content: center;
		min-height: 48px;
	}

	body:has(.floating-cta--phone-only) {
		padding-bottom: 5rem;
	}

	/* The room is under the footer, in the footer's own colour: no white strip below a dark
	   footer (kierros 3). A page without the footer keeps the body's room. */
	body:has(.floating-cta--phone-only):has(> .site-footer) {
		padding-bottom: 0;
	}

	/* The footer is a flex row: the room takes a line of its own under its content. */
	body:has(.floating-cta--phone-only) > .site-footer {
		flex-wrap: wrap;
	}

	body:has(.floating-cta--phone-only) > .site-footer::after {
		content: '';
		flex: 0 0 100%;
		height: 5rem;
	}
}

@media (prefers-reduced-motion: no-preference) {
	.floating-cta {
		transition: transform 0.15s ease;
	}
	.floating-cta:hover {
		transform: translateY(-2px);
	}
}

/* Phone call bar --------------------------------------------------------- */
/* A fixed bar across the bottom on phones (theme.liquid, src/call-bar.ts). The page gets room
   for it, the other floating buttons move up above it, and it steps aside while the mobile
   menu is open. The consent banner rises above it (consent.css). */

.call-bar {
	display: none;
}

.site-header__phone {
	color: inherit;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}

.site-header__phone:hover {
	text-decoration: underline;
}

.site-header__phone-mobile {
	margin: var(--space-sm, 8px) 0;
}

@media (max-width: 768px) {
	:root {
		--call-bar-h: calc(56px + env(safe-area-inset-bottom));
	}

	.call-bar {
		display: flex;
		position: fixed;
		z-index: 45;
		inset: auto 0 0 0;
		padding: 0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
		background: var(--color-primary, #0055ff);
		box-shadow: 0 -2px 12px rgb(0 0 0 / 18%);
	}

	.call-bar__button {
		flex: 1 1 0;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: 0.5rem;
		min-width: 0;
		min-height: 56px;
		padding: 0.5rem 0.75rem;
		background: var(--color-primary, #0055ff);
		color: var(--color-onPrimary, #fff);
		font-family: var(--font-body, inherit);
		font-size: 1.05rem;
		font-weight: 700;
		line-height: 1.2;
		text-decoration: none;
	}

	.call-bar__button + .call-bar__button {
		border-left: 1px solid color-mix(in srgb, var(--color-onPrimary, #fff) 35%, transparent);
	}

	.call-bar__label {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.call-bar__button:focus-visible {
		outline: 3px solid var(--color-onPrimary, #fff);
		outline-offset: -6px;
	}

	body:has(.call-bar) {
		padding-bottom: var(--call-bar-h);
	}

	/* The room is under the footer, in the footer's own colour: no white strip below a dark
	   footer (docs/sivupohjat/LUOTTOKORTTI_2026-11-09.md kierros 4, also on existing sites).
	   A page without the footer keeps the body's room. */
	body:has(.call-bar):has(> .site-footer) {
		padding-bottom: 0;
	}

	body:has(.call-bar) > .site-footer {
		flex-wrap: wrap;
	}

	body:has(.call-bar) > .site-footer::after {
		content: '';
		flex: 0 0 100%;
		height: var(--call-bar-h);
	}

	body:has(.call-bar) .floating-cta {
		bottom: calc(var(--call-bar-h) + var(--space-md, 16px));
	}

	body:has(.call-bar) .contact-fab {
		--contact-edge: calc(var(--call-bar-h) + var(--space-md, 16px));
	}

	body:has(.call-bar) .scroll-top {
		bottom: calc(var(--call-bar-h) + var(--space-md, 16px) + var(--scroll-top-lift, 0rem));
	}

	html.site-nav-locked .call-bar,
	body:has([data-menu-toggle][aria-expanded='true']) .call-bar {
		display: none;
	}
}

/* Both the call bar and the "Vain puhelimessa" button on a phone: the button floats above the
   bar, so the room under the footer holds both (otherwise the later rule wins and the last
   lines of the footer sit under the button). */
@media (max-width: 639px) {
	body:has(.call-bar):has(.floating-cta--phone-only) > .site-footer::after {
		height: calc(var(--call-bar-h) + 5rem);
	}
}

/* Pikatoimintopalkki on large screens (callBarDevices 'all'): across the bottom like on phones,
   or a side bar on the right (`--side`). The page keeps room for it on that edge. No motion.
   Stacking, lowest first: scroll-top 39, floating button 40, chat launcher 44, this bar 45,
   the consent banner and its reopen button (consent.css) above all. */
@media (min-width: 769px) {
	:root:has(.call-bar--all) {
		--call-bar-h: 56px;
		--call-bar-w: 6.5rem;
	}

	.call-bar--all {
		display: flex;
		justify-content: center;
		position: fixed;
		z-index: 45;
		inset: auto 0 0 0;
		background: var(--color-primary, #0055ff);
		box-shadow: 0 -2px 12px rgb(0 0 0 / 18%);
	}

	.call-bar--all .call-bar__button {
		flex: 0 1 18rem;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: 0.5rem;
		min-width: 0;
		min-height: 56px;
		padding: 0.5rem 1rem;
		color: var(--color-onPrimary, #fff);
		font-family: var(--font-body, inherit);
		font-size: 1rem;
		font-weight: 700;
		line-height: 1.2;
		text-decoration: none;
	}

	.call-bar--all .call-bar__button + .call-bar__button {
		border-left: 1px solid color-mix(in srgb, var(--color-onPrimary, #fff) 35%, transparent);
	}

	.call-bar--all .call-bar__button:hover .call-bar__label {
		text-decoration: underline;
	}

	.call-bar--all .call-bar__button:focus-visible {
		outline: 3px solid var(--color-onPrimary, #fff);
		outline-offset: -6px;
	}

	body:has(.call-bar--all:not(.call-bar--side)) {
		padding-bottom: var(--call-bar-h);
	}

	body:has(.call-bar--all:not(.call-bar--side)):has(> .site-footer) {
		padding-bottom: 0;
	}

	body:has(.call-bar--all:not(.call-bar--side)) > .site-footer {
		flex-wrap: wrap;
	}

	body:has(.call-bar--all:not(.call-bar--side)) > .site-footer::after {
		content: '';
		flex: 0 0 100%;
		height: var(--call-bar-h);
	}

	body:has(.call-bar--all:not(.call-bar--side)) .floating-cta {
		bottom: calc(var(--call-bar-h) + var(--space-md, 16px));
	}

	body:has(.call-bar--all:not(.call-bar--side)) .contact-fab {
		--contact-edge: calc(var(--call-bar-h) + var(--space-md, 16px));
	}

	body:has(.call-bar--all:not(.call-bar--side)) .scroll-top {
		bottom: calc(var(--call-bar-h) + var(--space-md, 16px) + var(--scroll-top-lift, 0rem));
	}

	.call-bar--side {
		flex-direction: column;
		inset: 50% 0 auto auto;
		width: var(--call-bar-w);
		transform: translateY(-50%);
		border-radius: 8px 0 0 8px;
		box-shadow: -2px 0 12px rgb(0 0 0 / 18%);
	}

	.call-bar--side .call-bar__button {
		flex: none;
		flex-direction: column;
		gap: 0.25rem;
		padding: 0.75rem 0.5rem;
		font-size: 0.875rem;
		text-align: center;
	}

	.call-bar--side .call-bar__button + .call-bar__button {
		border-left: 0;
		border-top: 1px solid color-mix(in srgb, var(--color-onPrimary, #fff) 35%, transparent);
	}

	.call-bar--side .call-bar__label {
		white-space: normal;
		overflow-wrap: anywhere;
	}

	body:has(.call-bar--side) {
		padding-right: var(--call-bar-w);
	}
}

/* The chat service's own launcher (chat-button.ts, consent.js). Bottom right, above the
   floating button and the contact button on that corner and above the bottom bar; the
   scroll-to-top button moves up above it. Out of the way while the consent banner asks. */
.chat-launcher {
	--chat-edge: max(var(--space-md, 16px), env(safe-area-inset-bottom));
	position: fixed;
	z-index: 44;
	right: max(var(--space-md, 16px), env(safe-area-inset-right));
	bottom: var(--chat-edge);
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	min-height: 48px;
	padding: 0.625rem 1.125rem;
	border: 0;
	border-radius: 999px;
	background: var(--color-primary, #0055ff);
	color: var(--color-onPrimary, #fff);
	font-family: var(--font-body, inherit);
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.2;
	box-shadow: 0 4px 16px rgb(0 0 0 / 22%);
	cursor: pointer;
}

.chat-launcher[hidden],
html[data-consent-ui] .chat-launcher {
	display: none;
}

.chat-launcher[aria-busy='true'] {
	cursor: progress;
	opacity: 0.8;
}

.chat-launcher:hover .chat-launcher__label {
	text-decoration: underline;
}

.chat-launcher:focus-visible {
	outline: 3px solid var(--color-text, #111);
	outline-offset: 3px;
}

body:has(.floating-cta) .chat-launcher,
body:has(.contact-fab--right) .chat-launcher {
	margin-bottom: 4.5rem;
}

body:has(.floating-cta):has(.contact-fab--right) .chat-launcher {
	margin-bottom: 9rem;
}

body:has(.chat-launcher:not([hidden])) .scroll-top--right {
	margin-bottom: 4.5rem;
}

@media (max-width: 768px) {
	body:has(.call-bar) .chat-launcher {
		--chat-edge: calc(var(--call-bar-h) + var(--space-md, 16px));
	}
}

@media (min-width: 769px) {
	body:has(.call-bar--all:not(.call-bar--side)) .chat-launcher {
		--chat-edge: calc(var(--call-bar-h) + var(--space-md, 16px));
	}
}

@media print {
	.call-bar,
	.chat-launcher {
		display: none !important;
	}
}

/* Enfold form skin (import parity): only with the Enfold chrome. It used to apply to
   every site and made typed text placeholder-grey (#8d8d8d) under any theme; the form
   engine's own stylesheet (/assets/forms.css) takes the site's tokens instead. */
.layout-chrome--enfold .form {
	display: flex;
	flex-direction: column;
	gap: 0;
	max-width: none;
	width: 100%;
	margin: 0;
	line-height: 1.4;
	color: #666;
}
.layout-chrome--enfold .form__page {
	display: flex;
	flex-wrap: wrap;
	/* Enfold .form_element margin 11+11 ≈ 22px between rows; half-gap ≈ 12px. */
	gap: 22px 12px;
}
.layout-chrome--enfold .form__field {
	display: block;
	flex: 1 1 100%;
	min-width: 0;
	margin: 0;
	/* Label→input spacing comes only from .form__label margin-bottom (Enfold 7px). */
	gap: 0;
}
.layout-chrome--enfold .form__field--half {
	flex-basis: calc(49.5% - 0.5%);
	max-width: calc(49.5% - 0.5%);
}
.layout-chrome--enfold .form__group {
	border: 0;
	padding: 0;
	margin: 0;
	min-width: 0;
}
.layout-chrome--enfold .form__label {
	display: block;
	font-size: 0.92em;
	font-weight: 700;
	margin-bottom: 7px;
	color: #666;
}
.layout-chrome--enfold .form__required {
	color: var(--color-primary, #2997ab);
	text-decoration: none;
	font-weight: 700;
}
.layout-chrome--enfold
	.form
	input:not([type='checkbox']):not([type='radio']):not([type='file']):not([type='hidden']):not(
		[type='color']
	):not([type='range']),
.layout-chrome--enfold .form select,
.layout-chrome--enfold .form textarea {
	width: 100%;
	margin: 0;
	padding: 13px;
	min-height: 2.875rem;
	border: 1px solid #e1e1e1;
	border-radius: 2px;
	background: #fff;
	color: #8d8d8d;
	box-sizing: border-box;
	font: inherit;
}
.layout-chrome--enfold .form textarea {
	min-height: 12.25rem;
	resize: vertical;
	line-height: 1.5;
}
.layout-chrome--enfold .form__actions {
	display: flex;
	gap: 0.75rem;
	/* Outside .form__page; Enfold field margins ≈ 22px above submit. */
	margin-top: 22px;
	flex-wrap: wrap;
}
.layout-chrome--enfold .form__actions .button,
.layout-chrome--enfold .form .button--primary {
	min-width: 142px;
	padding: 16px 20px;
	border: 0;
	border-bottom: 1px solid color-mix(in srgb, var(--color-primary, #2997ab) 70%, #000);
	border-radius: 2px;
	font-size: 0.92em;
	font-weight: 400;
	line-height: 1;
	box-shadow: none;
	transform: none;
}
.layout-chrome--enfold .form__actions .button:hover,
.layout-chrome--enfold .form .button--primary:hover {
	transform: none;
	box-shadow: none;
	filter: brightness(1.05);
}
.layout-chrome--enfold .form__hp {
	position: absolute;
	left: -10000px;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
}
.layout-chrome--enfold .form__title {
	margin: 0 0 1rem;
	font-size: 1.35rem;
}
.layout-chrome--enfold .form__title:empty {
	display: none;
}

/* Site search box in the header (snippets/search-box.liquid, setting in /admin/search). */
.site-search-box {
	display: flex;
	align-items: center;
	gap: 0.25rem;
}

.site-search-box input {
	min-height: 40px;
	width: min(12rem, 40vw);
	padding: 0 0.7rem;
	border: 1px solid var(--scheme-border, var(--color-border));
	border-radius: var(--radius-sm, 6px);
	background: var(--scheme-surface, var(--color-surface));
	color: inherit;
	font: inherit;
}

.site-search-box button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	border: 1px solid var(--scheme-border, var(--color-border));
	border-radius: var(--radius-sm, 6px);
	background: transparent;
	color: inherit;
	cursor: pointer;
}

.site-search-box input:focus-visible,
.site-search-box button:focus-visible {
	outline: 2px solid var(--color-primary);
	outline-offset: 2px;
}

.site-search-box--desktop {
	display: none;
}

.site-search-box--mobile {
	margin: var(--space-sm, 1rem) 0;
}

.site-search-box--mobile input {
	flex: 1 1 auto;
	width: auto;
}

@media (min-width: 960px) {
	.site-search-box--desktop {
		display: flex;
		margin-inline: 0.5rem;
	}
}

.site-search-box button {
	width: 44px;
	padding: 0;
}

/* Opening hours in the footer: the same rows as the page section, a little smaller. */
.site-footer__hours .opening-hours {
	max-width: 16rem;
	font-size: 0.95em;
}

.site-footer__hours .opening-hours__row {
	padding: 0.2rem 0;
	border-bottom: 0;
}

/* Header variants ------------------------------------------------------------
   Setting headerVariant (sections/header.liquid, layout-tree header-variants.ts):
   classic | centered | overlay | compact | topbar | drawer. Every rule is under
   .site-header--v, so a site without a variant keeps its header as it was.
   Shared: the bar lines up with the page content (the same gutter as `main`, the bar's own
   padding outside the content edge), the site name in the heading face, links that keep the
   text colour (never faded), a pill under the pointer, a tinted pill on the current page,
   a visible keyboard ring, a call to action in the theme's button shape, a white dropdown
   card, and on a phone a sheet from the bottom with large rows. No uppercase anywhere. */

.site-header--v {
	--hv-fg: var(--site-header-fg, var(--color-text, #111));
	--hv-bg: var(--site-header-bg, var(--color-background, #fff));
	--hv-card: var(--site-header-bg, #fff);
	--hv-accent: var(--site-header-link-hover, var(--color-primary, #0055ff));
	--hv-tint: color-mix(in srgb, var(--hv-fg) 6%, transparent);
	--hv-tint-strong: color-mix(in srgb, var(--hv-fg) 10%, transparent);
	--hv-current: color-mix(in srgb, var(--hv-accent) 14%, transparent);
	--hv-line: color-mix(in srgb, var(--hv-fg) 11%, transparent);
	--hv-shadow: 0 1px 2px rgb(15 23 42 / 6%), 0 14px 36px -16px rgb(15 23 42 / 28%);
	/* The page's side gutter (`--site-gutter`, below) when the chrome has one. */
	--hv-gutter: var(--site-gutter, 1rem);
	--hv-pad: 16px;
	--hv-height: 68px;
	--hv-link-size: 15px;
	position: relative;
	z-index: 200;
	border-bottom: 0;
	background: var(--hv-bg);
	color: var(--hv-fg);
	font-family: var(--font-body, system-ui, sans-serif);
	text-transform: none;
}

/* "Laatikoiden väri" (headerVariantBg, huippuulkoasut 28.10.2026): the bar in the surface colour;
   the default is the page's own background. A custom header colour still wins. */
.site-header--v-bg-surface {
	--hv-bg: var(--site-header-bg, var(--color-surface, var(--color-background, #fff)));
}

@media (max-width: 767px) {
	.site-header--v {
		/* `main` keeps 29px from the screen edge on a phone (layout-chrome default). */
		--hv-gutter: var(--site-gutter, 29px);
		--hv-pad: 12px;
		--hv-height: 64px;
	}
}

.site-header--v .site-header__bar {
	position: relative;
}

.site-header--v .site-header__inner {
	box-sizing: border-box;
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: 12px 20px;
	width: min(
		100% - 2 * var(--hv-gutter) + 2 * var(--hv-pad),
		var(--size-contentMaxWidth, 1200px) + 2 * var(--hv-pad)
	);
	max-width: none;
	min-height: var(--hv-height);
	margin-inline: auto;
	padding-inline: var(--hv-pad);
	transition:
		background-color 0.2s ease,
		box-shadow 0.2s ease,
		border-radius 0.2s ease;
}

.site-header--v-sticky {
	position: sticky;
	top: 0;
}

/* A jump to an anchor (`#hinnasto`, a skip link) stops below a sticky bar, not under it. The
   variant header measures itself into `--site-header-h` (sections/header.liquid); before the
   script runs, and for the older header, a bar's usual height. */
html:has(.site-header--v-sticky, .site-header--sticky) {
	scroll-padding-top: calc(var(--site-header-h, 76px) + 8px);
}

/* Without JavaScript the phone menu is part of the header (.no-js .site-nav-drawer): a sticky
   header would carry the whole menu over the page and cover a form's button, so it scrolls
   away with the page instead. */
.no-js .site-header--v-sticky,
.no-js .site-header--sticky {
	position: relative;
}

.site-header--v .site-header__brand {
	display: inline-flex;
	align-items: center;
	flex: 0 1 auto;
	/* Shrinks for a long name, but a short one ("Häät") still gives a 44 px target. */
	min-width: 44px;
	margin: 0;
	font-family: var(--font-heading, inherit);
	font-size: 1.3rem;
	font-weight: 650;
	letter-spacing: -0.01em;
	line-height: 1.1;
	color: var(--hv-fg);
	text-decoration: none;
	white-space: nowrap;
}

.site-header--v .site-header__brand:focus-visible {
	outline: 2px solid var(--hv-accent);
	outline-offset: 4px;
	border-radius: 6px;
}

.site-header--v .site-header__logo {
	max-height: var(--site-logo-max-height, 44px);
}

.site-header--v .site-header__end {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	gap: 10px;
	margin-left: auto;
}

.site-header--v .site-header__end .site-header__cta {
	display: none;
}

/* The menu bar: the box between the name and the end is the "More" container. */
.site-header--v .site-nav--v {
	display: none;
}

.site-header--v .site-nav--v .menu__item--fold-0,
.site-header--v .nav-more__item,
.site-header--v .nav-more {
	display: none;
}

.site-header--v .nav-more__item.nav-more__item--fold-0 {
	display: block;
}

.site-header--v .site-nav--more-from-0 .nav-more {
	display: flex;
}

@media (min-width: 960px) {
	.site-header--v .site-header__end .site-header__cta {
		display: inline-flex;
	}

	.site-header--v .site-nav--v {
		display: flex;
		flex: 1 1 0;
		min-width: 0;
		justify-content: center;
		container: sitenav / inline-size;
	}

	.site-header--v .site-nav--v > .menu {
		display: flex;
		flex-wrap: nowrap;
		align-items: center;
		gap: 4px;
		height: auto;
		min-height: 0;
		margin: 0;
	}

	.site-header--v .site-nav--v > .menu > .menu__item > .menu__link,
	.site-header--v .site-nav--v > .menu > .menu__item > .menu__toggle,
	.site-header--v .site-nav--v > .nav-more > .menu__toggle {
		display: inline-flex;
		align-items: center;
		gap: 6px;
		height: auto;
		min-height: 40px;
		padding: 8px 14px;
		border-radius: 999px;
		background: transparent;
		color: var(--hv-fg);
		opacity: 1;
		font-family: var(--font-body, inherit);
		font-size: var(--site-nav-size, var(--hv-link-size));
		font-weight: 500;
		line-height: 1.5;
		letter-spacing: 0;
		text-decoration: none;
		white-space: nowrap;
		box-sizing: border-box;
		transition:
			background-color 0.15s ease,
			color 0.15s ease;
	}

	.site-header--v .site-nav--v > .menu > .menu__item > .menu__link:hover,
	.site-header--v .site-nav--v > .menu > .menu__item > .menu__toggle:hover,
	.site-header--v .site-nav--v .menu__toggle[aria-expanded='true'],
	.site-header--v .site-nav--v > .nav-more > .menu__toggle:hover {
		background: var(--hv-tint);
		color: var(--hv-fg);
		font-weight: 500;
		text-decoration: none;
	}

	.site-header--v .site-nav--v > .menu > .menu__item > .menu__link[aria-current],
	.site-header--v .site-nav--v > .menu > .menu__item > .menu__link[aria-current]:hover {
		background: var(--hv-current);
		color: var(--hv-fg);
		font-weight: 600;
		text-decoration: none;
	}

	.site-header--v .site-nav--v > .menu > .menu__item > .menu__link:focus-visible,
	.site-header--v .site-nav--v > .menu > .menu__item > .menu__toggle:focus-visible,
	.site-header--v .site-nav--v > .nav-more > .menu__toggle:focus-visible {
		outline: 2px solid var(--hv-accent);
		outline-offset: 2px;
	}

	.site-header--v .site-nav--v .menu__chevron {
		width: 0.42rem;
		height: 0.42rem;
		border-width: 0 1.75px 1.75px 0;
		opacity: 0.6;
		transition: transform 0.15s ease;
	}

	/* Dropdown: a white card a little below the bar, rows with a pill under the pointer. */
	.site-header--v .site-nav--v .menu__submenu {
		--submenu-bg: var(--hv-card);
		--submenu-fg: var(--color-text, #111);
		top: calc(100% + 10px);
		left: 50%;
		min-width: 15rem;
		padding: 8px;
		border: 1px solid var(--hv-line);
		border-radius: 16px;
		background: var(--submenu-bg);
		box-shadow:
			0 24px 48px -16px rgb(15 23 42 / 28%),
			0 2px 6px rgb(15 23 42 / 6%);
		transform: translateX(-50%);
	}

	.site-header--v .site-nav--v .menu__submenu--open {
		animation: site-header-pop 0.16s ease-out;
	}

	/* The pointer's way from the item to the card. */
	.site-header--v .site-nav--v .menu__submenu::before {
		content: '';
		position: absolute;
		left: 0;
		right: 0;
		bottom: 100%;
		height: 12px;
	}

	.site-header--v .site-nav--v .nav-more__panel {
		left: auto;
		right: 0;
		transform: none;
	}

	.site-header--v .site-nav--v .menu__submenu .menu {
		align-items: stretch;
	}

	.site-header--v .site-nav--v .menu__submenu .menu__item {
		border: 0;
	}

	.site-header--v .site-nav--v .menu__submenu .menu__link {
		display: flex;
		align-items: center;
		justify-content: flex-start;
		text-align: start;
		min-height: 40px;
		padding: 9px 12px;
		border-radius: 10px;
		color: var(--submenu-fg);
		font-size: 15px;
		font-weight: 500;
		line-height: 1.35;
		white-space: nowrap;
	}

	.site-header--v .site-nav--v .menu__submenu .menu__link:hover {
		background: color-mix(in srgb, var(--submenu-fg) 6%, transparent);
		color: var(--submenu-fg);
	}

	.site-header--v .site-nav--v .menu__submenu .menu__link[aria-current] {
		background: var(--hv-current);
		color: var(--submenu-fg);
		font-weight: 600;
	}

	.site-header--v .site-nav--v .menu__submenu .menu__link:focus-visible {
		outline: 2px solid var(--hv-accent);
		outline-offset: -2px;
	}

	.site-header--v .nav-more__group {
		display: block;
		padding: 10px 12px 4px;
		color: color-mix(in srgb, var(--submenu-fg) 70%, transparent);
		font-size: 13px;
		font-weight: 600;
	}

	.site-header--v .nav-more__sublist {
		margin: 0;
		padding: 0 0 0 8px;
		list-style: none;
	}

	/* "More" per width band: theme renderer `nav_fold`, layout-tree NAV_FOLD_BANDS. */

	@container sitenav (width < 1100px) {
		.site-header--v .site-nav--v .menu__item--fold-1 {
			display: none;
		}
		.site-header--v .nav-more__item.nav-more__item--fold-1 {
			display: block;
		}
		.site-header--v .site-nav--more-from-1 .nav-more {
			display: flex;
		}
	}

	@container sitenav (width < 1040px) {
		.site-header--v .site-nav--v .menu__item--fold-2 {
			display: none;
		}
		.site-header--v .nav-more__item.nav-more__item--fold-2 {
			display: block;
		}
		.site-header--v .site-nav--more-from-2 .nav-more {
			display: flex;
		}
	}

	@container sitenav (width < 980px) {
		.site-header--v .site-nav--v .menu__item--fold-3 {
			display: none;
		}
		.site-header--v .nav-more__item.nav-more__item--fold-3 {
			display: block;
		}
		.site-header--v .site-nav--more-from-3 .nav-more {
			display: flex;
		}
	}

	@container sitenav (width < 920px) {
		.site-header--v .site-nav--v .menu__item--fold-4 {
			display: none;
		}
		.site-header--v .nav-more__item.nav-more__item--fold-4 {
			display: block;
		}
		.site-header--v .site-nav--more-from-4 .nav-more {
			display: flex;
		}
	}

	@container sitenav (width < 860px) {
		.site-header--v .site-nav--v .menu__item--fold-5 {
			display: none;
		}
		.site-header--v .nav-more__item.nav-more__item--fold-5 {
			display: block;
		}
		.site-header--v .site-nav--more-from-5 .nav-more {
			display: flex;
		}
	}

	@container sitenav (width < 800px) {
		.site-header--v .site-nav--v .menu__item--fold-6 {
			display: none;
		}
		.site-header--v .nav-more__item.nav-more__item--fold-6 {
			display: block;
		}
		.site-header--v .site-nav--more-from-6 .nav-more {
			display: flex;
		}
	}

	@container sitenav (width < 740px) {
		.site-header--v .site-nav--v .menu__item--fold-7 {
			display: none;
		}
		.site-header--v .nav-more__item.nav-more__item--fold-7 {
			display: block;
		}
		.site-header--v .site-nav--more-from-7 .nav-more {
			display: flex;
		}
	}

	@container sitenav (width < 680px) {
		.site-header--v .site-nav--v .menu__item--fold-8 {
			display: none;
		}
		.site-header--v .nav-more__item.nav-more__item--fold-8 {
			display: block;
		}
		.site-header--v .site-nav--more-from-8 .nav-more {
			display: flex;
		}
	}

	@container sitenav (width < 620px) {
		.site-header--v .site-nav--v .menu__item--fold-9 {
			display: none;
		}
		.site-header--v .nav-more__item.nav-more__item--fold-9 {
			display: block;
		}
		.site-header--v .site-nav--more-from-9 .nav-more {
			display: flex;
		}
	}

	@container sitenav (width < 560px) {
		.site-header--v .site-nav--v .menu__item--fold-10 {
			display: none;
		}
		.site-header--v .nav-more__item.nav-more__item--fold-10 {
			display: block;
		}
		.site-header--v .site-nav--more-from-10 .nav-more {
			display: flex;
		}
	}

	@container sitenav (width < 500px) {
		.site-header--v .site-nav--v .menu__item--fold-11 {
			display: none;
		}
		.site-header--v .nav-more__item.nav-more__item--fold-11 {
			display: block;
		}
		.site-header--v .site-nav--more-from-11 .nav-more {
			display: flex;
		}
	}

	@container sitenav (width < 440px) {
		.site-header--v .site-nav--v .menu__item--fold-12 {
			display: none;
		}
		.site-header--v .nav-more__item.nav-more__item--fold-12 {
			display: block;
		}
		.site-header--v .site-nav--more-from-12 .nav-more {
			display: flex;
		}
	}
}

@keyframes site-header-pop {
	from {
		opacity: 0;
		translate: 0 -4px;
	}
}

/* Call to action: the theme's own button shape and weight. */
.site-header--v .site-header__cta,
.site-header--v .site-header__cta-mobile .site-header__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 10px 20px;
	border: 0;
	border-radius: var(--button-radius, 999px);
	background: var(--color-primary, #0055ff);
	color: var(--color-onPrimary, #fff);
	font-family: var(--font-body, inherit);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	text-transform: none;
	white-space: nowrap;
	box-sizing: border-box;
	transition:
		filter 0.15s ease,
		transform 0.15s ease;
}

.site-header--v .site-header__cta:hover {
	filter: brightness(0.94);
	text-decoration: none;
}

.site-header--v .site-header__cta:focus-visible {
	outline: 2px solid var(--hv-accent);
	outline-offset: 3px;
}

/*
 * "Reunaviiva" (setting ctaStyle): the header button as an outline in the header's own text
 * colour, so it keeps the menu links' contrast on every header background, photos included.
 */
.site-header__cta.site-header__cta--outline,
.site-header__cta-mobile .site-header__cta.site-header__cta--outline,
.site-header--v .site-header__cta.site-header__cta--outline,
.site-header--v .site-header__cta-mobile .site-header__cta.site-header__cta--outline {
	background: transparent;
	color: inherit;
	box-shadow: inset 0 0 0 2px currentColor;
}

/* Burger: a round 44px button. */
.site-header--v .site-header__toggle {
	width: 44px;
	height: 44px;
	border: 1px solid var(--hv-line);
	border-radius: 999px;
	background: transparent;
	color: var(--hv-fg);
}

.site-header--v .site-header__toggle:hover {
	background: var(--hv-tint);
}

.site-header--v .site-header__toggle:focus-visible {
	outline: 2px solid var(--hv-accent);
	outline-offset: 2px;
}

.site-header--v .site-header__toggle-bars {
	width: 18px;
}

.site-header--v .site-header__mobile {
	display: flex;
	margin: 0;
}

@media (min-width: 960px) {
	.site-header--v:not(.site-header--v-drawer) .site-header__mobile {
		display: none;
	}
}

/* Phone bar: name, a smaller call to action, the menu button on one row. */
@media (max-width: 959px) {
	/* A long name wraps (between words, or at a syllable with a hyphen: .site-header__name)
	   instead of running under the call to action. */
	.site-header--v .site-header__brand {
		font-size: 1.15rem;
		white-space: normal;
	}

	.site-header--v .site-header__end .site-header__cta {
		display: inline-flex;
		min-height: 44px;
		padding: 8px 14px;
		font-size: 14px;
	}
}

/* A name whose longest word has 13 letters or more (`data-long-word`) is a little smaller on a
   phone, so that "Henkilöstöpalvelu" mostly fits whole and breaks at most once. Every header. */
@media (max-width: 959px) {
	.site-header__name[data-long-word] {
		font-size: clamp(0.95rem, 4.3vw, 1.1rem);
		line-height: 1.15;
	}
}

@media (max-width: 359px) {
	.site-header--v .site-header__end .site-header__cta {
		display: none;
	}
}

/* "Pienennä nimeä kapealla puhelimella" (headerNameFit, off by default): a text logo, the header
   button and the menu button share 288 px on a 320 px phone, and a name of 10–12 letters
   (Saliverkko, 10.11.2026) ran under the button. Below 360 px the name and the button step
   down; a long name already has its own smaller size, and wider screens are unchanged. */
@media (max-width: 359px) {
	.site-header--name-fit.site-header--has-cta .site-header__name:not([data-long-word]) {
		font-size: clamp(0.95rem, 5vw, 1.1rem);
		line-height: 1.15;
	}

	/* A button of the site size (16 px, Saliverkko) steps down to the header size of a phone. */
	.site-header--name-fit .site-header__cta {
		font-size: 0.875rem;
	}
}

/* Phone menu: a sheet from the bottom with large rows ------------------------------ */
.site-mobile-nav--v .site-nav-drawer {
	inset: auto 0 0;
	width: 100%;
	max-height: min(86dvh, 760px);
	border: 0;
	border-radius: 24px 24px 0 0;
	background: var(--site-mobile-nav-bg, var(--hv-card, #fff));
	color: var(--site-mobile-nav-fg, var(--color-text, #111));
	box-shadow: 0 -16px 48px rgb(15 23 42 / 22%);
}

.site-mobile-nav--v .site-nav-drawer--from-end {
	transform: translateY(100%);
}

.site-mobile-nav--v .site-nav-drawer--at-rest {
	transform: translateY(0);
}

.site-mobile-nav--v .site-nav-drawer__backdrop {
	background: rgb(15 23 42 / 45%);
	backdrop-filter: blur(3px);
}

.site-mobile-nav--v .site-nav-drawer__inner {
	padding: 10px 20px calc(20px + env(safe-area-inset-bottom, 0px));
}

.site-mobile-nav--v .site-nav-drawer__inner::before {
	content: '';
	display: block;
	width: 40px;
	height: 4px;
	margin: 0 auto 10px;
	border-radius: 2px;
	background: color-mix(in srgb, currentColor 20%, transparent);
}

.site-mobile-nav--v .site-nav--mobile > .menu {
	display: block;
}

.site-mobile-nav--v .site-nav--mobile > .menu > .menu__item {
	display: block;
	border-bottom: 1px solid color-mix(in srgb, currentColor 10%, transparent);
}

/* The last item's own line already closes the list: the quick links under it get no second
   line and no extra gap (two lines with an empty row between them, 6.11.2026 demo). */
.site-mobile-nav--v .site-nav--mobile > .menu + .site-nav-utility {
	margin-top: 0;
	border-top: 0;
}

html .site-header .site-mobile-nav--v .site-nav--mobile .menu__link,
html .site-header .site-mobile-nav--v .site-nav--mobile .menu__toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	min-height: var(--site-mobile-nav-item-height, 56px);
	padding: 8px 4px;
	border-radius: 0;
	background: transparent;
	color: var(--site-mobile-nav-fg, var(--color-text, #111));
	opacity: 1;
	font-family: var(--font-body, inherit);
	font-size: var(--site-mobile-nav-size, 19px);
	font-weight: var(--site-mobile-nav-weight, 600);
	line-height: 1.3;
	text-align: start;
	text-decoration: none;
	box-sizing: border-box;
}

html .site-header .site-mobile-nav--v .site-nav--mobile .menu__link[aria-current] {
	color: var(--site-mobile-nav-fg, var(--color-text, #111));
	text-decoration: underline;
	text-decoration-color: var(--hv-accent, currentColor);
	text-decoration-thickness: 3px;
	text-underline-offset: 8px;
}

html .site-header .site-mobile-nav--v .site-nav--mobile .menu__link:focus-visible,
html .site-header .site-mobile-nav--v .site-nav--mobile .menu__toggle:focus-visible {
	outline: 2px solid var(--hv-accent, currentColor);
	outline-offset: -2px;
	border-radius: 8px;
}

.site-mobile-nav--v .site-nav--mobile .menu__chevron {
	width: 0.55rem;
	height: 0.55rem;
	opacity: 0.6;
}

.site-mobile-nav--v .site-nav--mobile .menu__submenu {
	padding: 0 0 8px 12px;
	background: transparent;
}

html .site-header .site-mobile-nav--v .site-nav--mobile .menu__submenu .menu__link {
	min-height: 48px;
	font-size: 16px;
	font-weight: 500;
	color: color-mix(in srgb, var(--site-mobile-nav-fg, var(--color-text, #111)) 82%, transparent);
}

.site-mobile-nav--v .site-nav--mobile .menu__submenu .menu {
	align-items: stretch;
}

.site-mobile-nav--v .site-nav--mobile .menu__submenu .menu__item {
	border: 0;
}

.site-mobile-nav--v .site-header__cta-mobile {
	position: sticky;
	bottom: 0;
	margin: 16px 0 0;
	padding: 8px 0 0;
	background: inherit;
}

.site-mobile-nav--v .site-header__cta-mobile .site-header__cta {
	width: 100%;
	min-height: 52px;
	font-size: 17px;
}

@media (prefers-reduced-motion: reduce) {
	.site-header--v .site-nav--v .menu__submenu--open {
		animation: none;
	}

	.site-header--v .site-header__inner {
		transition: none;
	}
}

/* Classic (the NewStore-style bar): a full-width bar on the page's own colour, its content on
   the page's gutter. Scrolled, a sticky bar keeps its width and gets a thin line and a soft
   shadow under it (owner 17.10.2026: "ylävalikko ottaa koko ylätilan ... koko ruudun
   leveydeltä"). The floating rounded card is an explicit choice (`headerStyle: floating`,
   below), never the default. */
.site-header--v-classic {
	border-bottom: 1px solid transparent;
	transition:
		border-color 0.2s ease,
		box-shadow 0.2s ease;
}

.site-header--v-classic.site-header--v-sticky.is-scrolled {
	border-bottom-color: var(--hv-line);
	box-shadow: 0 10px 28px -18px rgb(15 23 42 / 30%);
}

/* "Kelluva pyöreä palkki" (headerStyle floating) with a variant: the sticky bar lifts into a
   rounded card once the page scrolls. At the top it is the same full-width bar as without it,
   so it takes its own room and covers nothing; scrolled, the card keeps the bar's height. */
.site-header--v.site-header--v-floating.site-header--v-sticky.is-scrolled {
	border-bottom-color: transparent;
	background: transparent;
	box-shadow: none;
}

.site-header--v.site-header--v-floating.site-header--v-sticky.is-scrolled .site-header__inner {
	border-radius: 18px;
	background: var(--hv-card);
	box-shadow: var(--hv-shadow);
}

@media (max-width: 767px) {
	.site-header--v.site-header--v-floating.site-header--v-sticky.is-scrolled .site-header__inner {
		border-radius: 14px;
	}
}

/* Centered: the name in the middle, the call to action on the right, the menu on its own row. */
@media (min-width: 960px) {
	.site-header--v-centered .site-header__inner {
		display: grid;
		grid-template-columns: 1fr auto 1fr;
		grid-template-areas:
			'start brand end'
			'nav nav nav';
		row-gap: 0;
		min-height: 0;
		padding-top: 14px;
	}

	.site-header--v-centered .site-header__brand {
		grid-area: brand;
		justify-self: center;
		font-size: 1.6rem;
		letter-spacing: -0.015em;
	}

	.site-header--v-centered .site-header__end {
		grid-area: end;
		justify-self: end;
	}

	.site-header--v-centered .site-nav--v {
		grid-area: nav;
		margin-top: 10px;
		padding-block: 6px;
		border-top: 1px solid var(--hv-line);
	}
}

.site-header--v-centered {
	border-bottom: 1px solid var(--hv-line);
}

.site-header--v-centered.site-header--v-sticky.is-scrolled,
.site-header--v-topbar.site-header--v-sticky.is-scrolled,
.site-header--v-compact.site-header--v-sticky.is-scrolled,
.site-header--v-drawer.site-header--v-sticky.is-scrolled,
.site-header--v-overlay.site-header--v-sticky.is-scrolled {
	border-bottom-color: transparent;
	box-shadow:
		0 1px 0 var(--hv-line),
		0 10px 28px -18px rgb(15 23 42 / 30%);
}

/* Over the photo: transparent with white text and a soft shade at the top until the page
   scrolls, then a solid bar. Without a photo hero first, it is a solid bar from the start. */
.site-header--v-overlay {
	border-bottom: 1px solid var(--hv-line);
}

.site-header--v-overlay.site-header--v-over-media {
	position: fixed;
	inset: 0 0 auto;
	border-bottom-color: transparent;
	transition:
		background-color 0.25s ease,
		box-shadow 0.25s ease;
}

.site-header--v-overlay.site-header--v-over-media:not(.is-scrolled) {
	--hv-fg: #fff;
	--hv-tint: rgb(255 255 255 / 16%);
	--hv-current: rgb(255 255 255 / 22%);
	--hv-line: rgb(255 255 255 / 40%);
	background: transparent;
	text-shadow: 0 1px 2px rgb(0 0 0 / 35%);
}

/* The shade reaches well below the bar, so it fades out over the photo without an edge. */
.site-header--v-overlay.site-header--v-over-media:not(.is-scrolled)::before {
	content: '';
	position: absolute;
	inset: 0 0 -72px;
	z-index: -1;
	background: linear-gradient(rgb(0 0 0 / 52%), rgb(0 0 0 / 22%) 55%, rgb(0 0 0 / 0%));
	pointer-events: none;
}

.site-header--v-overlay.site-header--v-over-media:not(.is-scrolled) .site-nav--v .menu__submenu {
	text-shadow: none;
}

body:has(> .site-header--v-over-media) main,
body:has(> .site-header--v-over-media) main > .section:first-child {
	padding-top: 0;
}

/* The photo runs under the bar; its text starts below the bar. */
body:has(> .site-header--v-over-media) main > .section:first-child .hero--overlay .hero__content {
	padding-top: 88px;
}

/* Compact: a low bar, the menu as a segmented pill, the current page lifted out of it. */
.site-header--v-compact {
	--hv-height: 60px;
	--hv-link-size: 14px;
	border-bottom: 1px solid var(--hv-line);
}

.site-header--v-compact .site-header__brand {
	font-size: 1.15rem;
}

@media (min-width: 960px) {
	.site-header--v-compact .site-nav--v > .menu {
		gap: 2px;
		padding: 4px;
		border-radius: 999px;
		background: color-mix(in srgb, var(--hv-fg) 5%, transparent);
	}

	.site-header--v-compact .site-nav--v > .menu > .menu__item > .menu__link,
	.site-header--v-compact .site-nav--v > .menu > .menu__item > .menu__toggle,
	.site-header--v-compact .site-nav--v > .nav-more > .menu__toggle {
		min-height: 34px;
		padding: 6px 13px;
	}

	.site-header--v-compact .site-nav--v > .menu > .menu__item > .menu__link[aria-current],
	.site-header--v-compact .site-nav--v > .menu > .menu__item > .menu__link[aria-current]:hover {
		background: var(--hv-card);
		box-shadow:
			0 1px 2px rgb(15 23 42 / 10%),
			0 1px 6px rgb(15 23 42 / 6%);
	}

	.site-header--v-compact .site-header__cta {
		min-height: 44px;
		padding: 8px 16px;
		font-size: 14px;
	}
}

/* Two rows: a thin information row in the brand colour above the main bar. */
.site-header--v-topbar {
	border-bottom: 1px solid var(--hv-line);
}

.site-topbar {
	background: var(--color-primary, #0055ff);
	color: var(--color-onPrimary, #fff);
	font-size: 13.5px;
	line-height: 1.4;
}

.site-topbar__inner {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	width: min(
		100% - 2 * var(--hv-gutter) + 2 * var(--hv-pad),
		var(--size-contentMaxWidth, 1200px) + 2 * var(--hv-pad)
	);
	min-height: 38px;
	margin-inline: auto;
	padding-inline: var(--hv-pad);
}

.site-topbar__info,
.site-topbar__social {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 20px;
	margin: 0;
}

.site-topbar a {
	color: inherit;
	text-decoration: none;
	text-underline-offset: 3px;
}

.site-topbar a:hover {
	text-decoration: underline;
}

.site-topbar a:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
	border-radius: 4px;
}

.site-topbar__social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
}

.site-topbar .site-footer__social-icon {
	width: 17px;
	height: 17px;
}

@media (max-width: 767px) {
	.site-topbar__social {
		display: none;
	}

	.site-topbar__info {
		flex-wrap: nowrap;
		min-width: 0;
		overflow: hidden;
	}

	/* min-width 0: a flex item does not shrink below its text otherwise, and the ellipsis never
	   shows (a long info line ran 94 px past the phone's edge, bikeshop 1.11.2026). */
	.site-topbar__text {
		min-width: 0;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.site-topbar__inner {
		min-height: 34px;
	}

	.site-topbar__info:empty {
		display: none;
	}
}

@media (min-width: 960px) {
	.site-header--v-topbar .site-nav--v {
		justify-content: flex-end;
	}

	/* The current page: a bar under the label instead of a pill. */
	.site-header--v-topbar .site-nav--v > .menu > .menu__item > .menu__link[aria-current],
	.site-header--v-topbar .site-nav--v > .menu > .menu__item > .menu__link[aria-current]:hover {
		position: relative;
		background: transparent;
	}

	.site-header--v-topbar .site-nav--v > .menu > .menu__item > .menu__link[aria-current]::after {
		content: '';
		position: absolute;
		inset-inline: 14px;
		bottom: 2px;
		height: 2px;
		border-radius: 2px;
		background: var(--hv-accent);
	}
}

/* Menu button: no bar of links; a labelled button opens the menu as a side panel. */
.site-header--v-drawer {
	border-bottom: 1px solid var(--hv-line);
}

.site-header--v-drawer .site-header__toggle {
	gap: 10px;
	width: auto;
	padding: 0 16px 0 14px;
	font-family: var(--font-body, inherit);
	font-size: 15px;
	font-weight: 600;
}

.site-header__toggle-label {
	line-height: 1;
}

@media (max-width: 559px) {
	.site-header--v-drawer .site-header__toggle {
		width: 44px;
		padding: 0;
	}

	.site-header--v-drawer .site-header__toggle-label {
		display: none;
	}
}

@media (min-width: 960px) {
	.site-mobile-nav--v-drawer .site-nav-drawer {
		inset: 0 0 0 auto;
		width: min(440px, 100%);
		max-height: none;
		border-radius: 24px 0 0 24px;
		box-shadow: -16px 0 48px rgb(15 23 42 / 20%);
	}

	.site-mobile-nav--v-drawer .site-nav-drawer--from-end {
		transform: translateX(100%);
	}

	.site-mobile-nav--v-drawer .site-nav-drawer--at-rest {
		transform: translateX(0);
	}

	.site-mobile-nav--v-drawer .site-nav-drawer__inner {
		padding: 88px 40px 32px;
	}

	.site-mobile-nav--v-drawer .site-nav-drawer__inner::before {
		display: none;
	}

	html
		.site-header
		.site-mobile-nav--v-drawer
		.site-nav--mobile
		> .menu
		> .menu__item
		> .menu__link,
	html
		.site-header
		.site-mobile-nav--v-drawer
		.site-nav--mobile
		> .menu
		> .menu__item
		> .menu__toggle {
		font-family: var(--font-heading, inherit);
		font-size: 24px;
		letter-spacing: -0.01em;
	}
}

/* Site gutter (owner 16.10.2026: "pitäisi olla hieman tilaa"). One side gutter for the
   header, the content, the title and breadcrumb bars and the footer, growing with the window:
   28px on a phone, 4vw on a laptop (41px at 1024, 51px at 1280), at most 56px. Before, the
   content was 16px from the edge between 768px and the content width (the editor canvas at
   about 1000px showed 13-16px) and the header touched the edge. Only the default chrome:
   imported sites (enfold, elementor) keep their measured gutters. */
html.layout-chrome--default {
	--site-gutter: clamp(28px, 4vw, 56px);
}

html.layout-chrome--default main,
html.layout-chrome--default
	.site-header:not(.site-header--inset, .site-header--v)
	.site-header__inner,
html.layout-chrome--default .site-footer__inner,
html.layout-chrome--default .page-title-bar__inner,
html.layout-chrome--default .breadcrumbs-bar__inner {
	box-sizing: border-box;
	width: min(100% - 2 * var(--site-gutter), var(--size-contentMaxWidth, 1200px));
	max-width: min(100% - 2 * var(--site-gutter), var(--size-contentMaxWidth, 1200px));
	margin-inline: auto;
}

/* Full-width sections: `main` spans the window and each section keeps the gutter itself. */
html.layout-chrome--default.full-bleed-sections main {
	width: 100%;
	max-width: none;
}

:where(html.layout-chrome--default.full-bleed-sections main)
	.section:where(:not(.section--hero):not(.section--carousel)) {
	padding-inline: var(--site-gutter);
}

/* A section that paints a background of its own (the muted, dark or accent scheme) inside the
   contained page keeps its text off the edge of that background: the band reaches one gutter
   out past the content column (on a phone and up to the content width, to the window's edges)
   and pads its content back in by the same amount, so the text stays aligned with the other
   sections and the header (owner 24.10.2026, the template audit's text-padding check: the
   heading and cards of such a section touched the band's edge). After the ≥ 960 px `.section`
   padding above, which would reset it. Heroes and carousels reach the edges on purpose. */
:where(html.layout-chrome--default:not(.full-bleed-sections) main)
	.section:where(
		[data-color-scheme='muted'],
		[data-color-scheme='dark'],
		[data-color-scheme='accent']
	):where(:not(.section--hero):not(.section--carousel)) {
	margin-inline: calc(-1 * var(--site-gutter));
	padding-inline: var(--site-gutter);
}

/* The skip link sits above the sticky header when focused, never over the page otherwise. */
.skip-link {
	z-index: 1000;
	transform: translateY(calc(-100% - 1rem));
}

/*
 * "Toinen painike" (cta2Label/cta2Url, PUUTTEET_SUUNNITTELIJAT_2026-10-28.md): a second button
 * in the bar (Varaa + Jäsenyys), the outline pill by default, sitting before the main button.
 * A phone has room for one button in the bar: the second moves into the menu, where both
 * buttons stack full width.
 */
.site-header__cta-mobile {
	display: flex;
	flex-direction: column;
	gap: var(--space-sm, 8px);
}

@media (max-width: 959px) {
	.site-header .site-header__inner > .site-header__cta--second,
	.site-header .site-header__end > .site-header__cta--second {
		display: none;
	}
}

/*
 * "Puhelinvalikko: Koko ruutu" (mobileNavSize = full): the menu covers the whole screen with
 * big links and the contact details at its foot. It is the same modal dialog as the panel
 * (focus stays inside, Esc and the X close it, the page behind does not scroll); only the
 * size and type change. Placed last so it wins over the panel and the header variants' sheet.
 */
html .site-mobile-nav--full .site-nav-drawer,
html .site-mobile-nav--v.site-mobile-nav--full .site-nav-drawer {
	inset: 0;
	width: 100%;
	height: 100dvh;
	max-height: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	background: var(--site-mobile-nav-bg, var(--scheme-bg, var(--color-background, #fff)));
	color: var(--site-mobile-nav-fg, var(--scheme-fg, var(--color-text, #111)));
}

html .site-mobile-nav--full .site-nav-drawer--from-end {
	transform: none;
	opacity: 0;
}

html .site-mobile-nav--full .site-nav-drawer--at-rest {
	transform: none;
	opacity: 1;
}

html .site-mobile-nav--full .site-nav-drawer--animating {
	transition: opacity 0.2s ease;
}

html .site-mobile-nav--full .site-nav-drawer__backdrop {
	display: none;
}

/* The X stays the close button: the panel's own text colour, above the panel. */
html .site-mobile-nav--full .site-header__toggle[aria-expanded='true'] {
	color: var(--site-mobile-nav-fg, var(--scheme-fg, var(--color-text, #111)));
	border-color: currentColor;
}

html .site-mobile-nav--full .site-nav-drawer__inner,
html .site-mobile-nav--v.site-mobile-nav--full .site-nav-drawer__inner {
	display: flex;
	flex-direction: column;
	min-height: 100%;
	box-sizing: border-box;
	padding: calc(var(--site-header-bottom, var(--site-header-h, 72px)) + 8px) clamp(20px, 6vw, 64px)
		calc(24px + env(safe-area-inset-bottom, 0px));
}

html .site-mobile-nav--full .site-nav-drawer__inner::before {
	display: none;
}

html .site-mobile-nav--full .site-nav--mobile {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: var(--space-md, 16px);
}

html .site-header .site-mobile-nav--full .site-nav--mobile > .menu > .menu__item > .menu__link,
html .site-header .site-mobile-nav--full .site-nav--mobile > .menu > .menu__item > .menu__toggle {
	display: flex;
	align-items: center;
	min-height: 56px;
	padding: 4px 0;
	font-size: var(--site-mobile-nav-size, clamp(1.6rem, 1rem + 3.2vw, 2.75rem));
	font-weight: var(--site-mobile-nav-weight, 600);
	line-height: 1.1;
	letter-spacing: -0.01em;
	color: inherit;
}

html .site-header .site-mobile-nav--full .site-nav--mobile .menu__submenu .menu__link {
	min-height: 44px;
	font-size: 1.125rem;
}

html .site-mobile-nav--full .site-header__cta-mobile {
	position: static;
	margin: var(--space-md, 16px) 0 0;
	padding: 0;
}

.site-nav-contact {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 24px;
	margin: auto 0 0;
	padding-top: var(--space-md, 16px);
	border-top: 1px solid color-mix(in srgb, currentColor 20%, transparent);
	font-size: 1rem;
}

.site-nav-contact__link,
.site-nav-contact__social a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: inherit;
}

.site-nav-contact__social {
	display: inline-flex;
	gap: 4px;
}

.site-nav-contact__social a {
	justify-content: center;
	min-width: 44px;
}

.site-nav-contact__social svg {
	width: 22px;
	height: 22px;
}

@media (prefers-reduced-motion: reduce) {
	html .site-mobile-nav--full .site-nav-drawer--animating {
		transition: none;
	}
}

/* "Iso nimi" (U5): the site's name as a big wordmark at the foot of the footer. Fluid, wraps
   rather than overflowing, in the footer's own colour; decoration (aria-hidden). */
/* The footer is a flex row: the name takes a line of its own under the footer's content. */
.site-footer:has(> .site-footer__wordmark) {
	flex-wrap: wrap;
}

.site-footer__wordmark {
	box-sizing: border-box;
	flex: 0 0 100%;
	width: 100%;
	max-width: var(--size-contentMaxWidth, 1200px);
	margin: clamp(1.5rem, 4vw, 3rem) auto 0;
	padding: 0 var(--space-md, 16px) clamp(0.5rem, 2vw, 1.5rem);
	font-family: var(--font-heading, inherit);
	font-weight: var(--font-headingWeight, 700);
	font-size: clamp(2.5rem, 10vw, 10rem);
	line-height: 0.92;
	letter-spacing: -0.02em;
	overflow-wrap: break-word;
	hyphens: auto;
	color: inherit;
	opacity: 0.92;
}

/* "Sivunvaihto häivytyksenä" (U9): a cross-document view transition, the browser's own
   cross-fade. The rule is written only when the setting is on (layout/theme.liquid) and only
   inside no-preference, so less motion and the site's motion switch keep the plain change. */
@media (prefers-reduced-motion: reduce) {
	::view-transition-group(*),
	::view-transition-old(*),
	::view-transition-new(*) {
		animation: none !important;
	}
}

/* ------------------------------------------------------------------------------------------
 * Ylä- ja alatunniste (docs/komponentit/ALA_JA_YLATUNNISTE_2026-11-06.md)
 * ---------------------------------------------------------------------------------------- */

/* Megavalikko polish: plain links of a column line up with the described ones (both 12 px in),
   and a column title's focus ring keeps clear of the description under it. */
.site-header--mega .site-nav--desktop .menu__submenu .menu__group .menu__link {
	padding: 10px 12px;
}

.menu__group-title:has(+ .menu__group-description) {
	padding-bottom: 2px;
	margin-bottom: 6px;
}

a.menu__group-title {
	width: fit-content;
	max-width: 100%;
}

/* "Ylätunnisteen väri" (headerScheme): the bar's background and text come as a pair
   (src/chrome-colors.ts). A primary button that would vanish on it takes the bar's text colour. */
.site-header--scheme:not(.site-header--v-over-media),
.site-sidebar.site-header--scheme {
	background: var(--site-header-bg);
	color: var(--site-header-fg);
}

.site-header--cta-invert
	.site-header__inner
	> .site-header__cta:not(.site-header__cta--outline, .site-header__cta--own),
.site-header--cta-invert
	.site-header__end
	> .site-header__cta:not(.site-header__cta--outline, .site-header__cta--own) {
	background: var(--site-header-fg);
	color: var(--site-header-bg);
}

/* In the ready-made designs the dropdown card and the phone sheet keep the page's colours
   (their text is the page's text colour); only the bar itself takes the scheme. */
.site-header--v.site-header--scheme {
	--hv-card: var(--color-background, #fff);
}

.site-header--v.site-header--scheme.site-header--v-floating.site-header--v-sticky.is-scrolled
	.site-header__inner {
	background: var(--hv-bg);
}

.site-header--v-compact.site-header--scheme
	.site-nav--v
	> .menu
	> .menu__item
	> .menu__link[aria-current] {
	background: var(--hv-tint-strong);
	box-shadow: none;
}

/* A field in a coloured bar keeps the page's own colours, so it reads as a field. */
.site-header--scheme .site-header__end .site-search-box input,
.site-header--scheme .site-header__inner > .site-search-box input {
	border-color: transparent;
	background: var(--color-background, #fff);
	color: var(--color-text, #111);
}

/* "Toisen painikkeen oma väri" (cta2Color): filled, with black or white text by contrast. */
.site-header__cta.site-header__cta--own,
.site-header__cta-mobile .site-header__cta.site-header__cta--own,
.site-header--v .site-header__cta.site-header__cta--own,
.site-header--v .site-header__cta-mobile .site-header__cta.site-header__cta--own,
.site-mobile-nav--v .site-header__cta-mobile .site-header__cta.site-header__cta--own {
	background: var(--cta-own-bg);
	color: var(--cta-own-fg);
	box-shadow: none;
}

/* "Haku ylätunnisteessa: Hakukuvake" (snippets/search-box.liquid): a disclosure button that
   opens the search field in a panel under the bar. On a phone the field is in the menu. */
.site-search-toggle {
	position: relative;
	display: none;
}

@media (min-width: 960px) {
	.site-search-toggle {
		display: block;
		margin-inline: 0.25rem;
	}
}

.site-search-toggle__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: inherit;
	cursor: pointer;
}

.site-search-toggle__button:hover,
.site-search-toggle.is-open .site-search-toggle__button {
	background: color-mix(in srgb, currentColor 10%, transparent);
}

.site-search-toggle__button:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.site-search-toggle__panel {
	display: none;
	position: absolute;
	top: calc(100% + 10px);
	right: 0;
	z-index: 60;
	width: min(24rem, calc(100vw - 32px));
	padding: 12px;
	box-sizing: border-box;
	border: 1px solid var(--color-border, #d5d9e0);
	border-radius: var(--radius-md, 8px);
	background: var(--color-background, #fff);
	color: var(--color-text, #111);
	box-shadow: 0 16px 40px -16px rgba(8, 10, 16, 0.35);
}

.site-search-toggle.is-open .site-search-toggle__panel {
	display: block;
}

.site-search-toggle .site-search-box {
	display: flex;
	margin: 0;
}

.site-search-toggle .site-search-box input {
	flex: 1 1 auto;
	width: auto;
	background: var(--color-background, #fff);
	color: var(--color-text, #111);
}

html.no-js .site-search-toggle__button {
	display: none;
}

html.no-js .site-search-toggle__panel {
	display: block;
	position: static;
	width: auto;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	box-shadow: none;
}

/* "Alatunnisteen väri" (footerScheme). */
.site-footer.site-footer--scheme {
	background: var(--site-footer-bg);
	color: var(--site-footer-fg);
}

/* "Logo alatunnisteessa" and the trust badges, in either footer. */
.site-footer__brand {
	grid-column: 1 / -1;
	margin: 0;
}

.site-footer__brand-link {
	display: inline-block;
	text-decoration: none;
}

.site-footer__logo {
	display: block;
	width: auto;
	max-width: min(100%, 240px);
	height: auto;
	max-height: 72px;
	object-fit: contain;
}

.site-footer__name {
	font-family: var(--font-heading, inherit);
	font-size: 1.75rem;
	font-weight: 700;
	line-height: 1.1;
}

.site-footer__badges {
	grid-column: 1 / -1;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px 28px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-footer__badges a {
	display: block;
}

.site-footer__badges img {
	display: block;
	width: auto;
	max-width: 160px;
	height: 56px;
	object-fit: contain;
}

.site-footer__top {
	grid-column: 1 / -1;
	margin: 0;
}

.site-footer__top-link {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}

/* "Alatunnisteen palstat" (snippets/footer-columns.liquid): the owner's titled columns, side by
   side as far as they fit and stacked on a phone, then the badges and the bottom row. */
.site-footer.site-footer--cols .site-footer__inner {
	/* One grid track, not a flex column: a column of auto-fit grids measured its rows at the
	   narrowest width and left a tall gap under the columns. */
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	align-items: start;
	gap: var(--space-lg, 32px);
	text-align: start;
}

.site-footer__columns {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
	gap: var(--space-lg, 24px) var(--space-xl, 32px);
}

.site-footer__col-heading {
	margin: 0 0 0.6em;
	font-family: inherit;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.3;
	color: inherit;
}

.site-footer__col-body p,
.site-footer__col-body .site-footer__text {
	margin: 0 0 0.5em;
}

.site-footer__col-body p:last-child {
	margin-bottom: 0;
}

.site-footer__col-links {
	display: flex;
	flex-direction: column;
	gap: 0.4em;
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-footer__col-links a {
	display: inline-block;
	padding-block: 2px;
}

.site-footer__col-social a {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
}

.site-footer__col-social .site-footer__social-icon {
	display: block;
	width: 20px;
	height: 20px;
}

.site-footer__col-toggle {
	display: none;
}

/* "Uutiskirje" column: the address and the button on one row, what is ordered under them. */
.site-footer__newsletter {
	display: grid;
	gap: 8px;
	max-width: 26rem;
}

.site-footer__newsletter-row {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.site-footer__newsletter-input {
	flex: 1 1 12rem;
	min-width: 0;
	min-height: 44px;
	padding: 0 12px;
	border: 1px solid color-mix(in srgb, currentColor 45%, transparent);
	border-radius: var(--radius-sm, 4px);
	background: var(--color-background, #fff);
	color: var(--color-text, #111);
	font: inherit;
}

.site-footer__newsletter-input:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.site-footer__newsletter-button {
	min-height: 44px;
}

.site-footer .site-footer__newsletter-consent {
	margin: 0;
	font-size: 0.875rem;
	line-height: 1.45;
}

.site-footer__newsletter-consent a {
	color: inherit;
	text-decoration: underline;
}

/* "Linkkivalikko" column: the dropdown block, opening upwards (the footer is the page's end). */
.site-footer__dropdown > .dropdown__button {
	color: inherit;
}

@media (min-width: 640px) {
	.site-footer__dropdown .dropdown__list {
		top: auto;
		bottom: calc(100% + 0.35rem);
	}
}

.site-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 24px;
	padding-top: var(--space-md, 16px);
	border-top: 1px solid color-mix(in srgb, currentColor 22%, transparent);
	font-size: 0.875rem;
}

.site-footer__bottom .site-footer__copyright {
	margin: 0;
	font-size: inherit;
}

.site-footer__legal-row {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-footer__legal-row a,
.site-footer__legal-row button {
	display: inline-flex;
	align-items: center;
	min-height: 24px;
}

.site-footer__bottom .site-footer__top-link {
	margin-left: auto;
}

/* "Palstat puhelimella: Haitari" (footerMobile): only with JavaScript (Alpine adds the class),
   only below the desktop width. */
@media (max-width: 959px) {
	.site-footer--accordion .site-footer__columns {
		gap: 0;
	}

	.site-footer__col.is-collapsible {
		border-bottom: 1px solid color-mix(in srgb, currentColor 22%, transparent);
	}

	.site-footer__col.is-collapsible .site-footer__col-heading {
		margin: 0;
	}

	.site-footer__col.is-collapsible .site-footer__col-title {
		display: none;
	}

	.site-footer__col.is-collapsible .site-footer__col-toggle {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 1em;
		width: 100%;
		min-height: 48px;
		padding: 0;
		border: 0;
		background: none;
		color: inherit;
		font: inherit;
		text-align: start;
		cursor: pointer;
	}

	.site-footer__col.is-collapsible .site-footer__col-toggle:focus-visible {
		outline: 2px solid currentColor;
		outline-offset: 2px;
	}

	.site-footer__col.is-collapsible:not(.is-open) .site-footer__col-body {
		display: none;
	}

	.site-footer__col.is-collapsible .site-footer__col-body {
		padding-bottom: 16px;
	}
}

.site-footer__col-chevron {
	flex: none;
	width: 0.55em;
	height: 0.55em;
	margin-top: -0.25em;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	transition: transform 0.15s ease;
}

.site-footer__col.is-open .site-footer__col-chevron {
	margin-top: 0.25em;
	transform: rotate(-135deg);
}

@media (prefers-reduced-motion: reduce) {
	.site-footer__col-chevron {
		transition: none;
	}
}

/* ------------------------------------------------------------------------------------------
 * Kielivalinta ikkunana ja puhelinvalikon välilehdet (docs/sivupohjat/LUOTTOKORTTI_2026-11-09.md)
 * ---------------------------------------------------------------------------------------- */

/* "Ikkuna hakukentällä" (localeSwitcherStyle = dialog): the summary opens a modal window with a
   search field; without JavaScript the <details> shows the same links under it. */
.locale-dialog__fallback {
	position: relative;
}

.locale-dialog__fallback > .locale-dialog__list--plain {
	position: absolute;
	top: 100%;
	right: 0;
	z-index: 60;
	min-width: 14rem;
	padding: 6px;
	background: var(--scheme-bg, #fff);
	color: var(--scheme-fg, #15181f);
	border: 1px solid var(--scheme-border, rgb(0 0 0 / 12%));
	border-radius: var(--radius-md, 8px);
	box-shadow: 0 8px 24px rgb(0 0 0 / 12%);
}

.locale-dialog__country {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.2em;
	padding: 1px 4px;
	border: 1px solid currentColor;
	border-radius: 4px;
	font-size: 0.75em;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0.04em;
}

.locale-dialog {
	width: min(28rem, calc(100vw - 32px));
	max-height: min(36rem, calc(100dvh - 32px));
	padding: 0;
	border: 0;
	border-radius: var(--radius-lg, 12px);
	background: var(--color-background, #fff);
	color: var(--color-text, #15181f);
	box-shadow: 0 24px 64px rgb(0 0 0 / 25%);
}

.locale-dialog::backdrop {
	background: rgb(0 0 0 / 45%);
}

.locale-dialog__box {
	display: grid;
	gap: 12px;
	padding: 20px;
}

.locale-dialog__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.locale-dialog__title {
	margin: 0;
	font-size: 1.25rem;
}

.locale-dialog__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: inherit;
	font-size: 1.75rem;
	line-height: 1;
	cursor: pointer;
}

.locale-dialog__search {
	display: grid;
	gap: 4px;
	font-size: 0.875rem;
	font-weight: 600;
}

.locale-dialog__search input {
	min-height: 44px;
	padding: 0 12px;
	border: 1px solid color-mix(in srgb, currentColor 40%, transparent);
	border-radius: var(--radius-md, 8px);
	background: transparent;
	color: inherit;
	font: inherit;
	font-weight: 400;
}

.locale-dialog__list {
	display: grid;
	margin: 0;
	padding: 0;
	list-style: none;
}

.locale-dialog__link {
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 44px;
	padding: 0 10px;
	border-radius: var(--radius-md, 8px);
	color: inherit;
	text-decoration: none;
}

.locale-dialog__link:hover {
	background: color-mix(in srgb, currentColor 8%, transparent);
}

.locale-dialog__link[aria-current] .locale-dialog__name {
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 0.3em;
}

.locale-dialog__close:focus-visible,
.locale-dialog__link:focus-visible,
.locale-dialog__search input:focus-visible,
.site-nav-tabs__tab:focus-visible,
.site-nav-tabs__summary:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.locale-dialog__empty {
	margin: 0;
	font-size: 0.875rem;
}

.locale-dialog__empty:empty {
	display: none;
}

/* "Ylätason kohdat välilehtinä" (mobileNavTabs): the groups as tabs at the top of the
   full-screen phone menu, their links under the selected one. */
.site-nav-tabs {
	display: grid;
	gap: var(--space-md, 16px);
}

.site-nav-tabs__list {
	display: flex;
	gap: 4px;
	overflow-x: auto;
	border-bottom: 1px solid color-mix(in srgb, currentColor 20%, transparent);
}

.site-nav-tabs__list[hidden],
.site-nav-tabs__panel[hidden] {
	display: none;
}

.site-nav-tabs__tab {
	flex: none;
	min-height: 48px;
	padding: 0 16px;
	border: 0;
	border-bottom: 3px solid transparent;
	background: transparent;
	color: inherit;
	font: inherit;
	font-size: 1.125rem;
	font-weight: 600;
	cursor: pointer;
	opacity: 0.75;
}

.site-nav-tabs__tab[aria-selected='true'] {
	border-bottom-color: currentColor;
	opacity: 1;
}

.site-nav-tabs__heading {
	margin: 0 0 4px;
	font-size: 1.25rem;
	font-weight: 700;
}

.site-nav-tabs__items,
.site-nav-tabs__sub,
.site-nav-tabs__links {
	display: grid;
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-nav-tabs__sub {
	padding: 0 0 8px 16px;
}

.site-nav-tabs__links {
	padding-top: var(--space-sm, 8px);
	border-top: 1px solid color-mix(in srgb, currentColor 20%, transparent);
}

.site-nav-tabs__link,
.site-nav-tabs__summary {
	display: flex;
	align-items: center;
	min-height: 48px;
	color: inherit;
	font-size: var(--site-mobile-nav-size, 1.25rem);
	font-weight: var(--site-mobile-nav-weight, 600);
	text-decoration: none;
}

.site-nav-tabs__sub .site-nav-tabs__link {
	min-height: 44px;
	font-size: 1.0625rem;
	font-weight: 400;
}

.site-nav-tabs__link[aria-current] {
	text-decoration: underline;
	text-underline-offset: 0.3em;
}

.site-nav-tabs__summary {
	justify-content: space-between;
	cursor: pointer;
	list-style: none;
}

.site-nav-tabs__summary::-webkit-details-marker {
	display: none;
}

.site-nav-tabs__summary::after {
	content: '';
	width: 0.45em;
	height: 0.45em;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY(-0.15em) rotate(45deg);
	transition: transform 0.15s ease;
}

.site-nav-tabs__acc[open] > .site-nav-tabs__summary::after {
	transform: translateY(0.1em) rotate(-135deg);
}

@media (prefers-reduced-motion: reduce) {
	.site-nav-tabs__summary::after {
		transition: none;
	}
}

.motion-off .site-nav-tabs__summary::after {
	transition: none;
}