/* Hygister – shared site styles. Page layouts live inline in each page. */
@font-face{font-family:'Inter';font-style:normal;font-display:swap;font-weight:100 900;src:url(/assets/fonts/inter-latin.woff2) format('woff2-variations');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:'Inter';font-style:normal;font-display:swap;font-weight:100 900;src:url(/assets/fonts/inter-latin-ext.woff2) format('woff2-variations');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Manrope';font-style:normal;font-display:swap;font-weight:200 800;src:url(/assets/fonts/manrope-latin.woff2) format('woff2-variations');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:'Manrope';font-style:normal;font-display:swap;font-weight:200 800;src:url(/assets/fonts/manrope-latin-ext.woff2) format('woff2-variations');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:#f6f5f1;overflow-x:hidden}
a{color:#102250;text-decoration:none}
a:hover{color:#2747a8}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid #2747a8;outline-offset:2px}
img{max-width:100%}
header{position:sticky;top:0;z-index:20}
.menu-btn{display:none;align-items:center;justify-content:center;width:44px;height:44px;border:1px solid #d9dcd6;border-radius:10px;background:#fff;cursor:pointer}

/* form fields */
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-weight:600;font-size:15px}
.field input,.field select,.field textarea{font:inherit;font-size:16px;color:#102250;background:#fff;border:1px solid #cfd5d1;border-radius:10px;padding:12px 14px;width:100%;box-sizing:border-box}
.field textarea{min-height:130px;resize:vertical}
.hidden-field{position:absolute;left:-9999px}

@media (max-width:1100px){
  .menu-btn{display:flex}
  .site-nav{display:none !important;width:100%;flex-direction:column;align-items:stretch !important;gap:4px !important;padding-top:8px}
  .site-nav.open{display:flex !important}
  .site-nav a{padding:12px 4px;font-size:17px}
  .site-nav a[href="/esittely/"]{text-align:center;margin-top:8px}
}
@media (max-width:760px){
  h1{font-size:36px !important;letter-spacing:-0.8px !important}
  h2[style*="font-size: 40px"],h2[style*="font-size: 38px"],h2[style*="font-size: 36px"],h2[style*="font-size: 34px"]{font-size:28px !important}
  p[style*="font-size: 36px"],p[style*="font-size: 34px"]{font-size:24px !important}
  p[style*="font-size: 140px"]{font-size:96px !important}
  [style*="padding: 104px 24px"],[style*="padding: 88px 24px"]{padding-top:64px !important;padding-bottom:64px !important}
  [style*="padding: 64px 56px"],[style*="padding: 56px 48px"],[style*="padding: 56px 56px"],[style*="padding: 48px;"]{padding:32px 24px !important}
  [style*="width: 150px; flex: none"]{display:none !important}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* front-page carousel */
.hero-slide{opacity:0;visibility:hidden;transition:opacity .6s ease,visibility .6s}
.hero-slide[data-active="true"]{opacity:1;visibility:visible}
.hero-tab{position:relative;isolation:isolate;white-space:nowrap;font:inherit;font-size:13px;font-weight:600;color:#102250;background:#e8ecf6;border:0;border-radius:22px;padding:12px 16px;cursor:pointer}
.hero-tab[aria-pressed="true"]{box-shadow:inset 0 0 0 1px #c9cdd6}
.hero-tab[aria-pressed="true"]::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:22px;background:#c9cdd6;animation:heroTaytto 8s linear forwards}
.hero-tauko .hero-tab::before{animation-play-state:paused}
@keyframes heroTaytto{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@media (prefers-reduced-motion:reduce){.hero-tab[aria-pressed="true"]::before{animation:none}}
@media (prefers-reduced-motion:reduce){.hero-slide{transition:none}}

/* Ratkaisu: puhtaanapidon ketju */
@media (max-width: 1000px) {
  .ketju { display: grid !important; grid-template-columns: 1fr 1fr; }
  .ketju-tarkasta { grid-column: 1 / -1; }
  .ketju-hyodyt { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 560px) {
  .ketju, .ketju-hyodyt { grid-template-columns: 1fr !important; }
}


/* Ratkaisu: näkymä-dialogi */
.view-card{cursor:pointer;transition:border-color .15s,box-shadow .15s,transform .15s}
.view-card:hover,.view-card:focus-visible{border-color:#2747a8 !important;box-shadow:0 8px 24px rgba(16,34,80,.10);transform:translateY(-2px);outline:none}
.view-card:focus-visible{box-shadow:0 0 0 3px #9fb4ec}
dialog.nakyma{width:min(940px,calc(100vw - 32px));max-height:calc(100vh - 32px);border:0;border-radius:20px;padding:24px;background:#ffffff;color:#102250;box-shadow:0 40px 80px rgba(16,34,80,.3);font-family:Inter,system-ui,sans-serif;line-height:1.5;box-sizing:border-box;overflow:auto}
dialog.nakyma::backdrop{background:rgba(16,34,80,.55)}
.nakyma-yla{display:flex;justify-content:space-between;align-items:center;gap:16px}
.nakyma-yla h2{margin:0;font-family:Manrope,sans-serif;font-size:24px;font-weight:800}
.nakyma-sulje{font:inherit;font-size:26px;line-height:1;width:44px;height:44px;border-radius:22px;border:0;background:#e8ecf6;color:#102250;cursor:pointer;flex:none}
.nakyma-teksti{margin:6px 0 18px;color:#4a5370}
.nakyma-huom{margin:12px 0 0;font-size:13px;color:#646d86}
.nakyma-ala{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:18px}
.nakyma-nuoli{font:inherit;font-size:15px;font-weight:600;color:#102250;background:#e8ecf6;border:0;border-radius:10px;padding:11px 16px;cursor:pointer}
.nakyma-nuoli:hover,.nakyma-sulje:hover{background:#d7def0}
.nakyma-laskuri{font-size:14px;color:#646d86}
@media (max-width:640px){dialog.nakyma{padding:16px}.nakyma-yla h2{font-size:20px}.nakyma-nuoli{padding:10px 12px;font-size:14px}}

dialog.nakyma.nakyma-laaja{width:min(1240px,calc(100vw - 32px))}
dialog.nakyma.nakyma-kapea{width:min(560px,calc(100vw - 32px))}
dialog.nakyma.nakyma-tabletti{width:min(720px,calc(100vw - 32px))}

/* Näkymä-ikkunan kuvakaruselli */
.nakyma-diat{display:grid}
.nakyma-dia{grid-area:1/1;align-self:start;opacity:0;visibility:hidden;transition:opacity .5s ease,visibility .5s}
.nakyma-dia.on{opacity:1;visibility:visible}
.nakyma-pallot{--p:10px;display:flex;justify-content:center;align-items:center;gap:0;margin-top:6px}
.nakyma-pallot button{display:flex;padding:8px 4px;border:0;background:none;cursor:pointer}
.nakyma-rata{position:relative;display:block;width:var(--p);height:var(--p);border-radius:calc(var(--p) / 2);background:#c9cdd6;transition:width .3s ease}
.nakyma-pallot button[aria-current="true"] .nakyma-rata{width:calc(var(--p) * 4)}
.nakyma-piste{position:absolute;top:0;left:0;width:var(--p);height:var(--p);border-radius:calc(var(--p) / 2);background:#646d86;animation:nakymaKulje 5s linear forwards}
.nakyma-pallot.tauko .nakyma-piste{animation-play-state:paused}
@keyframes nakymaKulje{from{left:0}to{left:calc(100% - var(--p))}}
@media (max-width:640px){.nakyma-pallot{--p:12px}.nakyma-pallot button{padding:10px 5px}.nakyma-pallot button[aria-current="true"] .nakyma-rata{width:calc(var(--p) * 5)}}
@media (prefers-reduced-motion:reduce){.nakyma-dia{transition:none}.nakyma-rata{transition:none}.nakyma-pallot button[aria-current="true"] .nakyma-rata{background:#646d86}}

.nakyma-skaala{overflow:hidden;width:100%}

/* Vaakasuuntainen korttikaruselli (Partnerit: hyödyt) */
.karuselli{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding:4px 24px 8px 0;margin-right:calc(50% - 50vw);scrollbar-width:none}
.karuselli::-webkit-scrollbar{display:none}
.kar-kortti{flex:0 0 320px;scroll-snap-align:start;box-sizing:border-box}
.kar-nuoli{width:44px;height:44px;border-radius:22px;border:0;background:#e8ecf6;color:#102250;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0}
.kar-nuoli:disabled{opacity:.4;cursor:default}
@media (max-width:640px){.kar-kortti{flex-basis:82%}}

/* Etusivun kuvien demoanimaatio */
@keyframes demoPop{0%{transform:scale(.6);opacity:.3}60%{transform:scale(1.15);opacity:1}100%{transform:scale(1)}}
.demo-pop{animation:demoPop .35s ease-out}
[data-demo-kuva]{transition:opacity .5s ease}
[data-demo-vahv]{transition:opacity .4s ease}