:root{--bg:#f4f2ec;--paper:#fff;--ink:#0f1626;--mute:#5a6273;--line:#e1ddd3;--navy:#0d1b3e;--navy2:#162a5c;--yel:#f5c542;--yel-soft:#fdf3d3;
--f-d:"Anton",Impact,"Arial Narrow",sans-serif;--f-b:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color-scheme:light}
@media (prefers-color-scheme:dark){:root{--bg:#0b111e;--paper:#131b2c;--ink:#ecebe6;--mute:#a3abba;--line:#253047;--yel-soft:#2b2612;color-scheme:dark}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.6 var(--f-b)}
a{color:inherit}
.w{max-width:1080px;margin:0 auto;padding:0 16px}
.skip{position:absolute;left:-999px}.skip:focus{left:12px;top:8px;background:var(--paper);padding:8px;z-index:30}
.mono{font-family:ui-monospace,Menlo,monospace;font-size:.92em;word-break:break-all}.mute{color:var(--mute)}
.logo{display:inline-flex;align-items:baseline;gap:.28em;font:400 1.45rem/1 var(--f-d);letter-spacing:.02em}
.logo b{font-weight:400;color:#fff}.logo i{font-style:normal;color:var(--yel)}
.hd{background:var(--navy);position:sticky;top:0;z-index:20}
.hdw{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:60px;flex-wrap:wrap}
.brand{text-decoration:none}
.hd nav{display:flex;gap:2px}
.hd nav a{color:#c9d2e6;text-decoration:none;font-weight:600;font-size:.92rem;padding:7px 10px;border-radius:8px}
.hd nav a[aria-current],.hd nav a:hover{color:#fff;background:var(--navy2)}
.hero{background:var(--navy);color:#fff;padding:56px 0 64px;position:relative;overflow:hidden}
.hero>.w{position:relative;z-index:1}
.hero::after{content:"";position:absolute;right:-60px;bottom:-60px;width:260px;height:260px;border-radius:50%;background:var(--yel);opacity:.12}
.hero.pieni{padding:40px 0 48px}
.eyebrow{margin:0 0 12px;font-size:.78rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--yel)}
h1{font:400 clamp(2.4rem,9vw,4.4rem)/1.02 var(--f-d);margin:0;letter-spacing:.01em;text-transform:uppercase}
.hero h1 .hl{color:var(--yel)}
.lead{margin:18px 0 0;color:#c9d2e6;font-size:1.08rem;max-width:62ch}
h2{font:400 1.7rem/1.1 var(--f-d);text-transform:uppercase;letter-spacing:.02em;margin:0 0 14px}
.osio{margin:44px 0 16px;display:flex;align-items:center;gap:12px}
.osio::before{content:"";width:14px;height:14px;border-radius:50%;background:var(--yel);flex:none}
.ruudukko{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:14px}
.palvelu{display:flex;gap:14px;align-items:flex-start;background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:20px;text-decoration:none;color:var(--ink);transition:transform .15s,border-color .15s,box-shadow .15s}
.palvelu:hover{transform:translateY(-2px);border-color:var(--yel);box-shadow:0 8px 24px rgba(13,27,62,.1)}
.palvelu:focus-visible{outline:3px solid var(--yel);outline-offset:2px}
.ik{flex:none;width:46px;height:46px;border-radius:12px;background:var(--navy);color:var(--yel);display:grid;place-items:center}
.ik svg{width:24px;height:24px}
.pt{display:flex;flex-direction:column;min-width:0}
.merkki{align-self:flex-start;font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;background:var(--yel-soft);color:var(--ink);padding:2px 8px;border-radius:99px;margin-bottom:8px}
.pt strong{overflow-wrap:anywhere;font:400 1.45rem/1.1 var(--f-d);letter-spacing:.02em;text-transform:uppercase}
.isku{font-weight:700;margin-top:4px}
.kuv{color:var(--mute);font-size:.95rem;margin-top:6px}
.osoite{margin-top:12px;font-weight:700;font-size:.9rem;color:var(--navy2)}
@media (prefers-color-scheme:dark){.osoite{color:var(--yel)}.palvelu:hover{box-shadow:none}}
.palvelu.iso{padding:24px}
.periaate{margin-top:48px}
.lista{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.lista li{background:var(--paper);border:1px solid var(--line);border-left:5px solid var(--yel);border-radius:12px;padding:14px 16px}
.teksti{max-width:720px;padding-top:40px;padding-bottom:20px}
.teksti h1{font-size:clamp(2rem,7vw,3rem);margin-bottom:14px}
.teksti h2{margin-top:28px;font-size:1.35rem}
.ft{background:var(--navy);color:#c9d2e6;margin-top:64px;padding:36px 0 28px;font-size:.92rem}
.ft p{max-width:64ch}.ft a{color:#fff}
.ft .mute{color:#8592ad}
@media (max-width:520px){.hero{padding:40px 0 48px}.palvelu{padding:16px}.hd nav a{padding:6px 8px;font-size:.88rem}}
@media (prefers-reduced-motion:reduce){.palvelu{transition:none}.palvelu:hover{transform:none}}