/* Toimeen site: shared tokens and parts (brand board 22.10.2026). Majakka orange means one thing: an agent is waiting for you. */
:root{
  color-scheme:dark;
  --yo:#0E1A17; --kuusi:#1E5C48; --kuusi-2:#2C7A60; --majakka:#F2A83B; --jakala:#D6E5DC; --koivu:#F3F5F2; --puolukka:#B5382F; --puolukka-2:#E58A7C;
  --panel:#16261F; --panel-2:#1D3129; --line:#23372F; --muted:#B9CCC3; --faint:#7E978C; --mint:#8FD3B5;
  --display:"Familjen Grotesk", "Helvetica Neue", Arial, sans-serif; --body:"IBM Plex Sans", system-ui, "Segoe UI", sans-serif;
  --mono:"IBM Plex Mono", ui-monospace, Consolas, monospace; --pixel:"Silkscreen", ui-monospace, monospace;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{background:var(--yo)}
body{background:var(--yo);color:var(--koivu);font:16px/1.55 var(--body);overflow-x:hidden}
.wrap{padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.col{max-width:1120px;margin-inline:auto}
h1,h2,h3{margin:0;font-family:var(--display);letter-spacing:-.035em;line-height:1.04;text-wrap:balance}
h2{font-size:clamp(32px,4.6vw,54px);font-weight:600}
h3{font-size:21px;font-weight:600;letter-spacing:-.02em}
p{margin:0}
a{color:inherit}
:focus-visible{outline:2px solid var(--majakka);outline-offset:3px}
:root{--e-out:cubic-bezier(.22,1,.36,1);--e-io:cubic-bezier(.65,0,.35,1);--d1:120ms;--d2:200ms;--d3:320ms;--d4:640ms}
.btn{display:inline-flex;align-items:center;gap:10px;border-radius:12px;padding:15px 26px;font:600 16.5px var(--body);text-decoration:none;border:0;cursor:pointer;white-space:nowrap;
  transition:transform var(--d2) var(--e-out),background-color var(--d2),box-shadow var(--d2) var(--e-out)}
.btn:hover{transform:translateY(-1px);box-shadow:0 8px 18px -8px rgba(0,0,0,.45)}
.btn:active{transform:translateY(0) scale(.98);transition-duration:80ms}
.arr{display:inline-block;transition:transform var(--d2) var(--e-out)}
.btn:hover .arr,a:hover>.arr{transform:translateX(3px)}
.btn.ink{background:var(--yo);color:var(--koivu)}
.btn.light{background:var(--koivu);color:var(--yo);box-shadow:inset 0 0 0 1.5px var(--yo)}
.btn.kuusi{background:var(--kuusi);color:var(--koivu)}
.wm{display:block;height:22px;width:auto}
.kicker{font:500 12px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--c,var(--jakala))}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums}

/* nav: a white pill floating over the page */
.navbar{position:fixed;z-index:40;top:calc(env(safe-area-inset-top,0px) + 12px);left:50%;transform:translateX(-50%);width:min(1120px,calc(100% - 32px));
  display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--koivu);color:var(--yo);border-radius:999px;padding:8px 8px 8px 18px;box-shadow:0 0 0 1.5px var(--yo),0 10px 30px -18px rgba(14,26,23,.6)}
.navbar a{color:inherit;text-decoration:none;font-size:14.5px;font-weight:500}
.navbar .links{display:flex;gap:24px}
.navbar .links a[aria-current="page"]{text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:2px}
.navbar .right{display:flex;gap:12px;align-items:center}
.navbar .demo{background:var(--yo);color:var(--koivu);border-radius:999px;padding:8px 16px}
.lang{display:flex;border:1.5px solid var(--yo);border-radius:999px;overflow:hidden}
.lang button{border:0;background:transparent;color:var(--yo);font:600 12px var(--mono);padding:5px 9px;cursor:pointer}
.lang button[aria-pressed="true"]{background:var(--yo);color:var(--koivu)}

/* footer */
.foot{position:relative;z-index:1;padding-block:0 30px;overflow:hidden}
/* the aurora canvas sits under everything; page parts stack above it */
.hero,.paper-head{position:relative;z-index:2}
.works,.zone,main.page{position:relative;z-index:1}
.foot canvas{display:block;width:100%;height:240px}
.foot .ctas{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:-40px;position:relative}
.cols5{display:grid;grid-template-columns:200px repeat(4,minmax(0,1fr));gap:24px;margin-top:80px;font-size:14.5px}
.cols5 b{display:block;color:var(--faint);font:500 12px var(--mono);letter-spacing:.06em;text-transform:uppercase;margin-bottom:10px}
.cols5 a{display:block;color:var(--koivu);text-decoration:none;padding-block:3px}
.cols5 .slogan{font:600 18px var(--display);color:var(--jakala);margin-top:12px}
.legal{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;border-top:1px solid var(--line);margin-top:40px;padding-top:20px;color:var(--faint);font-size:13px}
.legal .live::before{content:"";display:inline-block;width:9px;height:9px;background:var(--mint);margin-right:8px}

/* tags and cards used on the use-case pages and the home teaser */
.tags{display:flex;flex-wrap:wrap;gap:6px}
.tag{font:500 11.5px var(--mono);letter-spacing:.03em;padding:3px 8px;border:1px solid var(--line);color:var(--muted)}
.post{display:grid;gap:12px;align-content:start;background:rgba(243,245,242,.04);border:1px solid rgba(243,245,242,.12);border-radius:12px;padding:28px;text-decoration:none;color:inherit;
  transition:transform var(--d3) var(--e-out),border-color var(--d3),background-color var(--d3)}
.post:hover{transform:translateY(-3px);border-color:rgba(243,245,242,.24);background:rgba(243,245,242,.06)}
.post h3{font-size:21px;line-height:1.2}
.post p{color:var(--muted);font-size:15px}
.post .when{font:500 12.5px var(--mono);color:var(--faint);margin-top:auto}
.post .when b{color:var(--koivu);font-weight:600}

@media (max-width:900px){
  .navbar .links{display:none}
  .navbar .signin{display:none}
  .cols5{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* segmented control with a sliding indicator (tabs() sets --x and --w) */
.seg{position:relative;display:inline-flex;gap:2px;padding:3px;border-radius:10px;background:#E3E9E5}
.seg::before{content:"";position:absolute;left:0;top:3px;bottom:3px;width:var(--w,0);transform:translateX(var(--x,0));background:#fff;border-radius:7px;box-shadow:0 1px 2px rgba(14,26,23,.14);transition:transform var(--d3) var(--e-out),width var(--d3) var(--e-out)}
.seg button{position:relative;z-index:1;border:0;background:transparent;color:#4A5A53;font:500 13.5px var(--body);padding:7px 14px;border-radius:7px;cursor:pointer;transition:color var(--d2)}
.seg button[aria-selected="true"]{color:#0E1A17}
.seg button:focus-visible{outline:2px solid #1E5C48;outline-offset:1px}
.seg.dark{background:rgba(243,245,242,.08)}
.seg.dark::before{background:var(--koivu)}
.seg.dark button{color:var(--muted)}.seg.dark button[aria-selected="true"]{color:var(--yo)}
.panel-in{animation:pin var(--d3) var(--e-out)}
@keyframes pin{from{opacity:.4;transform:translateY(6px)}}
/* entrance: visible by default; only what starts below the fold waits */
.reveal{transition:opacity var(--d4) var(--e-out),transform var(--d4) var(--e-out)}
.js .reveal.pre{opacity:.35;transform:translateY(24px) scale(.985)}
@media (prefers-reduced-motion:reduce){.js .reveal.pre{opacity:1;transform:none}}

/* language menu: a details element, no script needed */
.langmenu{position:relative}
.langmenu summary{list-style:none;cursor:pointer;font:600 12px var(--mono);padding:6px 10px;border:1.5px solid var(--yo);border-radius:999px;display:flex;gap:6px;align-items:center;transition:background-color var(--d2),color var(--d2)}
.langmenu summary::-webkit-details-marker{display:none}
.langmenu summary::after{content:"";width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform var(--d2) var(--e-out)}
.langmenu[open] summary{background:var(--yo);color:var(--koivu)}
.langmenu[open] summary::after{transform:translateY(1px) rotate(-135deg)}
.langmenu ul{position:absolute;right:0;top:calc(100% + 8px);margin:0;padding:6px;list-style:none;background:var(--koivu);border:1.5px solid var(--yo);border-radius:12px;min-width:160px;box-shadow:0 18px 40px -18px rgba(14,26,23,.6);animation:pin var(--d3) var(--e-out)}
.langmenu li a{display:block;padding:8px 12px;border-radius:8px;font-size:14.5px}
.langmenu li a:hover{background:#E3E9E5}
.langmenu li a[aria-current="true"]{font-weight:700}
.langmenu summary:focus-visible{outline:2px solid var(--kuusi);outline-offset:2px}
.skip{position:absolute;left:12px;top:-60px;z-index:60;background:var(--koivu);color:var(--yo);padding:10px 14px;border-radius:8px;font-weight:600;text-decoration:none}
.skip:focus{top:12px}
.cols5 span{display:block;padding-block:3px;color:var(--koivu)}