/* FM4 DesignEngine — dynamic 2026-08-23 22:11:06 */

:root {
  --fm4-block-filter:none;
  --fm4-block-shadow:none;
  --fm4-block-drop-filter:none;
  --fm4-figure-filter:none;
  --fm4-img-filter:none;
  --fm4-block-radius:var(--fm4-global-radius,0);
  --fm4-block-opacity:1;
  --fm4-block-bg:transparent;
  --fm4-block-border:none;
  --fm4-block-overflow:visible;
  --fm4-block-bdblur:none;
  --fm4-block-mask:none;
  --fm4-block-decoration:none;
  --fm4-block-decoration-display:none;
  --fm4-block-margin:0;
  --fm4-block-margin-top:var(--fm4-section-gap,var(--fm4-block-spacing,0));
  --fm4-block-margin-right:var(--fm4-block-margin,0);
  --fm4-block-margin-bottom:var(--fm4-block-margin,0);
  --fm4-block-margin-left:var(--fm4-block-margin,0);
  --fm4-block-padding-top:var(--fm4-block-padding-v,0);
  --fm4-block-padding-right:var(--fm4-block-padding-h,0);
  --fm4-block-padding-bottom:var(--fm4-block-padding-v,0);
  --fm4-block-padding-left:var(--fm4-block-padding-h,0);
  --fm4-block-focal-x:50%;
  --fm4-block-focal-y:50%;
  --fm4-block-ar:auto;
  --fm4-txt-radius:0;
  --fm4-txt-mask:none;
  --fm4-txt-margin:0;
}

:root {
  --fm4-mask-circle: ellipse(50% 50% at 50% 50%);
  --fm4-mask-portrait: inset(0% 10% 0% 10% round 100px);
  --fm4-mask-squircle: polygon(5% 0%,95% 0%,100% 5%,100% 95%,95% 100%,5% 100%,0% 95%,0% 5%);
  --fm4-mask-hexagon: polygon(25% 0%,75% 0%,100% 50%,75% 100%,25% 100%,0% 50%);
  --fm4-mask-organic: polygon(48% 9%,85% 20%,100% 50%,80% 90%,45% 100%,15% 80%,0% 50%,15% 15%);
  --fm4-filter-glass: blur(8px) saturate(180%) brightness(1.05);
  --fm4-filter-sepia: sepia(80%) contrast(1.1);
  --fm4-filter-grayscale: grayscale(100%);
  --fm4-filter-vintage: sepia(40%) contrast(1.05) brightness(0.95) saturate(0.8);
  --fm4-filter-vivid: saturate(160%) contrast(1.1);
  --fm4-filter-warm: sepia(30%) saturate(140%) hue-rotate(-5deg) brightness(1.05);
  --fm4-filter-cool: saturate(80%) hue-rotate(20deg) brightness(1.05);
  --fm4-block-spacing: 24px;
  --fm4-space-tight: 0.5rem;
  --fm4-space-read: 1.25rem;
  --fm4-space-breathe: 2.5rem;
  --fm4-space-section: 5rem;
  --fm4-secondary-color: var(--fm4-secondary, #334155);
  --fm4-secondary: var(--fm4-secondary-color, #334155);
  --fm4-project-id: 1;
  --project-id: 1;
  --fm4-project-id: 1;
  --fm4-heading-font: Lato;
  --theme-heading-font: Lato;
  --theme-font-head: Lato;
  --fm4-body-font: Raleway;
  --theme-body-font: Raleway;
  --theme-font-body: Raleway;
  --fm4-h1-size: 2.25em;
  --h1-size: 2.25em;
  --fm4-h1-size: 2.25em;
  --fm4-h2-size: 1.75em;
  --h2-size: 1.75em;
  --fm4-h2-size: 1.75em;
  --fm4-h3-size: 1.38em;
  --h3-size: 1.38em;
  --fm4-h3-size: 1.38em;
  --fm4-heading-line-height: 1.40;
  --heading-line-height: 1.40;
  --fm4-heading-line-height: 1.40;
  --fm4-body-line-height: 1.60;
  --body-line-height: 1.60;
  --fm4-body-line-height: 1.60;
  --fm4-paragraph-margin: 1.00rem;
  --paragraph-margin: 1.00rem;
  --fm4-paragraph-margin: 1.00rem;
  --fm4-primary-color: #e66100;
  --theme-primary: #e66100;
  --primary-color: #e66100;
  --fm4-accent-color: #f86463;
  --theme-accent: #f86463;
  --accent-color: #f86463;
  --fm4-background-color: #ffffff;
  --fm4-bg-color: #ffffff;
  --theme-bg: #ffffff;
  --bg-color: #ffffff;
  --background-color: #ffffff;
  --fm4-surface-color: #ffffff;
  --theme-surface: #ffffff;
  --surface-color: #ffffff;
  --fm4-text-color: #1e293b;
  --theme-text: #1e293b;
  --text-color: #1e293b;
  --fm4-border-color: #e2e8f0;
  --theme-border: #e2e8f0;
  --border-color: #e2e8f0;
  --fm4-global-radius: 8.00px;
  --theme-radius: 8.00px;
  --global-radius: 8.00px;
  --fm4-global-radius: 8.00px;
  --fm4-image-radius: 8.00px;
  --image-radius: 8.00px;
  --fm4-image-radius: 8.00px;
  --fm4-block-spacing: 20.00px;
  --block-spacing: 20.00px;
  --fm4-block-spacing: 20.00px;
  --fm4-container-width: 984.00px;
  --container-width: 984.00px;
  --fm4-container-width: 984.00px;
  --fm4-type-base: 16.00px;
  --theme-type-base: 16.00px;
  --type-base: 16.00px;
  --fm4-type-scale: 1.200;
  --theme-type-scale: 1.200;
  --fm4-dual-themes: 0;
}



/* ── FM4 Layout & Container Spacing ── */
.fm4-main {
  padding-top: var(--fm4-main-top-padding, clamp(2rem, 4vw, 3rem)) !important;
  padding-bottom: var(--fm4-main-bottom-padding, clamp(3rem, 6vw, 4.5rem)) !important;
  padding-inline: var(--fm4-site-padding, 1rem) !important;
}

/* Cover Image / Kant-till-kant: controlled by --fm4-cover-top-gap and --fm4-cover-gap / --fm4-section-gap */
.fm4-main > .fm4-hero-cover:first-child {
  margin-top: var(--fm4-cover-top-gap, 0px) !important;
  margin-bottom: var(--fm4-cover-gap, var(--fm4-section-gap, 2.5rem)) !important;
}

.fm4-main:has(> .fm4-hero-cover:first-child) {
  padding-top: var(--fm4-cover-top-gap, 0px) !important;
}

.fm4-hero-cover,
.fm4-background-section,
.fm4-cta-band {
  margin-top: var(--fm4-cover-top-gap, 0px);
  margin-bottom: var(--fm4-cover-gap, var(--fm4-section-gap, 2.5rem)) !important;
}

/* Standardized Page Header (e.g. after cover on yllapito) */
.uv-header {
  text-align: center !important;
  max-width: 920px !important;
  margin-inline: auto !important;
  padding-top: var(--fm4-page-title-top-gap, clamp(1.5rem, 3.5vw, 2.5rem)) !important;
  margin-bottom: var(--fm4-page-title-content-gap, var(--fm4-section-gap, 2.5rem)) !important;
}

.uv-header .uv-title {
  font-size: var(--fm4-h1-size, clamp(2.2rem, 5vw, 3.4rem)) !important;
  font-weight: 850 !important;
  letter-spacing: -0.035em !important;
  line-height: 1.15 !important;
  margin-top: 0 !important;
  margin-bottom: var(--fm4-heading-gap, 0.85rem) !important;
  text-align: center !important;
}

/* ── Standardized Hero Section (Text Heroes on om-oss, kontakt, tjanster) ── */
.fm4-hero-section {
  text-align: center !important;
  padding: 0 !important;
  margin-top: var(--fm4-page-title-top-gap, 0px) !important;
  margin-bottom: var(--fm4-page-title-content-gap, var(--fm4-section-gap, 2.5rem)) !important;
}

.fm4-hero-section .fm4-hero-kicker,
.fm4-hero-section .fm4-kicker {
  display: inline-block !important;
  font-size: 0.85rem !important;
  font-weight: 800 !important;
  color: var(--fm4-primary-color, #ea580c) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.12em !important;
  margin: 0 0 14px 0 !important;
  padding: 0 !important;
  border: none !important;
  background: none !important;
}

.fm4-hero-section .fm4-hero-title,
.fm4-hero-section .fm4-title-hero {
  font-size: var(--fm4-h1-size, clamp(2.2rem, 5vw, 3.4rem)) !important;
  font-weight: 850 !important;
  letter-spacing: -0.035em !important;
  line-height: 1.15 !important;
  margin-top: 0 !important;
  margin-bottom: var(--fm4-heading-gap, 14px) !important;
}

.fm4-hero-section .fm4-lead {
  font-size: 1.05rem !important;
  line-height: var(--fm4-body-line-height, 1.65) !important;
  margin-bottom: var(--fm4-paragraph-margin, 1rem) !important;
  max-width: 680px !important;
  margin-inline: auto !important;
  color: inherit !important;
  opacity: 0.85 !important;
}

.fm4-doc-container {
  gap: var(--fm4-content-gap, var(--fm4-block-spacing, 32px)) !important;
}

/* ── Standardized Icon Badges ── */
.fm4-icon-badge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 42px !important;
  height: 42px !important;
  border-radius: max(8px, calc(var(--fm4-global-radius, 16px) - 6px)) !important;
  background: rgba(100, 116, 139, 0.12) !important;
  border: 1px solid rgba(100, 116, 139, 0.25) !important;
  color: #64748b !important;
  flex-shrink: 0 !important;
  margin-bottom: 0 !important;
  box-sizing: border-box !important;
}

.fm4-icon-badge.fm4-icon-sm {
  width: 32px !important;
  height: 32px !important;
  border-radius: max(6px, calc(var(--fm4-global-radius, 16px) - 8px)) !important;
}

.fm4-icon-badge.fm4-icon-md {
  width: 42px !important;
  height: 42px !important;
  border-radius: max(8px, calc(var(--fm4-global-radius, 16px) - 6px)) !important;
}

.fm4-icon-badge svg {
  display: block !important;
}

/* ── Seamless Form Integration inside Adaptive Cards (No Box-in-Box) ── */
.fm4-card-adaptive .fm4-public-form,
.fm4-card-adaptive .fm4-app-component--form .fm4-public-form,
.fm4-card-adaptive .fm4-public-form--standard {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.fm4-card-adaptive .fm4-public-form .fm4-form-title {
  margin-top: 0 !important;
  margin-bottom: 4px !important;
  font-size: 1.25rem !important;
  font-weight: 800 !important;
  color: var(--fm4-text-color, #0f172a) !important;
}

.fm4-card-adaptive .fm4-public-form .fm4-form-intro {
  margin-top: 0 !important;
  margin-bottom: 16px !important;
  font-size: 0.88rem !important;
  color: color-mix(in srgb, var(--fm4-text-color, #475569) 80%, transparent) !important;
}

/* ── FM4 Adaptive Card & Box Design System (100% Dynamic Palette) ────────── */
.fm4-card-adaptive {
  background: var(--fm4-surface-color, #ffffff) !important;
  border: 1px solid var(--fm4-border-color, rgba(226, 232, 240, 0.9)) !important;
  border-radius: var(--fm4-global-radius, 16px) !important;
  padding: var(--fm4-card-padding, 1.65rem) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
  color: var(--fm4-text-color, #1e293b) !important;
  box-sizing: border-box !important;
}

/* Headings inside cards MUST always have zero top margin to prevent pushed-down content */
.fm4-card-adaptive :is(h1, h2, h3, h4, h5, h6),
.fm4-subcard-adaptive :is(h1, h2, h3, h4, h5, h6),
.fm4-cta-adaptive :is(h1, h2, h3, h4, h5, h6) {
  margin-top: 0 !important;
  color: var(--fm4-text-color, #0f172a) !important;
}
.fm4-card-adaptive h2, .fm4-card-adaptive h3, .fm4-card-adaptive h4 {
  color: var(--fm4-text-color, #0f172a) !important;
}
.fm4-card-adaptive p, .fm4-card-adaptive .fm4-card-desc {
  color: color-mix(in srgb, var(--fm4-text-color, #475569) 80%, transparent) !important;
}
.fm4-card-adaptive li {
  color: color-mix(in srgb, var(--fm4-text-color, #334155) 85%, transparent) !important;
}
.fm4-card-adaptive input, .fm4-card-adaptive textarea, .fm4-card-adaptive select {
  background: color-mix(in srgb, var(--fm4-surface-color, #fff) 85%, var(--fm4-text-color, #000)) !important;
  border: 1px solid var(--fm4-border-color, #cbd5e1) !important;
  color: var(--fm4-text-color, #0f172a) !important;
}
.fm4-card-adaptive input:focus, .fm4-card-adaptive textarea:focus {
  border-color: var(--fm4-primary-color, #ea580c) !important;
  background: var(--fm4-surface-color, #ffffff) !important;
}

.fm4-subcard-adaptive {
  background: color-mix(in srgb, var(--fm4-surface-color, #ffffff) 90%, var(--fm4-text-color, #000000)) !important;
  border: 1px solid var(--fm4-border-color, #e2e8f0) !important;
  border-radius: calc(var(--fm4-global-radius, 16px) - 4px) !important;
  padding: calc(var(--fm4-card-padding, 1.65rem) * 0.75) !important;
  color: var(--fm4-text-color, #334155) !important;
  box-sizing: border-box !important;
}
.fm4-subcard-adaptive strong {
  color: var(--fm4-text-color, #0f172a) !important;
}
.fm4-subcard-adaptive code {
  background: color-mix(in srgb, var(--fm4-text-color, #111) 12%, transparent) !important;
  color: var(--fm4-primary-color, #ea580c) !important;
}

/* ── Standardized Contact Component Styling ── */
.fm4-contact-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
  margin: 0 !important;
  padding: 0 !important;
}

.fm4-contact-item {
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;
}

.fm4-contact-item svg,
.fm4-contact-item .fm4-contact-icon {
  color: var(--fm4-primary-color, #ea580c) !important;
  flex-shrink: 0 !important;
  margin-top: 2px !important;
}

.fm4-contact-item .fm4-contact-label {
  font-size: 0.75rem !important;
  font-weight: 750 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  color: color-mix(in srgb, var(--fm4-text-color, #0f172a) 65%, transparent) !important;
  margin-bottom: 2px !important;
}

.fm4-contact-item .fm4-contact-value {
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  color: var(--fm4-text-color, inherit) !important;
}

.fm4-contact-item .fm4-contact-value a {
  color: inherit !important;
  text-decoration: none !important;
  font-weight: 700 !important;
}

.fm4-contact-item .fm4-contact-value a:hover {
  color: var(--fm4-primary-color, #ea580c) !important;
}

.fm4-cta-adaptive {
  background: color-mix(in srgb, var(--fm4-surface-color, #ffffff) 92%, var(--fm4-primary-color, #ea580c)) !important;
  border: 1px solid color-mix(in srgb, var(--fm4-primary-color, #ea580c) 30%, transparent) !important;
  color: var(--fm4-text-color, #0f172a) !important;
}
.fm4-cta-adaptive h2, .fm4-cta-adaptive h3, .fm4-cta-adaptive .fm4-cta-title {
  color: var(--fm4-text-color, #0f172a) !important;
}
.fm4-cta-adaptive p, .fm4-cta-adaptive .fm4-cta-desc {
  color: color-mix(in srgb, var(--fm4-text-color, #475569) 80%, transparent) !important;
}

.fm4-stat-adaptive {
  background: color-mix(in srgb, var(--fm4-surface-color, #fff) 90%, var(--fm4-text-color, #000)) !important;
  border: 1px solid var(--fm4-border-color, #e2e8f0) !important;
  border-radius: 12px;
}

/* ── Footer Matching Header Surface ───────────────────────────────────── */
.fm4-site-footer {
  background: var(--fm4-surface-color, #ffffff) !important;
  border-top: 1px solid var(--fm4-border-color, rgba(0,0,0,.08)) !important;
  color: color-mix(in srgb, var(--fm4-text-color, #1f2937) 65%, transparent) !important;
}
.fm4-site-footer p,
.fm4-site-footer [data-fm4-field="footer_text"] {
  color: color-mix(in srgb, var(--fm4-text-color, #1f2937) 75%, transparent) !important;
}
.fm4-footer-nav .fm4-nav-link {
  color: color-mix(in srgb, var(--fm4-text-color, #1f2937) 85%, transparent) !important;
}
.fm4-footer-nav .fm4-nav-link:hover,
.fm4-footer-nav .fm4-nav-link.fm4-nav-active {
  color: var(--fm4-primary-color, #ea580c) !important;
}

/* ── Language Switcher in Header ──────────────────────────────────────── */
.fm4-header-lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  background: color-mix(in srgb, var(--fm4-text-color, #000) 8%, transparent);
  border: 1px solid var(--fm4-border-color, rgba(0, 0, 0, 0.08));
  border-radius: 999px;
  padding: 3px 5px;
  font-size: 0.78rem;
  font-weight: 750;
  margin-left: 12px;
}
.fm4-header-lang-switch a {
  color: color-mix(in srgb, var(--fm4-text-color, #64748b) 70%, transparent);
  text-decoration: none;
  padding: 3px 8px;
  border-radius: 999px;
  transition: all 0.15s ease;
  line-height: 1;
}
.fm4-header-lang-switch a:hover {
  color: var(--fm4-text-color, #0f172a);
}
.fm4-header-lang-switch a.is-active {
  background: var(--fm4-primary-color, #ea580c) !important;
  color: #ffffff !important;
  box-shadow: 0 1px 4px color-mix(in srgb, var(--fm4-primary-color, #ea580c) 40%, transparent);
}

/* ── Header Strict Alignment ── */
#fm4-page .fm4-site-header .fm4-block-wrap,
#fm4-page .fm4-site-header .fm4-placement-slot,
#fm4-page .fm4-site-header .fm4-search-widget,
#fm4-page .fm4-site-header .fm4-search-widget__form {
  --fm4-block-margin-top: 0px !important;
  --fm4-block-margin-bottom: 0px !important;
  --fm4-block-margin: 0px !important;
  --fm4-block-padding-top: 0px !important;
  --fm4-block-padding-bottom: 0px !important;
  margin: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  vertical-align: middle !important;
  position: relative !important;
}

#fm4-page .fm4-site-header .fm4-brand-stack {
  display: inline-flex !important;
  align-items: center !important;
  vertical-align: middle !important;
  margin: 0 !important;
  padding: 0 !important;
}

#fm4-page .fm4-site-header .fm4-site-brand {
  display: inline-flex !important;
  align-items: center !important;
  vertical-align: middle !important;
  margin: 0 !important;
  line-height: 1 !important;
}

#fm4-page .fm4-site-header .fm4-search-widget__input,
#fm4-page .fm4-site-header .fm4-search-widget__btn,
#fm4-page .fm4-site-header .fm4-search-widget__copy-btn {
  height: 2.15rem !important;
  line-height: 2.15rem !important;
  vertical-align: middle !important;
  box-sizing: border-box !important;
  margin: 0 !important;
}
#fm4-page .fm4-site-header .fm4-search-widget__btn {
  display: none !important;
}

/* ── Theme Toggle Button Proper Screen Inset ───────────────────────────── */
#fm4-theme-toggle {
  position: fixed !important;
  right: 24px !important;
  bottom: 24px !important;
  z-index: 999999 !important;
  width: 44px !important;
  height: 44px !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

/* ── FM4 Modern FAQ Accordion ────────────────────────────────────────── */
.fm4-faq-accordion {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.fm4-faq-item {
  background: var(--fm4-surface-color, #ffffff);
  border: 1px solid var(--fm4-border-color, #e2e8f0);
  border-radius: var(--fm4-global-radius, 14px);
  overflow: hidden;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.fm4-faq-item[open] {
  border-color: var(--fm4-border-color, #cbd5e1);
  background: var(--fm4-surface-color, #ffffff);
}
.fm4-faq-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 22px;
  font-size: 1.05rem;
  font-weight: 750;
  color: var(--fm4-text-color, #0f172a);
  cursor: pointer;
  user-select: none;
  list-style: none;
}
.fm4-faq-summary::-webkit-details-marker {
  display: none;
}
.fm4-faq-summary::after {
  content: "+";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--fm4-text-color, #000) 8%, transparent);
  color: var(--fm4-text-color, #64748b);
  font-size: 1.1rem;
  font-weight: 700;
  flex-shrink: 0;
  transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.fm4-faq-item[open] .fm4-faq-summary::after {
  content: "−";
  background: color-mix(in srgb, var(--fm4-primary-color, #ea580c) 15%, transparent);
  color: var(--fm4-primary-color, #ea580c);
}
.fm4-faq-content {
  padding: 0 22px 20px 22px;
  font-size: 0.94rem;
  line-height: 1.65;
  color: color-mix(in srgb, var(--fm4-text-color, #475569) 80%, transparent);
  border-top: 1px solid var(--fm4-border-color, #f1f5f9);
  margin-top: 2px;
  padding-top: 14px;
}