@font-face {
  font-family: 'DM Sans'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url('/assets/fonts/dm-sans-variable.ttf') format('truetype');
}
:root { --site-header-height: 84px; }
.helmi-site #navbar.site-header {
  position: fixed; inset: 0 0 auto; z-index: 60; padding: 0;
  font-family: 'DM Sans',Arial,sans-serif; background: #fff;
  border-bottom: 1px solid var(--color-line); box-shadow: none;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
.site-header *, .site-header *::before, .site-header *::after { box-sizing: border-box; }
.site-header a { text-decoration: none; }
.site-header__inner {
  width: calc(100% - 80px); max-width: none; height: var(--site-header-height); margin: 0 auto; padding: 0;
  display: grid; grid-template-columns: 180px minmax(0,1fr) auto; grid-template-rows: var(--site-header-height); column-gap: 32px;
}

.site-header__brand {
  --brand-width: 140px;
  display: flex; align-items: center; width: var(--brand-width); height: 78px;
  flex-shrink: 0; grid-column: 1; grid-row: 1; align-self: center;
}
.site-header__brand picture { display: block; width: 100%; }
.site-header__brand img {
  display: block; width: 100%; max-width: 100%; height: auto;
}
.site-nav {
  position: relative; grid-row: 1; grid-column: 2; height: 100%;
  display: flex; align-items: stretch; justify-content: center; gap: 32px;
  padding-inline-start: 0;
}
.site-nav__link {
  position: relative; display: inline-flex; align-items: center; padding: 0 2px;
  color: var(--color-ink); font-size: 16px; font-weight: 500; white-space: nowrap;
  transition: color 160ms ease;
}
.site-nav__link::after { content: ''; position: absolute; bottom: 16px; left: 2px; right: 2px; height: 2px; background: var(--helmi-fuchsia); transform: scaleX(0); transform-origin: left; transition: transform 160ms ease; }
.site-nav__link:hover, .site-nav__link[aria-current] { color: var(--helmi-fuchsia); }
.site-nav__link:hover::after, .site-nav__link[aria-current]::after { transform: scaleX(1); }
.site-header__actions { grid-column: 3; grid-row: 1; display: flex; justify-content: flex-end; align-items: center; gap: 28px; }
.site-header__phone { display: inline-flex; gap: 10px; align-items: center; min-height: 44px; color: var(--color-ink); font-size: 15px; font-weight: 500; white-space: nowrap; }
.site-header__phone svg { width: 20px; height: 20px; color: var(--helmi-fuchsia); }
.site-header__phone:hover { color: var(--helmi-fuchsia); }
.site-header__phone-label { display: none; }
.site-header__contact { display: inline-flex; min-height: 46px; padding: 0 25px; align-items: center; justify-content: center; background: var(--helmi-fuchsia); color: #fff; border: 1px solid transparent; border-radius: 100px; font-size: 15px; font-weight: 600; white-space: nowrap; transition: background 160ms ease; }
.site-header__contact:hover { background: var(--helmi-fuchsia-dark); }
.site-header__toggle { display: none; align-items: center; justify-content: center; width: 44px; height: 44px; min-height: 44px; padding: 0; background: transparent; border: 0; border-radius: 50%; color: var(--color-ink); font: inherit; cursor: pointer; box-shadow: none !important; }
.site-header__toggle:hover { background: var(--color-mist); }
.site-header__toggle svg { width: 23px; height: 23px; }
.site-header__toggle span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.site-header :is(a,button):focus-visible { outline: 3px solid var(--helmi-fuchsia); outline-offset: 4px; }
.helmi-site #mobile-menu-panel.site-menu { position: fixed; inset: 0; width: 100%; max-width: none; height: 100dvh; max-height: none; margin: 0; padding: 0; border: 0; background: #fff; color: var(--color-ink); backdrop-filter: none; -webkit-backdrop-filter: none; overflow-y: auto; overscroll-behavior: contain; }
.site-menu:not([open]) { display: none; }
.site-menu::backdrop { background: #fff; }
.site-menu__top { height: var(--site-header-height); padding: 0 28px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--color-line); }
.site-menu__body { padding: 40px 28px max(36px,env(safe-area-inset-bottom)); max-width: 680px; margin: 0 auto; }
.site-menu__eyebrow { margin: 0 0 20px; color: var(--color-muted); font-size: 13px; }
.site-menu__link { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 84px; padding: 18px 0; border-bottom: 1px solid var(--color-line); color: var(--color-ink); font-size: 30px; font-weight: 500; letter-spacing: -.025em; }
.site-menu__link svg { width: 24px; height: 24px; flex-shrink: 0; color: var(--color-teal-text); }
.site-menu__link[aria-current], .site-menu__link:hover { color: var(--helmi-fuchsia); }
.site-menu__link[aria-current] { font-weight: 600; }
.site-menu__contact { margin-top: 40px; display: flex; align-items: flex-start; flex-direction: column; gap: 14px; }
.site-menu__contact p { margin: 0 0 2px; font-size: 13px; color: var(--color-muted); }
.site-menu__contact a { display: inline-flex; align-items: center; gap: 10px; color: var(--helmi-fuchsia); font-size: 17px; font-weight: 600; }
.site-menu__contact svg { width: 20px; height: 20px; }
.site-header__fallback { display: none; }
.helmi-site #pääsisältö { scroll-margin-top: var(--site-header-height); }
.helmi-site #pääsisältö.pt-20, .helmi-site .home-hero { padding-top: var(--site-header-height); }
@media (max-width:1199px) {
  :root { --site-header-height: 84px; }
  .site-header__inner { width: 100%; max-width: none; display: flex; justify-content: space-between; padding: 0 28px; gap: 24px; }
  .site-header__brand { --brand-width: 140px; height: 76px; }
  .site-nav, .site-header__phone { display: none; }
  .site-header__toggle { display: inline-flex; }
  .site-header__actions { gap: 16px; }
  .site-header__fallback { padding: 16px 24px; display: flex; gap: 20px; flex-wrap: wrap; background: #fff; }
}
@media (max-width:599px) {
  :root { --site-header-height: 88px; }
  .site-header__inner, .site-menu__top { padding-inline: 20px; }
  .site-header__brand { --brand-width: 132px; height: 76px; }
  .site-header__actions { gap: 6px; }
  .site-header__contact { display: none; }
  .site-header__toggle { width: 52px; height: 48px; border-radius: 8px; background: var(--helmi-fuchsia); color: #fff; }
  .site-header__toggle svg { width: 28px; height: 28px; }
  .site-header__toggle:hover { background: var(--helmi-fuchsia-dark); }
  .site-header__toggle:active { transform: scale(.97); }
  .site-menu__body { padding: 32px 24px max(32px,env(safe-area-inset-bottom)); }
  .site-menu__link { font-size: 26px; min-height: 76px; }
}
@media (max-width:359px) {
  .site-header__inner, .site-menu__top { padding-inline: 16px; gap: 10px; }
  .site-header__brand { --brand-width: 124px; }
  .site-header__actions { gap: 4px; }
}
@media (prefers-reduced-motion:reduce) { .site-header *, .site-header *::after { transition: none !important; } }

.site-dropdown { position: relative; display: flex; align-items: stretch; }
.site-dropdown > summary { height: 100%; cursor: pointer; list-style: none; gap: 8px; }
.site-dropdown > summary::-webkit-details-marker { display: none; }
.site-dropdown > summary svg { width: 16px; height: 16px; transition: transform 160ms ease; }
.site-dropdown[open] > summary svg { transform: rotate(180deg); }
.site-dropdown > summary[data-active], .site-dropdown[open] > summary { color: var(--helmi-fuchsia); }
.site-dropdown > summary:focus-visible { outline: 3px solid var(--helmi-fuchsia); outline-offset: -6px; }
.site-dropdown__panel { position: absolute; top: calc(100% - 1px); left: -24px; width: 292px; padding: 12px 24px; background: #fff; border: 1px solid var(--color-line); border-top: 3px solid var(--helmi-fuchsia); box-shadow: 0 16px 28px #30262d0d; }
.site-dropdown:not([open]) > .site-dropdown__panel { display: none; }
.site-dropdown__link { display: block; padding: 15px 0; color: var(--color-ink); font-size: 16px; border-bottom: 1px solid var(--color-line); }
.site-dropdown__link:last-child { border-bottom: 0; font-size: 14px; }
.site-dropdown__link:hover, .site-dropdown__link[aria-current] { color: var(--helmi-fuchsia); }
.site-menu__secondary { margin-top: 28px; }
.site-menu__secondary .site-menu__link { font-size: 21px; min-height: 64px; }
@media (min-width:1200px) and (max-width:1399px) {
  .site-header__inner { grid-template-columns: 150px minmax(0,1fr) auto; column-gap: 20px; }
  .site-nav { gap: 22px; }
  .site-header__actions { gap: 18px; }
  .site-header__phone { display: none; }
}