/* Rakentajakoulu – yhteinen tyyli kaikille sivuille.
   Ilme: lämmin paperi, syvä mustesininen ja oranssi korostus (sama pari kuin kustannuslaskurissa). */
:root{
  --bg:#F5F2EC;
  --bg-2:#ECE7DE;
  --card:#FFFFFF;
  --ink:#141A2B;
  --ink-2:#4B5263;
  --ink-3:#7A8090;
  --line:rgba(20,26,43,.12);
  --line-2:rgba(20,26,43,.2);
  --dark:#121828;
  --dark-2:#1B2337;
  --on-dark:#F2EEE6;
  --on-dark-2:#A9AFBF;
  --accent:#E2662A;
  --accent-2:#F08A4B;
  --accent-soft:#FBE7DA;
  --accent-ink:#1A0F08;
  --ok:#2E7D4F;
  --font-display:"Bricolage Grotesque","Inter",system-ui,sans-serif;
  --font-body:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --s--1:clamp(.82rem,.8rem + .1vw,.88rem);
  --s-0:clamp(1rem,.97rem + .15vw,1.08rem);
  --s-1:clamp(1.18rem,1.08rem + .45vw,1.45rem);
  --s-2:clamp(1.5rem,1.25rem + 1.1vw,2.25rem);
  --s-3:clamp(2.1rem,1.5rem + 2.6vw,3.9rem);
  --s-4:clamp(2.7rem,1.6rem + 4.8vw,6.6rem);
  --r:18px;
  --r-sm:12px;
  --wrap:1240px;
  --ease:cubic-bezier(.16,1,.3,1);
  --shadow:0 1px 2px rgba(20,26,43,.06),0 12px 32px -12px rgba(20,26,43,.18);
  color-scheme:light;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font-body);font-size:var(--s-0);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:700;line-height:1.02;letter-spacing:-.035em;margin:0;text-wrap:balance}
p{margin:0}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
::selection{background:var(--accent);color:#fff}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:max(20px,env(safe-area-inset-left,0px))}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:var(--s--1);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
.eyebrow::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--accent)}
.muted{color:var(--ink-2)}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Sanojen nostoanimaatio */
.w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em;margin-bottom:-.08em}
.w>span{display:inline-block;will-change:transform}

/* Painikkeet */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;text-decoration:none;font-weight:600;font-size:.98rem;line-height:1;padding:16px 24px;border-radius:999px;border:1px solid transparent;cursor:pointer;overflow:hidden;isolation:isolate;transition:color .45s var(--ease),border-color .45s var(--ease),transform .45s var(--ease);white-space:nowrap}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;transform:translateY(101%);transition:transform .55s var(--ease)}
.btn:hover::before{transform:none}
.btn .arr{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;transition:transform .45s var(--ease)}
.btn:hover .arr{transform:translateX(3px) rotate(-45deg)}
.btn-accent{background:var(--accent);color:#fff}
.btn-accent::before{background:var(--ink)}
.btn-accent .arr{background:rgba(255,255,255,.2)}
.btn-dark{background:var(--ink);color:var(--bg)}
.btn-dark::before{background:var(--accent)}
.btn-dark .arr{background:rgba(255,255,255,.14)}
.btn-line{background:transparent;color:var(--ink);border-color:var(--line-2)}
.btn-line::before{background:var(--ink)}
.btn-line:hover{color:var(--bg);border-color:var(--ink)}
.btn-light{background:var(--on-dark);color:var(--ink)}
.btn-light::before{background:var(--accent)}
.btn-light:hover{color:#fff}
.btn-sm{padding:11px 18px;font-size:.9rem}

/* Navigaatio */
.nav{position:fixed;z-index:80;left:0;right:0;top:0;padding-top:max(12px,env(safe-area-inset-top,0px));pointer-events:none;transition:transform .6s var(--ease)}
.nav.hide{transform:translateY(-120%)}
.nav-in{pointer-events:auto;max-width:var(--wrap);margin:0 auto;padding:0 max(12px,env(safe-area-inset-left,0px))}
.nav-bar{display:flex;align-items:center;gap:16px;height:64px;padding:0 10px 0 20px;border-radius:999px;background:color-mix(in srgb,var(--bg) 78%,transparent);backdrop-filter:blur(14px) saturate(1.4);-webkit-backdrop-filter:blur(14px) saturate(1.4);border:1px solid transparent;transition:border-color .4s,box-shadow .4s,background .4s}
.nav.scrolled .nav-bar{border-color:var(--line);box-shadow:0 10px 30px -18px rgba(20,26,43,.35);background:color-mix(in srgb,var(--bg) 90%,transparent)}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;font-family:var(--font-display);font-weight:700;font-size:1.14rem;letter-spacing:-.03em;flex:none}
.logo svg{width:30px;height:30px}
.links{display:flex;gap:2px;margin-left:auto;align-items:center}
.links a{white-space:nowrap;position:relative;text-decoration:none;font-weight:500;font-size:.93rem;color:var(--ink-2);padding:10px 11px;border-radius:999px;transition:color .3s,background .3s}
.links a:hover{color:var(--ink);background:rgba(20,26,43,.05)}
.links a[aria-current="page"]{color:var(--ink)}
.links a[aria-current="page"]::after{content:"";position:absolute;left:50%;bottom:4px;width:5px;height:5px;margin-left:-2.5px;border-radius:50%;background:var(--accent)}
.links .new{font-size:.66rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;background:var(--accent);color:#fff;border-radius:999px;padding:2px 6px;margin-left:6px;vertical-align:2px}
.nav-cta{display:flex;gap:8px;margin-left:8px}
.burger{display:none;margin-left:auto;width:46px;height:46px;border-radius:50%;border:1px solid var(--line-2);background:transparent;cursor:pointer;position:relative}
.burger i{position:absolute;left:14px;right:14px;height:1.6px;background:var(--ink);transition:transform .5s var(--ease),top .5s var(--ease)}
.burger i:first-child{top:18px}.burger i:last-child{top:26px}
.menu-open .burger i:first-child{top:22px;transform:rotate(45deg)}
.menu-open .burger i:last-child{top:22px;transform:rotate(-45deg)}
.mmenu{position:fixed;inset:0;z-index:70;background:var(--ink);color:var(--on-dark);padding:110px max(24px,env(safe-area-inset-left,0px)) 40px;display:flex;flex-direction:column;gap:6px;clip-path:circle(0% at calc(100% - 44px) 44px);transition:clip-path .8s var(--ease);visibility:hidden}
.menu-open .mmenu{clip-path:circle(150% at calc(100% - 44px) 44px);visibility:visible}
.mmenu a{font-family:var(--font-display);font-weight:600;font-size:clamp(2rem,9vw,3rem);letter-spacing:-.04em;text-decoration:none;line-height:1.15;opacity:0;transform:translateY(30px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.menu-open .mmenu a{opacity:1;transform:none}
.mmenu a:nth-child(2){transition-delay:.05s}.mmenu a:nth-child(3){transition-delay:.1s}.mmenu a:nth-child(4){transition-delay:.15s}.mmenu a:nth-child(5){transition-delay:.2s}.mmenu a:nth-child(6){transition-delay:.25s}.mmenu a:nth-child(7){transition-delay:.3s}
.mmenu .btn{margin-top:auto;font-family:var(--font-body);font-size:1rem;letter-spacing:0;align-self:flex-start;opacity:1;transform:none}
.menu-open .nav-bar{background:transparent;border-color:transparent;box-shadow:none}
.menu-open .logo,.menu-open .burger{color:var(--on-dark);border-color:rgba(255,255,255,.25)}
.menu-open .burger i{background:var(--on-dark)}
@media (max-width:1180px){.links,.nav-cta{display:none}.burger{display:block}}

/* Sivuotsikko alasivuille */
.phead{padding:clamp(140px,18vw,200px) 0 clamp(40px,6vw,72px);position:relative}
.phead h1{font-size:var(--s-4);margin-top:18px}
.phead h1 em{font-style:normal;color:var(--accent)}
.phead .lead{font-size:var(--s-1);color:var(--ink-2);max-width:46ch;margin-top:22px;line-height:1.45}
.crumbs{display:flex;gap:8px;font-size:var(--s--1);color:var(--ink-3)}
.crumbs a{text-decoration:none}.crumbs a:hover{color:var(--ink)}

/* Osiot */
.sec{padding-block:clamp(48px,6vw,88px)}
.sec-head{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(24px,5vw,80px);align-items:end;margin-bottom:clamp(28px,4vw,48px)}
.sec-head h2{font-size:var(--s-3);margin-top:16px}
.sec-head p{color:var(--ink-2);max-width:46ch;font-size:1.05rem}
@media (max-width:820px){.sec-head{grid-template-columns:1fr;gap:18px}}
.dark{background:var(--dark);color:var(--on-dark)}
.dark .eyebrow,.dark .sec-head p,.dark .muted{color:var(--on-dark-2)}

/* Juokseva nauha */
.marquee{overflow:hidden;border-block:1px solid var(--line);background:var(--bg);padding-block:22px;--dur:42s}
.marquee-track{display:flex;width:max-content;animation:mq var(--dur) linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee-track span{display:inline-flex;align-items:center;gap:28px;padding-right:28px;font-family:var(--font-display);font-weight:600;font-size:clamp(1.4rem,1rem + 1.6vw,2.4rem);letter-spacing:-.03em;white-space:nowrap}
.marquee-track span::after{content:"";width:12px;height:12px;border-radius:50%;background:var(--accent);flex:none}
@keyframes mq{to{transform:translateX(-50%)}}

/* Artikkelikortit */
.posts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(28px,3vw,44px) clamp(18px,2.4vw,32px)}
.post{display:grid;gap:16px;align-content:start;text-decoration:none;min-width:0}
.post .img{position:relative;aspect-ratio:4/3;border-radius:var(--r);overflow:hidden;background:var(--bg-2)}
.post .img img{width:100%;height:100%;object-fit:cover;transform:scale(1.02);transition:transform 1.1s var(--ease)}
.post:hover .img img{transform:scale(1.08)}
.post .img .go{position:absolute;right:14px;bottom:14px;width:46px;height:46px;border-radius:50%;background:var(--accent);color:#fff;display:grid;place-items:center;transform:scale(0) rotate(-45deg);transition:transform .6s var(--ease)}
.post:hover .img .go{transform:scale(1) rotate(0)}
.post .meta{display:flex;gap:10px;align-items:center;font-size:var(--s--1);color:var(--ink-3)}
.post .tag{font-weight:600;color:var(--ink);background:var(--card);border:1px solid var(--line);border-radius:999px;padding:3px 10px}
.post h3{font-size:var(--s-1);font-weight:600;letter-spacing:-.025em;line-height:1.18;background:linear-gradient(var(--ink),var(--ink)) 0 100%/0 1.5px no-repeat;transition:background-size .7s var(--ease);display:inline;padding-bottom:2px}
.post:hover h3{background-size:100% 1.5px}
.post p{color:var(--ink-2);font-size:.95rem}
@media (max-width:960px){.posts{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.posts{grid-template-columns:1fr}}

/* UKK */
.faq{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(24px,6vw,96px)}
.faq h2{font-size:var(--s-3);margin-top:16px}
.qa{border-top:1px solid var(--line)}
.qa:last-child{border-bottom:1px solid var(--line)}
.qa summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:26px 0;font-family:var(--font-display);font-weight:600;font-size:var(--s-1);letter-spacing:-.025em;line-height:1.2}
.qa summary::-webkit-details-marker{display:none}
.qa .pm{flex:none;width:40px;height:40px;border-radius:50%;border:1px solid var(--line-2);position:relative;transition:background .4s,border-color .4s,transform .6s var(--ease)}
.qa .pm::before,.qa .pm::after{content:"";position:absolute;left:50%;top:50%;width:14px;height:1.6px;margin:-.8px 0 0 -7px;background:currentColor;transition:transform .5s var(--ease)}
.qa .pm::after{transform:rotate(90deg)}
.qa[open] .pm{background:var(--accent);border-color:var(--accent);color:#fff;transform:rotate(180deg)}
.qa[open] .pm::after{transform:rotate(0)}
.qa .ans{overflow:hidden}
.qa .ans>div{padding:0 0 28px;color:var(--ink-2);max-width:64ch;display:grid;gap:12px}
.qa ol{margin:0;padding-left:20px;display:grid;gap:6px}
@media (max-width:860px){.faq{grid-template-columns:1fr}}

/* Kurssinosto */
.cta-band{position:relative;overflow:hidden;border-radius:calc(var(--r) * 1.6);background:var(--accent);color:#fff;padding:clamp(40px,7vw,96px) clamp(24px,6vw,80px);display:grid;grid-template-columns:1.3fr auto;gap:32px;align-items:end}
.cta-band h2{font-size:var(--s-3)}
.cta-band p{opacity:.9;max-width:48ch;margin-top:16px;font-size:1.05rem}
.cta-band .ring{position:absolute;right:-12%;top:-60%;width:60%;aspect-ratio:1;border-radius:50%;border:1.5px solid rgba(255,255,255,.3);pointer-events:none}
.cta-band .ring+.ring{right:-4%;top:-30%;width:42%}
@media (max-width:760px){.cta-band{grid-template-columns:1fr}}

/* Alatunniste */
.foot{background:var(--dark);color:var(--on-dark);padding:clamp(56px,7vw,88px) 0 28px;margin-top:clamp(48px,6vw,80px);overflow:hidden}
.foot-top{display:grid;grid-template-columns:1.3fr repeat(3,1fr);gap:40px}
.foot h4{font-family:var(--font-body);font-size:var(--s--1);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--on-dark-2);margin-bottom:16px}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.foot a{text-decoration:none;color:var(--on-dark);transition:color .3s}
.foot a:hover{color:var(--accent-2)}
.foot .pitch{font-family:var(--font-display);font-size:var(--s-2);font-weight:600;letter-spacing:-.03em;line-height:1.1;max-width:16ch}
.foot .word{font-family:var(--font-display);font-weight:800;font-size:clamp(3.4rem,15.5vw,15rem);letter-spacing:-.06em;line-height:.8;margin:clamp(56px,8vw,100px) 0 24px;white-space:nowrap;color:transparent;-webkit-text-stroke:1.2px rgba(242,238,230,.35)}
.foot .word b{color:var(--on-dark);-webkit-text-stroke:0;font-weight:inherit}
.foot-bot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;padding-top:22px;border-top:1px solid rgba(255,255,255,.12);font-size:.88rem;color:var(--on-dark-2)}
@media (max-width:860px){.foot-top{grid-template-columns:1fr 1fr}.foot-top>:first-child{grid-column:1/-1}}

/* Lomakekentät (laskurit, pohjatyökalu) */
.field{display:grid;gap:7px}
.field label,.field .lab{font-weight:600;font-size:.92rem;display:flex;justify-content:space-between;gap:10px}
.field .help{font-size:.82rem;color:var(--ink-3)}
.in,.sel{width:100%;font:inherit;font-size:.98rem;padding:12px 14px;border-radius:var(--r-sm);border:1px solid var(--line-2);background:var(--card);color:var(--ink);transition:border-color .3s,box-shadow .3s}
.in:focus,.sel:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 18%,transparent)}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:clamp(18px,2.4vw,28px)}

/* Liike pois, jos käyttäjä niin toivoo */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  .marquee-track{animation:none}
}

/* Maskotti */
.foot-mascot{width:120px;height:auto;margin-bottom:18px;filter:drop-shadow(0 12px 24px rgba(0,0,0,.35))}
.mascot{display:block;height:auto;mix-blend-mode:multiply;pointer-events:none}
.say{position:relative;background:var(--card);border:1px solid var(--line);border-radius:18px;padding:12px 16px;font-size:.92rem;line-height:1.4;box-shadow:var(--shadow)}

/* Kurssin videot: kortit, lukitus ja ponnahdusikkuna */
.vcard{cursor:pointer;text-align:left;font:inherit;color:inherit}
.vthumb{position:relative;aspect-ratio:16/9;border-radius:12px;overflow:hidden;background:var(--dark)}
.vthumb img{width:100%;height:100%;object-fit:cover;transition:filter .8s var(--ease),transform 1s var(--ease)}
.vcard:hover .vthumb img{transform:scale(1.05)}
.vlock,.vplay{position:absolute;left:50%;top:50%;width:58px;height:58px;margin:-29px 0 0 -29px;border-radius:50%;display:grid;place-items:center;transition:transform .6s var(--ease),opacity .5s}
.vlock{background:rgba(255,255,255,.92);color:var(--ink);box-shadow:0 8px 24px rgba(0,0,0,.25)}
.vplay{background:var(--accent);color:#fff;opacity:0;transform:scale(.6)}
.vcard.locked .vthumb img{filter:blur(3px) grayscale(.4) brightness(.8)}
.vcard:not(.locked) .vlock{opacity:0;transform:scale(1.6) rotate(-20deg)}
.vcard:not(.locked) .vplay{opacity:1;transform:none}
.vcard:not(.locked):hover .vplay{transform:scale(1.12)}
.vcard.seen .vthumb::after{content:"✓ Katsottu";position:absolute;right:10px;top:10px;background:var(--ok);color:#fff;font-size:.72rem;font-weight:600;border-radius:999px;padding:3px 9px}
.vcard.justopened .vthumb{animation:vpop .9s var(--ease)}
@keyframes vpop{40%{transform:scale(1.04)}}
.vstate{display:inline-flex;align-items:center;gap:8px;font-size:.88rem;font-weight:600;color:var(--ink-2)}
.vstate::before{content:"🔒"}
.videos-open .vstate::before{content:"✓";color:var(--ok)}
.vmodal{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:16px}
.vmodal[hidden]{display:none}
.vm-back{position:absolute;inset:0;background:rgba(18,24,40,.6);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);opacity:0;transition:opacity .35s}
.vm-box{position:relative;width:min(520px,100%);max-height:calc(100vh - 32px);overflow:auto;background:var(--bg);border-radius:24px;padding:clamp(22px,4vw,36px);box-shadow:0 30px 80px rgba(0,0,0,.35);opacity:0;transform:translateY(24px) scale(.97);transition:opacity .35s,transform .5s var(--ease)}
.vmodal.wide .vm-box{width:min(980px,100%)}
.vmodal.on .vm-back{opacity:1}
.vmodal.on .vm-box{opacity:1;transform:none}
.vm-x{position:absolute;right:14px;top:12px;width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:var(--card);font-size:1.4rem;line-height:1;cursor:pointer}
.vm-box h2{font-size:clamp(1.5rem,1.2rem + 1.2vw,2.1rem);margin-top:8px;padding-right:40px}
.vm-lead{color:var(--ink-2);margin-top:8px}
.vm-form{display:grid;gap:12px;margin-top:20px}
.vm-two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media (max-width:480px){.vm-two{grid-template-columns:1fr}}
.vm-form .req{color:var(--accent)}
.vm-consent{display:flex;gap:10px;align-items:flex-start;font-size:.86rem;line-height:1.5;color:var(--ink-2);cursor:pointer}
.vm-consent input{width:20px;height:20px;accent-color:var(--accent);flex:none;margin-top:2px}
.vm-msg{color:#8E2A1E;font-size:.9rem;min-height:0}
.vm-msg:empty{display:none}
.vm-form .btn{width:100%}
.vm-fine{font-size:.78rem;color:var(--ink-3)}
.vm-hp{position:absolute!important;left:-9999px}
.vm-video{position:relative;aspect-ratio:16/9;border-radius:14px;overflow:hidden;background:#000;margin-top:16px}
.vm-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.vm-nav{display:flex;justify-content:space-between;gap:10px;margin-top:16px;flex-wrap:wrap}
.vm-done{text-align:center;display:grid;gap:12px;justify-items:center;padding:12px 0}
.vm-done span{width:64px;height:64px;border-radius:50%;background:var(--ok);color:#fff;display:grid;place-items:center;font-size:1.8rem}
.vm-done h2{padding-right:0}
.vm-done p{color:var(--ink-2)}
.vm-steps{display:flex;gap:6px;margin:-4px 44px 14px 0}
.vm-steps span{flex:1;font-size:.75rem;font-weight:600;color:var(--ink-3);padding-top:8px;border-top:3px solid var(--line);transition:color .3s,border-color .3s}
.vm-steps span.on{color:var(--accent);border-color:var(--accent)}
.vm-step{display:grid;gap:12px}
.vm-step[hidden]{display:none}
.vm-int{border:1px solid var(--line);border-radius:var(--r-sm);padding:10px 14px;margin:0;display:grid;gap:6px}
.vm-int legend{font-size:.85rem;font-weight:600;padding:0 4px}
.vm-int label{display:flex;gap:10px;align-items:center;font-size:.9rem;cursor:pointer}
.vm-int input{width:18px;height:18px;accent-color:var(--accent)}
.vm-row{display:grid;grid-template-columns:auto 1fr;gap:10px}
.vm-row .btn-line{width:auto}
.sel:disabled{opacity:.55}

/* ===== Ilme 2: suomalainen, selkeä, luotettava (ohittaa yllä olevat) ===== */
:root{
  --bg:#F6F4EF;--bg-2:#ECE8E0;--ink:#1D2A35;--ink-2:#4A5560;--ink-3:#7B848C;
  --line:rgba(29,42,53,.13);--line-2:rgba(29,42,53,.22);
  --dark:#1B2B26;--dark-2:#243832;--on-dark:#F3F1EA;--on-dark-2:#B3C2BB;
  --accent:#1F6B4E;--accent-2:#3D8F6C;--accent-soft:#E2EFE8;--ok:#1F6B4E;
  --sun:#F5C21B;--sun-ink:#1D1A0A;
  --font-display:"Barlow","Source Sans 3",system-ui,sans-serif;
  --font-body:"Source Sans 3",system-ui,-apple-system,"Segoe UI",sans-serif;
  --r:10px;--r-sm:8px;
  --shadow:0 1px 2px rgba(29,42,53,.06),0 10px 26px -16px rgba(29,42,53,.3);
}
body{font-size:clamp(1.03rem,1rem + .15vw,1.12rem)}
h1,h2,h3,h4{letter-spacing:-.012em;line-height:1.06;font-weight:700}
.btn{border-radius:8px;padding:15px 22px;font-weight:700;letter-spacing:.005em}
.btn-sm{padding:10px 16px}
.btn .arr{border-radius:4px}
.btn:hover .arr{transform:translateX(4px)}
.btn-accent::before{background:#174F3A}
.btn-light::before{background:var(--sun)}
.btn-light:hover{color:var(--sun-ink)}
.nav{padding-top:0;background:rgba(255,255,255,.97);border-bottom:1px solid var(--line);pointer-events:auto}
.nav-in{max-width:none;padding:0}
.nav-bar{max-width:var(--wrap);margin:0 auto;border-radius:0;height:68px;background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;border:0;padding:0 max(20px,env(safe-area-inset-left,0px))}
.nav.scrolled .nav-bar{box-shadow:none;background:transparent;border-color:transparent}
.nav.scrolled{box-shadow:0 6px 18px -14px rgba(29,42,53,.5)}
.links a{border-radius:6px;font-weight:600}
.links a[aria-current="page"]::after{left:11px;right:11px;width:auto;height:3px;margin:0;bottom:0;border-radius:0;background:var(--accent)}
.links .new{background:var(--sun);color:var(--sun-ink);border-radius:3px}
.burger{border-radius:8px}
.eyebrow{letter-spacing:.08em;color:var(--accent);font-weight:700}
.eyebrow::before{width:16px;height:3px;border-radius:0;background:var(--sun)}
.dark .eyebrow{color:var(--sun)}
.marquee{background:var(--dark);color:var(--on-dark);border:0}
.marquee-track span::after{border-radius:0;width:10px;height:10px;background:var(--sun);transform:rotate(45deg)}
.post .tag,.vcard.seen .vthumb::after{border-radius:4px}
.post .img .go{border-radius:8px}
.qa .pm{border-radius:8px}
.cta-band{border-radius:12px;background:var(--accent)}
.cta-band .ring{display:none}
.foot{background:var(--dark)}
.foot .word{display:none}
.foot-bot{margin-top:56px}
.phead h1 em,.hero h1 em{color:var(--accent)}

/* Työkalupolku 1-2-3 */
.rk-flow{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin-top:18px;font-size:.95rem}
.rk-flow a{display:inline-flex;align-items:center;gap:8px;text-decoration:none;color:var(--ink-2);font-weight:600;padding:6px 12px 6px 6px;border-radius:999px;border:1px solid var(--line);background:var(--card)}
.rk-flow a:hover{border-color:var(--ink);color:var(--ink)}
.rk-flow a b{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--bg-2);color:var(--ink);font-size:.8rem}
.rk-flow a[aria-current=step]{background:var(--accent);border-color:var(--accent);color:#fff}
.rk-flow a[aria-current=step] b{background:var(--sun);color:var(--sun-ink)}
.rk-flow span{color:var(--ink-3)}

.foot .indie-foot{margin-top:10px;font-size:.95rem;opacity:.8}

/* Työkalusivut: sama yläosa kaikissa */
.phead{padding-top:calc(68px + clamp(28px,4vw,44px))}
.phead .wrap>h1:first-child{margin-top:0}
.phead:has(.rk-flow){padding-top:calc(68px + 22px)}
.phead:has(.rk-flow) .rk-flow{margin-top:0}

.foot-bot .moodle-note{font-size:.82rem;opacity:.85}
.foot-bot .moodle-note a{text-decoration:underline}
button.btn.rkc-nb{font:inherit;cursor:pointer}

/* Pääkohteet logon vieressä: Oma hanke ja Kurssi */
.prime{display:flex;gap:2px;margin-left:14px;align-items:center}
.prime a{position:relative;white-space:nowrap;text-decoration:none;font-family:var(--font-display);font-weight:700;font-size:1.02rem;color:var(--ink);padding:10px 11px;border-radius:6px}
.prime a:hover{background:rgba(20,26,43,.05)}
.prime a[aria-current="page"]::after{content:"";position:absolute;left:11px;right:11px;bottom:0;height:3px;background:var(--accent)}
.prime .new{font-size:.66rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;background:var(--sun);color:var(--sun-ink);border-radius:3px;padding:2px 6px;margin-left:6px;vertical-align:2px}
@media (max-width:640px){.prime{display:none}}
/* Työkalupolku ylävalikossa: Oma hanke ⇄ Pohjaratkaisu ⇄ Kustannuslaskuri ⇄ Asumiskulut */
.nav-bar{max-width:1480px}.prime+.links{margin-left:0}.prime~.nav-cta{margin-left:auto}
.prime+.links a:nth-child(-n+3){margin-left:20px}
.prime+.links a:nth-child(-n+3)::before{content:"⇄";position:absolute;left:-18px;top:50%;transform:translateY(-54%);font-size:1rem;font-weight:700;-webkit-text-stroke:.4px currentColor;color:var(--accent);pointer-events:none}
.prime+.links a:nth-child(4){margin-left:14px}
@media (max-width:1380px){.logo{font-size:0;gap:0}}
@media (max-width:1480px){.links a{padding:10px 8px;font-size:.9rem}.prime a{padding:10px 8px}.links{gap:0}.nav-bar{gap:10px}}

.rk-flow a b.home svg{display:block}

/* Työkalusivujen yhtenäinen otsikko: sama koko ja fontti kuin kustannuslaskurissa */
.phead:has(.rk-flow) h1,.hhead:has(.rk-flow) h1{font-family:var(--font-display);font-weight:700;font-size:clamp(1.8rem,1.2rem + 1.8vw,2.5rem);line-height:1.1;letter-spacing:-.02em;margin-top:16px}
.phead:has(.rk-flow) .lead,.hhead:has(.rk-flow) .lead{font-size:1.08rem;line-height:1.55;color:var(--ink-2);max-width:75ch;margin-top:8px}
.phead:has(.rk-flow),.hhead:has(.rk-flow){padding-bottom:clamp(20px,3vw,32px)}
.rk-flow{font-family:var(--font-body)}
.hhead h1 .beta{display:inline-block;margin-left:10px;background:var(--sun);color:var(--sun-ink);font-family:var(--font-body);font-size:.4em;font-weight:800;letter-spacing:.06em;text-transform:uppercase;border-radius:4px;padding:4px 8px;vertical-align:.5em}

/* puhelin: ohuempi ylävalikko, jotta näytölle jää enemmän tilaa */
@media (max-width:900px){.nav-bar{height:50px;padding:0 12px}.logo svg{width:28px;height:28px}.burger{width:38px;height:38px}}

/* tietokoneella työkalujen linkit ovat Oma hanke -kohdassa ja hankepalkissa: ylävalikkoon mahtuvat kurssi, oppaat, tarkastuslistat, yhteistyökumppanit ja yhteystiedot (puhelimen valikossa kaikki) */
@media (min-width:901px){.nav .links a[href$="pohjaratkaisu.html"],.nav .links a[href$="kustannuslaskuri.html"]{display:none}}