/*!***************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[2].use[1]!./node_modules/next/dist/build/webpack/loaders/next-font-loader/index.js??ruleSet[1].rules[15].oneOf[2].use[2]!./node_modules/next/font/google/target.css?{"path":"src/app/layout.tsx","import":"Geist","arguments":[{"subsets":["latin"],"variable":"--font-geist-sans"}],"variableName":"geist"} ***!
  \***************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* cyrillic-ext */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/_next/static/media/f639721981034f88-s.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/_next/static/media/9766a7e9e2e0ad5a-s.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/_next/static/media/b66cf8e69499582a-s.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/_next/static/media/aa016aab0e6d1295-s.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/_next/static/media/22a5144ee8d83bca-s.p.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}@font-face {font-family: 'Geist Fallback';src: local("Arial");ascent-override: 95.94%;descent-override: 28.16%;line-gap-override: 0.00%;size-adjust: 104.76%
}.__className_8eaea4 {font-family: 'Geist', 'Geist Fallback';font-style: normal
}.__variable_8eaea4 {--font-geist-sans: 'Geist', 'Geist Fallback'
}

/*!******************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[5].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[5].use[3]!./src/components/footer/styles/footer.module.css ***!
  \******************************************************************************************************************************************************************************************************************************************************************************************/
.footer_footer__uELrD {
  width: 100%;
}

.footer_inner__Hl6h0 {
  background:
    radial-gradient(
      circle at 85% 10%,
      rgb(132 210 142 / 35%),
      transparent 34%
    ),
    var(--color-green-50);
}

.footer_top__jGNwV {
  width: 100%;
}

.footer_topInner__L9peJ {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(var(--space-10), 6vw, var(--space-20));
  align-items: center;
  padding: clamp(var(--space-10), 5vw, var(--space-16)) var(--container-padding);
}

.footer_brand__dT7oq {
  display: grid;
  gap: var(--space-5);
  justify-items: start;
  max-width: 31rem;
}

.footer_logo__1kFEn {
  display: inline-flex;
}

.footer_logoImage__zuRBM {
  width: auto;
  height: 3.5rem;
}

.footer_brandDescription__41d8A {
  max-width: 30rem;
  font-size: var(--font-size-lg);
}

.footer_contact__q2DRl {
  display: grid;
  gap: var(--space-1);
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  font-style: normal;
}

.footer_contact__q2DRl span:first-child {
  color: var(--color-green-700);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.footer_contact__q2DRl a {
  transition: color var(--duration-fast) var(--ease-standard);
}

.footer_contact__q2DRl a:hover {
  color: var(--color-green-600);
}

.footer_cta__dPmaV {
  display: grid;
  justify-items: start;
  max-width: 36rem;
}

.footer_eyebrow__6Jg1w {
  margin-bottom: var(--space-3);
  color: var(--color-green-600);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.06em;
  line-height: 1;
  text-transform: uppercase;
}

.footer_title__npgZ3 {
  max-width: 14ch;
  font-size: clamp(2.5rem, 4vw, 3.75rem);
  line-height: 1;
}

.footer_description__TIoyp {
  max-width: 30rem;
  margin-top: var(--space-4);
  font-size: var(--font-size-md);
}

.footer_actions__Wbrpl {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-6);
}

.footer_bottom__qniZG {
  border-top: 1px solid var(--color-green-100);
}

.footer_bottomInner__3BcoQ {
  display: flex;
  gap: var(--space-6);
  justify-content: space-between;
  align-items: center;
  padding-block: var(--space-5);
}

.footer_navigation__w6jcR {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
}

.footer_navigationLink__1g_3o,
.footer_copyright__xsH_Z {
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
}

.footer_navigationLink__1g_3o {
  transition: color var(--duration-fast) var(--ease-standard);
}

.footer_navigationLink__1g_3o:hover {
  color: var(--color-green-600);
}

.footer_copyright__xsH_Z {
  flex: 0 0 auto;
}

@media (max-width: 760px) {
  .footer_topInner__L9peJ {
    grid-template-columns: 1fr;
    gap: var(--space-12);
    padding: var(--space-8) var(--space-5);
  }

  .footer_logoImage__zuRBM {
    height: 2.5rem;
  }

  .footer_bottomInner__3BcoQ {
    display: grid;
    gap: var(--space-5);
    padding: var(--space-5);
  }

  .footer_navigation__w6jcR {
    gap: var(--space-3) var(--space-5);
  }
}

/*!******************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[5].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[5].use[3]!./src/components/headers/MainHeader/styles/header.module.css ***!
  \******************************************************************************************************************************************************************************************************************************************************************************************************/
.header_header__vgsDz {
  position: sticky;
  top: -48px;
  z-index: var(--z-header);
  width: 100%;
  background: transparent;
  transition:
    padding-top var(--duration-normal) var(--ease-standard),
    padding-bottom var(--duration-normal) var(--ease-standard);
}

.header_stickyBar__FwesI {
  position: relative;
  width: 100%;
  background: transparent;
}

/* Lasipinnan paikka. Erillinen kääre, jotta sijoittelu ei mene .glassiin
   itseensä — se ajaa omaa transformiaan tartunnan skaalausta varten.

   `visibility` eikä `opacity`: opacity alle yhden tekisi tästä backdrop
   rootin, jolloin lasi näytteistäisi tyhjää eikä sivun sisältöä. Siksi myös
   vaihto on terävä eikä häivytys — sitä ei voi tehdä lasia rikkomatta. */
.header_stickyBarSurface__RltvV {
  position: absolute;
  inset: 0;
  visibility: hidden;
  pointer-events: none;
}

.header_stickyBarSurfaceVisible__pUatl {
  visibility: visible;
}

.header_stickyBarGlass__f1wS_ {
  width: 100%;
  height: 100%;
}

.header_headerHome__Qrfs_ {
  position: fixed;
  top: 0;
  transition: top var(--duration-normal) var(--ease-standard);
}

.header_headerShop__A6xnF {
  position: relative;
  top: 0;
}

.header_headerTopSpaced__Jtfs_ {
  padding-top: 48px;
}

.header_headerBottomSpaced__hzJ_a {
  padding-bottom: 48px;
}

.header_headerHome__Qrfs_.header_isScrolled__VBwnN {
  top: -48px;
  padding-top: 48px;
  padding-bottom: 0;
}

/* Sisältö lasin päälle. Absoluuttisesti sijoitettu .stickyBarSurface
   maalautuisi muuten staattisen sisällön PÄÄLLE, ja 48 % valkoista peittäisi
   logon ja linkit. */
.header_inner__Sy6FN {
  display: grid;
  position: relative;
  z-index: 1;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  justify-items: stretch;
  height: var(--header-height);
}

.header_navigation__i2XIr {
  display: flex;
  gap: var(--space-5);
}

.header_logo__vnYPy {
  display: flex;
  position: relative;
  align-items: center;
  --logo-shimmer-x: 50%;
  --logo-shimmer-y: 50%;
}

.header_logo__vnYPy::after {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      circle at var(--logo-shimmer-x) var(--logo-shimmer-y),
      rgb(255 255 255 / 92%) 0%,
      color-mix(in srgb, var(--color-green-200) 72%, transparent) 16%,
      color-mix(in srgb, var(--color-accent) 46%, transparent) 31%,
      color-mix(in srgb, var(--color-accent) 0%, transparent) 58%
    );
  content: "";
  opacity: 0;
  pointer-events: none;
  -webkit-mask: url("/logo.png") center / contain no-repeat;
  mask: url("/logo.png") center / contain no-repeat;
  transition: opacity var(--duration-fast) var(--ease-standard);
}

.header_logo__vnYPy:hover::after {
  opacity: 1;
}

.header_logoImage__rur8o {
  display: block;
  width: auto;
  height: 3.625rem;
}

.header_navigationLink__LeOL6 {
  position: relative;
  color: var(--color-neutral-700);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.01em;
  line-height: 1;
  transition:
    color var(--duration-fast) var(--ease-standard);
}

.header_navigationLink__LeOL6::after {
  position: absolute;
  right: 50%;
  bottom: -0.5em;
  left: 50%;
  height: 1px;
  border-radius: var(--radius-full);
  background: var(--color-accent);
  content: "";
  opacity: 0;
  transition:
    left var(--duration-fast) var(--ease-standard),
    opacity var(--duration-fast) var(--ease-standard),
    right var(--duration-fast) var(--ease-standard);
}

.header_navigationLink__LeOL6:hover,
.header_navigationLinkCurrent__k7RbX {
  color: var(--color-accent-hover);
}

.header_navigationLink__LeOL6:hover::after,
.header_navigationLinkCurrent__k7RbX::after {
  right: 28%;
  left: 28%;
  opacity: 1;
}

.header_actions__WsoKJ {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-2);
  justify-content: flex-end;
}

.header_actionShopLink__GEC6p,
.header_actionContactLink___P9At {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  line-height: 1;
  transition:
    color var(--duration-fast) var(--ease-standard),
    text-decoration-color var(--duration-fast) var(--ease-standard);
}

.header_actionShopLink__GEC6p {
  color: var(--color-neutral-600);
  text-decoration: none;
}

.header_actionContactLink___P9At {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--color-accent-hover);
}

.header_actionArrow__5YTFk {
  width: 1em;
  height: 1em;
  flex-shrink: 0;
  color: currentColor;
}

.header_actionShopLink__GEC6p:hover {
  color: var(--color-accent);
}

.header_actionContactLink___P9At:hover {
  color: var(--color-accent);
}

/* Mobiilinavigaatio.

   Sijoittelu ja sisääntulo ovat dockissa, eivät lasipinnoissa: `.glass` ajaa
   itse transformia (tartunnan skaalaus), joten sen päälle ei saa kirjoittaa
   toista. Sisääntulo liu'uttaa dockia eikä häivytä sitä, koska opacity < 1
   katkaisisi backdrop-filterin taustan ja lasi näyttäisi tyhjältä koko
   animaation ajan. */
.header_mobileNavigationDock__sc471 {
  /* Passiivisen linkin väri.

     Lähes musta mutta vihreään taittava: se istuu lasin vihreään sävyyn
     kilpailematta aktiivisen kirkkaan vihreän kanssa. Työnjako on sama kuin
     iOS:n tabipalkissa — passiivinen on neutraali, aktiivinen on korostusväri,
     jolloin aktiivinen erottuu sävyllä eikä painolla.

     Tumma on tässä myös luettavuuskysymys: palkki kelluu mielivaltaisen
     valokuvan päällä, ja `--color-text-secondary` jäi tummaa kohtaa vasten
     kontrastiin 2.1:1. Tämä on ~4.1:1 samassa kohdassa ja ~9:1 vaalealla. */
  --mobile-nav-link-color: color-mix(
    in srgb,
    var(--color-green-900) 55%,
    var(--color-neutral-900)
  );

  /* Aktiivisen linkin väri — EI `--color-accent`.

     Sivuston korostusvihreä (`--color-green-700`) on tehty vaalean sivun
     päälle. Kelluvalla palkilla se on lasin läpi näkyvän nurmen päällä
     kontrastissa 2.1:1, eli aktiivinen kotinappi katoaa taustaansa juuri
     silloin kun tausta on vihreä — sama sävy, sama vaaleus.

     Tämä on sama vihreä tummennettuna: 4.4:1 nurmella, ja kroma säilyy (37 vs
     korostusvihreän 40), joten aktiivinen erottuu passiivisesta edelleen
     sävyllä eikä painolla. Passiivinen on kroma 21, tämä 37.

     Huom: mikään kiinteä väri ei riitä palkin tummimpiin kohtiin (koiran
     päällä ~1.6:1). Se ei ole värivalinta vaan pinnan peiton raja — tumma
     teksti tarvitsee vaaleamman pinnan, vaalea teksti tummemman. */
  --mobile-nav-link-active: color-mix(
    in srgb,
    var(--color-green-800) 70%,
    black
  );

  display: none;
}

.header_mobileNavigationHomeSurface__onFk9 {
  flex: 0 0 var(--mobile-nav-height);
  height: var(--mobile-nav-height);
  pointer-events: auto;
}

.header_mobileNavigationSurface__NLOj3 {
  flex: 1 1 auto;
  min-width: 0;
  height: var(--mobile-nav-height);
  pointer-events: auto;
}

/* Lasin sisältökerros on tavallinen laatikko: se on venytettävä pinnan
   mittoihin, jotta linkit täyttävät pillerin. */
.header_mobileNavigationHomeSurface__onFk9 > .glass__content,
.header_mobileNavigationSurface__NLOj3 > .glass__content {
  height: 100%;
}

.header_mobileNavigationLinks__eEodi {
  display: flex;
  min-width: 0;
  height: 100%;
  gap: var(--space-2);
  padding: var(--space-1);
}

.header_mobileNavigationLink__W1ytU {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  flex: 1 1;
  min-width: 0;
  border-radius: var(--space-6);
  color: var(--mobile-nav-link-color);
  font-size: var(--font-size-xs);
  transition:
    background-color var(--duration-fast) var(--ease-standard),
    color var(--duration-fast) var(--ease-standard);
}

.header_mobileNavigationLink__W1ytU:hover,
.header_mobileNavigationLinkCurrent__dmB31 {
  color: var(--mobile-nav-link-active);
}

.header_mobileNavigationIcon__x2_sx {
  flex: 0 0 auto;
  width: 1.1rem;
  height: 1.1rem;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.header_mobileNavigationHomeLink__fOI8S {
  display: grid;
  width: 100%;
  height: 100%;
  border-radius: var(--radius-full);
  color: var(--mobile-nav-link-color);
  place-items: center;
  transition: color var(--duration-fast) var(--ease-standard);
}

.header_mobileNavigationHomeLink__fOI8S:hover,
.header_mobileNavigationHomeLink__fOI8S.header_mobileNavigationLinkCurrent__dmB31 {
  color: var(--mobile-nav-link-active);
}

.header_mobileNavigationHomeIcon__RF_5p {
  width: 1.75rem;
  height: 1.75rem;
  stroke-width: 1.7;
}

@media (max-width: 760px) {
  /* Mobiilissa header on läpinäkyvä myös scrollattuna — lasi on siellä
     alalaidan navigaatiossa. `display: none` eikä `visibility`, jotta pintaa
     ei mitata eikä sen tekstuureja generoida lainkaan. */
  .header_stickyBarSurface__RltvV {
    display: none;
  }

  .header_header__vgsDz {
    position: absolute;
    top: 0;
    padding-top: 0;
    padding-bottom: 0;
    transition: none;
  }

  .header_inner__Sy6FN {
    grid-template-columns: 1fr;
    justify-items: center;
    height: calc(var(--header-height) + var(--safe-area-top));
    padding-top: var(--safe-area-top);
  }

  .header_headerHome__Qrfs_ .header_inner__Sy6FN {
    height: calc(
      var(--header-height) + var(--space-5) + var(--safe-area-top)
    );
    padding-top: calc(
      clamp(
        var(--space-12),
        calc(var(--space-24) - 3vw),
        var(--space-24)
      ) + var(--safe-area-top)
    );
  }

  .header_headerHome__Qrfs_ .header_logo__vnYPy {
    opacity: 0;
    transform: translateY(-4px);
    animation: header_mobileLogoIn__qQnSy 1500ms var(--ease-standard) 240ms forwards;
  }

  .header_logoImage__rur8o {
    height: 3.025rem;
  }

  .header_navigation__i2XIr,
  .header_actions__WsoKJ {
    display: none;
  }

  .header_mobileNavigationDock__sc471 {
    display: flex;
    position: fixed;
    z-index: 10000000;
    right: max(10px, calc(var(--safe-area-right) + 10px));
    bottom: calc(var(--mobile-nav-offset) + var(--safe-area-bottom));
    left: max(10px, calc(var(--safe-area-left) + 10px));
    align-items: center;
    gap: var(--space-3);
    height: var(--mobile-nav-height);
    pointer-events: none;
    transition: bottom var(--duration-normal) var(--ease-standard);
    will-change: bottom;
  }

  .header_mobileNavigationDock__sc471.header_mobileNavigationHomePage__8hLEm {
    animation: header_mobileNavigationIn__XJ6T7 680ms var(--ease-standard) 720ms backwards;
  }
}

@keyframes header_mobileLogoIn__qQnSy {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

/* Liuku, ei häivytys — ks. .mobileNavigationDock. Dock lähtee näkymän alta,
   joten pintojen taittuma näkyy koko matkan. */
@keyframes header_mobileNavigationIn__XJ6T7 {
  from {
    transform: translate3d(
      0,
      calc(
        var(--mobile-nav-height) + var(--mobile-nav-offset) +
          var(--safe-area-bottom)
      ),
      0
    );
  }

  to {
    transform: translateZ(0);
  }
}

@media (max-width: 760px) and (prefers-reduced-motion: reduce) {
  .header_headerHome__Qrfs_ .header_logo__vnYPy {
    opacity: 1;
    animation: none;
  }

  .header_mobileNavigationDock__sc471.header_mobileNavigationHomePage__8hLEm {
    animation: none;
    transform: none;
  }
}

/*!**************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[5].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[5].use[3]!./src/components/ui/button/button.module.css ***!
  \**************************************************************************************************************************************************************************************************************************************************************************************/
.button_button__iUKg0 {
    border-radius: var(--radius-lg);
    height: var(--button-height-md);
    display: flex;
    position: relative;
    justify-content: center;
    align-items: center;
    font-family: var(--font-sans);
    font-size: var(--button-font-size-md);
    font-weight: var(--font-weight-medium);
    line-height: 1;
    overflow: hidden;
    padding: 0 var(--space-5);
    transition:
        background-color var(--duration-fast) var(--ease-standard),
        color var(--duration-fast) var(--ease-standard),
        transform var(--duration-fast) var(--ease-standard);
}

.button_variantSolidGreen__vN8Ty {
    background-color: var(--color-accent);
    color: var(--color-white);
}

.button_variantSolidGreen__vN8Ty:hover {
    background-color: var(--color-accent-hover);
}

.button_variantSolidGreen__vN8Ty .button_content__37kjW::after {
    content: "->";
    display: inline-block;
    margin-left: var(--space-2);
    transition: transform var(--duration-fast) var(--ease-standard);
}

.button_variantSolidGreen__vN8Ty:hover .button_content__37kjW::after {
    transform: translateX(0.16rem);
}

.button_variantSolidOrange__hB8Fw {
    background-color: var(--color-orange-500);
    color: var(--color-white);
}

.button_variantSoft__mfTIW {
}

.button_variantOutline__UItLd {
    background-color: transparent;
    border: 1px solid color-mix(in srgb, var(--color-accent) 55%, transparent);
    color: var(--color-accent);
}

.button_variantGhost__cIY_y {
    background-color: transparent;
    color: var(--color-text-primary);
    font-weight: var(--font-weight-bold);
    height: auto;
    overflow: visible;
    padding: 0;
}

.button_variantGhost__cIY_y::after {
    position: absolute;
    right: 0;
    bottom: -0.32em;
    left: 0;
    height: 1px;
    background: currentColor;
    content: "";
    opacity: 0;
    transform: scaleX(0.72);
    transition:
        opacity var(--duration-fast) var(--ease-standard),
        transform var(--duration-fast) var(--ease-standard);
    transform-origin: left center;
}

.button_variantGhost__cIY_y:hover {
    color: var(--color-accent-hover);
}

.button_variantGhost__cIY_y:hover::after {
    opacity: 1;
    transform: scaleX(1);
}

.button_variantLink__Ta1Yl {
}

.button_variantPlain__3Sh6L {
}

.button_sizeXs__YEPL_ {
    font-size: var(--button-font-size-xs);
    height: var(--button-height-xs);
}

.button_sizeSm__biz6B {
    font-size: var(--button-font-size-sm);
    height: var(--button-height-sm);
}

.button_sizeMd___GbYU {
    font-size: var(--button-font-size-md);
    height: var(--button-height-md);
}

.button_sizeLg__af3Ej {
    font-size: var(--button-font-size-lg);
    height: var(--button-height-lg);
}

.button_sizeXl__e9gEP {
    font-size: var(--button-font-size-xl);
    height: var(--button-height-xl);
}

.button_sizeIcon__SrNxX {
    height: var(--button-height-icon);
    width: var(--button-height-icon);
}

.button_toneAccent__DqSqu {
}

.button_toneWarm__h_X3A {
}

.button_toneNeutral__zZWDD {
}

.button_toneDanger__o2Idt {
}

.button_fullWidth__Un_ap {
}

.button_iconOnly___9C39 {
}

.button_isLoading__gEeuw {
}

.button_isDisabled__w_wew {
}

.button_icon__O_5d9 {
}

.button_content__37kjW {
}

.button_spinner__Ps2GG {
}

/*!****************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!./src/styles/settings/layers.css ***!
  \****************************************************************************************************************************************************************************************************************************************************************************/
@layer reset, tokens, base, components, utilities;

/*!**************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!./src/styles/tokens/colors.css ***!
  \**************************************************************************************************************************************************************************************************************************************************************************/
@layer tokens {
  :root {
    --color-white: #ffffff;
    --color-black: #151410;

    --color-neutral-50: #fbfaf6;
    --color-neutral-100: #f2efe7;
    --color-neutral-200: #e4dfd3;
    --color-neutral-300: #d2cab9;
    --color-neutral-400: #a99f8e;
    --color-neutral-500: #7e7567;
    --color-neutral-600: #625a4f;
    --color-neutral-700: #494239;
    --color-neutral-800: #302c26;
    --color-neutral-900: #1f1c18;

    --color-green-50: #f3f8f1;
    --color-green-100: #dfeedd;
    --color-green-200: #c1d9bd;
    --color-green-300: #9abd94;
    --color-green-400: #739f6e;
    --color-green-500: #4f8a4c;
    --color-green-600: #3f7f3f;
    --color-green-700: #347638;
    --color-green-800: #285d2d;
    --color-green-900: #1f4824;

    --color-orange-50: #fff8eb;
    --color-orange-100: #ffedcc;
    --color-orange-200: #ffd999;
    --color-orange-300: #ffc166;
    --color-orange-400: #ffa733;
    --color-orange-500: #ff8c00;
    --color-orange-600: #db7300;
    --color-orange-700: #b85b00;
    --color-orange-800: #8f4705;
    --color-orange-900: #733b08;

    --color-surface-page: #ffffff;
    --color-surface-alt: #eef1e3;
    --color-surface-card: var(--color-white);
    --color-surface-raised: var(--color-white);
    --color-header: rgb(255 255 255 / 82%);
    --color-border-subtle: var(--color-neutral-200);
    --color-border-strong: var(--color-neutral-300);
    --color-text-primary: var(--color-neutral-900);
    --color-text-secondary: var(--color-neutral-600);
    --color-text-muted: var(--color-neutral-500);
    --color-accent: var(--color-green-700);
    --color-accent-hover: var(--color-green-800);
    --color-accent-soft: var(--color-green-50);
    --color-accent-warm: var(--color-orange-500);
    --color-accent-warm-hover: var(--color-orange-600);
    --color-button-ghost-background: rgb(129 129 129 / 7.8%);
    --color-selection-background: var(--color-orange-100);
    --color-selection-text: var(--color-green-900);
    --color-danger: var(--color-orange-700);
  }
}

/*!***************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!./src/styles/tokens/spacing.css ***!
  \***************************************************************************************************************************************************************************************************************************************************************************/
@layer tokens {
  :root {
    --space-0: 0;
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-7: 1.75rem;
    --space-8: 2rem;
    --space-9: 2.25rem;
    --space-10: 2.5rem;
    --space-11: 2.75rem;
    --space-12: 3rem;
    --space-13: 3.25rem;
    --space-14: 3.5rem;
    --space-15: 3.75rem;
    --space-16: 4rem;
    --space-17: 4.25rem;
    --space-18: 4.5rem;
    --space-19: 4.75rem;
    --space-20: 5rem;
    --space-21: 5.25rem;
    --space-22: 5.5rem;
    --space-23: 5.75rem;
    --space-24: 6rem;
    --space-25: 6.25rem;
    --space-26: 6.5rem;
    --space-27: 6.75rem;
    --space-28: 7rem;
    --space-29: 7.25rem;
    --space-30: 7.5rem;
    --space-31: 7.75rem;
    --space-32: 8rem;
    --space-33: 8.25rem;
    --space-34: 8.5rem;
    --space-35: 8.75rem;
    --space-36: 9rem;
    --space-37: 9.25rem;
    --space-38: 9.5rem;
    --space-39: 9.75rem;
    --space-40: 10rem;
    --space-41: 10.25rem;
    --space-42: 10.5rem;
    --space-43: 10.75rem;
    --space-44: 11rem;
    --space-45: 11.25rem;
    --space-46: 11.5rem;
    --space-47: 11.75rem;
    --space-48: 12rem;

    --container-sm: 40rem;
    --container-md: 56rem;
    --container-lg: 70rem;
    --container-xl: 80rem;
    --container-width: var(--container-xl);
    --container-padding: clamp(var(--space-4), 4vw, var(--space-8));
    --container-edge: max(
      var(--container-padding),
      calc((100vw - var(--container-width)) / 2)
    );

    --header-height: 3.75rem;

    --button-height-xs: 1.75rem;
    --button-height-sm: 2rem;
    --button-height-md: 2.5rem;
    --button-height-lg: 3rem;
    --button-height-xl: 3.5rem;
    --button-height-icon: 2.5rem;
  }

  @media (min-width: 761px) {
    :root {
      --container-padding: clamp(var(--space-4), 3vw, var(--space-12));
      --container-width: calc(100vw - (var(--container-padding) * 2));
    }
  }
}

/*!******************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!./src/styles/tokens/typography.css ***!
  \******************************************************************************************************************************************************************************************************************************************************************************/
@layer tokens {
  :root {
    --font-sans: var(--font-geist-sans), Inter, Arial, Helvetica, sans-serif;
    --font-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;

    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-md: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;
    --font-size-3xl: 2rem;
    --font-size-4xl: clamp(2.5rem, 8vw, 5.75rem);

    --button-font-size-xs: var(--font-size-xs);
    --button-font-size-sm: var(--font-size-sm);
    --button-font-size-md: var(--font-size-sm);
    --button-font-size-lg: var(--font-size-md);
    --button-font-size-xl: var(--font-size-lg);

    --line-height-tight: 0.95;
    --line-height-heading: 1.1;
    --line-height-body: 1.6;

    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-bold: 700;
  }
}

/*!**************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!./src/styles/tokens/radius.css ***!
  \**************************************************************************************************************************************************************************************************************************************************************************/
@layer tokens {
  :root {
    --radius-none: 0;
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 8px;
    --radius-full: 999px;
  }
}

/*!***************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!./src/styles/tokens/shadows.css ***!
  \***************************************************************************************************************************************************************************************************************************************************************************/
@layer tokens {
  :root {
    --shadow-xs: 0 1px 2px rgb(17 17 17 / 0.06);
    --shadow-sm: 0 8px 20px rgb(17 17 17 / 0.08);
    --shadow-md: 0 18px 45px rgb(17 17 17 / 0.12);
  }
}

/*!**************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!./src/styles/tokens/motion.css ***!
  \**************************************************************************************************************************************************************************************************************************************************************************/
@layer tokens {
  :root {
    --duration-fast: 120ms;
    --duration-normal: 180ms;
    --duration-slow: 260ms;
    --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  }
}

/*!***************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!./src/styles/tokens/z-index.css ***!
  \***************************************************************************************************************************************************************************************************************************************************************************/
@layer tokens {
  :root {
    --z-base: 0;
    --z-raised: 10;
    --z-sticky: 100;
    --z-header: var(--z-sticky);
    --z-overlay: 500;
    --z-modal: 1000;
  }
}

/*!***********************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!./src/styles/base/reset.css ***!
  \***********************************************************************************************************************************************************************************************************************************************************************/
@layer reset {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  * {
    margin: 0;
  }

  html {
    -webkit-text-size-adjust: 100%;
  }

  body {
    min-height: 100svh;
  }

  img,
  picture,
  video,
  canvas,
  svg {
    display: block;
    max-width: 100%;
  }

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

  button {
    cursor: pointer;
  }
}

/*!**************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!./src/styles/base/document.css ***!
  \**************************************************************************************************************************************************************************************************************************************************************************/
@layer base {
  :root {
    --safe-area-top: env(safe-area-inset-top, 0px);
    --safe-area-right: env(safe-area-inset-right, 0px);
    --safe-area-bottom: env(safe-area-inset-bottom, 0px);
    --safe-area-left: env(safe-area-inset-left, 0px);
    --mobile-nav-height: var(--space-14);
    --mobile-nav-offset: var(--space-4);
    --mobile-nav-clearance: calc(
      var(--mobile-nav-height) + var(--mobile-nav-offset) + var(--space-4)
    );
    --mobile-hero-bottom-bleed: var(--space-40);
    --mobile-hero-content-gap: var(--space-3);
    --mobile-hero-content-bottom: calc(
      var(--mobile-nav-height) + var(--mobile-nav-offset) +
        var(--mobile-hero-content-gap)
    );
  }

  html {
    min-height: 100%;
    background: var(--color-surface-page);
  }

  body {
    background: var(--color-surface-page);
    color: var(--color-text-primary);
    font-family: var(--font-sans);
    line-height: var(--line-height-body);
  }

  html:has(body main[data-page="home"]),
  body:has(main[data-page="home"]) {
    background: #edecef;
  }

  @media (max-width: 760px) {
    body {
      padding-bottom: calc(
        var(--mobile-nav-clearance) + var(--safe-area-bottom)
      );
    }
  }

  ::selection {
    background: var(--color-selection-background);
    color: var(--color-selection-text);
  }

  a {
    color: inherit;
    text-decoration: none;
  }
}

/*!****************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!./src/styles/base/typography.css ***!
  \****************************************************************************************************************************************************************************************************************************************************************************/
@layer base {
  h1,
  h2,
  h3,
  h4 {
    color: var(--color-text-primary);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-heading);
  }

  h1 {
    font-size: var(--font-size-4xl);
    line-height: var(--line-height-tight);
  }

  p {
    color: var(--color-text-secondary);
  }

  .eyebrow {
    color: var(--color-accent);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    line-height: 1.2;
    text-transform: uppercase;
  }

  .lead {
    max-width: 42rem;
    color: var(--color-text-secondary);
    font-size: var(--font-size-xl);
    line-height: var(--line-height-body);
  }

  code {
    border-radius: var(--radius-md);
    background: var(--color-surface-card);
    color: var(--color-text-primary);
    font-family: var(--font-mono);
    font-size: 0.9em;
    padding: 0.16em 0.34em;
  }
}

/*!*****************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!./src/styles/utilities/layout.css ***!
  \*****************************************************************************************************************************************************************************************************************************************************************************/
@layer utilities {
  .container {
    width: min(100% - var(--container-padding) * 2, var(--container-width));
    margin-inline: auto;
  }

  .section {
    padding-block: var(--space-20);
  }

  .stack {
    display: grid;
    gap: var(--stack-gap, var(--space-4));
  }

  .stack-lg {
    --stack-gap: var(--space-6);
  }

  .cluster {
    display: flex;
    flex-wrap: wrap;
    gap: var(--cluster-gap, var(--space-3));
    align-items: center;
  }
}

/*!**************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!./src/styles/utilities/visually-hidden.css ***!
  \**************************************************************************************************************************************************************************************************************************************************************************************/
@layer utilities {
  .visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
}

/*!********************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!./src/styles/globals.css ***!
  \********************************************************************************************************************************************************************************************************************************************************************/


/*!*******************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!./src/liquid-glass/liquid-glass.css ***!
  \*******************************************************************************************************************************************************************************************************************************************************************************/
/* Liquid Glass.
   Materiaali tehdään taittumisella. EI borderia, EI valkoista kalvoa,
   EI sumennusta oletuksena. Ks. docs/liquid-glass.md */

.glass {
  position: relative;
  border-radius: var(--glass-radius, 28px);

  /* Tartunnan skaalaus (useElasticPull). Jousi ajaa arvon, joten tähän ei
     tule transitionia — se taistelisi jousta vastaan. Transform ei luo
     backdrop-rootia, joten taittuma säilyy. */
  transform: scale(var(--glass-press, 1));
}

/* Varjo EI saa olla `.glass`illa itsellään.
   `.glass__lens` on sen lapsi, joten vanhemman varjo on maalattu linssin ALLE
   ja kuuluu siten siihen taustaan jota backdrop-filter näytteistää. Siirtymä
   osoittaa ulospäin — eli tasan varjon päälle — ja puristaa sen pinnan
   sisäreunaan. Tasaisella taustalla varjo on ainoa rakenne lähellä reunaa,
   joten pintaan ilmestyy tumma rengas vaikka taittuvaa ei ole mitään.

   Omana kerroksenaan linssin JÄLKEEN varjo ei ole enää taustassa. Ilme ei
   muutu: ulkovarjo piirtyy laatikon ulkopuolelle ja linssin tulos rajataan
   muodon sisään, joten ne eivät mene päällekkäin. */
.glass__shadow {
  box-shadow: var(--glass-shadow, 0 2px 10px rgb(0 0 0 / 0.07));
}

/* Suodatinmäärittelyt.
   EI width/height: 0 — feImage ei renderöi nollakokoisessa viewportissa,
   ja siirtymäkartta jää läpinäkyväksi mustaksi. Mitat tulevat elementin
   attribuuteista; pelkkä <filter> ei piirrä mitään. */
.glass__defs {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
}

.glass__frost,
.glass__lens,
.glass__refract,
.glass__shadow,
.glass__tint,
.glass__specular {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
}

/* Taittuma kahdennetusta taustasta (Safari, iOS, Firefox).

   EI `overflow: hidden` eikä pyöristystä: rajaus tehdään suodattimen sisällä
   kartan peittokanavalla. Jos wrapper rajattaisiin tässä, siirtymä
   näytteistäisi rajauksen ulkopuolelta läpinäkyvää ja uloin kaista — juuri se
   jolla linssi on vahvimmillaan — jäisi tyhjäksi. */
.glass__refract {
  border-radius: 0;
  overflow: visible;
}

/* Kopio itse. Mitat ja siirto tulevat JS:stä (useBackdropAlign), koska ne
   riippuvat pinnan sijainnista näyttöikkunassa ja muuttuvat scrollatessa. */
.glass__refract-copy {
  position: absolute;
  top: 0;
  left: 0;
  will-change: transform;
}

/* Linssikerros on `--glass-pad` verran muita suurempi, jotta nestemäinen veto
   voi kaartaa reunan yli: backdrop-filter ei maalaa elementtinsä laatikon
   ulkopuolelle, joten tila on varattava etukäteen.

   Muoto tulee kartasta, ei tästä laatikosta — sen ulkopuolella siirtymä on
   neutraali eli identiteetti, ja identiteetti on näkymätön. Siksi myös
   pyöristys on nolla: rajaus tekisi vain suoran leikkauksen sinne minne
   pisaran kuuluu päästä. */
.glass__lens {
  inset: calc(-1 * var(--glass-pad, 0px));
  border-radius: 0;
}

/* Sävy taittumisen PÄÄLLE, ei alle.
   Elementin omana taustana sävy jää linssikerroksen alle ja kuuluu siten
   taustaan jota linssi näytteistää: sen oma pyöristetty reuna taittuu, ja
   pillerin kehälle jää sävytön rengas. Kerrosjärjestys on linssi (3) →
   sävy (4) → spekulaari (5), ks. docs/liquid-glass.md luku 1. */
.glass__tint {
  background: var(--glass-fill, transparent);
}

/* iOS:n kulma ei ole ympyräkaari vaan jatkuvakaarevuuksinen superellipsi.
   corner-shape ei periydy, joten se asetetaan jokaiselle kerrokselle.
   Kapselille tätä ei aseteta: pillerin pääty on puoliympyrä. */
@supports (corner-shape: squircle) {
  .glass[data-corner="squircle"],
  .glass[data-corner="squircle"] .glass__frost,
  .glass[data-corner="squircle"] .glass__lens,
  .glass[data-corner="squircle"] .glass__shadow,
  .glass[data-corner="squircle"] .glass__tint,
  .glass[data-corner="squircle"] .glass__specular {
    corner-shape: squircle;
  }
}

/* Reunavalo: normaalikentästä laskettu korostus, valkoinen RGB ja kirkkaus
   alfassa. Additiivinen sekoitus koska kyse on lisätystä valosta. */
.glass__specular {
  background-size: 100% 100%;
  background-repeat: no-repeat;
  mix-blend-mode: plus-lighter;
}

.glass__content {
  position: relative;
  z-index: 1;
}

/* Ilman taittumaa (Safari, iOS, Firefox) pinta on PELKKÄ SÄVY.
   Tässä ei ole yhtään sääntöä, ja se on tarkoituksellista.

   Aiemmin tällä tasolla oli sumennus, korotettu kylläisyys ja valkoinen
   hiusviiva. Ne oli tarkoitettu korvaamaan puuttuva taittuma, mutta ne
   tekivät päinvastoin. Chromessa pinta on terävä tausta + sävy; noiden
   kanssa Safarista tuli ERI MATERIAALI, ei sama materiaali ilman yhtä
   piirrettä. Sumennus oli ero, ei silta.

   Nyt molemmilla on sama sävy saman terävän taustan päällä, ja ainoa ero on
   reunan taittumakaista. Lähemmäs ei pääse ilman että Safarille
   valehdellaan.

   Sivutuotteena tämä taso ei tarvitse `backdrop-filter`ia lainkaan, joten se
   toimii sellaisenaan myös selaimissa joissa sitä ei ole — erillistä
   umpinaista varatasoa ei enää tarvita, ja `@supports`-haara jäi pois.

   Sumennuksen saa takaisin instanssikohtaisesti `blur`-propsilla. Se ei ole
   poistettu, vain pois oletuksista. */

@media (prefers-reduced-transparency: reduce) {
  .glass {
    background: var(--glass-solid, rgb(245 245 247 / 0.97));
  }
  .glass__frost,
  .glass__lens,
  .glass__refract,
  .glass__tint,
  .glass__specular {
    display: none;
  }
}